fix: array bug

components/product-card/ProductCard.tsx

@@ -11,7 +11,7 @@ const ProductCard = ({ product }) => {
   const { cartStorage } = useStore();
   const addProductToCart = (quantity) => addCartValue(product, quantity);
   const inCart =
-    cartStorage.length > 0
+    cartStorage?.length > 0
       ? cartStorage?.some((item) => item.product.customID === product.customID)
         ? true
         : false

pages/products/[customId].tsx

@@ -16,99 +16,100 @@ import { getProductData } from '../../requests/products/producDataRequest';
 import { useStore, useStoreUpdate } from '../../store/cart-context';
 
 const SingleProduct: NextPage = () => {
-    const { t } = useTranslation('products');
-    const { addCartValue } = useStoreUpdate();
-    const { cartStorage } = useStore();
+  const { t } = useTranslation('products');
+  const { addCartValue } = useStoreUpdate();
+  const { cartStorage } = useStore();
 
-    const router = useRouter();
+  const router = useRouter();
 
-    const { customId } = router.query;
+  const { customId } = router.query;
 
-    const { data, isLoading } = useFetchSingleProduct(customId);
+  const { data, isLoading } = useFetchSingleProduct(customId);
 
-    const addProductToCart = (quantity) => addCartValue(data.product, quantity);
-    const inCart = cartStorage?.some(
-        (item) => item.product.customID === data?.product.customID
-    )
+  const addProductToCart = (quantity) => addCartValue(data.product, quantity);
+  const inCart =
+    cartStorage?.length > 0
+      ? cartStorage?.some((item) => item.product.customID === product.customID)
         ? true
-        : false;
+        : false
+      : false;
 
-    if (isLoading) {
-        return <Loader loading={isLoading} />;
-    }
+  if (isLoading) {
+    return <Loader loading={isLoading} />;
+  }
 
-    return (
-        <Box
-            sx={{
-                display: 'flex',
-                flexDirection: 'column',
-            }}
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        flexDirection: 'column',
+      }}
+    >
+      <Container>
+        <Typography
+          fontFamily={'body1.fontFamily'}
+          fontSize="32px"
+          sx={{ mt: 25, height: '100%', color: 'primary.main' }}
         >
-            <Container>
-                <Typography
-                    fontFamily={'body1.fontFamily'}
-                    fontSize="32px"
-                    sx={{ mt: 25, height: '100%', color: 'primary.main' }}
-                >
-                    {data.product.name}
-                </Typography>
-                <Grid container spacing={2}>
-                    <Grid sx={{ display: 'flex' }} item md={6} sm={12}>
-                        <Image
-                            src={data.product.image}
-                            alt="product"
-                            width={900}
-                            height={700}
-                        />
-                    </Grid>
-                    <TabContent
-                        description={data?.product.description}
-                        inCart={inCart}
-                        price={data?.product.price}
-                        category={data?.product.category}
-                        addProductToCart={addProductToCart}
-                    />
-                </Grid>
+          {data.product.name}
+        </Typography>
+        <Grid container spacing={2}>
+          <Grid sx={{ display: 'flex' }} item md={6} sm={12}>
+            <Image
+              src={data.product.image}
+              alt="product"
+              width={900}
+              height={700}
+            />
+          </Grid>
+          <TabContent
+            description={data?.product.description}
+            inCart={inCart}
+            price={data?.product.price}
+            category={data?.product.category}
+            addProductToCart={addProductToCart}
+          />
+        </Grid>
 
-                <Typography
-                    sx={{
-                        mt: { xs: '60px', md: '100px', lg: '150px' },
-                        mb: 5,
-                        color: 'primary.main',
-                        fontSize: '32px',
-                    }}
-                >
-                    {t('products:similar')}
-                </Typography>
-                <Grid container spacing={2}>
-                    {data.similarProducts.map((product) => (
-                        <GridItem key={product._id}>
-                            <ProductCard product={product} />
-                        </GridItem>
-                    ))}
-                </Grid>
-            </Container>
-        </Box>
-    );
+        <Typography
+          sx={{
+            mt: { xs: '60px', md: '100px', lg: '150px' },
+            mb: 5,
+            color: 'primary.main',
+            fontSize: '32px',
+          }}
+        >
+          {t('products:similar')}
+        </Typography>
+        <Grid container spacing={2}>
+          {data.similarProducts.map((product) => (
+            <GridItem key={product._id}>
+              <ProductCard product={product} />
+            </GridItem>
+          ))}
+        </Grid>
+      </Container>
+    </Box>
+  );
 };
 
 export const getServerSideProps = async (context: any) => {
-    const { params } = context;
-    const { customId } = params;
+  const { params } = context;
+  const { customId } = params;
 
-    const queryClient = new QueryClient();
+  const queryClient = new QueryClient();
 
-    await queryClient.prefetchQuery(
-        ['product', customId],
-        async () => await getProductData(customId)
-    );
+  await queryClient.prefetchQuery(
+    ['product', customId],
+    async () => await getProductData(customId)
+  );
 
-    return {
-        props: {
-            dehydratatedState: dehydrate(queryClient),
-            ...(await serverSideTranslations(context.locale, ['products'])),
-        },
-    };
+  return {
+    props: {
+      dehydratatedState: dehydrate(queryClient),
+      ...(await serverSideTranslations(context.locale, ['products'])),
+    },
+  };
 };
 
 export default SingleProduct;