🚀 refactor: #38 パネルグリッドをReduxに移行

Suke-H · Feb 6, 2025 · a982498 · a982498
1 parent b8074ec
commit a982498
Show file tree

Hide file tree

Showing 4 changed files with 121 additions and 87 deletions.
diff --git a/frontend/src/components/editor/new-panel-creator.tsx b/frontend/src/components/editor/new-panel-creator.tsx
@@ -1,56 +1,58 @@
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { PlusCircle, MinusCircle, Plus } from 'lucide-react';
-import { CellType, Panel } from '../types';
+import { Panel } from '../types';
 
 import { panelSlice } from "../../store/slices/panel-slice";
-import { useDispatch } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
+import { RootState } from "../../store";
 
-interface NewPanelCreatorProps {
-  newPanelGrid: CellType[][];
-  setNewPanelGrid: React.Dispatch<React.SetStateAction<CellType[][]>>;
+// interface NewPanelCreatorProps {
+  // newPanelGrid: CellType[][];
+  // setNewPanelGrid: React.Dispatch<React.SetStateAction<CellType[][]>>;
   // panels: Panel[];
   // setPanels: React.Dispatch<React.SetStateAction<Panel[]>>;
-}
+// }
 
-export const NewPanelCreator: React.FC<NewPanelCreatorProps> = ({
-  newPanelGrid,
-  setNewPanelGrid,
+export const NewPanelCreator: React.FC = (
+  // newPanelGrid,
+  // setNewPanelGrid,
   // panels,
   // setPanels,
-}) => {
+) => {
     const dispatch = useDispatch();
+    const newPanelGrid = useSelector((state: RootState) => state.panel.newPanelGrid);
 
-    const adjustNewPanelGridSize = (rowDelta: number, colDelta: number) => {
-      setNewPanelGrid((prevGrid) => {
-        const newRows = prevGrid.length + rowDelta;
-        const newCols = prevGrid[0].length + colDelta;
+    // const adjustNewPanelGridSize = (rowDelta: number, colDelta: number) => {
+    //   setNewPanelGrid((prevGrid) => {
+    //     const newRows = prevGrid.length + rowDelta;
+    //     const newCols = prevGrid[0].length + colDelta;
 
-        if (newRows > 0 && newCols > 0) {
-          if (rowDelta > 0) {
-            return [...prevGrid, ...Array(rowDelta).fill(Array(newCols).fill('White'))];
-          } else if (rowDelta < 0) {
-            return prevGrid.slice(0, newRows).map((row) => row.slice(0, newCols));
-          }
+    //     if (newRows > 0 && newCols > 0) {
+    //       if (rowDelta > 0) {
+    //         return [...prevGrid, ...Array(rowDelta).fill(Array(newCols).fill('White'))];
+    //       } else if (rowDelta < 0) {
+    //         return prevGrid.slice(0, newRows).map((row) => row.slice(0, newCols));
+    //       }
 
-          return prevGrid.map((row) => {
-            if (colDelta > 0) {
-              return [...row, ...Array(colDelta).fill('White')];
-            } else if (colDelta < 0) {
-              return row.slice(0, newCols);
-            }
-            return row;
-          });
-        }
-        return prevGrid;
-      });
-    };
+    //       return prevGrid.map((row) => {
+    //         if (colDelta > 0) {
+    //           return [...row, ...Array(colDelta).fill('White')];
+    //         } else if (colDelta < 0) {
+    //           return row.slice(0, newCols);
+    //         }
+    //         return row;
+    //       });
+    //     }
+    //     return prevGrid;
+    //   });
+    // };
 
-    const handleNewPanelCellClick = (rowIndex: number, colIndex: number) => {
-      const newPanelGridCopy = newPanelGrid.map((row) => [...row]);
-      newPanelGridCopy[rowIndex][colIndex] = newPanelGridCopy[rowIndex][colIndex] === 'Black' ? 'White' : 'Black';
-      setNewPanelGrid(newPanelGridCopy);
-    };
+    // const handleNewPanelCellClick = (rowIndex: number, colIndex: number) => {
+    //   const newPanelGridCopy = newPanelGrid.map((row) => [...row]);
+    //   newPanelGridCopy[rowIndex][colIndex] = newPanelGridCopy[rowIndex][colIndex] === 'Black' ? 'White' : 'Black';
+    //   setNewPanelGrid(newPanelGridCopy);
+    // };
 
     const addPanel = () => {
       const nonEmptyCells = newPanelGrid.some((row) => row.some((cell) => cell === 'Black'));
@@ -61,7 +63,8 @@ export const NewPanelCreator: React.FC<NewPanelCreatorProps> = ({
         };
         // setPanels([...panels, newPanel]);
         dispatch(panelSlice.actions.createPanel(newPanel));
-        setNewPanelGrid(Array(3).fill(null).map(() => Array(3).fill('White')));
+        // setNewPanelGrid(Array(3).fill(null).map(() => Array(3).fill('White')));
+        dispatch(panelSlice.actions.initPanelGrid());
       }
     };
 
@@ -72,16 +75,28 @@ export const NewPanelCreator: React.FC<NewPanelCreatorProps> = ({
       </CardHeader>
       <CardContent>
         <div className="flex gap-2 mb-4">
-          <Button onClick={() => adjustNewPanelGridSize(1, 0)} className="flex items-center gap-2">
+          <Button 
+            onClick={() => dispatch(panelSlice.actions.addToPanelGridRow())} 
+            className="flex items-center gap-2"
+          >
             <PlusCircle size={16} /> 行追加
           </Button>
-          <Button onClick={() => adjustNewPanelGridSize(-1, 0)} className="flex items-center gap-2">
+          <Button 
+            onClick={() => dispatch(panelSlice.actions.removeFromPanelGridRow())} 
+            className="flex items-center gap-2"
+          >
             <MinusCircle size={16} /> 行削除
           </Button>
-          <Button onClick={() => adjustNewPanelGridSize(0, 1)} className="flex items-center gap-2">
+          <Button 
+            onClick={() => dispatch(panelSlice.actions.addToPanelGridCol())} 
+            className="flex items-center gap"
+          >
             <PlusCircle size={16} /> 列追加
           </Button>
-          <Button onClick={() => adjustNewPanelGridSize(0, -1)} className="flex items-center gap-2">
+          <Button 
+            onClick={() => dispatch(panelSlice.actions.removeFromPanelGridCol())} 
+            className="flex items-center gap-2"
+          >
             <MinusCircle size={16} /> 列削除
           </Button>
         </div>
@@ -99,7 +114,7 @@ export const NewPanelCreator: React.FC<NewPanelCreatorProps> = ({
                 className={`h-10 w-10 border ${
                   cellType === 'Black' ? 'bg-gray-500' : 'bg-white'
                 }`}
-                onClick={() => handleNewPanelCellClick(rowIndex, colIndex)}
+                onClick={() => dispatch(panelSlice.actions.clickToPanelGridCell({ row: rowIndex, col: colIndex }))}
               />
             )),
           )}

diff --git a/frontend/src/components/types.ts b/frontend/src/components/types.ts
@@ -28,6 +28,7 @@ export interface CellTypeState {
 }
 
 export interface PanelState {
+  newPanelGrid: CellType[][];
   panels: Panel[];
   panelPlacementMode: PanelPlacementModeType;
   panelPlacementHistory: PanelPlacementHistoryType;

diff --git a/frontend/src/pages/editor-page.tsx b/frontend/src/pages/editor-page.tsx
@@ -1,15 +1,12 @@
 import { useState, useEffect } from 'react';
-import { Provider } from 'react-redux';
-
-import { store } from '../store';
 import { useDispatch } from 'react-redux';
 import { panelSlice } from '../store/slices/panel-slice';
 
 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 { CellType, GridCell } from '@/components/types';
+import { GridCell } from '@/components/types';
 import { decodeStageFromUrl } from '../utils/url';
 
 const EditorPage: React.FC = () => {
@@ -39,9 +36,9 @@ const EditorPage: React.FC = () => {
   //   },
   // ]);
 
-  const [newPanelGrid, setNewPanelGrid] = useState<CellType[][]>(() =>
-    Array(3).fill(null).map(() => Array(3).fill('White')),
-  );
+  // const [newPanelGrid, setNewPanelGrid] = useState<CellType[][]>(() =>
+  //   Array(3).fill(null).map(() => Array(3).fill('White')),
+  // );
 
   // const [panelPlacementMode, setPanelPlacementMode] = useState<PanelPlacementModeType>({
   //   panel: null,
@@ -84,44 +81,42 @@ const EditorPage: React.FC = () => {
   }, []);
 
   return (
-    <Provider store={store}>
-      <div className="flex flex-col p-4 gap-4 min-h-screen bg-[#DAE0EA]">
-        <div className="flex gap-4">
-          <CellTypeSelector 
-          />
-          <Grid 
-            grid={grid} 
-            setGrid={setGrid} 
-            setGridHistory={setGridHistory} 
-            // panels={panels} 
-            // setPanels={setPanels} 
-            // panelPlacementMode={panelPlacementMode} 
-            // setPanelPlacementMode={setPanelPlacementMode} 
-            // setPanelPlacementHistory={setPanelPlacementHistory}
-          />
-        </div>
-
-        <div className="flex gap-4">
-          <PanelList 
-            // panels={panels}
-            // setPanels={setPanels}
-            // panelPlacementMode={panelPlacementMode}
-            // setPanelPlacementMode={setPanelPlacementMode}
-            // panelPlacementHistory={panelPlacementHistory}
-            // setPanelPlacementHistory={setPanelPlacementHistory}
-            setGrid={setGrid}
-            gridHistory={gridHistory}
-            setGridHistory={setGridHistory}
-          />
-          <NewPanelCreator 
-            newPanelGrid={newPanelGrid}
-            setNewPanelGrid={setNewPanelGrid}
-            // panels={panels}
-            // setPanels={setPanels}
-          />
-        </div>
+    <div className="flex flex-col p-4 gap-4 min-h-screen bg-[#DAE0EA]">
+      <div className="flex gap-4">
+        <CellTypeSelector 
+        />
+        <Grid 
+          grid={grid} 
+          setGrid={setGrid} 
+          setGridHistory={setGridHistory} 
+          // panels={panels} 
+          // setPanels={setPanels} 
+          // panelPlacementMode={panelPlacementMode} 
+          // setPanelPlacementMode={setPanelPlacementMode} 
+          // setPanelPlacementHistory={setPanelPlacementHistory}
+        />
+      </div>
+
+      <div className="flex gap-4">
+        <PanelList 
+          // panels={panels}
+          // setPanels={setPanels}
+          // panelPlacementMode={panelPlacementMode}
+          // setPanelPlacementMode={setPanelPlacementMode}
+          // panelPlacementHistory={panelPlacementHistory}
+          // setPanelPlacementHistory={setPanelPlacementHistory}
+          setGrid={setGrid}
+          gridHistory={gridHistory}
+          setGridHistory={setGridHistory}
+        />
+        <NewPanelCreator 
+          // newPanelGrid={newPanelGrid}
+          // setNewPanelGrid={setNewPanelGrid}
+          // panels={panels}
+          // setPanels={setPanels}
+        />
       </div>
-    </Provider>
+    </div>
   );
   };
 

diff --git a/frontend/src/store/slices/panel-slice.ts b/frontend/src/store/slices/panel-slice.ts
@@ -2,6 +2,8 @@ import { createSlice, PayloadAction } from "@reduxjs/toolkit";
 import { PanelState, PanelPlacementModeType, Panel } from "../../components/types";
 
 const initialState: PanelState = {
+  newPanelGrid: 
+    Array(3).fill(null).map(() => Array(3).fill('White')),
   panels: [
     {
       id: 'panel1',
@@ -42,6 +44,27 @@ export const panelSlice = createSlice({
       state.panels = state.panels.filter((panel) => panel.id !== action.payload);
     },
 
+    // パネルグリッド
+    initPanelGrid: (state) => {
+      state.newPanelGrid = Array(3).fill(null).map(() => Array(3).fill('White'));
+    },
+    addToPanelGridRow: (state) => {
+      state.newPanelGrid.push(Array(state.newPanelGrid[0].length).fill('White'));
+    },
+    addToPanelGridCol: (state) => {
+      state.newPanelGrid = state.newPanelGrid.map((row) => [...row, 'White']);
+    },
+    removeFromPanelGridRow: (state) => {
+      state.newPanelGrid.pop();
+    },
+    removeFromPanelGridCol: (state) => {
+      state.newPanelGrid = state.newPanelGrid.map((row) => row.slice(0, row.length - 1));
+    },
+    clickToPanelGridCell: (state, action: PayloadAction<{ row: number; col: number }>) => {
+      const { row, col } = action.payload;
+      state.newPanelGrid[row][col] = state.newPanelGrid[row][col] === 'Black' ? 'White' : 'Black';
+    },
+
     // パネル選択
     selectPanelForPlacement: (state, action: PayloadAction<PanelPlacementModeType>) => {
       state.panelPlacementMode.panel = action.payload.panel;