refacto : classification panel

src/pages/index.tsx

@@ -1,6 +1,5 @@
 import { useChessActions } from "@/hooks/useChessActions";
 import Board from "@/sections/analysis/board";
-import MovesClassificationsRecap from "@/sections/analysis/reviewPanelBody/movesClassificationsRecap";
 import ReviewPanelBody from "@/sections/analysis/reviewPanelBody";
 import ReviewPanelHeader from "@/sections/analysis/reviewPanelHeader";
 import ReviewPanelToolBar from "@/sections/analysis/reviewPanelToolbar";
@@ -15,7 +14,7 @@ import { Chess } from "chess.js";
 import { useSetAtom } from "jotai";
 import { useRouter } from "next/router";
 import { useEffect } from "react";
-import MovesPanel from "@/sections/analysis/reviewPanelBody/movesPanel";
+import ClassificationPanel from "@/sections/analysis/reviewPanelBody/classificationPanel";
 
 export default function GameReport() {
   const theme = useTheme();
@@ -73,21 +72,7 @@ export default function GameReport() {
 
         <ReviewPanelBody />
 
-        <Divider sx={{ marginX: "5%" }} />
+        <ClassificationPanel />
-
-        <Grid
-          container
-          item
-          justifyContent="center"
-          alignItems="start"
-          height="100%"
-          minHeight={{ lg: "50px", xs: undefined }}
-          sx={{ overflow: "hidden" }}
-        >
-          <MovesPanel />
-
-          <MovesClassificationsRecap />
-        </Grid>
 
         <Divider sx={{ marginX: "5%" }} />
 

src/sections/analysis/reviewPanelBody/classificationPanel/index.tsx

@@ -0,0 +1,31 @@
+import { Divider, Grid } from "@mui/material";
+import MovesPanel from "./movesPanel";
+import MovesClassificationsRecap from "./movesClassificationsRecap";
+import { useAtomValue } from "jotai";
+import { gameAtom } from "../../states";
+
+export default function ClassificationPanel() {
+  const game = useAtomValue(gameAtom);
+
+  if (!game.history().length) return null;
+
+  return (
+    <>
+      <Divider sx={{ marginX: "5%" }} />
+
+      <Grid
+        container
+        item
+        justifyContent="center"
+        alignItems="start"
+        height="100%"
+        minHeight={{ lg: "50px", xs: undefined }}
+        sx={{ overflow: "hidden" }}
+      >
+        <MovesPanel />
+
+        <MovesClassificationsRecap />
+      </Grid>
+    </>
+  );
+}

src/sections/analysis/reviewPanelBody/classificationPanel/movesClassificationsRecap/classificationRow.tsx

@@ -1,7 +1,7 @@
 import { Color, MoveClassification } from "@/types/enums";
 import { Grid, Typography } from "@mui/material";
 import { useAtomValue } from "jotai";
-import { boardAtom, gameAtom, gameEvalAtom } from "../../states";
+import { boardAtom, gameAtom, gameEvalAtom } from "../../../states";
 import { useMemo } from "react";
 import { moveClassificationColors } from "@/components/board/squareRenderer";
 import Image from "next/image";

src/sections/analysis/reviewPanelBody/classificationPanel/movesClassificationsRecap/index.tsx

@@ -1,6 +1,6 @@
 import { usePlayersNames } from "@/hooks/usePlayerNames";
 import { Grid, Typography } from "@mui/material";
-import { gameAtom, gameEvalAtom } from "../../states";
+import { gameAtom, gameEvalAtom } from "../../../states";
 import { MoveClassification } from "@/types/enums";
 import ClassificationRow from "./classificationRow";
 import { useAtomValue } from "jotai";

src/sections/analysis/reviewPanelBody/classificationPanel/movesPanel/index.tsx

@@ -2,7 +2,7 @@ import { Grid } from "@mui/material";
 import MovesLine from "./movesLine";
 import { useMemo } from "react";
 import { useAtomValue } from "jotai";
-import { gameAtom, gameEvalAtom } from "../../states";
+import { gameAtom, gameEvalAtom } from "../../../states";
 import { MoveClassification } from "@/types/enums";
 
 export default function MovesPanel() {
@@ -37,8 +37,6 @@ export default function MovesPanel() {
     return moves;
   }, [game, gameEval]);
 
-  if (!gameMoves) return null;
-
   return (
     <Grid
       container

src/sections/analysis/reviewPanelBody/classificationPanel/movesPanel/moveItem.tsx

@@ -3,7 +3,7 @@ import { Grid, Typography } from "@mui/material";
 import { moveClassificationColors } from "@/components/board/squareRenderer";
 import Image from "next/image";
 import { useAtomValue } from "jotai";
-import { boardAtom, currentPositionAtom, gameAtom } from "../../states";
+import { boardAtom, currentPositionAtom, gameAtom } from "../../../states";
 import { useChessActions } from "@/hooks/useChessActions";
 import { useEffect } from "react";
 import { isInViewport } from "@/lib/helpers";