APIとの統合(不具合あり)

backend/src/main/java/com/example/todoapp/config/InitTables.java

@@ -43,11 +43,11 @@ public class InitTables {
     @PostConstruct
     public void initTables() {
         
-        // tobuysRepository.deleteAll(); //データを残す場合はコメントアウト
+        tobuysRepository.deleteAll(); //データを残す場合はコメントアウト
-        // stocksRepository.deleteAll(); //データを残す場合はコメントアウト
+        stocksRepository.deleteAll(); //データを残す場合はコメントアウト
-        // recipeStuffsRepository.deleteAll(); //データを残す場合はコメントアウト
+        recipeStuffsRepository.deleteAll(); //データを残す場合はコメントアウト
-        // recipesRepository.deleteAll(); //データを残す場合はコメントアウト
+        recipesRepository.deleteAll(); //データを残す場合はコメントアウト
-        // stuffsRepository.deleteAll(); //データを残す場合はコメントアウト
+        stuffsRepository.deleteAll(); //データを残す場合はコメントアウト
 
         if (stuffsRepository.count() > 0) {
             return; // すでにデータが存在する場合は何もしない

frontend/src/pages/DishList.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { toBuyApi } from '../services/api';
+import { toBuyApi, recipeApi } from '../services/api';
 import { 
   Container,
   Typography,
@@ -44,21 +44,29 @@ const DishList: React.FC = () => {
     const test = [1,2,3,4,5,6,7,8,9,0,1,2,3,4,5,6,7,8,9,0,1,2,3,4,5,6,7,8,9,0,1];
     // APIができるまでのテスト用の型
     interface Dish {
-        id:number,
+        recipeId: number,
-        name:string,
+        recipeName: string,
-        amount:number
+        summary: number
     }
+    
     // APIができるまでの食材配列
     const testdish : Dish[] = [
-        { id: 1, name: 'ジャガイモ', amount:1 },
+        { recipeId: 1, recipeName: 'ジャガイモ', summary:1 },
-        { id: 2, name: '人参', amount:2 },
+        { recipeId: 2, recipeName: '人参', summary:2 },
-        { id: 3, name: '人参', amount:2 },
+        { recipeId: 3, recipeName: '人参', summary:2 },
-        { id: 4, name: '人参', amount:2 }
+        { recipeId: 4, recipeName: '人参', summary:2 }
     ];
     
+    // interface testdish {
+    //     recipeId: number,
+    //     recipeName: string,
+    //     summary: number
+    // }
+
+    // すべての料理リスト
+    const [allDish, setAllDish] = useState<Dish[]>();
     // 画面表示用の食材情報配列
     const [testDishArray, setTestDishArray] = useState<Dish[]>(testdish);
-
     // エラーメッセージの状態管理
     const [error, setError] = useState(false);
     // 選択した料理の情報を表示するダイアログの表示状態
@@ -112,9 +120,10 @@ const DishList: React.FC = () => {
 
     const fetchTasks = async () => {
         try {
-            const tobuys = await toBuyApi.getToBuys();
+            const dishlistfirst = await recipeApi.getAllRecipes();
-            setToBuys(tobuys);
+            setAllDish(dishlistfirst);
         } catch (error) {
+            alert("取得失敗");
             // console.error(`${TASK_ERRORS.FETCH_FAILED}:`, error);
         }
     };
@@ -128,13 +137,13 @@ const DishList: React.FC = () => {
                     overflowY: 'auto', padding: '20px'}}>
                     {/* <List> */}
                         {/* タスク一覧をマップして各タスクをリストアイテムとして表示 */}
-                        {test.map((test, index) => (
+                        {allDish && allDish.map((allDish, recipeId) => (
                             <FormGroup>
 
                             
                             <Button 
                             // <ListItem 
-                                key={index}
+                                key={recipeId}
                                 sx={{
                                     bgcolor: 'background.paper',
                                     mb: 1,
@@ -144,7 +153,7 @@ const DishList: React.FC = () => {
                                 }}
                                 onClick={() => setOpenDialog(true)}
                             >
-                                {test}
+                                {allDish.recipeName}
                                 {/* タスクのタイトルと説明 - 完了状態に応じて取り消し線を表示 */}
                                 {/* <ListItemText
                                 primary={test}
@@ -173,7 +182,7 @@ const DishList: React.FC = () => {
                         <Fab
                           color="primary"
                           sx={{ position: 'fixed', bottom: 106, left: '60%', transform: 'translateX(-50%)' }}
-                          onClick={() => setOpenDialog(true)}
+                          onClick={() => fetchTasks()}
                         >
                           <SoupKitchenIcon />
                         </Fab>
@@ -253,14 +262,14 @@ const DishList: React.FC = () => {
                                 /> */}
                                 {/* タスクのタイトルと説明 - 完了状態に応じて取り消し線を表示 */}
                                 <ListItemText
-                                    primary={test.name}
+                                    primary={test.recipeName}
                                     // secondary={task.description}
                                     sx={{width: '80%'}}
                                 />
                                 {/* 食材の個数を表示 */}
                                 <ListItemText
                                     primary={<Typography style={{textAlign:"center"}}>個数<br />
-                                    {test.amount}
+                                    {test.summary}
                                     </Typography>
                                     }
                                     // secondary={task.description}
@@ -365,14 +374,14 @@ const DishList: React.FC = () => {
                                 /> */}
                                 {/* タスクのタイトルと説明 - 完了状態に応じて取り消し線を表示 */}
                                 <ListItemText
-                                    primary={test.name}
+                                    primary={test.recipeName}
                                     // secondary={task.description}
                                     sx={{width: '80%'}}
                                 />
                                 {/* 食材の個数を表示 */}
                                 <ListItemText
                                     primary={<Typography style={{textAlign:"center"}}>個数<br />
-                                    {test.amount}
+                                    {test.summary}
                                     </Typography>
                                     }
                                     // secondary={task.description}