Mobile cart is working!

Author: w3bdesign

components/Cart/CartPage/CartItem.component.jsx

@@ -2,7 +2,6 @@ import { useState } from 'react';
 import { v4 } from 'uuid';
 
 import SVGX from 'components/SVG/SVGX.component';
-
 import { getUpdatedItems } from 'utils/functions/functions';
 
 const CartItem = ({ item, products, handleRemoveProductClick, updateCart }) => {

components/Cart/CartPage/MobileCart.component.jsx

@@ -24,57 +24,21 @@ const MobileCart = ({ cart, handleRemoveProductClick, updateCart }) => {
                   </tr>
                 ))}
             </thead>
-
             <tbody className="flex-1 sm:flex-none">
-              {/*
-            {cart.products.length &&
-                cart.products.map((item) => (
-
-            <MobileCartItem
-              key={item.productId}
-              item={item}
-              products={cart.products}
-              handleRemoveProductClick={handleRemoveProductClick}
-              updateCart={updateCart}
-            />
-            ))}
-
-              */}
-
               {cart.products.length &&
                 cart.products.map((item) => (
-                  <tr className="flex flex-col mb-2 flex-no wrap sm:table-row sm:mb-0">
-                    <td className="h-12 p-3 border-2 border-gray-400 ">
-                      <SVGX />
-                    </td>
-                    <td className="h-12 p-3 border-l-2 border-r-2 border-gray-400 ">
-                      {item.name}
-                    </td>
-                    <td className="h-12 p-3 border-2 border-gray-400 ">
-                      kr{item.price.toFixed(2)}
-                    </td>
-                    <td className="h-12 p-3 border-l-2 border-r-2 border-gray-400 ">
-                      {item.qty}
-                    </td>
-                    <td className="h-12 p-3 border-2 border-gray-400 ">
-                      {item.totalPrice}
-                    </td>
-                  </tr>
+                  <MobileCartItem
+                    key={item.productId}
+                    item={item}
+                    products={cart.products}
+                    handleRemoveProductClick={handleRemoveProductClick}
+                    updateCart={updateCart}
+                  />
                 ))}
             </tbody>
           </table>
         </div>
       </div>
-
-      {/*
-     <MobileCartItem
-              key={item.productId}
-              item={item}
-              products={cart.products}
-              handleRemoveProductClick={handleRemoveProductClick}
-              updateCart={updateCart}
-            />
-            */}
     </section>
   );
 };

components/Cart/CartPage/MobileCartItem.component.jsx

@@ -1,39 +1,82 @@
 import { useState } from 'react';
+import { v4 } from 'uuid';
 
 import SVGX from 'components/SVG/SVGX.component';
+import { getUpdatedItems } from 'utils/functions/functions';
 
-const MobileCartItem = ({ item }) => {
+const MobileCartItem = ({
+  item,
+  products,
+  handleRemoveProductClick,
+  updateCart,
+}) => {
   const [productCount, setProductCount] = useState(item.qty);
 
+  /*
+   * 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();
+      // 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;
+      // Set the new quantity in state.
+      setProductCount(newQty);
+      if (products.length) {
+        const updatedItems = getUpdatedItems(products, newQty, cartKey);
+        updateCart({
+          variables: {
+            input: {
+              clientMutationId: v4(),
+              items: updatedItems,
+            },
+          },
+        });
+      }
+    }
+  };
+
   return (
     <>
-      <div className="inline-block pt-2">
-        <SVGX />
-      </div>
-
-      <div className="inline-block pt-2">{item.name}</div>
-
-      <div className="inline-block pt-2">
+      <tr className="flex flex-col mb-2 flex-no wrap sm:table-row sm:mb-0">
+        <td className="h-12 p-3 border-2 border-gray-400 ">
+        <SVGX
+          cartKey={item.cartKey}
+          handleRemoveProductClick={handleRemoveProductClick}
+          products={products}
+        />
+        </td>
+        <td className="h-12 p-3 border-l-2 border-r-2 border-gray-400 ">
+          {item.name}
+        </td>
+        <td className="h-12 p-3 border-2 border-gray-400 ">
         {'string' !== typeof item.price ? item.price.toFixed(2) : item.price}
-      </div>
-
-      <div className="inline-block pt-2">
+        </td>
+        <td className="h-12 p-3 border-l-2 border-r-2 border-gray-400 ">
         <input
           className="w-12"
           type="number"
           min="1"
           defaultValue={productCount}
-          onChange={() => {
-            console.log('Changed quantity ...');
-          }}
+          onChange={(event) => handleQuantityChange(event, item.cartKey)}
         />
-      </div>
-
-      <div className="inline-block pt-2">
+        </td>
+        <td className="h-12 p-3 border-2 border-gray-400 ">
         {'string' !== typeof item.totalPrice
           ? item.totalPrice.toFixed(2)
           : item.totalPrice}
-      </div>
+        </td>
+      </tr>
     </>
   );
 };