From b9623ffe17d4d6ab13d06845c09724b97e27aa16 Mon Sep 17 00:00:00 2001
From: GameDog9988 <alex@grattan.me>
Date: Tue, 3 Oct 2023 21:08:29 -0400
Subject: [PATCH] feat: dev updates from payment PR

---
 apps/client/src/app/invite/[code]/page.tsx    | 64 +++++++++----------
 apps/client/src/app/page.tsx                  | 54 ++++++++--------
 apps/client/src/app/room/[code]/lobby.tsx     | 54 ++++++++--------
 apps/client/src/app/room/[code]/page.tsx      |  6 +-
 apps/client/src/components/header.tsx         | 16 +++++
 apps/client/src/components/menu.tsx           | 24 +++----
 apps/client/src/utils/hooks/use-click-away.ts |  6 +-
 apps/server/src/services/room.service.ts      |  4 ++
 packages/tsconfig/nextjs.json                 |  2 +-
 9 files changed, 122 insertions(+), 108 deletions(-)
 create mode 100644 apps/client/src/components/header.tsx

diff --git a/apps/client/src/app/invite/[code]/page.tsx b/apps/client/src/app/invite/[code]/page.tsx
index 25a999df..3dab0953 100644
--- a/apps/client/src/app/invite/[code]/page.tsx
+++ b/apps/client/src/app/invite/[code]/page.tsx
@@ -7,9 +7,9 @@ import Footer from "@ai/components/footer";
 import Friend from "@ai/components/game/friend";
 import SignInForm from "@ai/components/sign-in-form";
 import { authOptions } from "@ai/pages/api/auth/[...nextauth]";
-import Menu from "@ai/components/menu";
 import { LinkSecondaryButton } from "@ai/components/button";
 import { getRunningGame } from "@ai/utils/server-actions";
+import Header from "@ai/components/header";
 
 export default async function Invite({ params }: { params: { code: string } }) {
   const roomInfo = await getRoomInfo(params.code);
@@ -27,39 +27,37 @@ export default async function Invite({ params }: { params: { code: string } }) {
   }
 
   return (
-    <main className="flex min-h-[100dvh] flex-col justify-center">
-      {session && (
-        <div className="absolute right-4 top-4 z-50 mt-4 md:right-8 md:top-8">
-          <Menu session={session} />
-        </div>
-      )}
-      <section className="container mx-auto flex flex-col-reverse items-start justify-center gap-8 px-4 lg:flex-row lg:items-center lg:gap-24">
-        {runningGame && (
-          <div className="absolute left-1/2 top-8 w-full -translate-x-1/2">
-            <LinkSecondaryButton
-              href={`/room/${runningGame.roomCode}/game/${runningGame.id}`}
-              className="mx-auto flex w-full max-w-fit items-center gap-2"
-            >
-              Join Back Into {runningGame ? "Game" : "Room"} <FiLogIn />
-            </LinkSecondaryButton>
+    <>
+      <Header session={session} />
+      <main className="flex min-h-[100dvh] flex-col justify-center">
+        <section className="container mx-auto flex flex-col-reverse items-start justify-center gap-8 px-4 lg:flex-row lg:items-center lg:gap-24">
+          {runningGame && (
+            <div className="absolute left-1/2 top-16 w-full -translate-x-1/2 sm:top-8">
+              <LinkSecondaryButton
+                href={`/room/${runningGame.roomCode}/game/${runningGame.id}`}
+                className="mx-auto flex w-full max-w-fit items-center gap-2"
+              >
+                Join Back Into {runningGame ? "Game" : "Room"} <FiLogIn />
+              </LinkSecondaryButton>
+            </div>
+          )}
+          <div>
+            <p className="mb-2">The AI Image Party Game</p>
+            <h1 className="mb-8 text-4xl md:text-6xl">
+              artif<span className="ml-0.5 inline-block">i</span>cial <br />{" "}
+              unintelligence
+            </h1>
+            <SignInForm
+              session={session}
+              room={roomInfo}
+              submitLabel="Join Game"
+              type="INVITE"
+            />
           </div>
-        )}
-        <div>
-          <p className="mb-2">The AI Image Party Game</p>
-          <h1 className="mb-8 text-4xl md:text-6xl">
-            artif<span className="ml-0.5 inline-block">i</span>cial <br />{" "}
-            unintelligence
-          </h1>
-          <SignInForm
-            session={session}
-            room={roomInfo}
-            submitLabel="Join Game"
-            type="INVITE"
-          />
-        </div>
-        <Friend className="w-32 scale-x-[-1] transform lg:w-1/4 lg:scale-x-100" />
-      </section>
+          <Friend className="w-32 scale-x-[-1] transform lg:w-1/4 lg:scale-x-100" />
+        </section>
+      </main>
       <Footer />
-    </main>
+    </>
   );
 }
