временные изменения

front/src/components/cocktails/Cocktail.js

@@ -1,22 +1,22 @@
 import {CardActions, CardContent, CardMedia, Rating} from "@mui/material";
-import {useAlert} from "../../hooks/useAlert";
 import Typography from "@mui/material/Typography";
-import Button from "@mui/material/Button";
 import Grid from "@mui/material/Grid";
-import {requests} from "../../requests";
 import {CocktailItemStyled} from "./CocktailItemStyled";
 import IconButton from "@mui/material/IconButton";
 import FavoriteBorderIcon from '@mui/icons-material/FavoriteTwoTone';
 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";
+import EditIcon from '@mui/icons-material/Edit';
+import DeleteIcon from '@mui/icons-material/Delete';
+import LocalBarIcon from '@mui/icons-material/LocalBar';
+import {paths} from "../../path";
 
 function renderFavouriteBadge(handleFavourite, row) {
-    const childIcon = row.rating.favourite ? <FavoriteIcon color='error'/> : <FavoriteBorderIcon color={'warning'}/>;
+    const childIcon = row.rating.favourite ? <FavoriteIcon/> : <FavoriteBorderIcon/>;
     return (
-        <IconButton sx={{position: 'absolute', top: "15px", right: "15px"}} onClick={() => handleFavourite(row)}>
+        <IconButton size={'small'}
+                    onClick={() => handleFavourite(row)}>
             {childIcon}
         </IconButton>
     )
@@ -25,16 +25,14 @@ function renderFavouriteBadge(handleFavourite, row) {
 function renderRating(handleChangeRating, row) {
     return (
         <Rating
-            sx={{position: 'absolute', top: '310px', right: '85px'}}
             name="simple-controlled"
-            size="large"
             value={row.rating.rating}
             onChange={(event, newValue) => handleChangeRating(row, newValue)}
         />
     )
 }
 
-export function Cocktail({row, handleFavourite, handleChangeRating, handleSelect}) {
+export function Cocktail({row, handleFavourite, handleChangeRating, handleSelect, deleteHandler}) {
     return (
         <Grid item sx={{pr: 2}}>
             <CocktailItemStyled>
@@ -56,15 +54,25 @@ export function Cocktail({row, handleFavourite, handleChangeRating, handleSelect
 
                         image={row.image.includes("thecocktaildb") ? (row.image + "/preview") : row.image}
                     />
-                    {renderFavouriteBadge(handleFavourite, row)}
-                    {renderRating(handleChangeRating, row)}
-                    <CardContent sx={{pb: '4px', pl: 2}}>
+                    <CardActions>
+                        <IconButton sx={{m: 0}} size='small'>
+                            <LocalBarIcon fontSize='small'/>
+                        </IconButton>
+                        {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>
+                    </CardActions>
+                    <CardContent sx={{pb: 0, pl: 2, pt: 0}}>
                         <Typography variant="h5" minHeight={'50px'} mt={2}>{row.name} </Typography>
                         <CocktailDescription row={row}/>
                     </CardContent>
-                    <CardActions>
-                        <Button variant={'contained'} color={"error"}>Удалить</Button>
-                    </CardActions>
+
                 </Box>
             </CocktailItemStyled>
         </Grid>

front/src/components/cocktails/FilterBlock.js

@@ -19,36 +19,9 @@ export function FilterBlock({filter, handleFilterChange, handleClearFilter, barm
     const {createError} = useAlert();
     const [glass, setGlass] = useState([]);
     const [category, setCategory] = useState([]);
-    const alcohol = [
-        {
-            name: "Алкогольный",
-            id: "alcohol1"
-        },
-        {
-            name: "Безалкогольный",
-            id: "alcohol2"
-        }];
-    const ingredientCount = [
-        {
-            id: "1IngredientCount",
-            name: 1
-        },
-        {
-            id: "2IngredientCount",
-            name: 2
-        },
-        {
-            id: "3IngredientCount",
-            name: 3
-        },
-        {
-            id: "4IngredientCount",
-            name: 4
-        },
-        {
-            id: "5IngredientCount",
-            name: 5
-        }]
+    const alcohol = ['Алкогольный', 'Безалкогольный'];
+    const ingredientCount = [1,2,3,4,5];
+    const sort = ['Название по возрастанию', 'Название по убыванию'];
 
     useEffect(() => {
         api().get(requests.bar.category)
@@ -88,8 +61,8 @@ export function FilterBlock({filter, handleFilterChange, handleClearFilter, barm
             <Box hidden={filter.hidden}>
                 <Grid container>
                     {/*Фильтр по алкогольности*/}
-                    <CheckMarks rows={sortList} name={"Сортировать по..."} handleChange={handleFilterChange}
-                                filterValue={filter.sorting} filterName={"sorting"} nonMulti/>
+                    <CheckMarks rows={sort} name={"Сортировать по..."} handleChange={handleFilterChange}
+                                filterValue={filter.sorting} filterName={"sorting"} nonMulti identity/>
                 </Grid>
             </Box>
             {/*Блок фильтров*/}
@@ -117,18 +90,18 @@ export function FilterBlock({filter, handleFilterChange, handleClearFilter, barm
                     />
                     {/*Фильтр по алкогольности*/}
                     <CheckMarks rows={alcohol} name={"Алкогольность"} handleChange={handleFilterChange}
-                                filterValue={filter.alcohol} filterName={"alcohol"}/>
+                                filterValue={filter.alcohol} filterName={"alcohol"} identity/>
                     {/*Фильтр по категории*/}
                     {category.length > 0 && (
                         <CheckMarks rows={category} name={"Категории"} filterValue={filter.category}
-                                    filterName={"category"} handleChange={handleFilterChange}/>)}
+                                    filterName={"category"} handleChange={handleFilterChange} identity/>)}
                     {/*Фильтр по посуде*/}
                     {glass.length > 0 && (<CheckMarks rows={glass} name={"Подача"} handleChange={handleFilterChange}
-                                                      filterValue={filter.glass} filterName={"glass"}/>)}
+                                                      filterValue={filter.glass} filterName={"glass"} identity/>)}
                     {/*Фильтр по нехватке ингредиентов*/}
                     {(barmen && filter.all) && (<CheckMarks rows={ingredientCount} name={"Не хватает ингредиентов"}
                                                      handleChange={handleFilterChange}
-                                                     nonMulti nullValue
+                                                     nonMulti nullValue identity
                                                      filterValue={filter.iCount} filterName={"iCount"}/>)}
                     <Button onClick={() => handleClearFilter()}>Сбросить</Button>
                 </Grid>