You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
117 lines
3.2 KiB
117 lines
3.2 KiB
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';
|
|
import { useMessage } from '../components/MessageContext';
|
|
import { RECIPE_ERRORS } from '../constants/errorMessages';
|
|
|
|
const RecipeList: React.FC = () => {
|
|
const navigate = useNavigate();
|
|
// 料理リストの料理名を格納する配列
|
|
|
|
const { showErrorMessage } = useMessage();
|
|
|
|
// すべての料理リスト
|
|
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) {
|
|
showErrorMessage(RECIPE_ERRORS.FETCH_FAILED);
|
|
// 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: "64px" }}>
|
|
<Button variant='contained' sx={{
|
|
width: "60%", height: "60px",
|
|
fontSize: "32px", left: "50%", transform: 'translateX(-50%)'
|
|
}}
|
|
color="primary"
|
|
onClick={() => navigate('/addRecipe')}
|
|
>
|
|
新しい料理を追加
|
|
</Button>
|
|
</div>
|
|
</Box>
|
|
|
|
</Container>
|
|
);
|
|
};
|
|
|
|
export default RecipeList; |