89 lines
3.5 KiB
JavaScript
89 lines
3.5 KiB
JavaScript
import {CardActions, CardContent, CardMedia, Rating} from "@mui/material";
|
|
import Typography from "@mui/material/Typography";
|
|
import Grid from "@mui/material/Grid";
|
|
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 Box from "@mui/material/Box";
|
|
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";
|
|
import {useAlert} from "../../hooks/useAlert";
|
|
import {useUser} from "../../hooks/useUser";
|
|
|
|
function renderFavouriteBadge(handleFavourite, row) {
|
|
const childIcon = row.rating.favourite ? <FavoriteIcon/> : <FavoriteBorderIcon/>;
|
|
return (
|
|
<IconButton size={'small'}
|
|
onClick={() => handleFavourite(row)}>
|
|
{childIcon}
|
|
</IconButton>
|
|
)
|
|
}
|
|
|
|
function renderRating(handleChangeRating, row) {
|
|
return (
|
|
<Rating
|
|
name="simple-controlled"
|
|
value={row.rating.rating}
|
|
onChange={(event, newValue) => handleChangeRating(row, newValue)}
|
|
/>
|
|
)
|
|
}
|
|
|
|
export function Cocktail({row, handleFavourite, handleChangeRating, handleSelect, deleteHandler}) {
|
|
const {notImplement} = useAlert();
|
|
const {user} = useUser();
|
|
return (
|
|
<Grid item sx={{pr: 2}}>
|
|
<CocktailItemStyled>
|
|
<Box sx={{
|
|
p: '4px 4px',
|
|
m: 1,
|
|
width: '320px',
|
|
position: 'relative',
|
|
}}>
|
|
<CardMedia
|
|
sx={{
|
|
loading: "eager",
|
|
borderRadius: 2
|
|
}}
|
|
onClick={() => handleSelect(row)}
|
|
component="img"
|
|
alt={row.name}
|
|
height="300"
|
|
|
|
image={row.image.includes("thecocktaildb") ? (row.image + "/preview") : row.image}
|
|
/>
|
|
<CardActions>
|
|
<IconButton sx={{m: 0}} size='small' onClick={() => notImplement()}>
|
|
<LocalBarIcon fontSize='small'/>
|
|
</IconButton>
|
|
{renderFavouriteBadge(handleFavourite, row)}
|
|
{renderRating(handleChangeRating, row)}
|
|
|
|
{
|
|
(user.role && user.role !== 'USER') &&
|
|
<>
|
|
<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>
|
|
</Box>
|
|
</CocktailItemStyled>
|
|
</Grid>
|
|
)
|
|
} |