fix: hydration error

components/cards/cart-card/CartCard.jsx

@@ -26,12 +26,7 @@ const CartCard = ({ product, initialQuantity, remove, updateQuantity }) => {
         }}
       >
         <Box sx={{ display: { xs: 'none', md: 'flex', width: '20%' } }}>
-          <Image
-            src="/images/coffee-mug.svg"
-            alt="profile"
-            width={500}
-            height={300}
-          />
+          <Image src={product.image} alt="profile" width={500} height={300} />
         </Box>
         <Box
           sx={{

components/cards/data-card/DataCard.jsx

@@ -21,12 +21,7 @@ const DataCard = ({ data, quantity }) => {
         }}
       >
         <Box sx={{ display: 'flex', justifyContent: 'center' }}>
-          <Image
-            src="/images/coffee-mug.svg"
-            alt="profile"
-            width={200}
-            height={200}
-          />
+          <Image src={data.image} alt="profile" width={200} height={200} />
         </Box>
         <Box
           sx={{

components/cart-content/CartContent.jsx

@@ -1,7 +1,7 @@
 import { Typography } from '@mui/material';
 import { Box } from '@mui/system';
 import { destroyCookie } from 'nookies';
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { useStore, useStoreUpdate } from '../../store/cart-context';
 import CartCard from '../cards/cart-card/CartCard';
 import OrderSummaryCard from '../cards/order-summary-card/OrderSummaryCard';
@@ -10,6 +10,19 @@ import StepTitle from '../layout/steps-title/StepTitle';
 const CartContent = () => {
   const { cartStorage, totalPrice, totalQuantity } = useStore();
   const { removeCartValue, updateItemQuantity } = useStoreUpdate();
+  const [cartInfo, setCartInfo] = useState({
+    cartStorage: [],
+    totalPrice: 0,
+    totalQuantity: 0,
+  });
+
+  useEffect(() => {
+    setCartInfo({
+      cartStorage,
+      totalPrice,
+      totalQuantity,
+    });
+  }, [cartStorage, totalPrice, totalQuantity]);
 
   useEffect(() => {
     destroyCookie(null, 'checkout-session', {
@@ -18,8 +31,8 @@ const CartContent = () => {
   }, []);
 
   const mapProductsToDom = () => {
-    if (cartStorage?.length) {
-      return cartStorage.map((element, i) => (
+    if (cartInfo.cartStorage?.length) {
+      return cartInfo.cartStorage.map((element, i) => (
         <CartCard
           key={i}
           product={element?.product}
@@ -63,7 +76,10 @@ const CartContent = () => {
 
         <Box sx={{ mt: 2 }}>
           <OrderSummaryCard
-            data={{ totalPrice: totalPrice, totalQuantity: totalQuantity }}
+            data={{
+              totalPrice: cartInfo.totalPrice,
+              totalQuantity: cartInfo.totalQuantity,
+            }}
           ></OrderSummaryCard>
         </Box>
       </Box>

components/checkout-content/CheckoutContent.jsx

@@ -3,6 +3,7 @@ import { Box } from '@mui/system';
 import { useSession } from 'next-auth/react';
 import { useRouter } from 'next/router';
 import { setCookie } from 'nookies';
+import { useEffect, useState } from 'react';
 import { useStore } from '../../store/cart-context';
 import { useCheckoutDataUpdate } from '../../store/checkout-context';
 import DataCard from '../cards/data-card/DataCard';
@@ -13,12 +14,18 @@ const CheckoutContent = () => {
   const { cartStorage } = useStore();
   const { addCheckoutValue } = useCheckoutDataUpdate();
 
+  const [cartData, setCartData] = useState([]);
+
   const { data: session } = useSession();
   const router = useRouter();
 
+  useEffect(() => {
+    setCartData(cartStorage);
+  }, [cartStorage]);
+
   const submitHandler = (formValues) => {
     addCheckoutValue(
-      cartStorage,
+      cartData,
       { ...formValues, email: session.user.email },
       session.user._id
     );
@@ -31,7 +38,7 @@ const CheckoutContent = () => {
   };
 
   const mapProductsToDom = () => {
-    return cartStorage?.map((entry, i) => (
+    return cartData?.map((entry, i) => (
       <DataCard
         key={i}
         data={entry.product}

components/layout/navbar/MainNav.jsx

@@ -17,6 +17,7 @@ import MobileNav from './MobileNav';
 export default function MainNav() {
   //react useState hook to save the current open/close state of the drawer, normally variables dissapear afte the function was executed
   const [open, setState] = useState(false);
+  const [cartQuantity, setCartQuantity] = useState(0);
   const matches = useMediaQuery('(min-width: 900px)');
 
   const router = useRouter();
@@ -51,6 +52,10 @@ export default function MainNav() {
     }
   }, [matches]);
 
+  useEffect(() => {
+    setCartQuantity(totalQuantity);
+  }, [totalQuantity]);
+
   return (
     <AppBar
       position="absolute"
@@ -66,7 +71,7 @@ export default function MainNav() {
       <Toolbar sx={{ width: '100%' }}>
         <DesktopNav
           router={router}
-          totalQuantity={totalQuantity}
+          totalQuantity={cartQuantity}
           session={session}
           signOutHandler={signOutHandler}
         />

components/products/featured-product/FeaturedProduct.jsx

@@ -2,6 +2,7 @@ import { Container } from '@mui/material';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import { Box } from '@mui/system';
 import PropType from 'prop-types';
+import { useEffect, useState } from 'react';
 import { useStore, useStoreUpdate } from '../../../store/cart-context';
 import ProductImage from './ProductImage';
 import ProductInfo from './ProductInfo';
@@ -12,11 +13,16 @@ const FeaturedProduct = ({ product, bColor, side }) => {
   const { addCartValue } = useStoreUpdate();
   const { cartStorage } = useStore();
   const addProductToCart = (quantity) => addCartValue(product, quantity);
-  const inCart = cartStorage?.some(
-    (item) => item.product.customID === product.customID
-  )
-    ? true
-    : false;
+  const [inCart, setInCart] = useState(false);
+
+  useEffect(() => {
+    if (cartStorage) {
+      if (
+        cartStorage?.some((item) => item.product.customID === product.customID)
+      )
+        setInCart(true);
+    }
+  }, [cartStorage, product.customID]);
 
   return (
     <Box

components/profile-content/ProfileContent.jsx

@@ -78,7 +78,12 @@ const ProfileContent = ({ orders }) => {
       <Grid item xs={4} sx={{ mt: 4, display: { xs: 'none', md: 'block' } }}>
         <Typography sx={{ fontSize: 20, ml: 8 }}>Previous Orders</Typography>
       </Grid>
-      <Grid item xs={12} md={8} sx={{ ml: { xs: -8, md: 0 } }}>
+      <Grid
+        item
+        xs={12}
+        md={8}
+        sx={{ ml: { sm: 12, xs: 6 }, mr: { md: -12 }, pr: { sm: 12, xs: 6 } }}
+      >
         <ShippingDetailsForm
           submitHandler={updateUserHandler}
           enableBtn={enableBtn}
@@ -98,9 +103,9 @@ const ProfileContent = ({ orders }) => {
       <Grid item xs={12} md={4}>
         <Box
           sx={{
-            width: '60%',
+            width: { sm: '60%', xs: '55%' },
             mt: 2,
-            ml: { md: 4, xs: 12 },
+            ml: { xs: 12, md: 4 },
           }}
         >
           {mapOrdersToDom()}

components/review-content/ReviewContent.jsx

@@ -6,21 +6,26 @@ import { destroyCookie } from 'nookies';
 import { useEffect, useState } from 'react';
 import { postOrder } from '../../requests/products/postOrderRequest';
 import { useStoreUpdate } from '../../store/cart-context';
-import { useCheckoutDataUpdate } from '../../store/checkout-context';
+import {
+  useCheckoutData,
+  useCheckoutDataUpdate,
+} from '../../store/checkout-context';
 import StepTitle from '../layout/steps-title/StepTitle';
 
 let initialRender = true;
 
 const ReviewContent = () => {
+  const { checkoutStorage } = useCheckoutData();
   const { parseCheckoutValue, clearCheckout } = useCheckoutDataUpdate();
   const { clearCart } = useStoreUpdate();
-  const [orderData, setOrderData] = useState(parseCheckoutValue());
+  const [orderData, setOrderData] = useState({});
 
   const router = useRouter();
 
   useEffect(() => {
     if (initialRender) {
-      postOrder(orderData);
+      setOrderData(parseCheckoutValue());
+      postOrder(parseCheckoutValue());
       initialRender = false;
       return () => {
         clearCheckout();
@@ -36,7 +41,8 @@ const ReviewContent = () => {
         });
       };
     }
-  }, []);
+  }, [checkoutStorage]);
+
   return (
     <Box sx={{ py: 10, height: '100%', width: '100%' }}>
       <StepTitle

components/shipping-content/ShippingContent.jsx

@@ -2,13 +2,12 @@ import { Checkbox, FormControlLabel, Typography } from '@mui/material';
 import { Box } from '@mui/system';
 import { useRouter } from 'next/router';
 import { setCookie } from 'nookies';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import {
   useCheckoutData,
   useCheckoutDataUpdate,
 } from '../../store/checkout-context';
 import { stripe } from '../../utils/helpers/stripe';
-//import DataCardS from '../cards/data-card-shipping/DataCardS';
 import DataCard from '../cards/data-card/DataCard';
 import StepTitle from '../layout/steps-title/StepTitle';
 import ButtonGroup from './shipping-btnGroup/ButtonGroup';
@@ -19,9 +18,14 @@ const ShippingContent = () => {
   const { checkoutStorage } = useCheckoutData();
   const { changeContact, changeShippingData } = useCheckoutDataUpdate();
   const [open, setOpen] = useState({ isOpen: false, type: '' });
+  const [checkoutData, setCheckoutData] = useState({});
 
   const router = useRouter();
 
+  useEffect(() => {
+    setCheckoutData(checkoutStorage);
+  }, [checkoutStorage]);
+
   const handleOpen = (type) => setOpen({ isOpen: true, type });
   const handleClose = () => setOpen({ isOpen: false, type: '' });
 
@@ -35,14 +39,13 @@ const ShippingContent = () => {
     handleClose();
   };
 
-  console.log(checkoutStorage);
   const handleStripePayment = () => {
     stripe({
-      lineItems: checkoutStorage.products.map((el) => ({
+      lineItems: checkoutData.products.map((el) => ({
         price: el.product.stripeID,
         quantity: el.quantity,
       })),
-      userInfo: checkoutStorage.userInfo,
+      userInfo: checkoutData.userInfo,
     });
     setCookie(null, 'review-session', 'active', {
       maxAge: 3600,
@@ -56,7 +59,7 @@ const ShippingContent = () => {
   };
 
   const mapProductsToDom = () => {
-    return checkoutStorage?.products?.map((entry, i) => (
+    return checkoutData?.products?.map((entry, i) => (
       <DataCard
         key={i}
         data={entry.product}
@@ -86,10 +89,10 @@ const ShippingContent = () => {
       >
         <Box flexGrow={1} sx={{ minWidth: '65%', ml: { xs: 2, md: 12 } }}>
           <ShippingData
-            email={checkoutStorage?.userInfo?.email}
-            address={checkoutStorage?.userInfo?.address}
-            city={checkoutStorage?.userInfo?.city}
-            postcode={checkoutStorage?.userInfo?.postcode}
+            email={checkoutData?.userInfo?.email}
+            address={checkoutData?.userInfo?.address}
+            city={checkoutData?.userInfo?.city}
+            postcode={checkoutData?.userInfo?.postcode}
             handleOpen={handleOpen}
           />
           <Box