new device working
This commit is contained in:
herz
parent
cab1ed1018
commit
b42e9cc1d5
|
|
@ -64,3 +64,8 @@ model VerificationToken {
|
|||
|
||||
@@unique([identifier, token])
|
||||
}
|
||||
|
||||
model Device {
|
||||
id String @id @default(cuid())
|
||||
name String
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,120 @@
|
|||
import { type NextPage } from "next";
|
||||
import Head from "next/head";
|
||||
import Link from "next/link";
|
||||
import { signIn, signOut, useSession } from "next-auth/react";
|
||||
import { useState } from "react";
|
||||
import { api } from "~/utils/api";
|
||||
|
||||
const Home: NextPage = () => {
|
||||
const hello = api.example.hello.useQuery({ text: "from tRPC" });
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
<Head>
|
||||
<title>Create T3 App</title>
|
||||
<meta name="description" content="Generated by create-t3-app" />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
</Head>
|
||||
<main className="flex min-h-screen flex-col items-center bg-gradient-to-b from-[#2e026d] to-[#15162c]">
|
||||
<div className="container flex flex-col items-center py-3 gap-6 ">
|
||||
<Navbar/>
|
||||
<AuthShowcase/>
|
||||
</div>
|
||||
</main>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Home;
|
||||
|
||||
const AuthShowcase: React.FC = () => {
|
||||
const [newDevice, setNewDevice] = useState("");
|
||||
const addDevice = api.device.addDevice.useMutation();
|
||||
const device = api.device.getAll.useQuery();
|
||||
|
||||
const { data: sessionData } = useSession();
|
||||
|
||||
const { data: secretMessage } = api.example.getSecretMessage.useQuery(
|
||||
undefined, // no input
|
||||
{ enabled: sessionData?.user !== undefined },
|
||||
);
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center gap-4">
|
||||
<p className="text-center text-2xl text-white">
|
||||
{sessionData && <span>Logged in as {sessionData.user?.name}</span>}
|
||||
{secretMessage && <span> - {secretMessage}</span>}
|
||||
</p>
|
||||
<h2 className="py-4 text-2xl font-bold text-white">
|
||||
Devices
|
||||
</h2>
|
||||
<div className="flex flex-col items-center justify-center gap-4">
|
||||
{
|
||||
!device.data ? "Loading tRPC query..."
|
||||
:
|
||||
device.data.map((device) => (
|
||||
<div className="flex flex-col items-center justify-center gap-4">
|
||||
<p className="text-xl font-bold text-white">{device.name}</p>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
<div className="flex flex-col items-center justify-center gap-4">
|
||||
<h2 className="py-4 text-2xl font-bold text-white">Create Device</h2>
|
||||
<form
|
||||
className="flex gap-2"
|
||||
onSubmit={(event) => {
|
||||
event.preventDefault();
|
||||
addDevice.mutate({
|
||||
name: newDevice
|
||||
});
|
||||
setNewDevice("");
|
||||
}}
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
className="rounded-md border-2 border-zinc-800 bg-neutral-900 px-4 py-2 focus:outline-none"
|
||||
placeholder="Your message..."
|
||||
minLength={2}
|
||||
maxLength={100}
|
||||
value={newDevice}
|
||||
onChange={(event) => setNewDevice(event.target.value)}
|
||||
/>
|
||||
<button
|
||||
type="submit"
|
||||
className="rounded-md border-2 border-zinc-800 p-2 focus:outline-none"
|
||||
>
|
||||
Submit
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
const Navbar: React.FC = () => {
|
||||
const { data: sessionData } = useSession();
|
||||
return (
|
||||
<div className="flex flex-row items-center justify-between w-full">
|
||||
<div className="flex flex-row items-center gap-4">
|
||||
<img/>
|
||||
<h1 className="text-2xl font-bold text-white">HerZ NSOT</h1>
|
||||
</div>
|
||||
<div className="flex flex-row items-center gap-4">
|
||||
<button className="text-white">Home</button>
|
||||
</div>
|
||||
<div className="flex flex-row items-center gap-4">
|
||||
<button
|
||||
className="rounded-full bg-white/10 px-10 py-3 font-semibold text-white no-underline transition hover:bg-white/20"
|
||||
onClick={sessionData ? () => void signOut() : () => void signIn()}
|
||||
>
|
||||
{sessionData ? "Sign out" : "Sign in"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
import { createTRPCRouter } from "~/server/api/trpc";
|
||||
import { exampleRouter } from "~/server/api/routers/example";
|
||||
import { deviceRouter } from "~/server/api/routers/device";
|
||||
|
||||
/**
|
||||
* This is the primary router for your server.
|
||||
|
|
@ -8,6 +9,7 @@ import { exampleRouter } from "~/server/api/routers/example";
|
|||
*/
|
||||
export const appRouter = createTRPCRouter({
|
||||
example: exampleRouter,
|
||||
device: deviceRouter,
|
||||
});
|
||||
|
||||
// export type definition of API
|
||||
|
|
|
|||
|
|
@ -0,0 +1,45 @@
|
|||
import { z } from "zod";
|
||||
|
||||
import {
|
||||
createTRPCRouter,
|
||||
publicProcedure,
|
||||
protectedProcedure,
|
||||
} from "~/server/api/trpc";
|
||||
|
||||
export const deviceRouter = createTRPCRouter({
|
||||
getAll: protectedProcedure.query(async ({ ctx }) => {
|
||||
try {
|
||||
return await ctx.prisma.device.findMany({
|
||||
select: {
|
||||
id: true,
|
||||
name: true,
|
||||
},
|
||||
orderBy: {
|
||||
name: "asc",
|
||||
},
|
||||
});
|
||||
}
|
||||
catch (err) {
|
||||
console.log(err);
|
||||
}
|
||||
}),
|
||||
|
||||
addDevice: protectedProcedure
|
||||
.input(
|
||||
z.object({
|
||||
name: z.string()
|
||||
})
|
||||
)
|
||||
.mutation(async ({ input, ctx }) => {
|
||||
try {
|
||||
await ctx.prisma.device.create({
|
||||
data: {
|
||||
name: input.name,
|
||||
},
|
||||
});
|
||||
}
|
||||
catch (err) {
|
||||
console.log(err);
|
||||
}
|
||||
}),
|
||||
});
|
||||
Loading…
Reference in New Issue