refacto : gameFromUrl

src/sections/analysis/analyzeButton.tsx

@@ -6,16 +6,13 @@ import { gameAtom, gameEvalAtom } from "./states";
 import { useAtomValue, useSetAtom } from "jotai";
 import { getFens } from "@/lib/chess";
 import { useGameDatabase } from "@/hooks/useGameDatabase";
-import { useRouter } from "next/router";
 
 export default function AnalyzeButton() {
   const [engine, setEngine] = useState<Stockfish | null>(null);
   const [evaluationInProgress, setEvaluationInProgress] = useState(false);
-  const { setGameEval } = useGameDatabase();
+  const { setGameEval, gameFromUrl } = useGameDatabase();
   const setEval = useSetAtom(gameEvalAtom);
   const game = useAtomValue(gameAtom);
-  const router = useRouter();
-  const { gameId } = router.query;
 
   useEffect(() => {
     const engine = new Stockfish();
@@ -43,9 +40,8 @@ export default function AnalyzeButton() {
 
     setEvaluationInProgress(false);
 
-    if (typeof gameId === "string") {
-      setGameEval(parseInt(gameId), newGameEval);
-      console.log("Game Eval saved to database");
+    if (gameFromUrl) {
+      setGameEval(gameFromUrl.id, newGameEval);
     }
   };
 

src/sections/analysis/loadGame.tsx

@@ -1,6 +1,5 @@
 import { Grid } from "@mui/material";
 import LoadGameButton from "../loadGame/loadGameButton";
-import { useRouter } from "next/router";
 import { useCallback, useEffect } from "react";
 import { useChessActions } from "@/hooks/useChess";
 import {
@@ -14,12 +13,10 @@ import { useAtomValue, useSetAtom } from "jotai";
 import { Chess } from "chess.js";
 
 export default function LoadGame() {
-  const router = useRouter();
-  const { gameId } = router.query;
   const game = useAtomValue(gameAtom);
   const gameActions = useChessActions(gameAtom);
   const boardActions = useChessActions(boardAtom);
-  const { getGame } = useGameDatabase();
+  const { gameFromUrl } = useGameDatabase();
   const setEval = useSetAtom(gameEvalAtom);
   const setBoardOrientation = useSetAtom(boardOrientationAtom);
 
@@ -35,23 +32,20 @@ export default function LoadGame() {
 
   useEffect(() => {
     const loadGame = async () => {
-      if (typeof gameId !== "string") return;
-
-      const gamefromDb = await getGame(parseInt(gameId));
-      if (!gamefromDb) return;
+      if (!gameFromUrl) return;
 
       const gamefromDbChess = new Chess();
-      gamefromDbChess.loadPgn(gamefromDb.pgn);
+      gamefromDbChess.loadPgn(gameFromUrl.pgn);
       if (game.history().join() === gamefromDbChess.history().join()) return;
 
-      resetAndSetGamePgn(gamefromDb.pgn);
-      setEval(gamefromDb.eval);
+      resetAndSetGamePgn(gameFromUrl.pgn);
+      setEval(gameFromUrl.eval);
     };
 
     loadGame();
-  }, [gameId, getGame, game, resetAndSetGamePgn, setEval]);
+  }, [gameFromUrl, resetAndSetGamePgn, setEval]);
 
-  if (!router.isReady || gameId) return null;
+  if (gameFromUrl) return null;
 
   return (
     <Grid item container xs={12} justifyContent="center" alignItems="center">

src/sections/analysis/reviewPanelToolbar/saveButton.tsx

@@ -3,22 +3,23 @@ import { Icon } from "@iconify/react";
 import { IconButton } from "@mui/material";
 import { useAtomValue } from "jotai";
 import { useRouter } from "next/router";
-import { gameAtom, gameEvalAtom } from "../states";
+import { boardAtom, gameAtom, gameEvalAtom } from "../states";
+import { getGameToSave } from "@/lib/chess";
 
 export default function SaveButton() {
   const game = useAtomValue(gameAtom);
+  const board = useAtomValue(boardAtom);
   const gameEval = useAtomValue(gameEvalAtom);
-  const { addGame, setGameEval } = useGameDatabase();
+  const { addGame, setGameEval, gameFromUrl } = useGameDatabase();
 
   const router = useRouter();
-  const { gameId } = router.query;
-
-  const isButtonEnabled = router.isReady && typeof gameId === undefined;
 
   const handleSave = async () => {
-    if (!isButtonEnabled) return;
+    if (gameFromUrl) return;
 
-    const gameId = await addGame(game);
+    const gameToSave = getGameToSave(game, board);
+
+    const gameId = await addGame(gameToSave);
     if (gameEval) {
       await setGameEval(gameId, gameEval);
     }
@@ -34,7 +35,7 @@ export default function SaveButton() {
   };
 
   return (
-    <IconButton onClick={handleSave} disabled={!isButtonEnabled}>
+    <IconButton onClick={handleSave} disabled={!!gameFromUrl}>
       <Icon icon="ri:save-3-line" />
     </IconButton>
   );