From 43d69e2f8e80364411e1ab74c9a08de1f942dced Mon Sep 17 00:00:00 2001
From: "masato.fujita" <masato.fujita@ivis.co.jp>
Date: Fri, 6 Jun 2025 10:51:01 +0900
Subject: [PATCH] =?UTF-8?q?=E6=96=99=E7=90=86=E3=81=AB=E5=BF=85=E8=A6=81?=
 =?UTF-8?q?=E3=81=AA=E9=A3=9F=E6=9D=90=E3=82=92=E3=82=BF=E3=82=B9=E3=82=AF?=
 =?UTF-8?q?=E4=B8=80=E8=A6=A7=E3=81=AB=E8=A1=A8=E7=A4=BA=E3=81=95=E3=82=8C?=
 =?UTF-8?q?=E3=82=8B=E3=82=88=E3=81=86=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/pages/AddDishes1.tsx | 20 +++++------
 frontend/src/pages/AddDishes2.tsx | 57 ++++++++++++++++++++++---------
 2 files changed, 50 insertions(+), 27 deletions(-)

diff --git a/frontend/src/pages/AddDishes1.tsx b/frontend/src/pages/AddDishes1.tsx
index 3d9f699..d003ebd 100644
--- a/frontend/src/pages/AddDishes1.tsx
+++ b/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>
diff --git a/frontend/src/pages/AddDishes2.tsx b/frontend/src/pages/AddDishes2.tsx
index 1885317..2e319d9 100644
--- a/frontend/src/pages/AddDishes2.tsx
+++ b/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>