new device working
This commit is contained in:
herz
parent
cab1ed1018
commit
b42e9cc1d5
|
|
@ -64,3 +64,8 @@ model VerificationToken {
|
||||||
|
|
||||||
@@unique([identifier, token])
|
@@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 { createTRPCRouter } from "~/server/api/trpc";
|
||||||
import { exampleRouter } from "~/server/api/routers/example";
|
import { exampleRouter } from "~/server/api/routers/example";
|
||||||
|
import { deviceRouter } from "~/server/api/routers/device";
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* This is the primary router for your server.
|
* This is the primary router for your server.
|
||||||
|
|
@ -8,6 +9,7 @@ import { exampleRouter } from "~/server/api/routers/example";
|
||||||
*/
|
*/
|
||||||
export const appRouter = createTRPCRouter({
|
export const appRouter = createTRPCRouter({
|
||||||
example: exampleRouter,
|
example: exampleRouter,
|
||||||
|
device: deviceRouter,
|
||||||
});
|
});
|
||||||
|
|
||||||
// export type definition of API
|
// 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