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

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