добавлена работа со списками продуктов, попытка оптимизировать запрос по поиску коктейлей

front/src/components/Ingredients/IngredientAlert.js

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import Button from '@mui/material/Button';
+import Dialog from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogContentText from '@mui/material/DialogContentText';
+import DialogTitle from '@mui/material/DialogTitle';
+
+export function IngredientAlert({open, handleClose, handleDelete, id, handleCloseParent}) {
+    return (
+        <React.Fragment>
+            <Dialog
+                open={open}
+                onClose={handleClose}
+                aria-labelledby="Предупреждение об удалении"
+                aria-describedby="alert-dialog-description"
+            >
+                <DialogTitle id="alert-dialog-title">
+                    {"Вы готовы удалить ингредиент?"}
+                </DialogTitle>
+                <DialogContent>
+                    <DialogContentText id="alert-dialog-description">
+                        После удаления ингредиента, удаляться все рецепты и коктейли связанные с ним!
+                    </DialogContentText>
+                </DialogContent>
+                <DialogActions>
+                    <Button onClick={handleClose}>Отмена</Button>
+                    <Button color='error' onClick={() => {
+                        handleClose();
+                        handleCloseParent();
+                        handleDelete(id)
+                    }} autoFocus>
+                        Удалить
+                    </Button>
+                </DialogActions>
+            </Dialog>
+        </React.Fragment>
+    );
+}

front/src/components/Ingredients/IngredientInfoModal.js

@@ -13,11 +13,19 @@ import {requests} from "../../requests";
 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";
 
-export function IngredientInfoModal({ingredient}) {
+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(() => {
         if(!ingredient) {
@@ -72,8 +80,10 @@ export function IngredientInfoModal({ingredient}) {
                 )}
             </DialogContent>
             <DialogActions>
-                <Button onClick={closeIngredient}>Close</Button>
+                {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>
     );
 }

front/src/components/cocktails/Cocktail.js

@@ -12,6 +12,7 @@ import DeleteIcon from '@mui/icons-material/Delete';
 import LocalBarIcon from '@mui/icons-material/LocalBar';
 import {paths} from "../../path";
 import {useAlert} from "../../hooks/useAlert";
+import {useUser} from "../../hooks/useUser";
 
 function renderFavouriteBadge(handleFavourite, row) {
     const childIcon = row.rating.favourite ? <FavoriteIcon/> : <FavoriteBorderIcon/>;
@@ -35,6 +36,7 @@ function renderRating(handleChangeRating, row) {
 
 export function Cocktail({row, handleFavourite, handleChangeRating, handleSelect, deleteHandler}) {
     const {notImplement} = useAlert();
+    const {user} = useUser();
     return (
         <Grid item sx={{pr: 2}}>
             <CocktailItemStyled>
@@ -63,12 +65,17 @@ export function Cocktail({row, handleFavourite, handleChangeRating, handleSelect
                         {renderFavouriteBadge(handleFavourite, row)}
                         {renderRating(handleChangeRating, row)}
 
-                        <IconButton size='small' href={`${paths.bar.cocktailEdit}?id=${row.id}`}>
-                            <EditIcon fontSize='small'/>
-                        </IconButton>
-                        <IconButton size='small' onClick={() => deleteHandler(row)}>
-                            <DeleteIcon fontSize='small'/>
-                        </IconButton>
+                        {user.role !== 'USER' &&
+                            <>
+                                <IconButton size='small' href={`${paths.bar.cocktailEdit}?id=${row.id}`}>
+                                    <EditIcon fontSize='small'/>
+                                </IconButton>
+                                <IconButton size='small' onClick={() => deleteHandler(row)}>
+                                    <DeleteIcon fontSize='small'/>
+                                </IconButton>
+                            </>
+
+                        }
                     </CardActions>
                     <CardContent sx={{pb: 0, pl: 2, pt: 0}}>
                         <Typography variant="h5" minHeight={'50px'} mt={2}>{row.name} </Typography>

front/src/components/core/UserPopover.js

@@ -86,7 +86,6 @@ function userDescriptor(user, session) {
         <>
             <Typography variant="subtitle1">{user.name + " " + user.lastName}</Typography>
             <Typography color="text.secondary" variant="body2">{user.id}</Typography>
-            <Typography color="text.secondary" variant="body2">{`Бар ${open}`}</Typography>
         </>
     );
 }