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.
 
 
 
 
 
joint_exc/frontend/src/pages/RecipeList.tsx

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;