fix : PR#57 game loading from URL

src/lib/helpers.ts

@@ -26,9 +26,3 @@ export const decodeBase64 = (encoded: string | null): string | null => {
     return null;
   }
 };
-
-export const decodeBase64Param = (param: string): string | null => {
-  const params = new URLSearchParams(location.search);
-  const encodedParam = params.get(param);
-  return decodeBase64(encodedParam);
-};

src/pages/index.tsx

@@ -1,15 +1,9 @@
-import { useChessActions } from "@/hooks/useChessActions";
 import Board from "@/sections/analysis/board";
 import PanelHeader from "@/sections/analysis/panelHeader";
 import PanelToolBar from "@/sections/analysis/panelToolbar";
 import AnalysisTab from "@/sections/analysis/panelBody/analysisTab";
 import ClassificationTab from "@/sections/analysis/panelBody/classificationTab";
-import {
-  boardAtom,
-  boardOrientationAtom,
-  gameAtom,
-  gameEvalAtom,
-} from "@/sections/analysis/states";
+import { boardAtom, gameAtom, gameEvalAtom } from "@/sections/analysis/states";
 import {
   Box,
   Divider,
@@ -19,51 +13,21 @@ import {
   useMediaQuery,
   useTheme,
 } from "@mui/material";
-import { useAtom, useAtomValue, useSetAtom } from "jotai";
-import { useRouter } from "next/router";
+import { useAtomValue } from "jotai";
 import { useEffect, useState } from "react";
 import { Icon } from "@iconify/react";
 import EngineSettingsButton from "@/sections/engineSettings/engineSettingsButton";
 import GraphTab from "@/sections/analysis/panelBody/graphTab";
 import { PageTitle } from "@/components/pageTitle";
-import { decodeBase64Param } from "@/lib/helpers";
 
 export default function GameAnalysis() {
   const theme = useTheme();
   const [tab, setTab] = useState(0);
   const isLgOrGreater = useMediaQuery(theme.breakpoints.up("lg"));
 
-  const { reset: resetBoard } = useChessActions(boardAtom);
-  const { reset: resetGame } = useChessActions(gameAtom);
-  const [gameEval, setGameEval] = useAtom(gameEvalAtom);
+  const gameEval = useAtomValue(gameEvalAtom);
   const game = useAtomValue(gameAtom);
   const board = useAtomValue(boardAtom);
-  const setBoardOrientation = useSetAtom(boardOrientationAtom);
-  const { setPgn: setGamePgn } = useChessActions(gameAtom);
-
-  const router = useRouter();
-  const { gameId } = router.query;
-  const pgnParam = decodeBase64Param("pgn");
-
-  useEffect(() => {
-    if (pgnParam) {
-      setGameEval(undefined);
-      setGamePgn(pgnParam);
-    } else if (!gameId) {
-      resetBoard();
-      setGameEval(undefined);
-      setBoardOrientation(true);
-      resetGame({ noHeaders: true });
-    }
-  }, [
-    gameId,
-    pgnParam,
-    setGameEval,
-    setGamePgn,
-    setBoardOrientation,
-    resetBoard,
-    resetGame,
-  ]);
 
   const showMovesTab = game.history().length > 0 || board.history().length > 0;
 

src/sections/analysis/panelHeader/loadGame.tsx

@@ -12,6 +12,8 @@ import { useGameDatabase } from "@/hooks/useGameDatabase";
 import { useAtomValue, useSetAtom } from "jotai";
 import { Chess } from "chess.js";
 import { useRouter } from "next/router";
+import { decodeBase64 } from "@/lib/helpers";
+import { Game } from "@/types/game";
 
 export default function LoadGame() {
   const router = useRouter();
@@ -25,32 +27,56 @@ export default function LoadGame() {
 
   const resetAndSetGamePgn = useCallback(
     (pgn: string) => {
-      resetBoard(pgn);
+      resetBoard();
       setEval(undefined);
       setGamePgn(pgn);
     },
     [resetBoard, setGamePgn, setEval]
   );
 
-  useEffect(() => {
-    const loadGame = async () => {
-      if (!gameFromUrl) return;
+  const { pgn: pgnParam, orientation: orientationParam } = router.query;
 
+  useEffect(() => {
+    const loadGameFromIdParam = (gameUrl: Game) => {
       const gamefromDbChess = new Chess();
-      gamefromDbChess.loadPgn(gameFromUrl.pgn);
+      gamefromDbChess.loadPgn(gameUrl.pgn);
       if (game.history().join() === gamefromDbChess.history().join()) return;
 
-      resetAndSetGamePgn(gameFromUrl.pgn);
-      setEval(gameFromUrl.eval);
+      resetAndSetGamePgn(gameUrl.pgn);
+      setEval(gameUrl.eval);
       setBoardOrientation(
-        gameFromUrl.black.name === "You" && gameFromUrl.site === "Chesskit.org"
+        gameUrl.black.name === "You" && gameUrl.site === "Chesskit.org"
           ? false
           : true
       );
     };
 
-    loadGame();
-  }, [gameFromUrl, game, resetAndSetGamePgn, setEval, setBoardOrientation]);
+    const loadGameFromPgnParam = (encodedPgn: string) => {
+      const decodedPgn = decodeBase64(encodedPgn);
+      if (!decodedPgn) return;
+
+      const gameFromPgnParam = new Chess();
+      gameFromPgnParam.loadPgn(decodedPgn || "");
+      if (game.history().join() === gameFromPgnParam.history().join()) return;
+
+      resetAndSetGamePgn(decodedPgn);
+      setBoardOrientation(orientationParam !== "black");
+    };
+
+    if (gameFromUrl) {
+      loadGameFromIdParam(gameFromUrl);
+    } else if (typeof pgnParam === "string") {
+      loadGameFromPgnParam(pgnParam);
+    }
+  }, [
+    gameFromUrl,
+    pgnParam,
+    orientationParam,
+    game,
+    resetAndSetGamePgn,
+    setEval,
+    setBoardOrientation,
+  ]);
 
   const isGameLoaded =
     gameFromUrl !== undefined ||