料理レシピが動くように修正

4 months ago · 4279750e3b
parent b8e7a4ed1d
commit 4279750e3b
8 changed files with 158 additions and 31 deletions
--- a/backend/src/main/java/com/example/todoapp/config/InitTables.java
+++ b/backend/src/main/java/com/example/todoapp/config/InitTables.java
@ -43,11 +43,11 @@ public class InitTables {
    @PostConstruct
    public void initTables() {
        
-        tobuysRepository.deleteAll(); //データを残す場合はコメントアウト
-        stocksRepository.deleteAll(); //データを残す場合はコメントアウト
-        recipeStuffsRepository.deleteAll(); //データを残す場合はコメントアウト
-        recipesRepository.deleteAll(); //データを残す場合はコメントアウト
-        stuffsRepository.deleteAll(); //データを残す場合はコメントアウト
+        // tobuysRepository.deleteAll(); //データを残す場合はコメントアウト
+        // stocksRepository.deleteAll(); //データを残す場合はコメントアウト
+        // recipeStuffsRepository.deleteAll(); //データを残す場合はコメントアウト
+        // recipesRepository.deleteAll(); //データを残す場合はコメントアウト
+        // stuffsRepository.deleteAll(); //データを残す場合はコメントアウト

        if (stuffsRepository.count() > 0) {
            // すでにデータが存在する場合は何もしない
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@ -13,7 +13,7 @@ import StockPage from './pages/StockPage';
 import './App.css';
 // 必要なインポートを追加
 import AddRecipe from './pages/AddRecipe';
-import DishList from './pages/DishList';
+import RecipeList from './pages/RecipeList';
 //カレンダーライブラリ
 import FullCalendar from '@fullcalendar/react';
 import dayGridPlugin from "@fullcalendar/daygrid";
@ -110,10 +110,10 @@ const App: React.FC = () => {
              />
              {/* 料理リストへのルートを追加 */}
              <Route
-                path="dishList"
+                path="recipeList"
                element={
                  <PrivateRoute>
-                    <DishList />
+                    <RecipeList />
                  </PrivateRoute>
                }
              />
--- a/frontend/src/components/Layout.tsx
+++ b/frontend/src/components/Layout.tsx
@ -112,8 +112,8 @@ const Layout: React.FC = () => {
              <ListItemText primary="料理の追加" />
            </ListItemButton>
            <ListItemButton 
-              onClick={() => handleNavigate('/dishList')} 
-              selected={isSelected('/dishList')}
+              onClick={() => handleNavigate('/recipeList')} 
+              selected={isSelected('/recipeList')}
            >
              <ListItemIcon><ScienceIcon /></ListItemIcon>
              <ListItemText primary="料理リスト" />
--- a/frontend/src/pages/AddRecipe.tsx
+++ b/frontend/src/pages/AddRecipe.tsx
@ -68,7 +68,6 @@ const AddRecipe: React.FC = () => {
      setItems(recipe.stuffAndAmountArray)
    }
  }
-  loadRecipe();

  const handleSaveRecipe = async () => {

@ -93,17 +92,23 @@ const AddRecipe: React.FC = () => {
  }

  const handleSubmit = async () => {
-    const recipeId = await handleSaveRecipe()
-    alert('レシピが保存されました！') // 仮メッセージ
-    // navigate('/tasks');
+    const recipeId = await handleSaveRecipe();
+    // alert('レシピが保存されました！');
+    navigate('/recipeList');
  }

  const handleSubmitAndAddToBuy = async () => {
    const recipeId = await handleSaveRecipe();
-    await toBuyApi.addByRecipe(recipeId)
-    navigate('/tasks')
+    await toBuyApi.addByRecipe(recipeId);
+    // alert('レシピが保存されて買うものリストに追加されました！');
+    navigate('/tasks');
  }

+  // コンポーネントマウント時にタスク一覧を取得
+  useEffect(() => {
+    loadRecipe();
+  }, []);
+
  return (
    (recipeId && !recipeName)
      ? <p>読み込み中...</p>
@ -117,11 +122,13 @@ const AddRecipe: React.FC = () => {
          <TextField autoFocus margin="dense" label="料理名" fullWidth
            value={recipeName} onChange={(e) => setRecipeName(e.target.value)}
          />
-          <TextField autoFocus margin="dense" label="説明" fullWidth
+          <TextField margin="dense" label="説明" fullWidth
            value={recipeSummary} onChange={(e) => setRecipeSummary(e.target.value)}
          />
        </div>
-        <h2>材料リスト</h2>
+        <h2 style={{marginTop: "0.5em" }}>
+          材料リスト
+        </h2>
        {/* すべての材料情報を表示 */}
        {(!items || !items.length)
          ? (<p>+ボタンで材料を追加してください</p>)
--- a/frontend/src/pages/RecipeList.tsx
+++ b/frontend/src/pages/RecipeList.tsx
@ -0,0 +1,113 @@
+import React, { useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { recipeApi } from '../services/api';
+import {
+  Container,
+  Typography,
+  Tooltip,
+  List,
+  ListItem,
+  ListItemText,
+  ListItemSecondaryAction,
+  IconButton,
+  Checkbox,
+  Fab,
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogActions,
+  TextField,
+  Button,
+  Box,
+  FormControlLabel,
+  FormGroup,
+  MenuItem,
+  Select,
+  FormControl,
+  InputLabel
+} from '@mui/material';
+import {
+  Add as AddIcon, Delete as DeleteIcon, ShoppingBasket as ShoppingBasketIcon,
+  SoupKitchen as SoupKitchenIcon
+} from '@mui/icons-material';
+import { ToBuy, Stuff, RecipeWithId, RecipeDetail } from '../types/types';
+
+const RecipeList: React.FC = () => {
+  const navigate = useNavigate();
+  // 料理リストの料理名を格納する配列
+
+  // すべての料理リスト
+  const [allRecipes, setAllRecipes] = useState<RecipeWithId[]>();
+
+  const openRecipeById = (recipeId: number) => {
+    navigate('/addRecipe/' + recipeId);
+  }
+  
+  const fetchAllRecipes = async () => {
+    try {
+      const recipes = await recipeApi.getAllRecipes();
+      setAllRecipes(recipes);
+    } catch (error) {
+      alert("レシピの取得に失敗しました．");
+      // console.error(`${TASK_ERRORS.FETCH_FAILED}:`, error);
+    }
+  };
+
+  // コンポーネントマウント時にタスク一覧を取得
+  useEffect(() => {
+    fetchAllRecipes();
+  }, []);
+
+  return (
+    <Container>
+      <Box>
+        <div>
+          <h1 style={{ fontSize: "40px", textAlign: "center" }}>料理リスト</h1>
+        </div>
+        <div style={{
+          border: '3px solid black', borderRadius: '8px', height: '500px',
+          overflowY: 'auto', padding: '20px'
+        }}>
+          {/* <List> */}
+          {/* 料理一覧をマップして各タスクをリストアイテムとして表示 */}
+          {!allRecipes
+          ? <p>読み込み中...</p>
+          : allRecipes.map((recipe, index) => (
+            <FormGroup>
+              <Button
+                // <ListItem 
+                key={recipe.recipeId}
+                sx={{
+                  bgcolor: 'background.paper',
+                  mb: 1,
+                  borderRadius: 1,
+                  boxShadow: 1,
+                  fontSize: '40px'
+                }}
+                onClick={() => openRecipeById(recipe.recipeId)}
+              >
+                {recipe.recipeName}
+              </Button>
+            </FormGroup>
+            // </ListItem>
+          ))}
+          {/* </List> */}
+        </div>
+        <div style={{ width: "100%", position: "fixed", left: "50%", transform: 'translateX(-50%)', bottom: "20px" }}>
+          <Button variant='contained' sx={{
+            width: "60%", height: "60px",
+            fontSize: "40px", left: "50%", transform: 'translateX(-50%)'
+          }}
+            color="primary"
+            onClick={() => navigate('/AddRecipe')}
+          >
+            新しい料理を追加
+          </Button>
+        </div>
+      </Box>
+
+    </Container>
+  );
+};
+
+export default RecipeList;
--- a/frontend/src/pages/TaskListPage.tsx
+++ b/frontend/src/pages/TaskListPage.tsx
@ -25,6 +25,7 @@ import { TOBUY_ERRORS } from '../constants/errorMessages';
 import EditAmountDialog from '../components/EditAmountDialog';
 import AddStuffAmountDialog from '../components/AddStuffAmountDialog';
 import BuyDialog from '../components/BuyDialog';
+import { useNavigate } from 'react-router-dom';
 //import { FaCarrot } from "react-icons/fa6";　//エラー起きる　いったん保留


@ -39,6 +40,9 @@ const EMPTY_TOBUY: NewToBuy = {
 }

 const TaskListPage: React.FC = () => {
+
+  const navigate = useNavigate();
+
  // タスク一覧の状態管理
  const [tobuys, setToBuys] = useState<ToBuy[]>([]);

@ -289,8 +293,8 @@ const TaskListPage: React.FC = () => {
        color="primary"
        sx={{ position: 'fixed', bottom: 16, left: '60%', transform: 'translateX(-50%)' }}
        onClick={() => {
-          setOpenAddToBuyDialog(true);
-          //handleNavigate('/AddDishies1');
+          // setOpenAddToBuyDialog(true);
+          navigate('/RecipeList');
        }}
      //selected={isSelected('/test')}
      >
--- a/frontend/src/services/api.ts
+++ b/frontend/src/services/api.ts
@ -3,7 +3,7 @@
 * バックエンドAPIとの通信を担当するモジュール
 * 認証、タスク管理などの機能を提供
 */
-import { LoginCredentials, RegisterCredentials, AuthResponse, /* Task, */ ToBuy, Stuff, Stock, RecipeData, StuffAndCategoryAndAmount } from '../types/types';
+import { LoginCredentials, RegisterCredentials, AuthResponse, /* Task, */ ToBuy, Stuff, Stock, RecipeDetail, StuffAndCategoryAndAmount, RecipeWithId } from '../types/types';
 import { AUTH_ERRORS, TOBUY_ERRORS, STOCK_ERRORS, RECIPE_ERRORS } from '../constants/errorMessages';

 // APIのベースURL - 環境変数から取得するか、デフォルト値を使用
@ -343,7 +343,7 @@ export const recipeApi = {
   * @param recipeData レシピデータ（名前、説明、材料リスト）
   * @returns レシピ追加レスポンス（内联类型）
   */
-  addRecipe: async (recipeData: RecipeData): Promise<{
+  addRecipe: async (recipeData: RecipeDetail): Promise<{
    result: string;
    recipeId: number;
    message: string;
@ -370,7 +370,7 @@ export const recipeApi = {
   * @param recipeData 更新するレシピ情報
   * @returns 更新結果（成功/失敗）
   */
-  updateRecipe: async (recipeData: { recipeId: number } & RecipeData): Promise<{ result: boolean; message: string }> => {
+  updateRecipe: async (recipeData: { recipeId: number } & RecipeDetail): Promise<{ result: boolean; message: string }> => {
    // console.log('recipeData:', recipeData)

    const response = await fetch(`${API_BASE_URL}/api/recipes/update`, {
@ -392,11 +392,7 @@ export const recipeApi = {
   * 全レシピを取得
   * @returns レシピ一覧
   */
-  getAllRecipes: async (): Promise<Array<{
-    recipeId: number;
-    recipeName: string;
-    summary: number;
-  }>> => {
+  getAllRecipes: async (): Promise<RecipeWithId[]> => {
    const response = await fetch(`${API_BASE_URL}/api/recipes/getAll`, {
      method: 'GET',
      headers: getHeaders(), // 認証トークンを含むヘッダー
--- a/frontend/src/types/types.ts
+++ b/frontend/src/types/types.ts
@ -119,13 +119,20 @@ export interface RegisterCredentials {
  password: string; // パスワード
 }

+export interface Recipe {
+  recipeName: string;// レシピ名
+  summary: string;// レシピ概要
+}
+
+export interface RecipeWithId extends Recipe {
+  recipeId: number;
+}
+
 /**
 * レシピ登録用の複合型定義
 * レシピ基本情報と材料リストを統合
 */
-export interface RecipeData {
-  recipeName: string;// レシピ名
-  summary: string;// レシピ概要
+export interface RecipeDetail extends Recipe {

  // 材料リスト（直接配列として内包）
  stuffAndAmountArray: {