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

front/src/components/cocktails/CocktailInfoModal.js

@@ -21,24 +21,20 @@ import {useAlert} from "../../hooks/useAlert";
 import {paths} from "../../path";
 import {Loading} from "../core/Loading";
 import {useUser} from "../../hooks/useUser";
+import {useSelect} from "../../hooks/useSelect";
 
-export function CocktailInfoModal({open, row, closeHandler}) {
+export function CocktailInfoModal({row}) {
     const {user} = useUser();
     const {getError, createError, createSuccess} = useAlert();
     const [cocktail, setCocktail] = useState(null)
     const [loading, setLoading] = useState(false);
-    const [selectedIngredient, setSelectedIngredient] = useState(null);
-    const [openIngredientModal, setOpenIngredientModal] = useState(false)
-    const closeIngredientHandler = () => {
-        setOpenIngredientModal(false);
-        setSelectedIngredient(null);
-    }
+    const {closeCocktail, selectIngredient, getIngredient, getOpenCocktail} = useSelect();
     const openIngredientModalHandler = (id) => {
         api().get(`${requests.bar.ingredient}?id=${id}`)
             .then((r) => {
-                setSelectedIngredient(r.data)
-                setOpenIngredientModal(true);
-            }).catch(() => createError("Ошибка получения информации об ингредиенте"))
+                selectIngredient(r.data)
+            })
+            .catch(() => createError("Ошибка получения информации об ингредиенте"))
     }
     const selectIngredientHandler = (ingredient) => {
         const url = `${requests.bar.ingredient}?id=${ingredient.id}`;
@@ -79,18 +75,17 @@ export function CocktailInfoModal({open, row, closeHandler}) {
             .catch(() => {
                 getError();
                 setLoading(false)
-                closeHandler();
+                closeCocktail();
             })
+        // eslint-disable-next-line
     }, [row]);
 
     if (!row || !cocktail) {
         return null;
     }
-    let alko = 0;
-    let volume = 0;
     return (
         <Dialog fullWidth={true}
-                open={open} onClose={closeHandler}
+                open={getOpenCocktail()} onClose={closeCocktail}
                 sx={{
                     '& .MuiDialog-paper': {
                         margin: '8px',
@@ -99,8 +94,7 @@ export function CocktailInfoModal({open, row, closeHandler}) {
                         width: 'calc(100% - 16px)',
                     }
                 }}>
-            <IngredientInfoModal ingredient={selectedIngredient} open={openIngredientModal}
-                                 closeHandler={closeIngredientHandler}/>
+            <IngredientInfoModal ingredient={getIngredient()}/>
             <Loading loading={loading}/>
             <DialogTitle>
                 <Stack direction='row' justifyContent={'space-between'}>
@@ -134,9 +128,6 @@ export function CocktailInfoModal({open, row, closeHandler}) {
                             {cocktail.receipt.map((r) => {
                                 const hasError = r.count === null || r.unit === null;
                                 const measure = hasError ? r.measure : (r.count + " " + r.unit.name)
-                                if(alko !== null && volume !== null) {
-                                    console.log(r)
-                                }
                                 return (
                                     <Stack key={r.ingredient.id} direction='row' justifyContent={'space-between'}
                                            mt={1}>
@@ -173,7 +164,7 @@ export function CocktailInfoModal({open, row, closeHandler}) {
                 {user.role.includes("ADMIN") && (
                     <Button href={`${paths.bar.cocktailEdit}?id=${cocktail.id}`}>Редактировать</Button>
                 )}
-                <Button onClick={closeHandler}>Закрыть</Button>
+                <Button onClick={closeCocktail}>Закрыть</Button>
             </DialogActions>
         </Dialog>
     )