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

front/src/components/BarCreateModal.js

@@ -0,0 +1,39 @@
+import Dialog from "@mui/material/Dialog";
+import DialogTitle from "@mui/material/DialogTitle";
+import * as React from "react";
+import Typography from "@mui/material/Typography";
+import DialogContent from "@mui/material/DialogContent";
+import DialogActions from "@mui/material/DialogActions";
+import Button from "@mui/material/Button";
+import {useState} from "react";
+import TextField from "@mui/material/TextField";
+
+export function BarCreateModal({open, close, create}) {
+    const [value, setValue] = useState("");
+    return (
+        <Dialog fullWidth={true}
+                open={open} onClose={close}
+                sx={{
+                    '& .MuiDialog-paper': {
+                        margin: '8px',
+                    },
+                    '& .MuiPaper-root': {
+                        width: 'calc(100% - 16px)',
+                    }
+                }}>
+            <DialogTitle>
+                <Typography>Создать список</Typography>
+            </DialogTitle>
+            <DialogContent>
+                <TextField sx={{width: '75%'}}
+                           label={"Название списка"} variant='outlined'
+                           value={!value ? "" : value}
+                           onChange={(e) => setValue(e.target.value)}
+                />
+            </DialogContent>
+            <DialogActions>
+                <Button onClick={() => create(value)}>Создать</Button>
+            </DialogActions>
+        </Dialog>
+    )
+}

front/src/components/cocktails/Cocktail.js

@@ -11,6 +11,7 @@ import EditIcon from '@mui/icons-material/Edit';
 import DeleteIcon from '@mui/icons-material/Delete';
 import LocalBarIcon from '@mui/icons-material/LocalBar';
 import {paths} from "../../path";
+import {useAlert} from "../../hooks/useAlert";
 
 function renderFavouriteBadge(handleFavourite, row) {
     const childIcon = row.rating.favourite ? <FavoriteIcon/> : <FavoriteBorderIcon/>;
@@ -33,6 +34,7 @@ function renderRating(handleChangeRating, row) {
 }
 
 export function Cocktail({row, handleFavourite, handleChangeRating, handleSelect, deleteHandler}) {
+    const {notImplement} = useAlert();
     return (
         <Grid item sx={{pr: 2}}>
             <CocktailItemStyled>
@@ -55,24 +57,23 @@ export function Cocktail({row, handleFavourite, handleChangeRating, handleSelect
                         image={row.image.includes("thecocktaildb") ? (row.image + "/preview") : row.image}
                     />
                     <CardActions>
-                        <IconButton sx={{m: 0}} size='small'>
+                        <IconButton sx={{m: 0}} size='small' onClick={() => notImplement()}>
                             <LocalBarIcon fontSize='small'/>
                         </IconButton>
                         {renderFavouriteBadge(handleFavourite, row)}
                         {renderRating(handleChangeRating, row)}
 
-                        <IconButton size={'small'} href={`${paths.bar.cocktailEdit}?id=${row.id}`}>
-                            <EditIcon fontSize={'small'}/>
+                        <IconButton size='small' href={`${paths.bar.cocktailEdit}?id=${row.id}`}>
+                            <EditIcon fontSize='small'/>
                         </IconButton>
-                        <IconButton size={'small'} onClick={() => deleteHandler(row)}>
-                            <DeleteIcon fontSize={'small'}/>
+                        <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>
                         <CocktailDescription row={row}/>
                     </CardContent>
-
                 </Box>
             </CocktailItemStyled>
         </Grid>