|
|
import {
|
|
|
Avatar,
|
|
|
Card,
|
|
|
CardActions,
|
|
|
CardContent,
|
|
|
CardHeader,
|
|
|
CardMedia,
|
|
|
Typography,
|
|
|
Grid,
|
|
|
} from '@mui/material'
|
|
|
import { useCallback } from 'react'
|
|
|
import { CartButton } from './cart-button'
|
|
|
import { useAppSelector, shop, useAppDispatch, basket } from '../storage'
|
|
|
import { withProtection } from '../hocs'
|
|
|
import { toast } from 'react-toastify'
|
|
|
|
|
|
export type ProductDetailProps = {
|
|
|
productId: number
|
|
|
}
|
|
|
|
|
|
export const ProductDetail = withProtection(({ productId }: ProductDetailProps) => {
|
|
|
const product = useAppSelector(shop.selector.product(productId))
|
|
|
const error = useAppSelector(basket.selector.error)
|
|
|
|
|
|
const user_count = useAppSelector(basket.selector.userCount(productId))
|
|
|
|
|
|
const dispatch = useAppDispatch()
|
|
|
|
|
|
const handleCart = useCallback(
|
|
|
(num: number) => {
|
|
|
if (num > 0) {
|
|
|
dispatch(basket.fetch.addProduct({ product_id: product?.id || -1 }))
|
|
|
dispatch(shop.action.changeCount({ productId, count: -1 }))
|
|
|
} else {
|
|
|
dispatch(basket.fetch.deleteProduct({ product_id: product?.id || -1 }))
|
|
|
dispatch(shop.action.changeCount({ productId, count: 1 }))
|
|
|
}
|
|
|
},
|
|
|
[dispatch]
|
|
|
)
|
|
|
if (error) {
|
|
|
toast.error(error || 'Не известная ошибка при аутентификации пользователя', {
|
|
|
toastId: 'error-toast',
|
|
|
})
|
|
|
}
|
|
|
|
|
|
return (
|
|
|
<Grid container direction="column" justifyContent="center" alignItems="center">
|
|
|
<Card
|
|
|
elevation={1}
|
|
|
sx={{
|
|
|
maxWidth: 750,
|
|
|
width: '100%',
|
|
|
minWidth: 345,
|
|
|
display: 'flex',
|
|
|
flexFlow: 'column',
|
|
|
height: '100%',
|
|
|
}}
|
|
|
>
|
|
|
<CardHeader
|
|
|
avatar={
|
|
|
<Avatar sx={{ bgcolor: 'info.main' }} aria-label="recipe">
|
|
|
{product?.name[0]}
|
|
|
</Avatar>
|
|
|
}
|
|
|
title={product?.name}
|
|
|
subheader={'2025 год'}
|
|
|
/>
|
|
|
<CardMedia
|
|
|
component="img"
|
|
|
height="300"
|
|
|
sx={{ objectPosition: 'top', objectFit: 'contain' }}
|
|
|
image={product?.picture_url}
|
|
|
alt={product?.name}
|
|
|
/>
|
|
|
<CardContent>
|
|
|
<Typography variant="body2" color="text.secondary">
|
|
|
{product?.description}
|
|
|
</Typography>
|
|
|
<Typography noWrap={true} variant="subtitle1" color="success.main">
|
|
|
{`Цена: ${product?.cost} ₽`}
|
|
|
</Typography>
|
|
|
<Typography noWrap={true} variant="subtitle1" color="text.primary">
|
|
|
{`Доступно: ${product?.count} шт.`}
|
|
|
</Typography>
|
|
|
</CardContent>
|
|
|
<CardActions
|
|
|
sx={{ mt: 'auto', display: 'flex', justifyContent: 'space-between' }}
|
|
|
disableSpacing
|
|
|
>
|
|
|
<CartButton count={user_count} onClick={handleCart}></CartButton>
|
|
|
</CardActions>
|
|
|
</Card>
|
|
|
</Grid>
|
|
|
)
|
|
|
})
|