From e17592eb7e3479ae2c59aec121bfb2993d3bddf6 Mon Sep 17 00:00:00 2001 From: Nathanial Henniges Date: Thu, 26 Oct 2023 01:14:08 -0500 Subject: [PATCH] Added a lot --- src/components/Hero.tsx | 3 ++ src/components/InfoPanel.tsx | 40 ++++++++++++++++++ src/components/Navigation/logged-in.tsx | 8 ++++ src/env.mjs | 6 +-- src/pages/[slug].tsx | 21 ++++++++++ src/pages/index.tsx | 8 +++- src/server/api/root.ts | 4 +- src/server/api/routers/post.ts | 40 ------------------ src/server/api/routers/twitch.ts | 56 +++++++++++++++++++++++++ src/server/auth.ts | 10 +++++ 10 files changed, 150 insertions(+), 46 deletions(-) create mode 100644 src/components/Hero.tsx create mode 100644 src/components/InfoPanel.tsx create mode 100644 src/pages/[slug].tsx delete mode 100644 src/server/api/routers/post.ts create mode 100644 src/server/api/routers/twitch.ts diff --git a/src/components/Hero.tsx b/src/components/Hero.tsx new file mode 100644 index 0000000..ecea279 --- /dev/null +++ b/src/components/Hero.tsx @@ -0,0 +1,3 @@ +export default function Home() { + return <>Please Login; +} diff --git a/src/components/InfoPanel.tsx b/src/components/InfoPanel.tsx new file mode 100644 index 0000000..b05aa11 --- /dev/null +++ b/src/components/InfoPanel.tsx @@ -0,0 +1,40 @@ +import { useSession } from "next-auth/react"; +import DefaultLayout from "~/components/layout/default"; +import Hero from "~/components/Hero"; +import { api } from "~/utils/api"; + +type Props = { + landingPage: true; +}; + +export default function Home(props: Props) { + const { data: sessionData } = useSession(); + if (!sessionData) return null; + const { data: twitch, isLoading: postLoading } = api.twitch.getUser.useQuery({ + accessToken: sessionData.accessToken, + }); + + return ( + <> + {twitch?.data[0]} + + ); +} + +// export default function Home() { +// // get token from session and pass it to the server +// const { data: sessionData } = useSession(); +// if (!sessionData) return ; + +// const { data: twitch, isLoading: postLoading } = api.twitch.getUser.useQuery({ +// accessToken: sessionData.accessToken, +// }); + +// if (postLoading) return <>Loading...; + +// return ( +// <> +// {twitch?.data[0]?.display_name} +// +// ); +// } diff --git a/src/components/Navigation/logged-in.tsx b/src/components/Navigation/logged-in.tsx index bdeb514..7290665 100644 --- a/src/components/Navigation/logged-in.tsx +++ b/src/components/Navigation/logged-in.tsx @@ -51,6 +51,14 @@ export default function LoggedIn() { className="block w-full rounded-md border-0 bg-gray-700 py-1.5 pl-10 pr-3 text-gray-300 placeholder:text-gray-400 focus:bg-white focus:text-gray-900 focus:ring-0 focus:placeholder:text-gray-500 sm:text-sm sm:leading-6" placeholder="Search" type="search" + onKeyDown={(e) => { + if (e.key === "Enter") { + e.preventDefault(); + e.stopPropagation(); + const query = e.currentTarget.value; + window.location.href = `/search?q=${query}`; + } + }} /> diff --git a/src/env.mjs b/src/env.mjs index e57c241..db45fe0 100644 --- a/src/env.mjs +++ b/src/env.mjs @@ -33,9 +33,9 @@ export const env = createEnv({ */ client: { // NEXT_PUBLIC_CLIENTVAR: z.string(), - NEXT_PUBLIC_APP_NAME: z.string().default("Twitch Auth"), - NEXT_PUBLIC_APP_DESCRIPTION: z.string().default("Twitch Auth"), - NEXT_PUBLIC_TWITTER_HANDLE: z.string().default(""), + NEXT_PUBLIC_APP_NAME: z.string(), + NEXT_PUBLIC_APP_DESCRIPTION: z.string(), + NEXT_PUBLIC_TWITTER_HANDLE: z.string(), }, /** diff --git a/src/pages/[slug].tsx b/src/pages/[slug].tsx new file mode 100644 index 0000000..02b9da7 --- /dev/null +++ b/src/pages/[slug].tsx @@ -0,0 +1,21 @@ +"use client"; + +import { useParams } from "next/navigation"; +import { useSession } from "next-auth/react"; +import DefaultLayout from "~/components/layout/default"; + +export default function ExampleClientComponent() { + const params = useParams(); + + // get token from session and pass it to the server + const { data: sessionData } = useSession(); + + console.log(sessionData); + console.log(params); + + return ( + <> + + + ); +} diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 87900e4..185960d 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -1,9 +1,15 @@ +import { useSession } from "next-auth/react"; import DefaultLayout from "~/components/layout/default"; +import Hero from "~/components/Hero"; export default function Home() { + const { data: sessionData } = useSession(); + return ( <> - + + {sessionData ? (InfoPanel(u)} + ); } diff --git a/src/server/api/root.ts b/src/server/api/root.ts index 3d629a7..7b2c2a9 100644 --- a/src/server/api/root.ts +++ b/src/server/api/root.ts @@ -1,4 +1,4 @@ -import { postRouter } from "~/server/api/routers/post"; +import { twitchRouter } from "~/server/api/routers/twitch"; import { createTRPCRouter } from "~/server/api/trpc"; /** @@ -7,7 +7,7 @@ import { createTRPCRouter } from "~/server/api/trpc"; * All routers added in /api/routers should be manually added here. */ export const appRouter = createTRPCRouter({ - post: postRouter, + twitch: twitchRouter, }); // export type definition of API diff --git a/src/server/api/routers/post.ts b/src/server/api/routers/post.ts deleted file mode 100644 index a2072d3..0000000 --- a/src/server/api/routers/post.ts +++ /dev/null @@ -1,40 +0,0 @@ -import { z } from "zod"; - -import { - createTRPCRouter, - protectedProcedure, - publicProcedure, -} from "~/server/api/trpc"; - -let post = { - id: 1, - name: "Hello World", -}; - -export const postRouter = createTRPCRouter({ - hello: publicProcedure - .input(z.object({ text: z.string() })) - .query(({ input }) => { - return { - greeting: `Hello ${input.text}`, - }; - }), - - create: protectedProcedure - .input(z.object({ name: z.string().min(1) })) - .mutation(async ({ input }) => { - // simulate a slow db call - await new Promise((resolve) => setTimeout(resolve, 1000)); - - post = { id: post.id + 1, name: input.name }; - return post; - }), - - getLatest: protectedProcedure.query(() => { - return post; - }), - - getSecretMessage: protectedProcedure.query(() => { - return "you can now see this secret message!"; - }), -}); diff --git a/src/server/api/routers/twitch.ts b/src/server/api/routers/twitch.ts new file mode 100644 index 0000000..8e89ff8 --- /dev/null +++ b/src/server/api/routers/twitch.ts @@ -0,0 +1,56 @@ +import { z } from "zod"; + +import { createTRPCRouter, protectedProcedure } from "~/server/api/trpc"; + +type Headers = { + Authorization: string; + "Client-Id": string; +}; +type UserResponse = { + id: string; + login: string; + display_name: string; + type: string; + broadcaster_type: string; + description: string; + profile_image_url: string; + offline_image_url: string; + view_count: number; + email: string; + created_at: string; +}; + +export const twitchRouter = createTRPCRouter({ + // create: protectedProcedure + // .input(z.object({ name: z.string().min(1) })) + // .mutation(async ({ input }) => { + // // simulate a slow db call + // await new Promise((resolve) => setTimeout(resolve, 1000)); + + // post = { id: post.id + 1, name: input.name }; + // return post; + // }), + + // getUser: protectedProcedure.query(() => { + + // const + // }), + // make a requiest to GET https://api.twitch.tv/helix/users?login=USERNAME using fetch and the access token priv + // return the response + getUser: protectedProcedure + .input( + z.object({ + accessToken: z.string(), + }), + ) + .query(async ({ input }) => { + const response = await fetch("https://api.twitch.tv/helix/users", { + headers: { + Authorization: `Bearer ${input.accessToken}`, + "Client-Id": process.env.TWITCH_CLIENT_ID, + } as Headers, + }); + const json = (await response.json()) as { data: UserResponse[] }; + return json; + }), +}); diff --git a/src/server/auth.ts b/src/server/auth.ts index 0cf62f3..c4f6ac6 100644 --- a/src/server/auth.ts +++ b/src/server/auth.ts @@ -18,9 +18,11 @@ declare module "next-auth" { interface Session extends DefaultSession { user: DefaultSession["user"] & { id: string; + // ...other properties // role: UserRole; }; + accessToken: string; } // interface User { @@ -42,7 +44,15 @@ export const authOptions: NextAuthOptions = { ...session.user, id: token.sub, }, + accessToken: token.accessToken, }), + jwt({ token, account }) { + // Persist the OAuth access_token to the token right after signin + if (account) { + token.accessToken = account.access_token; + } + return token; + }, }, providers: [ TwitchProvider({