fix null profile

minhd-vu · Mar 2, 2024 · f6e838c · f6e838c
1 parent a4af608
commit f6e838c
Show file tree

Hide file tree

Showing 9 changed files with 67 additions and 32 deletions.
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -3,9 +3,10 @@ import type { Metadata } from "next";
 import { getServerSession } from "next-auth";
 import { Inter } from "next/font/google";
 import "./globals.css";
+import ThemeProvider from "@/components/ThemeProvider";
 import Navbar from "@/components/Navbar";
 import Footer from "@/components/Footer";
-import ThemeProvider from "@/components/ThemeProvider";
+import UserProvider from "@/components/UserProvider";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -29,11 +30,13 @@ export default async function RootLayout({
       <body className={inter.className}>
         <SessionProvider session={session}>
           <ThemeProvider>
-            <div className="flex flex-col min-h-screen">
-              <Navbar />
-              {children}
-              <Footer />
-            </div>
+            <UserProvider>
+              <div className="flex flex-col min-h-screen">
+                <Navbar />
+                {children}
+                <Footer />
+              </div>
+            </UserProvider>
           </ThemeProvider>
         </SessionProvider>
       </body>

diff --git a/components/Footer.tsx b/components/Footer.tsx
@@ -1,4 +1,4 @@
-export default async function Footer() {
+export default function Footer() {
   return (
     <footer className="footer footer-center p-4 bg-base-300 text-base-content mt-auto">
       <aside>

diff --git a/components/KickPlayer.tsx b/components/KickPlayer.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { Button } from "./Button";
 
 export default function KickPlayer({ playerId }: { playerId: string }) {

diff --git a/components/Navbar.tsx b/components/Navbar.tsx
@@ -1,8 +1,6 @@
-import { getServerSession } from "next-auth";
 import LoginButton from "./LoginButton";
+import Profile from "./Profile";
 import ThemeController from "./ThemeController";
-import prisma from "@/lib/prisma";
-import { User } from "@prisma/client";
 import Link from "next/link";
 
 function GitHub() {
@@ -26,23 +24,15 @@ function GitHub() {
         <path stroke="none" d="M0 0h24v24H0z" fill="none" />
         <path
           d="M5.315 2.1c.791 -.113 1.9 .145 3.333 .966l.272 .161l.16 .1l.397 -.083a13.3 13.3 0 0 1 4.59 -.08l.456 .08l.396 .083l.161 -.1c1.385 -.84 2.487 -1.17 3.322 -1.148l.164 .008l.147 .017l.076 .014l.05 .011l.144 .047a1 1 0 0 1 .53 .514a5.2 5.2 0 0 1 .397 2.91l-.047 .267l-.046 .196l.123 .163c.574 .795 .93 1.728 1.03 2.707l.023 .295l.007 .272c0 3.855 -1.659 5.883 -4.644 6.68l-.245 .061l-.132 .029l.014 .161l.008 .157l.004 .365l-.002 .213l-.003 3.834a1 1 0 0 1 -.883 .993l-.117 .007h-6a1 1 0 0 1 -.993 -.883l-.007 -.117v-.734c-1.818 .26 -3.03 -.424 -4.11 -1.878l-.535 -.766c-.28 -.396 -.455 -.579 -.589 -.644l-.048 -.019a1 1 0 0 1 .564 -1.918c.642 .188 1.074 .568 1.57 1.239l.538 .769c.76 1.079 1.36 1.459 2.609 1.191l.001 -.678l-.018 -.168a5.03 5.03 0 0 1 -.021 -.824l.017 -.185l.019 -.12l-.108 -.024c-2.976 -.71 -4.703 -2.573 -4.875 -6.139l-.01 -.31l-.004 -.292a5.6 5.6 0 0 1 .908 -3.051l.152 -.222l.122 -.163l-.045 -.196a5.2 5.2 0 0 1 .145 -2.642l.1 -.282l.106 -.253a1 1 0 0 1 .529 -.514l.144 -.047l.154 -.03z"
-          stroke-width="0"
+          strokeWidth="0"
           fill="currentColor"
         />
       </svg>
     </Link>
   );
 }
 
-export default async function Navbar() {
-  const session = await getServerSession();
-  let user: User | null = null;
-  if (session?.user?.email) {
-    user = await prisma.user.findUnique({
-      where: { email: session.user.email },
-    });
-  }
-
+export default function Navbar() {
   return (
     <div className="navbar bg-base-300">
       <div className="flex-1">
@@ -52,11 +42,7 @@ export default async function Navbar() {
       </div>
       <div className="flex-none">
         <ul className="menu menu-horizontal items-center px-2">
-          {user && (
-            <li>
-              <Link href={`/user/${user.name}`}>Profile</Link>
-            </li>
-          )}
+          <Profile />
           <li>
             <Link href="/leaderboard">Leaderboard</Link>
           </li>

diff --git a/components/Party.tsx b/components/Party.tsx
@@ -20,11 +20,13 @@ import {
   StopGame,
 } from "./Button";
 import SelectMode from "./SelectMode";
+import { UserContext } from "./UserProvider";
 
 export default function Party() {
   const fetcher: Fetcher<User, string> = (url) =>
     fetch(url).then((res) => res.json());
   const { setError } = useContext(ErrorContext);
+  const { setUser } = useContext(UserContext);
 
   const { data, error, isLoading } = useSWR("/api/user", fetcher, {
     refreshInterval: 1000,
@@ -49,6 +51,8 @@ export default function Party() {
     return <NameForm />;
   }
 
+  setUser(user);
+
   const party = user.party;
   if (!party) {
     return (

diff --git a/components/Player.tsx b/components/Player.tsx
@@ -87,11 +87,11 @@ function WinnerIcon() {
         width="24"
         height="24"
         viewBox="0 0 24 24"
-        stroke-width="1.5"
+        strokeWidth="1.5"
         stroke="currentColor"
         fill="none"
-        stroke-linecap="round"
-        stroke-linejoin="round"
+        strokeLinecap="round"
+        strokeLinejoin="round"
       >
         <path stroke="none" d="M0 0h24v24H0z" fill="none" />
         <path d="M9 3h6l3 7l-6 2l-6 -2z" />

diff --git a/components/Profile.tsx b/components/Profile.tsx
@@ -0,0 +1,19 @@
+"use client";
+
+import { useContext } from "react";
+import { UserContext } from "./UserProvider";
+import Link from "next/link";
+
+export default function Profile() {
+  const { user } = useContext(UserContext);
+
+  if (!user?.name) {
+    return null;
+  }
+
+  return (
+    <li>
+      <Link href={`/user/${user.name}`}>Profile</Link>
+    </li>
+  );
+}
diff --git a/components/PromotePlayer.tsx b/components/PromotePlayer.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { Button } from "./Button";
 
 export default function PromotePlayer({ playerId }: { playerId: string }) {

diff --git a/components/UserProvider.tsx b/components/UserProvider.tsx
@@ -0,0 +1,27 @@
+"use client";
+
+import {
+  Dispatch,
+  ReactNode,
+  SetStateAction,
+  createContext,
+  useState,
+} from "react";
+import { User } from "@/lib/user";
+
+type UserContextProps = {
+  user?: User;
+  setUser: Dispatch<SetStateAction<User | undefined>>;
+};
+
+export const UserContext = createContext<UserContextProps>(undefined!);
+
+export default function UserProvider({ children }: { children: ReactNode }) {
+  const [user, setUser] = useState<User>();
+
+  return (
+    <UserContext.Provider value={{ user, setUser }}>
+      {children}
+    </UserContext.Provider>
+  );
+}