🚀 refactor: #38 履歴をReduxへ移行

Suke-H · Feb 6, 2025 · 05049a0 · 05049a0
1 parent 77175e9
commit 05049a0
Show file tree

Hide file tree

Showing 4 changed files with 80 additions and 45 deletions.
diff --git a/frontend/src/components/editor/grid.tsx b/frontend/src/components/editor/grid.tsx
@@ -11,33 +11,35 @@ import { GridCell, Panel, } from "../types";
 import { CELL_DEFINITIONS, CellSideInfo } from "../../constants/cell-types";
 import { exportStageToYaml, importStageFromYaml } from "../../utils/yaml";
 import { shareStageUrl } from "../../utils/url";
+import { cellTypeSlice } from "../../store/slices/cell-type-slice";
 
-interface GridProps {
+// interface GridProps {
   // grid: GridCell[][];
   // setGrid: React.Dispatch<React.SetStateAction<GridCell[][]>>;
-  setGridHistory: React.Dispatch<React.SetStateAction<GridCell[][][]>>;
+  // setGridHistory: React.Dispatch<React.SetStateAction<GridCell[][][]>>;
   // panels: Panel[];
   // setPanels: React.Dispatch<React.SetStateAction<Panel[]>>;
   // panelPlacementMode: PanelPlacementModeType;
   // setPanelPlacementMode: React.Dispatch<React.SetStateAction<PanelPlacementModeType>>;
   // setPanelPlacementHistory: React.Dispatch<
   //   React.SetStateAction<PanelPlacementHistoryType>
   // >;
-}
+// }
 
