料理に必要な食材をタスク一覧に表示されるよう修正

frontend/src/pages/AddDishes1.tsx

@@ -34,16 +34,16 @@ const AddDishes1: React.FC = () => {
     setDish(event.target.value);
   };
   const handleSubmit = async (e: React.FormEvent) => {
-      e.preventDefault(); // フォームのデフォルト送信動作を防止
-      if (!dish.trim()) {
-        alert("エラー");
-        setError(true);
-      } else {
-        alert("送信成功！");
-        localStorage.setItem("dishName", dish); // ローカルストレージにフォームに入力された料理名を保存
-        navigate('/add2', { state: dish }); // 料理名から材料名追加ページにリダイレクト
-      }
-    };
+    e.preventDefault(); // フォームのデフォルト送信動作を防止
+    if (!dish.trim()) {
+      alert("エラー");
+      setError(true);
+    } else {
+      alert("送信成功！");
+      localStorage.setItem("dishName", dish); // ローカルストレージにフォームに入力された料理名を保存
+      navigate('/add2', { state: dish }); // 料理名から材料名追加ページにリダイレクト
+    }
+  };
 
   return (
     <div>

frontend/src/pages/AddDishes2.tsx

@@ -36,8 +36,11 @@ import { TASK_ERRORS } from '../constants/errorMessages';
 import { GENERAL_ERRORS } from '../constants/errorMessages';
 import CategoryDropDown from "../components/CategoryDropDown";
 
-// 新規タスクの初期状態
-const EMPTY_TASK = { title: '', amount: 0, completed: false };
+// 新規タスクの初期状態(画面表示用)
+const EMPTY_TASK = { id: 0, title: '', amount: 0, completed: false };
+
+// 新規タスクの初期状態(データベース登録用)
+const EMPTY_TASK_DATA_BASE = { id: 0, title: '', amount: 0, completed: false };
 
 interface Empty_Task {
   title: string; // 食材名
@@ -49,6 +52,7 @@ const AddDishes2: React.FC = () => {
   const receivedData = localStorage.getItem("dishName");
   // タスク一覧の状態管理
   const [tasks, setTasks] = useState<Task[]>([]);
+
   const [addtasks, setAddTasks] = useState<Empty_Task[]>([]);
   // エラーメッセージの状態管理
   const [error, setError] = useState(false);
@@ -57,19 +61,23 @@ const AddDishes2: React.FC = () => {
   // 新規タスクの入力内容
   const [newTask, setNewTask] = useState(EMPTY_TASK);
 
-  // const fetchTasks = async () => {
-  //   try {
-  //     const tasks = await taskApi.getTasks();
-  //     setTasks(tasks);
-  //   } catch (error) {
-  //     console.error(`${TASK_ERRORS.FETCH_FAILED}:`, error);
-  //   }
-  // };
-
   // コンポーネントマウント時にタスク一覧を取得
-  // useEffect(() => {
-  //   fetchTasks();
-  // }, []);
+  useEffect(() => {
+    fetchTasks();
+  }, []);
+
+  /**
+   * APIからタスク一覧を取得する関数
+   * 取得したタスクをstate(tasks)に設定
+   */
+  const fetchTasks = async () => {
+    try {
+      const tasks = await taskApi.getTasks();
+      setTasks(tasks);
+    } catch (error) {
+      console.error(`${TASK_ERRORS.FETCH_FAILED}:`, error);
+    }
+  };
   /**
    * タスクを削除するハンドラー
    * 指定されたIDのタスクをAPIを通じて削除
@@ -94,14 +102,15 @@ const AddDishes2: React.FC = () => {
     e.preventDefault(); // フォームのデフォルト送信動作を防止
     if (addtasks[0] == null) {
       setError(true);
-      alert("食材を追加してください")
+      alert("食材を追加してください");
     } else {
       alert("送信成功！");
+      handleCreateTask_DataBase();
       // localStorage.setItem("dishName", dish); // ローカルストレージにフォームに入力された料理名を保存
       // navigate('/add2', { state: dish }); // 料理名から材料名追加ページにリダイレクト
     }
   };
-  const handleCreateTask = async () => {
+  const handleCreateTask_Temp = async () => {
     try {
       // await taskApi.createTask(newTask);
       let newAddTasks = [...addtasks]; // 配列をコピー
@@ -114,6 +123,20 @@ const AddDishes2: React.FC = () => {
       console.error(`${TASK_ERRORS.CREATE_FAILED}:`, error);
     }
   };
+
+  const handleCreateTask_DataBase = async () => {
+    try {
+      for (let i = 0; i < addtasks.length; i++) {
+        await taskApi.createTask(addtasks[i]);
+      }
+      setOpenDialog(false); // ダイアログを閉じる
+      setNewTask(EMPTY_TASK); // 入力内容をリセット
+      // fetchTasks(); // 作成後のタスク一覧を再取得
+    } catch (error) {
+      console.error(`${TASK_ERRORS.CREATE_FAILED}:`, error);
+    }
+  };
+
   return (
     <Box>
       <div>
@@ -243,7 +266,7 @@ const AddDishes2: React.FC = () => {
         </DialogContent>
         <DialogActions>
           <Button onClick={() => setOpenDialog(false)}>キャンセル</Button>
-          <Button onClick={handleCreateTask} variant="contained">
+          <Button onClick={handleCreateTask_Temp} variant="contained">
             追加
           </Button>
         </DialogActions>