Return if cart is processing

Author: w3bdesign

components/Cart/CartPage/CartItem.component.jsx

@@ -4,7 +4,13 @@ import { v4 } from 'uuid';
 import SVGX from 'components/SVG/SVGX.component';
 import { getUpdatedItems } from 'utils/functions/functions';
 
-const CartItem = ({ item, products, handleRemoveProductClick, updateCart }) => {
+const CartItem = ({
+  item,
+  products,
+  handleRemoveProductClick,
+  updateCart,
+  updateCartProcessing,
+}) => {
   const [productCount, setProductCount] = useState(item.qty);
 
   /*
@@ -19,10 +25,10 @@ const CartItem = ({ item, products, handleRemoveProductClick, updateCart }) => {
     if (process.browser) {
       event.stopPropagation();
       // Return if the previous update cart mutation request is still processing
-      /*
+
       if (updateCartProcessing) {
         return;
-      }*/
+      }
       // If the user tries to delete the count of product, set that to 1 by default ( This will not allow him to reduce it less than zero )
       const newQty = event.target.value ? parseInt(event.target.value) : 1;
 

components/Cart/CartPage/CartItemsContainer.component.jsx

@@ -1,7 +1,6 @@
 import Link from 'next/link';
 import { v4 } from 'uuid';
 import { useContext, useState } from 'react';
-
 import { useQuery, useMutation } from '@apollo/react-hooks';
 
 import { AppContext } from 'utils/context/AppContext';
@@ -74,17 +73,12 @@ const CartItemsContainer = () => {
       const updatedCart = getFormattedCart(data);
       localStorage.setItem('woocommerce-cart', JSON.stringify(updatedCart));
       // Update cart data in React Context.
-
-
-     
       setCart(updatedCart);
     },
-    onError: (error) => {
-      console.warn('Error fetching cart');
+    onError: (error) => {     
       setRequestError(error);
     },
   });
-
   return (
     <>
       <section className="py-8 bg-white">
@@ -95,14 +89,14 @@ const CartItemsContainer = () => {
               <RegularCart
                 cart={cart}
                 updateCartProcessing={updateCartProcessing}
-                handleRemoveProductClick={handleRemoveProductClick} 
-                updateCart={updateCart}               
+                handleRemoveProductClick={handleRemoveProductClick}
+                updateCart={updateCart}
               />
               <MobileCart
                 cart={cart}
                 updateCartProcessing={updateCartProcessing}
-                handleRemoveProductClick={handleRemoveProductClick}  
-                updateCart={updateCart}              
+                handleRemoveProductClick={handleRemoveProductClick}
+                updateCart={updateCart}
               />
               <div className="mt-4">
                 <Link href="/kasse">

components/Cart/CartPage/RegularCart.component.jsx

@@ -1,6 +1,6 @@
 import CartItem from './CartItem.component';
 
-const RegularCart = ({ cart, handleRemoveProductClick, updateCart }) => {
+const RegularCart = ({ cart, handleRemoveProductClick, updateCart, updateCartProcessing }) => {
   return (
     <table className="hidden table-auto md:block lg:block xl:block">
       <thead>
@@ -30,6 +30,7 @@ const RegularCart = ({ cart, handleRemoveProductClick, updateCart }) => {
               products={cart.products}
               handleRemoveProductClick={handleRemoveProductClick}              
               updateCart={updateCart}
+              updateCartProcessing={updateCartProcessing}
             />
           ))}
       </tbody>