-export const Grid: React.FC<GridProps> = ({
+export const Grid: React.FC = (
   // grid,
   // setGrid,
-  setGridHistory,
+  // setGridHistory,
   // panels,
   // setPanels,
   // panelPlacementMode,
   // setPanelPlacementMode,
   // setPanelPlacementHistory,
-}) => {
+) => {
 
   const dispatch = useDispatch();
   const grid = useSelector((state: RootState) => state.grid.grid);
+  // const gridHistory = useSelector((state: RootState) => state.grid.gridHistory);
   const panels = useSelector((state: RootState) => state.panel.panels);
   const selectedCellType = useSelector((state: RootState) => state.cellType.selectedCellType);
   const panelPlacementMode = useSelector((state: RootState) => state.panel.panelPlacementMode);
@@ -126,15 +128,16 @@ export const Grid: React.FC<GridProps> = ({
       }
 
       // setGrid(newGrid);
-      setGridHistory((prev) => [...prev, grid]);
+      // setGridHistory((prev) => [...prev, grid]);
+      // dispatch(gridSlice.actions.saveHistory());
       return;
     }
 
     // パネル配置モード
     const placingPanel = panelPlacementMode.panel;
 
     if (canPlacePanelAtLocation(grid, rowIndex, colIndex, placingPanel)) {
-      const updatedGrid = grid.map((row) => [...row]);
+      // const updatedGrid = grid.map((row) => [...row]);
 
       const panelRows = placingPanel.cells.length;
       const panelCols = placingPanel.cells[0].length;
@@ -166,17 +169,23 @@ export const Grid: React.FC<GridProps> = ({
         }
       }
 
-      setGridHistory((prev) => [...prev, updatedGrid]);
+      // setGridHistory((prev) => [...prev, updatedGrid]);
+      dispatch(gridSlice.actions.saveHistory());
+
       // setPanelPlacementHistory((prev) => [...prev, panelPlacementMode]);
       dispatch(panelSlice.actions.addToPlacementHistory(panelPlacementMode));
       // setGrid(updatedGrid);
       // dispatch(gridSlice.actions.initGrid());
     }
 
-    panelSlice.actions.selectPanelForPlacement({
-      panel: null,
-      highlightedCell: null,
-    });
+    // 設置したらパネル配置モードを終了
+    dispatch(
+      panelSlice.actions.selectPanelForPlacement({
+        panel: null,
+        highlightedCell: null,
+      })
+    );
+    dispatch(cellTypeSlice.actions.changeCellType("Normal"));
   };
 
   const renderGridCell = (

diff --git a/frontend/src/components/editor/panel-list.tsx b/frontend/src/components/editor/panel-list.tsx
@@ -5,14 +5,15 @@ import {
   Panel,
   // PanelPlacementModeType,
   // PanelPlacementHistoryType,
-  GridCell,
+  // GridCell,
   // PanelPlacementModeType,
 } from "../types";
 import { panelSlice } from "../../store/slices/panel-slice";
+import { gridSlice } from "../../store/slices/grid-slice";
 import { RootState } from "../../store";
 import { useDispatch, useSelector } from "react-redux";
 
-interface PanelListProps {
+// interface PanelListProps {
   // panels: Panel[];
   // setPanels: React.Dispatch<React.SetStateAction<Panel[]>>;
   // panelPlacementMode: PanelPlacementModeType;
@@ -23,27 +24,28 @@ interface PanelListProps {
   // setPanelPlacementHistory: React.Dispatch<
   //   React.SetStateAction<PanelPlacementHistoryType>
   // >;
-  setGrid: React.Dispatch<React.SetStateAction<GridCell[][]>>;
-  gridHistory: GridCell[][][];
-  setGridHistory: React.Dispatch<React.SetStateAction<GridCell[][][]>>;
-}
+  // setGrid: React.Dispatch<React.SetStateAction<GridCell[][]>>;
+  // gridHistory: GridCell[][][];
+  // setGridHistory: React.Dispatch<React.SetStateAction<GridCell[][][]>>;
+// }
 
-export const PanelList: React.FC<PanelListProps> = ({
+export const PanelList: React.FC = (
   // panels,
   // setPanels,
   // panelPlacementMode,
   // setPanelPlacementMode,
   // panelPlacementHistory,
   // setPanelPlacementHistory,
-  setGrid,
-  gridHistory,
-  setGridHistory,
-}) => {
+  // setGrid,
+  // gridHistory,
+  // setGridHistory,
+) => {
   // const removePanel = (panelId: string) => {
   //   setPanels(panels.filter((panel) => panel.id !== panelId));
   // };
 
   const dispatch = useDispatch();
+  const gridHistory = useSelector((state: RootState) => state.grid.gridHistory);
   const panels = useSelector((state: RootState) => state.panel.panels);
   const panelPlacementMode = useSelector((state: RootState) => state.panel.panelPlacementMode);
   const panelPlacementHistory = useSelector((state: RootState) => state.panel.panelPlacementHistory);
@@ -74,8 +76,10 @@ export const PanelList: React.FC<PanelListProps> = ({
     if (gridHistory.length > 1) {
       const newGridHistory = [...gridHistory];
       newGridHistory.pop(); // 最後の状態を削除
-      setGrid(newGridHistory[newGridHistory.length - 1]);
-      setGridHistory(newGridHistory);
+      // setGrid(newGridHistory[newGridHistory.length - 1]);
+      // setGridHistory(newGridHistory);
+
+      dispatch(gridSlice.actions.undo());
 
       const newPanelPlacementHistory = [...panelPlacementHistory];
       newPanelPlacementHistory.pop();
@@ -99,8 +103,10 @@ export const PanelList: React.FC<PanelListProps> = ({
   // 「リセット」メソッド
   const resetPanelPlacement = () => {
     if (gridHistory.length > 1) {
-      setGrid(gridHistory[0]);
-      setGridHistory([gridHistory[0]]);
+      // setGrid(gridHistory[0]);
+      // setGridHistory([gridHistory[0]]);
+      dispatch(gridSlice.actions.reset());
+
       // setPanelPlacementMode({ panel: null, highlightedCell: null });
       dispatch(
         panelSlice.actions.selectPanelForPlacement(

diff --git a/frontend/src/pages/editor-page.tsx b/frontend/src/pages/editor-page.tsx
@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { useEffect } from 'react';
 import { useDispatch } from 'react-redux';
 import { panelSlice } from '../store/slices/panel-slice';
 import { gridSlice } from '../store/slices/grid-slice';
@@ -7,18 +7,16 @@ import { CellTypeSelector } from '@/components/editor/cell-type-selector';
 import { Grid } from '@/components/editor/grid';
 import { PanelList } from '@/components/editor/panel-list';
 import { NewPanelCreator } from '@/components/editor/new-panel-creator';
-import { GridCell } from '@/components/types';
 import { decodeStageFromUrl } from '../utils/url';
 
 const EditorPage: React.FC = () => {
 
   const dispatch = useDispatch();
-
-  const [grid, setGrid] = useState<GridCell[][]>([
-    [{ type: 'Normal', side: 'front' }, { type: 'Normal', side: 'front' }, { type: 'Normal', side: 'front' }],
-    [{ type: 'Normal', side: 'front' }, { type: 'Normal', side: 'front' }, { type: 'Normal', side: 'front' }],
-    [{ type: 'Normal', side: 'front' }, { type: 'Normal', side: 'front' }, { type: 'Normal', side: 'front' }],
-  ]);
+  // const [grid, setGrid] = useState<GridCell[][]>([
+  //   [{ type: 'Normal', side: 'front' }, { type: 'Normal', side: 'front' }, { type: 'Normal', side: 'front' }],
+  //   [{ type: 'Normal', side: 'front' }, { type: 'Normal', side: 'front' }, { type: 'Normal', side: 'front' }],
+  //   [{ type: 'Normal', side: 'front' }, { type: 'Normal', side: 'front' }, { type: 'Normal', side: 'front' }],
+  // ]);
 
   // const [panels, setPanels] = useState<Panel[]>([
   //   {
@@ -46,7 +44,7 @@ const EditorPage: React.FC = () => {
   //   highlightedCell: null,
   // });
 
-  const [gridHistory, setGridHistory] = useState<GridCell[][][]>([grid]);
+  // const [gridHistory, setGridHistory] = useState<GridCell[][][]>([grid]);
   // const [panelPlacementHistory, setPanelPlacementHistory] = useState<PanelPlacementHistoryType>([]);
 
   useEffect(() => {
@@ -88,9 +86,9 @@ const EditorPage: React.FC = () => {
         <CellTypeSelector 
         />
         <Grid 
-          grid={grid} 
-          setGrid={setGrid} 
-          setGridHistory={setGridHistory} 
+          // grid={grid} 
+          // setGrid={setGrid} 
+          // setGridHistory={setGridHistory} 
           // panels={panels} 
           // setPanels={setPanels} 
           // panelPlacementMode={panelPlacementMode} 
@@ -107,9 +105,9 @@ const EditorPage: React.FC = () => {
           // setPanelPlacementMode={setPanelPlacementMode}
           // panelPlacementHistory={panelPlacementHistory}
           // setPanelPlacementHistory={setPanelPlacementHistory}
-          setGrid={setGrid}
-          gridHistory={gridHistory}
-          setGridHistory={setGridHistory}
+          // setGrid={setGrid}
+          // gridHistory={gridHistory}
+          // setGridHistory={setGridHistory}
         />
         <NewPanelCreator 
           // newPanelGrid={newPanelGrid}

diff --git a/frontend/src/store/slices/grid-slice.ts b/frontend/src/store/slices/grid-slice.ts
@@ -7,7 +7,13 @@ const initialState: GridState = {
         [{ type: 'Normal', side: 'front' }, { type: 'Normal', side: 'front' }, { type: 'Normal', side: 'front' }],
         [{ type: 'Normal', side: 'front' }, { type: 'Normal', side: 'front' }, { type: 'Normal', side: 'front' }],
     ],
-    gridHistory: [],
+    gridHistory: [
+        [
+            [{ type: 'Normal', side: 'front' }, { type: 'Normal', side: 'front' }, { type: 'Normal', side: 'front' }],
+            [{ type: 'Normal', side: 'front' }, { type: 'Normal', side: 'front' }, { type: 'Normal', side: 'front' }],
+            [{ type: 'Normal', side: 'front' }, { type: 'Normal', side: 'front' }, { type: 'Normal', side: 'front' }],
+        ],
+    ],
 }
 
 export const gridSlice = createSlice({
@@ -70,7 +76,23 @@ export const gridSlice = createSlice({
         if (state.grid[row][col].side === 'neutral') return;
         // それ以外(front/back)の場合、反転
         state.grid[row][col].side = state.grid[row][col].side === 'front' ? 'back' : 'front';
-    }
+    },
+
+    // 履歴
+    saveHistory: (state) => {
+        state.gridHistory.push(state.grid.map((row) => row.map((cell) => ({ ...cell }))));
+    },
+
+    undo: (state) => {
+        if (state.gridHistory.length > 1) {
+            state.gridHistory.pop();
+            state.grid = state.gridHistory[state.gridHistory.length - 1];
+        }
+    },
+
+    reset: (state) => {
+        state.gridHistory = [state.grid.map((row) => row.map((cell) => ({ ...cell })))];
+    },
   },
 });