diff --git a/apps/client/src/app/page.tsx b/apps/client/src/app/page.tsx
index 7e21ef6b..69d8e0bd 100644
--- a/apps/client/src/app/page.tsx
+++ b/apps/client/src/app/page.tsx
@@ -7,8 +7,8 @@ import Friend from "@ai/components/game/friend";
 import SignInForm from "@ai/components/sign-in-form";
 import { authOptions } from "@ai/pages/api/auth/[...nextauth]";
 import { LinkSecondaryButton } from "@ai/components/button";
-import Menu from "@ai/components/menu";
 import { getRunningGame } from "@ai/utils/server-actions";
+import Header from "@ai/components/header";
 
 export default async function Home() {
   const session = await getServerSession(authOptions());
@@ -24,34 +24,32 @@ export default async function Home() {
   }
 
   return (
-    <main className="relative flex min-h-[100dvh] flex-col justify-center">
-      {session && (
-        <div className="absolute right-4 top-4 z-50 mt-4 md:right-8 md:top-8">
-          <Menu session={session} />
-        </div>
-      )}
-      <section className="container mx-auto flex flex-col-reverse items-start justify-center gap-8 px-4 lg:flex-row lg:items-center lg:gap-24">
-        {runningGame && (
-          <div className="absolute left-1/2 top-8 w-full -translate-x-1/2">
-            <LinkSecondaryButton
-              href={`/room/${runningGame.roomCode}/game/${runningGame.id}`}
-              className="mx-auto flex w-full max-w-fit items-center gap-2"
-            >
-              Join Back Into {runningGame ? "Game" : "Room"} <FiLogIn />
-            </LinkSecondaryButton>
+    <>
+      <Header session={session} />
+      <main className="relative flex min-h-[100dvh] flex-col justify-center">
+        <section className="container mx-auto flex flex-col-reverse items-start justify-center gap-8 px-4 lg:flex-row lg:items-center lg:gap-24">
+          {runningGame && (
+            <div className=" absolute left-1/2 top-16 mx-auto w-full -translate-x-1/2 sm:top-8">
+              <LinkSecondaryButton
+                href={`/room/${runningGame.roomCode}/game/${runningGame.id}`}
+                className="mx-auto flex w-full max-w-fit items-center gap-2"
+              >
+                Join Back Into {runningGame ? "Game" : "Room"} <FiLogIn />
+              </LinkSecondaryButton>
+            </div>
+          )}
+          <div>
+            <p className="mb-2">The AI Image Party Game</p>
+            <h1 className="mb-8 text-4xl md:text-6xl">
+              artif<span className="ml-0.5 inline-block">i</span>cial <br />{" "}
+              unintelligence
+            </h1>
+            <SignInForm session={session} submitLabel="Host Game" type="HOME" />
           </div>
-        )}
-        <div>
-          <p className="mb-2">The AI Image Party Game</p>
-          <h1 className="mb-8 text-4xl md:text-6xl">
-            artif<span className="ml-0.5 inline-block">i</span>cial <br />{" "}
-            unintelligence
-          </h1>
-          <SignInForm session={session} submitLabel="Host Game" type="HOME" />
-        </div>
-        <Friend className="w-32 scale-x-[-1] transform lg:w-1/4 lg:scale-x-100" />
-      </section>
+          <Friend className="w-32 scale-x-[-1] transform lg:w-1/4 lg:scale-x-100" />
+        </section>
+      </main>
       <Footer />
-    </main>
+    </>
   );
 }
