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

front/Dockerfile

@@ -1,5 +1,3 @@
 FROM nginx:1.16.0-alpine
-COPY default.conf /etc/nginx/conf.d
-COPY build /usr/share/nginx/html
 EXPOSE 80
 CMD ["nginx", "-g", "daemon off;"]

front/package.json

@@ -41,7 +41,7 @@
   },
   "scripts": {
     "start": "react-scripts start",
-    "build": "CI=false && react-scripts build",
+    "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"
   },

front/src/app/layout/PublicLayout.js

@@ -41,9 +41,6 @@ export function PublicLayout({ children }) {
                                 Добро пожаловать в бар
                             </Box>
                         </Typography>
-                        <Typography align="center" variant="subtitle1">
-                            Самый большой выбор честно спизженных коктейлей
-                        </Typography>
                         <Box
                             component="img"
                             alt="Under development"

front/src/app/pages/ingredients/IngredientsPage.js

@@ -2,7 +2,7 @@ import Box from "@mui/material/Box";
 import Typography from "@mui/material/Typography";
 import Toolbar from "@mui/material/Toolbar";
 import Paper from "@mui/material/Paper";
-import {Fab, FormControl, FormControlLabel, InputAdornment, InputLabel, OutlinedInput, Tabs} from "@mui/material";
+import {Fab, FormControl, InputAdornment, InputLabel, OutlinedInput, Tabs} from "@mui/material";
 import IconButton from "@mui/material/IconButton";
 import SearchIcon from "@mui/icons-material/Search";
 import * as React from "react";
@@ -18,7 +18,6 @@ import {CustomTabPanel} from "../../../components/core/TabPanel";
 import {IngredientList} from "../../../components/Ingredients/IngredientList";
 import {blue} from "@mui/material/colors";
 import UpIcon from "@mui/icons-material/KeyboardArrowUp";
-import Switch from "@mui/material/Switch";
 import {useSelect} from "../../../hooks/useSelect";
 
 export function IngredientsPage() {
@@ -28,7 +27,7 @@ export function IngredientsPage() {
     const [findString, setFindString] = useState("");
     const [ingredients, setIngredients] = useState([]);
     const {getIngredient, selectIngredient} = useSelect();
-    const {createError} = useAlert();
+    const {createError, createSuccess} = useAlert();
 
     useEffect(() => {
         api().get(requests.bar.ingredientList)
@@ -77,6 +76,14 @@ export function IngredientsPage() {
     const handleOpenModal = (i) => {
         selectIngredient(i)
     }
+    const handleDelete = (id) => {
+        const newState = ingredients.filter((ingredient) => ingredient.id !== id);
+        setIngredients(newState)
+
+        api().delete(`${requests.bar.ingredient}/${id}`)
+            .then((r) => createSuccess("Ингредиент удален"))
+            .catch(() => createError("Ошибка удаления ингредиента. Перезагрузите страницу"))
+    }
 
     return (
         <Box>
@@ -136,7 +143,7 @@ export function IngredientsPage() {
             {/*Загрузчик*/}
             <Loading loading={loading}/>
             {/*Модальное окно информации об ингредиенте*/}
-            <IngredientInfoModal ingredient={getIngredient()}/>
+            <IngredientInfoModal ingredient={getIngredient()} handleDelete={handleDelete}/>
         </Box>
     )
 }

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>
         </>
     );
 }

front/src/lib/clients/api.js

@@ -1,9 +1,9 @@
 import axios from "axios";
 import {tokenUtil} from "../TokenUtil";
 
-// const host = "localhost:8080"; //дебаг вместе с беком
+const host = "localhost:8080"; //дебаг вместе с беком
 // const host = "192.168.1.100:8091"; //дебаг фронта
-const host = "bar.kayashov.keenetic.pro"; //прод
+// const host = "bar.kayashov.keenetic.pro"; //прод
 export const api = () => {
     const result = axios;
     result.defaults.baseURL = `${window.location.protocol}//${host}/`;