wip AddByRecipeDialog

frontend/src/components/AddByRecipeDialog.tsx

@@ -0,0 +1,72 @@
+import React, { useState } from 'react';
+import {
+    Dialog,
+    DialogTitle,
+    DialogContent,
+    DialogActions,
+    Button,
+    Box,
+} from '@mui/material';
+
+import { recipeApi } from '../services/api';
+
+import CloseIcon from '@mui/icons-material/Close';
+import { StuffNameAndAmount } from '../types/types';
+
+const AddByRecipeDialog = async ({
+    openDialog,
+    setOpenDialog,
+    recipeId
+}: {
+    openDialog: boolean,
+    setOpenDialog: (open: boolean) => void,
+    recipeId: number,
+}) => {
+    const recipe = await recipeApi.getById(recipeId);
+
+    return (
+        <Dialog open={openDialog} onClose={() => setOpenDialog(false)} disableScrollLock={true} PaperProps={{ sx: { minWidth: '300px', maxHeight: '80vh' } }}>
+            <DialogTitle sx={{ m: 0, p: 2, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+
+                買うものリストへ追加
+                <CloseIcon
+                    onClick={() => setOpenDialog(false)}
+                    sx={{
+                        cursor: 'pointer',
+                        color: (theme) => theme.palette.grey[500],
+                    }}
+                />
+            </DialogTitle>
+            <DialogContent dividers sx={{ padding: 2 }}>
+                <div>
+                    <strong>レシピ名:</strong> {recipe.recipeName}
+                </div>
+                <div>
+                    ({recipe.maxservings})
+                </div>
+                <div>
+                    <strong>材料:</strong>
+                    <ul>
+                        {recipe.stuffNameAndAmountList.map((item, index) => (
+                            <li key={index}>
+                                {item.stuffName} - {item.amount}個
+                            </li>
+                        ))}
+                    </ul>
+                </div>
+                
+                {/* レシピを追加する人数分を入力 */}
+
+                <div>
+                    <strong>材料を買うものリストに追加します。</strong>
+                </div>
+            </DialogContent>
+
+            <DialogActions>
+                <button onClick={() => setOpenDialog(false)}>閉じる</button>
+            </DialogActions>
+        </Dialog>
+    );
+}
+
+export default AddByRecipeDialog;

frontend/src/pages/RecipeList.tsx

@@ -31,6 +31,7 @@ import {
   SoupKitchen as SoupKitchenIcon, Close as CloseIcon, TaskAlt as TaskAltIcon
 } from '@mui/icons-material';
 import { ToBuy, Stuff, RecipeWithId, RecipeDetail } from '../types/types';
+import AddByRecipeDialog from '../components/AddByRecipeDialog';
 import { useMessage } from '../components/MessageContext';
 
 const RecipeList: React.FC = () => {
@@ -48,6 +49,10 @@ const RecipeList: React.FC = () => {
   // すべての料理リスト
   const [allRecipes, setAllRecipes] = useState<RecipeWithId[]>([EMPTY_RECIPEWITHID, EMPTY_RECIPEWITHID]);
 
+  const [openAddByRecipeDialog, setOpenAddByRecipeDialog] = useState(false);
+  
+  const [addByRecipeId, setAddByRecipeId] = useState(0);
+
   const openRecipeById = (recipeId: number) => {
     navigate('/addRecipe/' + recipeId);
   }
@@ -70,6 +75,7 @@ const RecipeList: React.FC = () => {
   }, []);
 
   return (
+    <>
     <Container>
       <Box>
         <div>
@@ -95,8 +101,11 @@ const RecipeList: React.FC = () => {
                   boxShadow: 1,
                   fontSize: '40px'
                 }}
-                onClick={() => openRecipeById(recipe.recipeId)}
-              >
+                onClick = {() => 
+                  {setAddByRecipeId(recipe.recipeId)
+                  setOpenAddByRecipeDialog(true)}
+                  }
+                  >
                 {recipe.recipeName}
                 {recipe.maxServings === 0 && <FormGroup row><CloseIcon 
                   style={{fontSize:"3vw", position: "absolute", right:'10%', transform: 'translateY(-50%)', color: "tomato"}}
@@ -161,8 +170,15 @@ const RecipeList: React.FC = () => {
           </Button> */}
         </div>
       </Box>
-
     </Container>
+
+    
+      {/* 買うものリストへ追加ダイアログ */}
+      {
+        <AddByRecipeDialog openDialog={openAddByRecipeDialog} setOpenDialog={setOpenAddByRecipeDialog}
+          recipeId = { addByRecipeId}/>
+      }
+    </>
   );
 };