chore: header login / logout

Author: webdevcody

Diff for: src/app/page.tsx

@@ -1,34 +1,7 @@
-import Header from "@/components/header";
-import { Button } from "@/components/ui/button";
-import { LoginButton, LogoutButton } from "@/components/ui/buttons";
-import { getSession } from "@/lib/session";
-import { prisma } from "@/lib/prisma";
-import Image from "next/image";
-
 export default async function Home() {
-  const users = await prisma.user.findMany();
-  const session = await getSession();
-
   return (
     <>
-      <main className="flex min-h-screen flex-col items-center justify-between p-24">
-        <Button>Button</Button>
-        {session ? (
-          <div className="flex space-x-2 items-center">
-            <Image
-              className="rounded-full"
-              src={session?.user?.image!}
-              alt="user avatar"
-              height={40}
-              width={40}
-            />
-            <p className="text-gray-700 font-bold">{session?.user?.name}</p>
-            <LogoutButton />
-          </div>
-        ) : (
-          <LoginButton />
-        )}
-      </main>
+      <main className="flex min-h-screen flex-col items-center justify-between p-24"></main>
     </>
   );
 }

Diff for: src/app/race/page.tsx

@@ -5,8 +5,6 @@ import TypingCode from "./typingCode";
 export default async function Race() {
   const user = await getCurrentUser();
 
-  console.log(user);
-
   return (
     <>
       <main className="flex min-h-screen flex-col items-center justify-between p-24">

Diff for: src/components/header.tsx

@@ -5,6 +5,8 @@ import Link from "next/link";
 import React, { useState } from "react";
 
 import { Button } from "./ui/button";
+import { SessionProvider, useSession } from "next-auth/react";
+import { LoginButton, LogoutButton } from "./ui/buttons";
 
 const Header = () => {
   const [state, setState] = useState(false);
@@ -15,6 +17,8 @@ const Header = () => {
     { title: "About", path: "/" },
   ];
 
+  const session = useSession();
+
   return (
     <div>
       <nav className="w-full border-b md:border-0 md:static">
@@ -82,13 +86,35 @@ const Header = () => {
               })}
             </ul>
           </div>
-          <div className="hidden md:inline-block">
-            <Button>Login</Button>
+          <div className="hidden md:flex gap-4 items-center">
+            {session.status !== "authenticated" ? (
+              <LoginButton />
+            ) : (
+              <>
+                <Image
+                  className="rounded-full"
+                  src={session?.data.user.image ?? ""}
+                  alt="user avatar"
+                  height={40}
+                  width={40}
+                />
+                <p className="text-gray-700 font-bold">
+                  {session?.data.user?.name}
+                </p>
+                <LogoutButton />
+              </>
+            )}
           </div>
         </div>
       </nav>
     </div>
   );
 };
 
-export default Header;
+export default function WrappedHeader() {
+  return (
+    <SessionProvider>
+      <Header />
+    </SessionProvider>
+  );
+}