initial commit

2026-01-30 20:09:37 +04:00
parent f34a7eced5
commit 1c08be1d07
132 changed files with 24439 additions and 0 deletions
--- a/front/src/components/Ingredients/IngredientInfoModal.js
+++ b/front/src/components/Ingredients/IngredientInfoModal.js
@@ -0,0 +1,85 @@
+import Dialog from "@mui/material/Dialog";
+import DialogTitle from "@mui/material/DialogTitle";
+import DialogContent from "@mui/material/DialogContent";
+import DialogActions from "@mui/material/DialogActions";
+import Button from "@mui/material/Button";
+import * as React from "react";
+import {useEffect, useState} from "react";
+import Stack from "@mui/material/Stack";
+import Typography from "@mui/material/Typography";
+import List from "@mui/material/List";
+import {useAlert} from "../../hooks/useAlert";
+import ListItem from "@mui/material/ListItem";
+import {useSelect} from "../../hooks/useSelect";
+import {IngredientAlert} from "./IngredientAlert";
+import {useUser} from "../../hooks/useUser";
+import {cocktailClient} from "../../lib/clients/CocktailClient";
+
+export function IngredientInfoModal({ingredient, handleDelete}) {
+    const {user} = useUser();
+    const [cocktails, setCocktails] = useState([]);
+    const {closeIngredient, getOpenIngredient, selectCocktail} = useSelect();
+    const {createError} = useAlert();
+    const [open, setOpen] = React.useState(false);
+
+    const handleClose = () => {
+        setOpen(false);
+    };
+
+    useEffect(() => {
+        cocktailClient.getCocktailByIngredient(ingredient, setCocktails)
+            .catch(() => createError())
+        // eslint-disable-next-line
+    }, [ingredient]);
+
+    if (!ingredient) {
+        return null;
+    }
+    return (
+        <Dialog fullWidth={true} maxWidth="350px" open={getOpenIngredient()} onClose={closeIngredient}
+                sx={{
+                    '& .MuiDialog-paper': {
+                        margin: '8px',
+                    },
+                    '& .MuiPaper-root': {
+                        width: 'calc(100% - 16px)',
+                    }
+                }}>
+            <DialogTitle>{ingredient.name}</DialogTitle>
+            <DialogContent>
+                <Stack spacing={2} sx={{justifyContent: "center"}}>
+                    <img src={ingredient.image} alt={ingredient.name} loading={"eager"} width={"300"}/>
+                    {ingredient.alcohol && (<Typography>{`Крепость ${ingredient.abv}`}</Typography>)}
+                    <Typography>{ingredient.description}</Typography>
+                </Stack>
+                {cocktails.length > 0 && (
+                    <>
+                        <Typography sx={{mt: 2}}>Коктейли:</Typography>
+                        <List>
+                            {cocktails.map((c) => {
+                                return (
+                                    <ListItem key={c.id} onClick={() => {
+                                        selectCocktail(c.id)
+                                        closeIngredient();
+                                    }}>
+                                        <Stack direction={'row'}>
+                                            <img src={c.image} alt={c.name} loading={"eager"} width={"50"}/>
+                                            <Typography sx={{mx: 1}}>{c.name}</Typography>
+                                            {c.rating.rating > 0 && <Typography> {`${c.rating.rating}/5`}</Typography>}
+                                        </Stack>
+                                    </ListItem>
+                                )
+                            })}
+                        </List>
+                    </>
+                )}
+            </DialogContent>
+            <DialogActions>
+                {user.role !== 'USER' && <Button onClick={() => setOpen(true)}>Удалить</Button>}
+                <Button onClick={closeIngredient}>Закрыть</Button>
+            </DialogActions>
+            <IngredientAlert handleDelete={handleDelete} handleClose={handleClose} open={open} id={ingredient.id}
+                             handleCloseParent={closeIngredient}/>
+        </Dialog>
+    );
+}