You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
95 lines
3.0 KiB
TypeScript
95 lines
3.0 KiB
TypeScript
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'
|
|
|
|
export type ProductDetailProps = {
|
|
productId: number
|
|
}
|
|
|
|
export const ProductDetail = withProtection(({ productId }: ProductDetailProps) => {
|
|
const product = useAppSelector(shop.selector.product(productId))
|
|
const { id, name, count, picture_url, description, cost } = product || {
|
|
id: 0,
|
|
name: '',
|
|
count: 0,
|
|
picture_url: '',
|
|
description: '',
|
|
cost: '',
|
|
}
|
|
const user_count = useAppSelector(basket.selector.userCount(id))
|
|
|
|
const dispatch = useAppDispatch()
|
|
|
|
const handleCart = useCallback(
|
|
(num: number) => {
|
|
if (num > 0) {
|
|
dispatch(basket.fetch.addProduct({ product_id: id }))
|
|
} else {
|
|
dispatch(basket.fetch.deleteProduct({ product_id: id }))
|
|
}
|
|
},
|
|
[dispatch, id]
|
|
)
|
|
|
|
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">
|
|
{name[0]}
|
|
</Avatar>
|
|
}
|
|
title={name}
|
|
subheader={'2025 год'}
|
|
/>
|
|
<CardMedia
|
|
component="img"
|
|
height="300"
|
|
sx={{ objectPosition: 'top', objectFit: 'contain' }}
|
|
image={picture_url}
|
|
alt={name}
|
|
/>
|
|
<CardContent>
|
|
<Typography variant="body2" color="text.secondary">
|
|
{description}
|
|
</Typography>
|
|
<Typography noWrap={true} variant="subtitle1" color="success.main">
|
|
{`Цена: ${cost} ₽`}
|
|
</Typography>
|
|
<Typography noWrap={true} variant="subtitle1" color="text.primary">
|
|
{`Доступно: ${count} шт.`}
|
|
</Typography>
|
|
</CardContent>
|
|
<CardActions
|
|
sx={{ mt: 'auto', display: 'flex', justifyContent: 'space-between' }}
|
|
disableSpacing
|
|
>
|
|
<CartButton count={user_count} onClick={handleCart}></CartButton>
|
|
</CardActions>
|
|
</Card>
|
|
</Grid>
|
|
)
|
|
})
|