ntasicc
/
coffee-ts
关注 1
点赞 0
派生 0
代码 工单 0 合并请求 0 版本发布 0 百科 动态
浏览代码

fix: array bug

ts-ref
ntasicc 3 年前
父节点
5f3e32979a
当前提交
799a8b9ae1
共有 2 个文件被更改，包括 161 次插入 和 155 次删除
合并视图 显示文件统计
  1. 91
    90
      components/product-card/ProductCard.tsx
  2. 70
    65
      components/products/featured-product/FeaturedProduct.tsx

+ 91
- 90
components/product-card/ProductCard.tsx 查看文件

import { useStore, useStoreUpdate } from '../../store/cart-context'; import { useStore, useStoreUpdate } from '../../store/cart-context';


const ProductCard = ({ product }) => { const ProductCard = ({ product }) => {
const { t } = useTranslation('products');
const { addCartValue } = useStoreUpdate();
const { cartStorage } = useStore();
const addProductToCart = (quantity) => addCartValue(product, quantity);
const inCart = cartStorage?.some(
(item) => item.product.customID === product.customID
)
const { t } = useTranslation('products');
const { addCartValue } = useStoreUpdate();
const { cartStorage } = useStore();
const addProductToCart = (quantity) => addCartValue(product, quantity);
const inCart =
cartStorage.length > 0
? cartStorage?.some((item) => item.product.customID === product.customID)
? true ? true
: false;
return (
<Box
: false
: false;
return (
<Box
sx={{
width: '100%',
height: '100%',
border: 'none',
mb: '15px',
backgroundColor: '#F5ECD4',
}}
>
<Box width="100%" sx={{ cursor: 'pointer' }}>
<NextLink
style={{ cursor: 'pointer' }}
href={`/products/${product.customID}`}
passHref
>
<a>
<Image
src={product.image}
alt="product image"
width={500}
height={390}
/>
</a>
</NextLink>
</Box>
<Box
width="100%"
sx={{
display: 'flex',
flexDirection: 'column',
}}
>
<Typography
sx={{ height: '100px' }}
fontSize="24px"
align="center"
pt={1}
pb={3}
>
{product.name}
</Typography>
<Typography
sx={{
height: { xs: '200px', sm: '250px', md: '250px', lg: '200px' },
}}
align="center"
fontSize="18px"
m={2}
>
{product.description.length > 250
? product.description.slice(0, 250) + '...'
: product.description}
</Typography>
<Typography fontSize="24px" align="center" pt={4}>
${product.price}
</Typography>
<Box textAlign="center" mt={1}>
<Button
disableRipple
disableFocusRipple
disabled={inCart}
onClick={() => addProductToCart(1)}
sx={{ sx={{
width: '100%',
height: '100%',
border: 'none',
mb: '15px',
backgroundColor: '#F5ECD4',
'&.Mui-disabled': {
backgroundColor: '#f2d675',
color: '#464646',
},
'&:hover': {
backgroundColor: '#f2d675',
color: '#464646',
boxShadow: 'none',
},
backgroundColor: '#CBA213',
height: 50,
width: 150,
color: 'white',
}} }}
>
<Box width="100%" sx={{ cursor: 'pointer' }}>
<NextLink
style={{ cursor: 'pointer' }}
href={`/products/${product.customID}`}
passHref
>
<a>
<Image
src={product.image}
alt="product image"
width={500}
height={390}
/>
</a>
</NextLink>
</Box>
<Box
width="100%"
sx={{
display: 'flex',
flexDirection: 'column',
}}
>
<Typography
sx={{ height: '100px' }}
fontSize="24px"
align="center"
pt={1}
pb={3}
>
{product.name}
</Typography>
<Typography
sx={{
height: { xs: '200px', sm: '250px', md: '250px', lg: '200px' },
}}
align="center"
fontSize="18px"
m={2}
>
{product.description.length > 250
? product.description.slice(0, 250) + '...'
: product.description}
</Typography>
<Typography fontSize="24px" align="center" pt={4}>
${product.price}
</Typography>
<Box textAlign="center" mt={1}>
<Button
disableRipple
disableFocusRipple
disabled={inCart}
onClick={() => addProductToCart(1)}
sx={{
'&.Mui-disabled': {
backgroundColor: '#f2d675',
color: '#464646',
},
'&:hover': {
backgroundColor: '#f2d675',
color: '#464646',
boxShadow: 'none',
},
backgroundColor: '#CBA213',
height: 50,
width: 150,
color: 'white',
}}
>
{inCart ? t('products:in') : t('products:add')}
</Button>
</Box>
</Box>
>
{inCart ? t('products:in') : t('products:add')}
</Button>
</Box> </Box>
);
</Box>
</Box>
);
}; };


