Доработка фронта

front/src/app/pages/cocktails/CocktailMenuBarPage.js

@@ -16,6 +16,7 @@ import {requests} from "../../../requests";
 import {api} from "../../../lib/clients/api";
 import {useAlert} from "../../../hooks/useAlert";
 import {CocktailInfoModal} from "../../../components/cocktails/CocktailInfoModal";
+import {useSelect} from "../../../hooks/useSelect";
 
 export function CocktailMenuBarPage() {
     const {createError} = useAlert();
@@ -25,6 +26,7 @@ export function CocktailMenuBarPage() {
     const [cocktails, setCocktails] = useState([]);
     const [openModal, setOpenModal] = useState(false);
     const [selected, setSelected] = useState(null);
+    const {setCocktail, openCocktail, state, getOpenCocktail} = useSelect();
 
     useEffect(() => {
         api().get(`${requests.cocktails.menu}?all=true`)
@@ -38,8 +40,10 @@ export function CocktailMenuBarPage() {
 
 
     const handleOpenModal = (row) => {
-        setSelected(row)
-        setOpenModal(true);
+        setCocktail(row);
+        openCocktail();
+        // setSelected(row)
+        // setOpenModal(true);
     }
     const changeHandler = (row, value) => {
         const newState = cocktails.map((r) => {
@@ -117,7 +121,7 @@ export function CocktailMenuBarPage() {
             {/*Загрузчик*/}
             <Loading loading={loading}/>
             {/*Модальное окно информации об ингредиенте*/}
-            <CocktailInfoModal open={openModal} row={selected}
+            <CocktailInfoModal open={state.openCocktail} row={state.cocktail}
                                closeHandler={() => {
                                    setSelected(null);
                                    setOpenModal(false);

front/src/app/pages/cocktails/CocktailsPageContent.js

@@ -18,6 +18,7 @@ import {getComparator} from "../../../components/core/getComparator";
 import Button from "@mui/material/Button";
 import Paper from "@mui/material/Paper";
 import CheckMarks from "../../../components/cocktails/CheckMarks";
+import {useSelect} from "../../../hooks/useSelect";
 
 const filterList = (rows, filter, allowIngredients) => {
     let regExp = new RegExp("(.*?)" + filter.search + "(.*?)", "i");
@@ -86,14 +87,14 @@ const CocktailsPageContent = ({all}) => {
     const [allowIngredients, setAllowIngredients] = useState([])
     const [rows, setRows] = useState([]);
     const [filter, setFilter] = useState(emptyFilter)
-    const [open, setOpen] = useState(false);
-    const [selectedCocktail, setSelectedCocktail] = useState(null)
     const [chips, setChips] = useState([])
     const [page, setPage] = useState(-1);
     const [load, setLoad] = useState(false);
     const [isEnd, setIsEnd] = useState(false);
     const [isNew, setIsNew] = useState(true);
 
+    const {selectCocktail, getCocktail, getOpenCocktail} = useSelect();
+
     const loading = useCallback(() => {
         const size = Math.floor((window.innerWidth) / 350) * 5;
         if (load || (!isNew && isEnd)) {
@@ -230,12 +231,9 @@ const CocktailsPageContent = ({all}) => {
         setFilter(emptyFilter);
     }
     const handleSelectCocktail = (row) => {
-        setSelectedCocktail(row.id)
-        setOpen(true)
-    }
-    const handleCloseCocktailModal = () => {
-        setOpen(false);
-        setSelectedCocktail(null);
+        selectCocktail(row.id)
+        // setSelectedCocktail(row.id)
+        // setOpen(true)
     }
     const handleEditMenu = (row, value) => {
         const newState = rows.map((r) => {
@@ -271,8 +269,7 @@ const CocktailsPageContent = ({all}) => {
         <Box>
             {/*<Loading loading={load}/>*/}
             {/*Модальное окно информации о коктейле*/}
-            <CocktailInfoModal row={selectedCocktail} open={open}
-                               closeHandler={handleCloseCocktailModal}/>
+            <CocktailInfoModal row={getCocktail()} open={getOpenCocktail()}/>
             {/*Блок фильтров*/}
             <FilterBlock
                 filter={filter}

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

@@ -19,6 +19,7 @@ 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() {
     const [value, setValue] = React.useState(0);
@@ -27,8 +28,7 @@ export function IngredientsPage() {
     const [loading, setLoading] = useState(true);
     const [findString, setFindString] = useState("");
     const [ingredients, setIngredients] = useState([]);
-    const [openModal, setOpenModal] = useState(false);
-    const [selectedInfo, setSelectedInfo] = useState(null);
+    const {getIngredient, selectIngredient} = useSelect();
     const {createError} = useAlert();
 
     useEffect(() => {
@@ -76,12 +76,7 @@ export function IngredientsPage() {
             });
     }
     const handleOpenModal = (i) => {
-        setOpenModal(true);
-        setSelectedInfo(i);
-    }
-    const handleCloseModal = () => {
-        setSelectedInfo(null);
-        setOpenModal(false);
+        selectIngredient(i)
     }
 
     return (
@@ -147,7 +142,7 @@ export function IngredientsPage() {
             {/*Загрузчик*/}
             <Loading loading={loading}/>
             {/*Модальное окно информации об ингредиенте*/}
-            <IngredientInfoModal ingredient={selectedInfo} open={openModal} closeHandler={handleCloseModal}/>
+            <IngredientInfoModal ingredient={getIngredient()}/>
         </Box>
     )
 }