From dc6ab8662fd5973d5f88c5c36d56c2c61d9a5d33 Mon Sep 17 00:00:00 2001 From: "masato.fujita" Date: Thu, 12 Jun 2025 15:19:51 +0900 Subject: [PATCH] =?UTF-8?q?=E6=96=99=E7=90=86=E3=83=AA=E3=82=B9=E3=83=88?= =?UTF-8?q?=E3=81=ABAPI=E3=81=AE=E5=86=85=E5=AE=B9=E3=82=92=E8=A1=A8?= =?UTF-8?q?=E7=A4=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/pages/DishList.tsx | 144 +++++++++++++++++++++----------- 1 file changed, 96 insertions(+), 48 deletions(-) diff --git a/frontend/src/pages/DishList.tsx b/frontend/src/pages/DishList.tsx index 387b634..5eef344 100644 --- a/frontend/src/pages/DishList.tsx +++ b/frontend/src/pages/DishList.tsx @@ -56,15 +56,40 @@ const DishList: React.FC = () => { { recipeId: 3, recipeName: '人参', summary:2 }, { recipeId: 4, recipeName: '人参', summary:2 } ]; + + interface RecipeInfo { + recipeId: number; + recipeName: string; + summary: string; + stuffs: Array<{ + stuffId: number; stuffName: string; amount: number + }>; + } - // interface testdish { - // recipeId: number, - // recipeName: string, - // summary: number - // } + const EMPTY_RECIPE: RecipeInfo = { + recipeId: 0, + recipeName: '', + summary: '', + stuffs: [] + } + + interface Stuff { + stuffId: number; + stuffName: string; + amount: number; + } // すべての料理リスト - const [allDish, setAllDish] = useState(testdish); + const [allDish, setAllDish] = useState(); + // 食材リスト + const [stuff, setStuff] = useState([]); + // 料理名 + const [selectedDishName, setSelectedDishName] = useState(''); + // 料理情報 + const [selectedrecipeInfo, setSelectedRecipeInfo] = useState({recipeId: 0, + recipeName: '', + summary: '', + stuffs: []}); // 画面表示用の食材情報配列 const [testDishArray, setTestDishArray] = useState(testdish); // エラーメッセージの状態管理 @@ -76,7 +101,16 @@ const DishList: React.FC = () => { // 料理リストの食材の個数編集ダイアログの表示状態 const [openChangeAmountDialog, setOpenChangeAmountDialog] = useState(false); // 編集する食材の状態 - const [selectedEditingStuff, setSelectedEditingStuff] = useState(); + const [selectedEditingStuff, setSelectedEditingStuff] = useState(); + + + // 食材表示ダイアログを表示 + const openStuffDialog = (recipeId : number) => { + setOpenDialog(true) + selectedDishId = recipeId; + fetchstuff(selectedDishId); + console.log(selectedDishId); + } const changeDialog = () => { setOpenDialog(false); @@ -88,26 +122,43 @@ const DishList: React.FC = () => { setOpenDialog(true); setOpenChangeDialog(false); }; + // 選択された料理のID + let selectedDishId : number = 0; // 選択された食材 let selectedItem : string = ''; // 選択された食材の個数 let selectedItemAmount : number = 0; // 選択された食材の個数を変更するダイアログを開く処理 - const changeSelectedItemAmount = (dish : Dish, stuff_name : string, stuff_amount : number) => { + const changeSelectedItemAmount = (stuff : Stuff, stuff_name : string, stuff_amount : number) => { setOpenChangeAmountDialog(true) - setSelectedEditingStuff(dish); + setSelectedEditingStuff(stuff); selectedItem = stuff_name; selectedItemAmount = stuff_amount; }; + const fetchstuff = async (recipeId : number) => { + try { + const dish = await recipeApi.getById(recipeId); + console.log(dish); + // 情報の取得にラグがあるバグあり。変数に格納するのは諦めるべきか + // setSelectedRecipeInfo(dish); + console.log(selectedrecipeInfo); + setSelectedDishName(dish.recipeName); + setStuff(dish.stuffs); + console.log(selectedDishName); + } catch (error) { + alert("取得失敗"); + // console.error(`${TASK_ERRORS.FETCH_FAILED}:`, error); + } + }; /** * タスクを削除するハンドラー * 指定されたIDのタスクをAPIを通じて削除 */ - const handleDeleteStuffTemp = async (dish_id: number) => { + const handleDeleteStuffTemp = async (stuff_id: number) => { try { - let testDishArrayCopy = [...testDishArray]; // 配列をコピー - testDishArrayCopy.splice(dish_id, 1); - setTestDishArray(testDishArrayCopy); + let stuffCopy = [...stuff]; // 配列をコピー + stuffCopy.splice(stuff_id, 1); + setStuff(stuff); // fetchTasks(); // 削除後のタスク一覧を再取得 } catch (error) { // console.error(`${TASK_ERRORS.DELETE_FAILED}:`, error); @@ -133,8 +184,8 @@ const DishList: React.FC = () => { const fetchTasks = async () => { try { - // const dishlistfirst = await recipeApi.getAllRecipes(); - // setAllDish(dishlistfirst); + const dishlistfirst = await recipeApi.getAllRecipes(); + setAllDish(dishlistfirst); } catch (error) { alert("取得失敗"); // console.error(`${TASK_ERRORS.FETCH_FAILED}:`, error); @@ -164,7 +215,7 @@ const DishList: React.FC = () => { boxShadow: 1, fontSize: '40px' }} - onClick={() => setOpenDialog(true)} + onClick={() => openStuffDialog(allDish.recipeId)} > {allDish.recipeName} {/* タスクのタイトルと説明 - 完了状態に応じて取り消し線を表示 */} @@ -207,34 +258,31 @@ const DishList: React.FC = () => { fullWidth > - 料理名 + {selectedDishName} {/* */} - {/* タスク一覧をマップして各タスクをリストアイテムとして表示 */} - {test.map((test, index) => ( - - // - // {/* タスクのタイトルと説明 - 完了状態に応じて取り消し線を表示 */} - // - // + {/* 食材をマップして各食材をリストアイテムとして表示 */} + {stuff.map((stuff, stuffId) => ( + + {/* タスクのタイトルと説明 - 完了状態に応じて取り消し線を表示 */} + + ))} {/* */} @@ -253,14 +301,14 @@ const DishList: React.FC = () => { fullWidth > - 料理名 + {selectedDishName} {/* */} {/* タスク一覧をマップして各タスクをリストアイテムとして表示 */} - {testDishArray.map((test, id) => ( + {stuff.map((stuff, stuffId) => ( { /> */} {/* タスクのタイトルと説明 - 完了状態に応じて取り消し線を表示 */} {/* 食材の個数を表示 */} 個数
- {test.summary} + {stuff.amount} } // secondary={task.description} @@ -294,7 +342,7 @@ const DishList: React.FC = () => { changeSelectedItemAmount(test, test.recipeName, test.summary)} + onClick={() => changeSelectedItemAmount(stuff, stuff.stuffName, stuff.amount)} > @@ -317,7 +365,7 @@ const DishList: React.FC = () => { handleDeleteStuffTemp(id)} + onClick={() => handleDeleteStuffTemp(stuffId)} >