From 69fb7a7c9d71889c4bf2ad908667162d11d83e18 Mon Sep 17 00:00:00 2001
From: Nathaniel Tampus <contact@nize.ph>
Date: Sun, 5 Mar 2023 10:00:55 +0800
Subject: [PATCH] add wrapper component to check auth

---
 client/src/app/game/[code]/page.tsx           |  6 +++---
 .../src/components/game/GameAuthWrapper.tsx   | 21 +++++++++++++++++++
 .../game/{GameWrapper.tsx => GamePage.tsx}    | 11 +++++-----
 3 files changed, 29 insertions(+), 9 deletions(-)
 create mode 100644 client/src/components/game/GameAuthWrapper.tsx
 rename client/src/components/game/{GameWrapper.tsx => GamePage.tsx} (95%)

diff --git a/client/src/app/game/[code]/page.tsx b/client/src/app/game/[code]/page.tsx
index 5034bda..f654c84 100644
--- a/client/src/app/game/[code]/page.tsx
+++ b/client/src/app/game/[code]/page.tsx
@@ -1,12 +1,12 @@
-import GameWrapper from "@/components/game/GameWrapper";
+import GameAuthWrapper from "@/components/game/GameAuthWrapper";
 import { getGame } from "@/lib/game";
 import { notFound } from "next/navigation";
 
-export default async function GamePage({ params }: { params: { code: string } }) {
+export default async function Game({ params }: { params: { code: string } }) {
   const game = await getGame(params.code);
   if (!game) {
     notFound();
   }
 
-  return <GameWrapper initialLobby={game} />;
+  return <GameAuthWrapper initialLobby={game} />;
 }
diff --git a/client/src/components/game/GameAuthWrapper.tsx b/client/src/components/game/GameAuthWrapper.tsx
new file mode 100644
index 0000000..c868ce6
--- /dev/null
+++ b/client/src/components/game/GameAuthWrapper.tsx
@@ -0,0 +1,21 @@
+"use client";
+
+import { useContext } from "react";
+import { SessionContext } from "@/context/session";
+import GamePage from "./GamePage";
+import type { Game } from "@chessu/types";
+
+export default function GameAuthWrapper({ initialLobby }: { initialLobby: Game }) {
+  const session = useContext(SessionContext);
+
+  if (!session?.user || !session.user?.id) {
+    return (
+      <div className="flex flex-col items-center justify-center gap-4">
+        <div className="text-2xl font-bold">Loading</div>
+        <div className="text-xl">Waiting for authentication...</div>
+      </div>
+    );
+  }
+
+  return <GamePage initialLobby={initialLobby} />;
+}
diff --git a/client/src/components/game/GameWrapper.tsx b/client/src/components/game/GamePage.tsx
similarity index 95%
rename from client/src/components/game/GameWrapper.tsx
rename to client/src/components/game/GamePage.tsx
index 7ef9bc0..8dff44f 100644
--- a/client/src/components/game/GameWrapper.tsx
+++ b/client/src/components/game/GamePage.tsx
@@ -12,9 +12,9 @@ import { API_URL } from "@/config";
 import { SessionContext } from "@/context/session";
 import { Chess } from "chess.js";
 
-const socket = io(API_URL, { withCredentials: true, autoConnect: false });
+const socket = io(API_URL, { withCredentials: true, autoConnect: true });
 
-export default function GameWrapper({ initialLobby }: { initialLobby: Game }) {
+export default function GamePage({ initialLobby }: { initialLobby: Game }) {
   const session = useContext(SessionContext);
 
   // TODO: useReducer
@@ -30,7 +30,7 @@ export default function GameWrapper({ initialLobby }: { initialLobby: Game }) {
     window.addEventListener("resize", handleResize);
     handleResize();
 
-    if (game.pgn() !== lobbyData.pgn) {
+    if (lobbyData.pgn && game.pgn() !== lobbyData.pgn) {
       const gameCopy = { ...game } as Chess;
       gameCopy.loadPgn(lobbyData.pgn as string);
       setGame(gameCopy);
@@ -72,7 +72,7 @@ export default function GameWrapper({ initialLobby }: { initialLobby: Game }) {
       socket.off("receivedLatestLobby");
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [session?.user]);
+  }, []);
 
   function handleResize() {
     if (window.innerWidth >= 1920) {
@@ -99,7 +99,6 @@ export default function GameWrapper({ initialLobby }: { initialLobby: Game }) {
 
         <Chessboard
           boardWidth={boardWidth}
-          /* 350 for mobile, 480 for md up (^768px screen), 540 for 2xl up (^1536px), 580 for ^1920px  */
           customDarkSquareStyle={{ backgroundColor: "#4b7399" }}
           customLightSquareStyle={{ backgroundColor: "#eae9d2" }}
           position={game.fen()}
@@ -139,7 +138,7 @@ export default function GameWrapper({ initialLobby }: { initialLobby: Game }) {
             <div className="h-36 w-full overflow-y-scroll">
               <table className="table-compact table w-full ">
                 <tbody>
-                  {(lobbyData.pgn as string)
+                  {(lobbyData.pgn || "")
                     .split(/\d+\./)
                     .filter((move) => move.trim() !== "")
                     .map((moveSet, i) => {