diff --git a/apps/client/src/app/room/[code]/lobby.tsx b/apps/client/src/app/room/[code]/lobby.tsx
index 82080600..23e5614a 100644
--- a/apps/client/src/app/room/[code]/lobby.tsx
+++ b/apps/client/src/app/room/[code]/lobby.tsx
@@ -12,7 +12,7 @@ import { RoomInfo } from "@ai/utils/queries";
 import UserList from "./user-list";
 import StartGame from "./start-game";
 import { SocketContext } from "@ai/utils/socket-provider";
-import Menu from "@ai/components/menu";
+import Header from "@ai/components/header";
 
 export default function Lobby({
   roomInfo,
@@ -68,31 +68,31 @@ export default function Lobby({
   }, [handleStartGame, roomInfo.code, socket, session]);
 
   return (
-    <main className="flex min-h-[100dvh] flex-col justify-center">
-      <motion.section layout="position" className="container mx-auto px-4">
-        {!roomIsFull && (
-          <p className="mb-2 hidden text-center text-xl sm:block">
-            Your Invite Link is
-          </p>
-        )}
-        <InviteLink code={roomInfo.code} roomIsFull={roomIsFull} />
-        <div className="mx-auto mt-4 flex items-center justify-center md:absolute md:left-8 md:top-8">
-          <UserCount count={players.length} />
-        </div>
-        <div className="absolute right-8 top-8 z-50 mt-4">
-          <Menu session={session} roomCode={roomInfo.code} />
-        </div>
-        <UserList session={session} hostId={hostId} players={players} />
-        <StartGame
-          players={players}
-          code={roomInfo.code}
-          hostId={hostId}
-          onStartGame={initiateStartGame}
-          loading={startGameLoading}
-          roomIsFull={roomIsFull}
-          session={session}
-        />
-      </motion.section>
-    </main>
+    <>
+      <Header session={session} />
+      <main className="flex min-h-[100dvh] flex-col justify-center">
+        <motion.section layout="position" className="container mx-auto px-4">
+          {!roomIsFull && (
+            <p className="mb-2 hidden text-center text-xl sm:block">
+              Your Invite Link is
+            </p>
+          )}
+          <InviteLink code={roomInfo.code} roomIsFull={roomIsFull} />
+          <div className="mx-auto mt-4 flex items-center justify-center md:container md:absolute md:left-0 md:right-0 md:top-8 md:justify-start md:px-4">
+            <UserCount count={players.length} />
+          </div>
+          <UserList session={session} hostId={hostId} players={players} />
+          <StartGame
+            players={players}
+            code={roomInfo.code}
+            hostId={hostId}
+            onStartGame={initiateStartGame}
+            loading={startGameLoading}
+            roomIsFull={roomIsFull}
+            session={session}
+          />
+        </motion.section>
+      </main>
+    </>
   );
 }
diff --git a/apps/client/src/app/room/[code]/page.tsx b/apps/client/src/app/room/[code]/page.tsx
index 28a240d0..b9b9c29d 100644
--- a/apps/client/src/app/room/[code]/page.tsx
+++ b/apps/client/src/app/room/[code]/page.tsx
@@ -21,9 +21,5 @@ export default async function Room({ params }: { params: { code: string } }) {
 
   const roomInfo = await getRoomInfo(params.code);
 
-  return (
-    <div>
-      <Lobby roomInfo={roomInfo} session={session} />
-    </div>
-  );
+  return <Lobby roomInfo={roomInfo} session={session} />;
 }
diff --git a/apps/client/src/components/header.tsx b/apps/client/src/components/header.tsx
new file mode 100644
index 00000000..5d957535
--- /dev/null
+++ b/apps/client/src/components/header.tsx
@@ -0,0 +1,16 @@
+import { Session } from "next-auth";
+import Menu from "./menu";
+
+type HeaderProps = {
+  session: Session | null;
+};
+
+const Header = ({ session }: HeaderProps) => {
+  return (
+    <header className="container absolute left-0 right-0 top-4 z-50 mx-auto mt-4 flex justify-end gap-4 px-4 md:top-8">
+      <Menu session={session} />
+    </header>
+  );
+};
+
+export default Header;
diff --git a/apps/client/src/components/menu.tsx b/apps/client/src/components/menu.tsx
index 4b678a39..fe88ac50 100644
--- a/apps/client/src/components/menu.tsx
+++ b/apps/client/src/components/menu.tsx
@@ -19,7 +19,7 @@ import {
 import { useStickyState } from "@ai/utils/hooks/use-sticky-state";
 
 type MenuProps = {
-  session: Session;
+  session: Session | null;
   roomCode?: string;
 };
 
@@ -38,7 +38,7 @@ const Menu = ({ session, roomCode }: MenuProps) => {
   };
 
   const handleSignOutAndLeave = () => {
-    if (roomCode) {
+    if (roomCode && session) {
       socket.emit("leaveRoom", {
         userId: session.user.id,
         code: roomCode,
@@ -70,7 +70,7 @@ const Menu = ({ session, roomCode }: MenuProps) => {
         {showMenu && (
           <motion.ul
             id="main-menu"
-            className="mt-4 flex flex-col gap-4 rounded-md border border-gray-300 bg-slate-900 p-4"
+            className="absolute right-0 top-4 mt-4 flex w-48 flex-col gap-4 rounded-md border border-gray-300 bg-slate-900 p-4"
             initial={{ scale: 0.9, opacity: 0 }}
             animate={{
               scale: 1,
@@ -87,14 +87,16 @@ const Menu = ({ session, roomCode }: MenuProps) => {
                 {soundEnabled ? <FiVolumeX /> : <FiVolume2 />}
               </button>
             </li>
-            <li>
-              <button
-                onClick={handleSignOutAndLeave}
-                className="flex w-full items-center justify-between gap-4 text-sm focus-within:underline hover:underline md:text-base"
-              >
-                Sign Out{roomCode && " and Leave Game"} <FiLogOut />
-              </button>
-            </li>
+            {session && (
+              <li>
+                <button
+                  onClick={handleSignOutAndLeave}
+                  className="flex items-center gap-4 text-sm focus-within:underline hover:underline md:text-base"
+                >
+                  Sign Out{roomCode && " and Leave Game"} <FiLogOut />
+                </button>
+              </li>
+            )}
           </motion.ul>
         )}
       </AnimatePresence>
diff --git a/apps/client/src/utils/hooks/use-click-away.ts b/apps/client/src/utils/hooks/use-click-away.ts
index deeb16f0..671d036d 100644
--- a/apps/client/src/utils/hooks/use-click-away.ts
+++ b/apps/client/src/utils/hooks/use-click-away.ts
@@ -2,9 +2,9 @@ import { RefObject, useEffect, useRef } from "react";
 
 const defaultEvents = ["mousedown", "touchstart"];
 
-const useClickAway = <E extends Event = Event>(
+const useClickAway = (
   ref: RefObject<HTMLElement | null>,
-  onClickAway: (event: E) => void,
+  onClickAway: (event: Event) => void,
   events: string[] = defaultEvents,
 ) => {
   const savedCallback = useRef(onClickAway);
@@ -12,7 +12,7 @@ const useClickAway = <E extends Event = Event>(
     savedCallback.current = onClickAway;
   }, [onClickAway]);
   useEffect(() => {
-    const handler = (event: E) => {
+    const handler = (event: Event) => {
       const { current: el } = ref;
       el && !el.contains(event.target as Node) && savedCallback.current(event);
     };
diff --git a/apps/server/src/services/room.service.ts b/apps/server/src/services/room.service.ts
index dc2f8a7e..065421da 100644
--- a/apps/server/src/services/room.service.ts
+++ b/apps/server/src/services/room.service.ts
@@ -86,6 +86,10 @@ export async function getRoom({ code }: { code: string }) {
     .select({
       id: users.id,
       nickname: users.nickname,
+      name: users.name,
+      email: users.email,
+      emailVerified: users.emailVerified,
+      image: users.image,
       createdAt: users.createdAt,
     })
     .from(usersToRooms)
diff --git a/packages/tsconfig/nextjs.json b/packages/tsconfig/nextjs.json
index 32bf9256..a8d68590 100644
--- a/packages/tsconfig/nextjs.json
+++ b/packages/tsconfig/nextjs.json
@@ -21,7 +21,7 @@
   "module": "esnext",
   "noEmit": true,
   "resolveJsonModule": true,
-  "strict": false,
+  "strict": true,
   "target": "es6"
  },
  "include": [