diff --git a/front/src/app/App.js b/front/src/app/App.js index 3f99800..d741347 100644 --- a/front/src/app/App.js +++ b/front/src/app/App.js @@ -7,6 +7,7 @@ import {BrowserRouter as Router} from "react-router-dom"; import {NavigationRoutes} from "./NavigationRoutes"; import {SnackbarProvider} from 'notistack'; import {UserProvider} from "../context/UserContext"; +import {SelectProvider} from "../context/SelectContext"; function App() { const theme = createTTheme(); @@ -36,10 +37,13 @@ function App() { }, }} /> - {/*Маршрутизация*/} - - - + {/*Провайдер выбора*/} + + {/*Маршрутизация*/} + + + + diff --git a/front/src/app/pages/cocktails/CocktailMenuBarPage.js b/front/src/app/pages/cocktails/CocktailMenuBarPage.js index bef556f..5e7a032 100644 --- a/front/src/app/pages/cocktails/CocktailMenuBarPage.js +++ b/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() { {/*Загрузчик*/} {/*Модальное окно информации об ингредиенте*/} - { setSelected(null); setOpenModal(false); diff --git a/front/src/app/pages/cocktails/CocktailsPageContent.js b/front/src/app/pages/cocktails/CocktailsPageContent.js index 428aa5e..682dd3c 100644 --- a/front/src/app/pages/cocktails/CocktailsPageContent.js +++ b/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}) => { {/**/} {/*Модальное окно информации о коктейле*/} - + {/*Блок фильтров*/} { @@ -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() { {/*Загрузчик*/} {/*Модальное окно информации об ингредиенте*/} - + ) } \ No newline at end of file diff --git a/front/src/components/Ingredients/IngredientInfoModal.js b/front/src/components/Ingredients/IngredientInfoModal.js index 75ce54f..952d8a7 100644 --- a/front/src/components/Ingredients/IngredientInfoModal.js +++ b/front/src/components/Ingredients/IngredientInfoModal.js @@ -6,13 +6,33 @@ import Button from "@mui/material/Button"; import * as React from "react"; import Stack from "@mui/material/Stack"; import Typography from "@mui/material/Typography"; +import List from "@mui/material/List"; +import {useEffect, useState} from "react"; +import {api} from "../../lib/clients/api"; +import {requests} from "../../requests"; +import {useAlert} from "../../hooks/useAlert"; +import ListItem from "@mui/material/ListItem"; +import {useSelect} from "../../hooks/useSelect"; + +export function IngredientInfoModal({ingredient}) { + const [cocktails, setCocktails] = useState([]); + const {closeIngredient, getOpenIngredient, selectCocktail} = useSelect(); + const {createError} = useAlert(); + + useEffect(() => { + if(!ingredient) { + return + } + api().get(requests.cocktails.byIngredient + ingredient.id) + .then((r) => setCocktails(r.data)) + .catch(() => createError()) + }, [ingredient]); -export function IngredientInfoModal({ingredient, open, closeHandler}) { if (!ingredient) { return null; } return ( - {`Крепость ${ingredient.abv}`})} {ingredient.description} + {cocktails.length > 0 && ( + <> + Коктейли: + + {cocktails.map((c) => { + return ( + { + selectCocktail(c.id) + closeIngredient(); + }}> + + {c.name} + {c.name} + {c.rating.rating > 0 && {`${c.rating.rating}/5`}} + + + ) + })} + + + )} - + ); diff --git a/front/src/components/cocktails/Cocktail.js b/front/src/components/cocktails/Cocktail.js index 272da22..796d4b4 100644 --- a/front/src/components/cocktails/Cocktail.js +++ b/front/src/components/cocktails/Cocktail.js @@ -1,9 +1,6 @@ import {CardActions, CardContent, CardMedia, Rating} from "@mui/material"; import {useAlert} from "../../hooks/useAlert"; import Typography from "@mui/material/Typography"; -import List from "@mui/material/List"; -import ListItem from "@mui/material/ListItem"; -import ListItemText from "@mui/material/ListItemText"; import Button from "@mui/material/Button"; import Grid from "@mui/material/Grid"; import {requests} from "../../requests"; @@ -14,6 +11,7 @@ import FavoriteIcon from '@mui/icons-material/Favorite'; import {api} from "../../lib/clients/api"; import Box from "@mui/material/Box"; import {useUser} from "../../hooks/useUser"; +import {CocktailDescription} from "./CocktailDescription"; function renderFavouriteBadge(handleFavourite, row) { const childIcon = row.rating.favourite ? : ; @@ -71,34 +69,7 @@ export function Cocktail({row, handleFavourite, handleChangeRating, handleSelect {renderRating(handleChangeRating, row)} {row.name} - - {row.hasError && ( - - Имеет ошибку в рецепте или ингредиентах - - )} - - {"Категория: " + row.category} - - - {"Алкоголь: " + row.alcoholic} - - {row.volume !== null && ( - - {"Крепость: ≈" + row.volume} - - )} - - {"Подача: " + row.glass} - - - {"Состав: " + row.components} - - {(row.tags && row.tags.length > 0) && ( - - {"Теги: " + row.tags.replaceAll(',', ', ')} - )} - + {(row.isAllowed && session.isActive && user.invited) && diff --git a/front/src/components/cocktails/CocktailDescription.js b/front/src/components/cocktails/CocktailDescription.js new file mode 100644 index 0000000..db6b9e2 --- /dev/null +++ b/front/src/components/cocktails/CocktailDescription.js @@ -0,0 +1,36 @@ +import ListItem from "@mui/material/ListItem"; +import ListItemText from "@mui/material/ListItemText"; +import List from "@mui/material/List"; + +export function CocktailDescription({row}) { + return ( + + {row.hasError && ( + + Имеет ошибку в рецепте или ингредиентах + + )} + + {"Категория: " + row.category} + + + {"Алкоголь: " + row.alcoholic} + + {row.volume !== null && ( + + {"Крепость: ≈" + row.volume} + + )} + + {"Подача: " + row.glass} + + + {"Состав: " + row.components} + + {(row.tags && row.tags.length > 0) && ( + + {"Теги: " + row.tags.replaceAll(',', ', ')} + )} + + ) +} \ No newline at end of file diff --git a/front/src/components/cocktails/CocktailInfoModal.js b/front/src/components/cocktails/CocktailInfoModal.js index 98a018c..a830c43 100644 --- a/front/src/components/cocktails/CocktailInfoModal.js +++ b/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 ( - + @@ -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 ( @@ -173,7 +164,7 @@ export function CocktailInfoModal({open, row, closeHandler}) { {user.role.includes("ADMIN") && ( )} - + ) diff --git a/front/src/components/orders/OrderModal.js b/front/src/components/orders/OrderModal.js index 53d4928..907842d 100644 --- a/front/src/components/orders/OrderModal.js +++ b/front/src/components/orders/OrderModal.js @@ -37,6 +37,7 @@ function renderButtons(row, my, handleChange) { export default function OrderModal({row, handleClose, open, handleChange, my}) { const [receipt, setReceipt] = useState([]); + const [instructions, setInstructions] = useState(); const {createError} = useAlert(); useEffect(() => { @@ -46,6 +47,10 @@ export default function OrderModal({row, handleClose, open, handleChange, my}) { api().get(requests.bar.receipts + row.cocktail.id) .then((r) => setReceipt(r.data)) .catch(() => createError("Ошибка получения рецепта")) + + api().get(requests.cocktails.instructions + row.cocktail.id) + .then((r) => setInstructions(r.data)) + .catch(() => createError("Ошибка получения инструкции")) // eslint-disable-next-line }, [row]); @@ -62,7 +67,6 @@ export default function OrderModal({row, handleClose, open, handleChange, my}) { {"Заказ №" + row.id} {row.cocktail.name} - {row.cocktail.alcoholic + " " + row.cocktail.category} {"для: " + row.visitor.name + " " + row.visitor.lastName} @@ -74,8 +78,14 @@ export default function OrderModal({row, handleClose, open, handleChange, my}) { return ({`${r.ingredient.name} - ${r.measure}`}) })} - Инструкция: - {row.cocktail.instructions} + {instructions && + ( + <> + Инструкция: + {instructions} + + ) + } {row.cocktail.video && (