handleCreateTask_DataBase等の修正

frontend/src/pages/AddDishes2.tsx

@@ -31,21 +31,65 @@ import {
   Add as AddIcon, Delete as DeleteIcon, ShoppingBasket as ShoppingBasketIcon,
   SoupKitchen as SoupKitchenIcon
 } from '@mui/icons-material';
-import { Task } from '../types/types';
+import { Task, ToBuy } from '../types/types';
 import { TASK_ERRORS } from '../constants/errorMessages';
 import { GENERAL_ERRORS } from '../constants/errorMessages';
 import CategoryDropDown from "../components/CategoryDropDown";
 
+// // 新規タスクの初期状態(画面表示用)
+// const EMPTY_TASK = { id: 0, title: '', amount: 0, completed: false };
+
+// // 新規タスクの初期状態(データベース登録用)
+// const EMPTY_TASK_DATA_BASE = { id: 0, title: '', amount: 0, completed: false };
+
 // 新規タスクの初期状態(画面表示用)
-const EMPTY_TASK = { id: 0, title: '', amount: 0, completed: false };
+const ToBuy_Empty = { stuff_name: '', amount: 0, shop: ''};
 
 // 新規タスクの初期状態(データベース登録用)
-const EMPTY_TASK_DATA_BASE = { id: 0, title: '', amount: 0, completed: false };
+const ToBuy_database = { name: '', amount: 0, shop: '', stuff_id: 0, category: '' };
+//   tobuy_id: number,
+//   stuff_id: number,
+//   stuff_name: string,
+//   amount: number,
+//   shop?: string,
+// }
+
+// interface Empty_Task {
+//   title: string; // 食材名
+//   amount: number; // 食材の個数
+//   completed: boolean; // 
+// }
 
-interface Empty_Task {
-  title: string; // 食材名
+// 入力内容を画面に表示するための一時的な配列に用いる型
+interface ToBuyTemp {
+  stuff_name: string; // 食材名
   amount: number; // 食材の個数
-  completed: boolean; // 
+  shop: string; // 店の名前
+}
+
+// 食材の情報
+interface StuffInformation {
+  stuffId: number; // 食材の一意識別子
+  stuffName: string; // 食材の名前
+  category: string; // カテゴリ
+  amount: number; // 量
+}
+
+// 料理と料理に必要な食材の情報
+interface Recipe {
+  recipeName: string; // 料理の名前
+  summary: string; // 説明
+  stuffAndAmontArray: StuffInformation[]; // 食材情報の配列
+}
+// Json形式への変換
+// const jsonString = JSON.stringify(Recipe, null, 2);
+
+interface ToBuyAddDatabase {
+  stuff_name: string; // 食材名
+  amount: number; // 食材の個数
+  shop: string; // 店の名前
+  stuff_id: number;
+  category: string;
 }
 
 const AddDishes2: React.FC = () => {
@@ -53,13 +97,16 @@ const AddDishes2: React.FC = () => {
   // タスク一覧の状態管理
   const [tasks, setTasks] = useState<Task[]>([]);
 
-  const [addtasks, setAddTasks] = useState<Empty_Task[]>([]);
+  // const [addtasks, setAddTasks] = useState<Empty_Task[]>([]);
+  // 新規食材情報を格納する配列
+  const [addtasks, setAddTasks] = useState<ToBuyTemp[]>([]);
   // エラーメッセージの状態管理
   const [error, setError] = useState(false);
   // 新規タスク作成ダイアログの表示状態
   const [openDialog, setOpenDialog] = useState(false);
   // 新規タスクの入力内容
-  const [newTask, setNewTask] = useState(EMPTY_TASK);
+  // const [newTask, setNewTask] = useState(EMPTY_TASK);
+  const [newTask, setNewTask] = useState(ToBuy_Empty);
 
   // コンポーネントマウント時にタスク一覧を取得
   useEffect(() => {
@@ -117,7 +164,7 @@ const AddDishes2: React.FC = () => {
       newAddTasks.push(newTask);
       setAddTasks(newAddTasks);
       setOpenDialog(false); // ダイアログを閉じる
-      setNewTask(EMPTY_TASK); // 入力内容をリセット
+      setNewTask(ToBuy_Empty); // 入力内容をリセット
       // fetchTasks(); // 作成後のタスク一覧を再取得
     } catch (error) {
       console.error(`${TASK_ERRORS.CREATE_FAILED}:`, error);
@@ -126,12 +173,20 @@ const AddDishes2: React.FC = () => {
 
   const handleCreateTask_DataBase = async () => {
     try {
-      // for (let i = 0; i < addtasks.length; i++) {
-      //   // await taskApi.createTask(addtasks[i]);
-      //   await toBuyApi.addToBuy(addtasks[i]);
-      // }
+      for (let i = 0; i < addtasks.length; i++) {
+        // await taskApi.createTask(addtasks[i]);
+        // addToBuyの引数に合わせた変数を宣言
+        let addtasks_PlusId : ToBuyAddDatabase = {
+          stuff_name: addtasks[i].stuff_name, // 食材名
+          amount: addtasks[i].amount, // 食材の個数
+          shop: addtasks[i].shop, // 店の名前
+          stuff_id: i, // 食材ID
+          category: '' // カテゴリ
+        }
+        await toBuyApi.addToBuy(addtasks_PlusId);
+      }
       setOpenDialog(false); // ダイアログを閉じる
-      setNewTask(EMPTY_TASK); // 入力内容をリセット
+      setNewTask(ToBuy_Empty); // 入力内容をリセット
       // fetchTasks(); // 作成後のタスク一覧を再取得
     } catch (error) {
       console.error(`${TASK_ERRORS.CREATE_FAILED}:`, error);
@@ -163,11 +218,11 @@ const AddDishes2: React.FC = () => {
             /> */}
             {/* タスクのタイトルと説明 - 完了状態に応じて取り消し線を表示 */}
             <ListItemText
-              primary={task.title}
+              primary={task.stuff_name}
               // secondary={task.description}
-              sx={{
-                textDecoration: task.completed ? 'line-through' : 'none',
-              }}
+              // sx={{
+              //   textDecoration: task.completed ? 'line-through' : 'none',
+              // }}
             />
             {/* 食材の個数を表示 */}
             <ListItemText
@@ -242,8 +297,8 @@ const AddDishes2: React.FC = () => {
               margin="dense"
               label="材料名"
               fullWidth
-              value={newTask.title}
-              onChange={(e) => setNewTask({ ...newTask, title: e.target.value })}
+              value={newTask.stuff_name}
+              onChange={(e) => setNewTask({ ...newTask, stuff_name: e.target.value })}
               sx={{ marginBottom: 2 }}
             />
             {/* 数量入力フィールド */}