We can now update quantity in the cart

Author: w3bdesign

components/Cart/CartPage/CartItem.component.jsx

@@ -1,10 +1,56 @@
 import { useState } from 'react';
+import { v4 } from 'uuid';
 
 import SVGX from 'components/SVG/SVGX.component';
 
-const CartItem = ({ item, products, handleRemoveProductClick }) => {
+import { getUpdatedItems } from '../../../utils/functions/functions';
+
+const CartItem = ({
+  item,
+  products,
+  handleRemoveProductClick,  
+  updateCart,
+}) => {
   const [productCount, setProductCount] = useState(item.qty);
 
+  console.log("Update cart: ");
+  console.log(updateCart);
+
+  /*
+   * When user changes the quantity, update the cart in localStorage
+   * Also update the cart in the global Context
+   *
+   * @param {Object} event cartKey
+   *
+   * @return {void}
+   */
+  const handleQuantityChange = (event, cartKey) => {
+    if (process.browser) {
+      event.stopPropagation();
+      // If the previous update cart mutation request is still processing, then return.
+      
+      /*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;
+      // Set the new qty in state.
+      setProductCount(newQty);
+      if (products.length) {
+        const updatedItems = getUpdatedItems(products, newQty, cartKey);
+
+        updateCart({
+          variables: {
+            input: {
+              clientMutationId: v4(),
+              items: updatedItems,
+            },
+          },
+        });
+      }
+    }
+  };
+
   return (
     <tr className="bg-gray-100">
       <td className="px-4 py-2 border">
@@ -35,9 +81,7 @@ const CartItem = ({ item, products, handleRemoveProductClick }) => {
           type="number"
           min="1"
           defaultValue={productCount}
-          onChange={() => {
-            console.log('Changed quantity ...');
-          }}
+          onChange={(event) => handleQuantityChange(event, item.cartKey)}
         />
       </td>
 

components/Cart/CartPage/CartItemsContainer.component.jsx

@@ -91,11 +91,15 @@ const CartItemsContainer = () => {
               <PageTitle title="Handlekurv" />
               <RegularCart
                 cart={cart}
-                handleRemoveProductClick={handleRemoveProductClick}
+                updateCartProcessing={updateCartProcessing}
+                handleRemoveProductClick={handleRemoveProductClick} 
+                updateCart={updateCart}               
               />
               <MobileCart
                 cart={cart}
-                handleRemoveProductClick={handleRemoveProductClick}
+                updateCartProcessing={updateCartProcessing}
+                handleRemoveProductClick={handleRemoveProductClick}  
+                updateCart={updateCart}              
               />
               <div className="mt-4">
                 <Link href="/kasse">

components/Cart/CartPage/MobileCart.component.jsx

@@ -1,6 +1,6 @@
 import MobileCartItem from './MobileCartItem.component';
 
-const MobileCart = ({ cart, handleRemoveProductClick }) => {
+const MobileCart = ({ cart, handleRemoveProductClick, updateCart }) => {
   return (
     <section
       //className="container mx-auto bg-white md:hidden lg:hidden xl:hidden"
@@ -124,6 +124,7 @@ const MobileCart = ({ cart, handleRemoveProductClick }) => {
               item={item}
               products={cart.products}
               handleRemoveProductClick={handleRemoveProductClick}
+              updateCart={updateCart}
             />
           ))}
       </div>

components/Cart/CartPage/RegularCart.component.jsx

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