Merge pull request #1353 from w3bdesign/develop

Fix add to cart

Author: w3bdesign

src/components/Product/AddToCart.component.tsx

@@ -90,12 +90,13 @@ export interface IProductRootObject {
  * @param {number} variationId // Variation ID
  * @param {boolean} fullWidth // Whether the button should be full-width
  */
+
 const AddToCart = ({
   product,
   variationId,
   fullWidth = false,
 }: IProductRootObject) => {
-  const { updateCart } = useContext(CartContext);
+  const { setCart, isLoading: isCartLoading } = useContext(CartContext);
   const [requestError, setRequestError] = useState<boolean>(false);
 
   const productId = product?.databaseId ? product?.databaseId : variationId;
@@ -106,14 +107,20 @@ const AddToCart = ({
   };
 
   // Get cart data query
-  const { refetch } = useQuery(GET_CART, {
+  const { data, refetch } = useQuery(GET_CART, {
     notifyOnNetworkStatusChange: true,
-    onCompleted: (data) => {
-      // Update cart in the localStorage and React Context.
+    onCompleted: () => {
+      // Update cart in the localStorage.
       const updatedCart = getFormattedCart(data);
-      if (updatedCart) {
-        updateCart(updatedCart);
+
+      if (!updatedCart) {
+        return;
       }
+
+      localStorage.setItem('woocommerce-cart', JSON.stringify(updatedCart));
+
+      // Update cart data in React Context.
+      setCart(updatedCart);
     },
   });
 
@@ -122,36 +129,33 @@ const AddToCart = ({
     variables: {
       input: productQueryInput,
     },
-    onCompleted: (data) => {
-      // Immediately update the cart with new values
-      const updatedCart = getFormattedCart(data);
-      if (updatedCart) {
-        updateCart(updatedCart);
-      }
+
+    onCompleted: () => {
+      // Update the cart with new values in React context.
+      refetch();
     },
+
     onError: () => {
       setRequestError(true);
     },
   });
 
-  const handleAddToCart = async () => {
-    try {
-      await addToCart();
-      // Refetch cart immediately after adding to cart
-      await refetch();
-    } catch (error) {
-      setRequestError(true);
-    }
+  const handleAddToCart = () => {
+    addToCart();
+    // Refetch cart after 2 seconds
+    setTimeout(() => {
+      refetch();
+    }, 2000);
   };
 
   return (
     <>
       <Button
-        handleButtonClick={handleAddToCart}
-        buttonDisabled={addToCartLoading || requestError}
+        handleButtonClick={() => handleAddToCart()}
+        buttonDisabled={addToCartLoading || requestError || isCartLoading}
         fullWidth={fullWidth}
       >
-        KJØP
+        {isCartLoading ? 'Loading...' : 'KJØP'}
       </Button>
     </>
   );

src/stores/CartProvider.tsx

@@ -51,12 +51,14 @@ interface ICartContext {
   cart: RootObject | null | undefined;
   setCart: React.Dispatch<React.SetStateAction<TRootObjectNull>>;
   updateCart: (newCart: RootObject) => void;
+  isLoading: boolean;
 }
 
 const CartState: ICartContext = {
   cart: null,
   setCart: () => {},
   updateCart: () => {},
+  isLoading: true,
 };
 
 export const CartContext = createContext<ICartContext>(CartState);
@@ -66,6 +68,7 @@ export const CartContext = createContext<ICartContext>(CartState);
  */
 export const CartProvider = ({ children }: ICartProviderProps) => {
   const [cart, setCart] = useState<RootObject | null>();
+  const [isLoading, setIsLoading] = useState(true);
 
   useEffect(() => {
     // Check if we are client-side before we access the localStorage
@@ -75,6 +78,7 @@ export const CartProvider = ({ children }: ICartProviderProps) => {
         const cartData: RootObject = JSON.parse(localCartData);
         setCart(cartData);
       }
+      setIsLoading(false);
     }
   }, []);
 
@@ -86,8 +90,8 @@ export const CartProvider = ({ children }: ICartProviderProps) => {
   };
 
   const contextValue = useMemo(() => {
-    return { cart, setCart, updateCart };
-  }, [cart]);
+    return { cart, setCart, updateCart, isLoading };
+  }, [cart, isLoading]);
 
   return (
     <CartContext.Provider value={contextValue}>