🚀 refactor: #38 CellTypeSelectorのStateをStoreに移行

Suke-H · Feb 5, 2025 · 4265446 · 4265446
1 parent 5227fb5
commit 4265446
Show file tree

Hide file tree

Showing 8 changed files with 219 additions and 61 deletions.
diff --git a/frontend/src/components/editor/cell-type-selector.tsx b/frontend/src/components/editor/cell-type-selector.tsx
@@ -1,30 +1,38 @@
-import { Button } from '@/components/ui/button';
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
-import { CellDefinitions } from '../types';
-import { CELL_DEFINITIONS } from '../../constants/cell-types';
+import { useDispatch, useSelector } from "react-redux";
 
-interface CellTypeSelectorProps {
-  selectedCellType: CellDefinitions;
-  onCellTypeChange: (type: CellDefinitions) => void;
-}
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { CellDefinitions } from "../types";
+import { CELL_DEFINITIONS } from "../../constants/cell-types";
+import { changeCellType } from "../../store/slices/cell-type-slice";
+import { RootState } from "../../store";
+
+export const CellTypeSelector: React.FC = () => {
+  const dispatch = useDispatch();
+  const selectedCellType = useSelector(
+    (state: RootState) => state.cellType.selectedCellType
+  );
+
+  const handleCellTypeChange = (type: CellDefinitions) => {
+    dispatch(changeCellType(type));
+  };
 
-export const CellTypeSelector: React.FC<CellTypeSelectorProps> = ({ 
-  selectedCellType, 
-  onCellTypeChange,
-}) => {
   return (
     <Card className="w-full max-w-32 mx-auto bg-[#B3B9D1]">
       <CardHeader>
         <CardTitle>セル種類</CardTitle>
       </CardHeader>
       <CardContent className="flex flex-col gap-2">
-
         {(Object.keys(CELL_DEFINITIONS) as CellDefinitions[]).map((type) => (
           <Button
             key={type}
-            variant={selectedCellType === type ? 'default' : 'outline'}
-            className={`w-full ${CELL_DEFINITIONS[type].color} ${CELL_DEFINITIONS[type].color === "bg-white" ? 'text-black' : 'text-white'} truncate`} // 文字の省略を防止
-            onClick={() => onCellTypeChange(type)}
+            variant={selectedCellType === type ? "default" : "outline"}
+            className={`w-full ${CELL_DEFINITIONS[type].color} ${
+              CELL_DEFINITIONS[type].color === "bg-white"
+                ? "text-black"
+                : "text-white"
+            } truncate`}
+            onClick={() => handleCellTypeChange(type)}
           >
             {CELL_DEFINITIONS[type].label}
           </Button>

diff --git a/frontend/src/components/editor/grid.tsx b/frontend/src/components/editor/grid.tsx
@@ -1,10 +1,11 @@
+import { useSelector } from 'react-redux';
+import { RootState } from '../../store';
+
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader, CardTitle, } from '@/components/ui/card';
-// import { PlusCircle, MinusCircle, Download, Upload, Link } from 'lucide-react';
 import { Download, Upload, Link } from 'lucide-react';
-// import { IconButton } from '@mui/material';
 import { Add, Remove } from '@mui/icons-material';
-import { GridCell, Panel, PanelPlacementModeType, PanelPlacementHistoryType , CellDefinitions} from '../types';
+import { GridCell, Panel, PanelPlacementModeType, PanelPlacementHistoryType } from '../types';
 import { CELL_DEFINITIONS, CellSideInfo } from '../../constants/cell-types';
 import { exportStageToYaml, importStageFromYaml } from '../../utils/yaml';
 import { shareStageUrl } from '../../utils/url';
@@ -13,7 +14,6 @@ interface GridProps {
   grid: GridCell[][];
   setGrid: React.Dispatch<React.SetStateAction<GridCell[][]>>;
   setGridHistory: React.Dispatch<React.SetStateAction<GridCell[][][]>>;
-  selectedCellType: CellDefinitions;
   panels: Panel[];
   setPanels: React.Dispatch<React.SetStateAction<Panel[]>>;
   panelPlacementMode: PanelPlacementModeType;
@@ -25,14 +25,15 @@ export const Grid: React.FC<GridProps> = ({
   grid,
   setGrid,
   setGridHistory,
-  selectedCellType,
   panels,
   setPanels,
   panelPlacementMode,
   setPanelPlacementMode,
   setPanelPlacementHistory,
 }) => {
 
+  const selectedCellType = useSelector((state: RootState) => state.cellType.selectedCellType);
+
   const adjustGridSize = (rowDelta: number, colDelta: number, addToStart = false) => {
     setGrid((prevGrid) => {
       const newRows = prevGrid.length + rowDelta;

diff --git a/frontend/src/components/types.ts b/frontend/src/components/types.ts
@@ -21,3 +21,8 @@ export type PanelPlacementModeType = {
 };
 
 export type PanelPlacementHistoryType = PanelPlacementModeType;
+
+// Storeの型定義
+export interface CellTypeState {
+  selectedCellType: CellDefinitions;
+}
diff --git a/frontend/src/pages/editor-page.tsx b/frontend/src/pages/editor-page.tsx
@@ -1,10 +1,12 @@
 import { useState, useEffect } from 'react';
+import { Provider } from 'react-redux';
+
+import { store } from '../store';
 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, Panel, PanelPlacementModeType, PanelPlacementHistoryType } from '@/components/types';
-import { CellDefinitions } from 'constants/cell-types';
 import { decodeStageFromUrl } from '../utils/url';
 
 const EditorPage: React.FC = () => {
@@ -15,7 +17,6 @@ const EditorPage: React.FC = () => {
     [{ type: 'Normal', side: 'front' }, { type: 'Normal', side: 'front' }, { type: 'Normal', side: 'front' }],
   ]);
 
-  const [selectedCellType, setSelectedCellType] = useState<CellDefinitions>('Black');
   const [panels, setPanels] = useState<Panel[]>([
     {
       id: 'panel1',
@@ -78,45 +79,44 @@ const EditorPage: React.FC = () => {
   }, []);
 
   return (
-    <div className="flex flex-col p-4 gap-4 min-h-screen bg-[#DAE0EA]">
-      <div className="flex gap-4">
-        <CellTypeSelector 
-          selectedCellType={selectedCellType} 
-          onCellTypeChange={setSelectedCellType} 
-        />
-        <Grid 
-          grid={grid} 
-          setGrid={setGrid} 
-          setGridHistory={setGridHistory} 
-          selectedCellType={selectedCellType} 
-          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}
-        />
+    <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>
-    </div>
+    </Provider>
   );
   };
 

diff --git a/frontend/src/store/index.ts b/frontend/src/store/index.ts
@@ -0,0 +1,11 @@
+import { configureStore } from '@reduxjs/toolkit';
+import cellTypeReducer from './slices/cell-type-slice';
+
+export const store = configureStore({
+  reducer: {
+    cellType: cellTypeReducer,
+  },
+});
+
+export type RootState = ReturnType<typeof store.getState>;
+export type AppDispatch = typeof store.dispatch;
diff --git a/frontend/src/store/slices/cell-type-slice.ts b/frontend/src/store/slices/cell-type-slice.ts
@@ -0,0 +1,20 @@
+import { createSlice, PayloadAction } from "@reduxjs/toolkit";
+import { CellDefinitions } from "../../constants/cell-types";
+import { CellTypeState } from "../../components/types";
+
+const initialState: CellTypeState = {
+  selectedCellType: "Black",
+};
+
+export const cellTypeSlice = createSlice({
+  name: "cellType",
+  initialState,
+  reducers: {
+    changeCellType: (state, action: PayloadAction<CellDefinitions>) => {
+      state.selectedCellType = action.payload;
+    },
+  },
+});
+
+export const { changeCellType } = cellTypeSlice.actions;
+export default cellTypeSlice.reducer;
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -0,0 +1,6 @@
+{
+  "dependencies": {
+    "@reduxjs/toolkit": "^2.5.1",
+    "react-redux": "^9.2.0"
+  }
+}