export default ProductCard; export default ProductCard;

+ 70
- 65
components/products/featured-product/FeaturedProduct.tsx 查看文件

import ProductInfo from './ProductInfo'; import ProductInfo from './ProductInfo';


interface FeaturedProductProps { interface FeaturedProductProps {
side: string;
bColor: string;
product: ProductDataDB;
side: string;
bColor: string;
product: ProductDataDB;
} }


const FeaturedProduct: React.FC<FeaturedProductProps> = ({ product, bColor, side }) => {
const matches = useMediaQuery('(min-width: 900px)');
const data = { name: product.name, description: product.description };
const { addCartValue } = useStoreUpdate();
const { cartStorage } = useStore();
const addProductToCart = (quantity: number) => addCartValue(product, quantity);
const [inCart, setInCart] = useState(false);
const FeaturedProduct: React.FC<FeaturedProductProps> = ({
product,
bColor,
side,
}) => {
const matches = useMediaQuery('(min-width: 900px)');
const data = { name: product.name, description: product.description };
const { addCartValue } = useStoreUpdate();
const { cartStorage } = useStore();
const addProductToCart = (quantity: number) =>
addCartValue(product, quantity);
const [inCart, setInCart] = useState(false);


useEffect(() => {
if (cartStorage) {
if (
cartStorage?.some((item: FeaturedProductProps) => item.product.customID === product.customID)
)
setInCart(true);
}
}, [cartStorage, product.customID]);
useEffect(() => {
if (cartStorage.length > 0) {
if (
cartStorage?.some((item) => item.product.customID === product.customID)
)
setInCart(true);
}
}, [cartStorage, product.customID]);


return (
<Box
sx={{
width: '100%',
backgroundColor: bColor === 'dark' ? 'primary.main' : 'primary.light',
display: 'flex',
flexDirection: { xs: 'column', md: 'row' },
padding: '30px 0 30px 0',
alignItems: { md: 'center' },
}}
>
<Container
maxWidth="xl"
sx={{ display: { md: 'flex' }, alignItems: { md: 'center' } }}
>
{side === 'left' ? (
<ProductImage image={product.image}></ProductImage>
) : !matches ? (
<ProductImage image={product.image}></ProductImage>
) : (
<ProductInfo
bColor={bColor}
data={data}
addProductToCart={addProductToCart}
inCart={inCart}
></ProductInfo>
)}
{side === 'left' ? (
<ProductInfo
bColor={bColor}
data={data}
addProductToCart={addProductToCart}
inCart={inCart}
></ProductInfo>
) : !matches ? (
<ProductInfo
bColor={bColor}
data={data}
addProductToCart={addProductToCart}
inCart={inCart}
></ProductInfo>
) : (
<ProductImage image={product.image}></ProductImage>
)}
</Container>
</Box>
);
return (
<Box
sx={{
width: '100%',
backgroundColor: bColor === 'dark' ? 'primary.main' : 'primary.light',
display: 'flex',
flexDirection: { xs: 'column', md: 'row' },
padding: '30px 0 30px 0',
alignItems: { md: 'center' },
}}
>
<Container
maxWidth="xl"
sx={{ display: { md: 'flex' }, alignItems: { md: 'center' } }}
>
{side === 'left' ? (
<ProductImage image={product.image}></ProductImage>
) : !matches ? (
<ProductImage image={product.image}></ProductImage>
) : (
<ProductInfo
bColor={bColor}
data={data}
addProductToCart={addProductToCart}
inCart={inCart}
></ProductInfo>
)}
{side === 'left' ? (
<ProductInfo
bColor={bColor}
data={data}
addProductToCart={addProductToCart}
inCart={inCart}
></ProductInfo>
) : !matches ? (
<ProductInfo
bColor={bColor}
data={data}
addProductToCart={addProductToCart}
inCart={inCart}
></ProductInfo>
) : (
<ProductImage image={product.image}></ProductImage>
)}
</Container>
</Box>
);
}; };


export default FeaturedProduct; export default FeaturedProduct;

撰写 预览
正在加载...
取消
保存