材料の追加の実装

frontend/src/components/StuffNameDropDown.tsx

@@ -1,16 +0,0 @@
-import React from "react";
-import { toBuyApi } from '../services/api';
-import { FormControl, InputLabel, Select, MenuItem } from "@mui/material";
-
-const StuffNameDropDown = ({ value, onChange }) => {
-  return (
-    <FormControl fullWidth>
-      <InputLabel>材料を選択</InputLabel>
-      <Select value={value} onChange={onChange}>
-        <MenuItem value="じゃがいも">野菜</MenuItem>
-      </Select>
-    </FormControl>
-  );
-};
-
-export default StuffNameDropDown;

frontend/src/pages/TaskListPage.tsx

@@ -3,7 +3,7 @@
  * タスクの表示、作成、完了状態の切り替え、削除などの機能を提供
  */
 import React, { useState, useEffect } from 'react';
-import { toBuyApi } from '../services/api';
+import { toBuyApi, stuffApi } from '../services/api';
 import {
   Container,
   Typography,
@@ -23,13 +23,17 @@ import {
   Button,
   Box,
   FormControlLabel,
-  FormGroup
+  FormGroup,
+  FormControl,
+  InputLabel,
+  Select,
+  MenuItem
 } from '@mui/material';
 import {
   Add as AddIcon, Delete as DeleteIcon, ShoppingBasket as ShoppingBasketIcon,
   SoupKitchen as SoupKitchenIcon
 } from '@mui/icons-material';
-import { Task, ToBuy } from '../types/types';
+import { Task, ToBuy, Stuff } from '../types/types';
 import { TASK_ERRORS } from '../constants/errorMessages';
 //import { FaCarrot } from "react-icons/fa6";　//エラー起きる　いったん保留
 import CategoryDropDown from "../components/CategoryDropDown";
@@ -38,8 +42,8 @@ import CategoryDropDown from "../components/CategoryDropDown";
 
 
 // 新規タスクの初期状態
-const EMPTY_TASK: Omit<ToBuy, 'tobuy_id'> & {category: string} & {newAddition: boolean} = { 
-  stuff_id: 0,
+const EMPTY_TASK: Omit<ToBuy, 'tobuy_id' | 'stuff_id'> & { stuff_id: number | null, category: string } & { newAddition: boolean } = {
+  stuff_id: null,
   stuff_name: '',
   amount: 0,
   shop: '',
@@ -55,12 +59,15 @@ const TaskListPage: React.FC = () => {
 
   //在庫登録ダイアログの表示状態
   const [openInfoDialog, setOpenInfoDialog] = useState(false);
-  
+
   const [selectedTask, setSelectedTask] = useState<ToBuy>();
 
 
   const [newToBuy, setNewToBuy] = useState(EMPTY_TASK);
 
+  const [stuffs, setStuffs] = useState<Stuff[]>([]);
+
+
   // コンポーネントマウント時にタスク一覧を取得
   useEffect(() => {
     fetchTasks();
@@ -79,6 +86,12 @@ const TaskListPage: React.FC = () => {
     }
   };
 
+  const onChangeCategory = async (category: string) => {
+    setNewToBuy({ ...newToBuy, category })
+    const result = await stuffApi.getStuffs(category)
+    setStuffs(result.stuff_array)
+  }
+
   // /**
   //  * タスクの完了状態を切り替えるハンドラー
   //  * 対象タスクの完了状態を反転させてAPIに更新を要求
@@ -222,23 +235,53 @@ const TaskListPage: React.FC = () => {
 
       {/* 新規タスク作成ダイアログ */}
       <Dialog open={openDialog} onClose={() => setOpenDialog(false)} disableScrollLock={true}>
-       <Box display="flex" alignItems="center">
-        <DialogTitle sx={{ flexGrow: 1 }}>材料の追加</DialogTitle>
-        <FormGroup row>
-          <FormControlLabel
-            control={<Checkbox />}
-            label="食材を新規追加"
-            checked={newToBuy.newAddition}
-            onChange={(e) => setNewToBuy({ ...newToBuy, newAddition:(e.target as HTMLInputElement).checked })}
-          />
-        </FormGroup>
+        <Box display="flex" alignItems="center">
+          <DialogTitle sx={{ flexGrow: 1 }}>材料の追加</DialogTitle>
+          <FormGroup row>
+            <FormControlLabel
+              control={<Checkbox />}
+              label="食材を新規追加"
+              checked={newToBuy.newAddition}
+              onChange={(e) => setNewToBuy({ ...newToBuy, newAddition: (e.target as HTMLInputElement).checked })}
+            />
+          </FormGroup>
         </Box>
         <DialogContent>
           <Box sx={{ pt: 1 }}>
             {/*材料カテゴリ選択 */}
-            <CategoryDropDown></CategoryDropDown>
+
+            <FormControl sx={{ width: "50%", marginBottom: 2 }}>
+              <InputLabel id="demo-simple-select-label">カテゴリ</InputLabel>
+              <Select
+                labelId="demo-simple-select-label"
+                value={newToBuy.category}
+                onChange={(e) => onChangeCategory(e.target.value) }
+              >
+                <MenuItem value="乳製品">乳製品</MenuItem>
+                <MenuItem value="肉・魚">肉・魚</MenuItem>
+                <MenuItem value="野菜">野菜</MenuItem>
+                <MenuItem value="調味料">調味料</MenuItem>
+                <MenuItem value="その他">その他</MenuItem>
+              </Select>
+            </FormControl>
+
+            {!newToBuy.newAddition && <FormControl sx={{ width: "50%", marginBottom: 2 }}>
+              <InputLabel id="demo-simple-select-label">材料名（選択）</InputLabel>
+              <Select
+                labelId="demo-simple-select-label"
+                value={newToBuy.stuff_id}
+                onChange={(e) => setNewToBuy({ ...newToBuy, stuff_id: Number(e.target.value) })}
+              >
+                {stuffs.map((stuff) => (
+                  <MenuItem key={stuff.stuff_id} value={stuff.stuff_id}>
+                    {stuff.stuff_name}
+                  </MenuItem>
+                ))}
+              </Select>
+            </FormControl>}
+
             {/* タスクタイトル入力フィールド */}
-            <TextField
+            {newToBuy.newAddition && <TextField
               autoFocus
               margin="dense"
               label="材料名"
@@ -246,7 +289,7 @@ const TaskListPage: React.FC = () => {
               value={newToBuy.stuff_name}
               onChange={(e) => setNewToBuy({ ...newToBuy, stuff_name: e.target.value })}
               sx={{ marginBottom: 2 }}
-            />
+            />}
             {/* 数量入力フィールド */}
             <TextField
               margin="dense"
@@ -310,14 +353,14 @@ const TaskListPage: React.FC = () => {
               handleDeleteTask(selectedTask.tobuy_id)
               setOpenInfoDialog(false)
             }
-            }}
+          }}
             variant="contained">
             登録
           </Button>
         </DialogActions>
       </Dialog>
     </Container>
-    
+
   );
 };
 

frontend/src/services/api.ts

@@ -128,7 +128,7 @@ export const toBuyApi = {
    * @param tobuy 作成する材料情報
    * @returns 作成された材料情報
    */
-  addToBuy: async (tobuy: Omit<ToBuy, 'tobuy_id'> & { category: string }): Promise<any> => {
+  addToBuy: async (tobuy: Omit<ToBuy, 'stuff_id' | 'tobuy_id'> & { stuff_id: number | null, category: string }): Promise<any> => {
     // const response = await fetch(`${API_BASE_URL}/api/tasks`, {
     //   method: 'POST',
     //   headers: getHeaders(),