diff --git a/frontend/src/pages/AddDishes2.tsx b/frontend/src/pages/AddDishes2.tsx index d8aa62c..d5e7f29 100644 --- a/frontend/src/pages/AddDishes2.tsx +++ b/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([]); - const [addtasks, setAddTasks] = useState([]); + // const [addtasks, setAddTasks] = useState([]); + // 新規食材情報を格納する配列 + const [addtasks, setAddTasks] = useState([]); // エラーメッセージの状態管理 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 = () => { /> */} {/* タスクのタイトルと説明 - 完了状態に応じて取り消し線を表示 */} {/* 食材の個数を表示 */} { 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 }} /> {/* 数量入力フィールド */}