ntasicc
/
coffee-ts
關註 1
收藏 0
複製 0
程式碼 問題管理 0 合併請求 0 版本發佈 0 Wiki Activity
瀏覽代碼

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 查看文件

@@ -6,100 +6,101 @@ import NextLink from 'next/link';
import { useStore, useStoreUpdate } from '../../store/cart-context';

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
: 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={{
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>
);
};

export default ProductCard;

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

@@ -8,75 +8,80 @@ import ProductImage from './ProductImage';
import ProductInfo from './ProductInfo';

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;

Write Preview
Loading…
取消
儲存