Merge pull request #974 from w3bdesign/develop

Move handleQuantityChange to functions

Author: w3bdesign

components/Cart/CartPage/CartItem.component.jsx

@@ -1,10 +1,9 @@
 /*eslint complexity: ["error", 6]*/
 
 import { useState } from 'react';
-import { v4 as uuidv4 } from 'uuid';
 
 import SVGX from 'components/SVG/SVGX.component';
-import { getUpdatedItems, paddedPrice } from 'utils/functions/functions';
+import { paddedPrice, handleQuantityChange } from 'utils/functions/functions';
 
 const CartItem = ({
   item,
@@ -16,40 +15,6 @@ const CartItem = ({
   const [productCount, setProductCount] = useState(item.qty);
   const totalPrice = paddedPrice(item.totalPrice, 'kr');
 
-  /*
-   * 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, 10) : 1;
-
-      // Set the new quantity in state.
-      setProductCount(newQty);
-      if (products.length) {
-        const updatedItems = getUpdatedItems(products, newQty, cartKey);
-
-        updateCart({
-          variables: {
-            input: {
-              clientMutationId: uuidv4(),
-              items: updatedItems,
-            },
-          },
-        });
-      }
-    }
-  };
   return (
     <tr className="bg-gray-100">
       <td className="px-4 py-2 border">
@@ -77,7 +42,16 @@ const CartItem = ({
           type="number"
           min="1"
           defaultValue={productCount}
-          onChange={(event) => handleQuantityChange(event, item.cartKey)}
+          onChange={(event) =>
+            handleQuantityChange(
+              event,
+              item.cartKey,
+              products,
+              updateCart,
+              updateCartProcessing,
+              setProductCount
+            )
+          }
         />
       </td>
       <td className="px-4 py-2 border">

components/Cart/CartPage/MobileCart.component.jsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import { v4 as uuidv4 } from 'uuid';
 
 import MobileCartItem from './MobileCartItem.component';
@@ -25,13 +26,14 @@ const MobileCart = ({ cart, handleRemoveProductClick, updateCart }) => (
           <tbody className="flex-1 sm:flex-none">
             {cart.products.length &&
               cart.products.map((item) => (
-                <MobileCartItem
-                  key={uuidv4()}
-                  item={item}
-                  products={cart.products}
-                  handleRemoveProductClick={handleRemoveProductClick}
-                  updateCart={updateCart}
-                />
+                <React.Fragment key={item.cartKey}>
+                  <MobileCartItem
+                    item={item}
+                    products={cart.products}
+                    handleRemoveProductClick={handleRemoveProductClick}
+                    updateCart={updateCart}
+                  />
+                </React.Fragment>
               ))}
           </tbody>
         </table>

components/Cart/CartPage/MobileCartItem.component.jsx

@@ -1,10 +1,9 @@
 /*eslint complexity: ["error", 6]*/
 
 import { useState } from 'react';
-import { v4 as uuidv4 } from 'uuid';
 
 import SVGX from 'components/SVG/SVGX.component';
-import { getUpdatedItems } from 'utils/functions/functions';
+import { handleQuantityChange } from 'utils/functions/functions';
 
 const MobileCartItem = ({
   item,
@@ -15,39 +14,6 @@ const MobileCartItem = ({
 }) => {
   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, 10) : 1;
-      // Set the new quantity in state.
-      setProductCount(newQty);
-      if (products.length) {
-        const updatedItems = getUpdatedItems(products, newQty, cartKey);
-        updateCart({
-          variables: {
-            input: {
-              clientMutationId: uuidv4(),
-              items: updatedItems,
-            },
-          },
-        });
-      }
-    }
-  };
-
   return (
     <tr className="flex flex-col mb-2 border border-gray-300 sm:mb-0">
       <td className="h-12 p-3">
@@ -68,7 +34,16 @@ const MobileCartItem = ({
           type="number"
           min="1"
           defaultValue={productCount}
-          onChange={(event) => handleQuantityChange(event, item.cartKey)}
+          onChange={(event) =>
+            handleQuantityChange(
+              event,
+              item.cartKey,
+              products,
+              updateCart,
+              updateCartProcessing,
+              setProductCount
+            )
+          }
         />
       </td>
       <td className="h-12 p-3">

components/Cart/CartPage/RegularCart.component.jsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import CartItem from './CartItem.component';
 
 const RegularCart = ({
@@ -28,14 +29,15 @@ const RegularCart = ({
     <tbody>
       {cart.products.length &&
         cart.products.map((item) => (
-          <CartItem
-            key={item.cartKey}
-            item={item}
-            products={cart.products}
-            handleRemoveProductClick={handleRemoveProductClick}
-            updateCart={updateCart}
-            updateCartProcessing={updateCartProcessing}
-          />
+          <React.Fragment key={item.cartKey}>
+            <CartItem
+              item={item}
+              products={cart.products}
+              handleRemoveProductClick={handleRemoveProductClick}
+              updateCart={updateCart}
+              updateCartProcessing={updateCartProcessing}
+            />
+          </React.Fragment>
         ))}
     </tbody>
   </table>

utils/functions/functions.js

@@ -198,3 +198,45 @@ export const getUpdatedItems = (products, newQty, cartKey) => {
   // Return the updatedItems array with new Qtys.
   return updatedItems;
 };
+
+/*
+ * When user changes the quantity, update the cart in localStorage
+ * Also update the cart in the global Context
+ *
+ * @param {Object} event cartKey
+ *
+ * @return {void}
+ */
+export const handleQuantityChange = (
+  event,
+  cartKey,
+  products,
+  updateCart,
+  updateCartProcessing,
+  setProductCount
+) => {
+  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, 10) : 1;
+
+    // Set the new quantity in state.
+    setProductCount(newQty);
+    if (products.length) {
+      const updatedItems = getUpdatedItems(products, newQty, cartKey);
+
+      updateCart({
+        variables: {
+          input: {
+            clientMutationId: uuidv4(),
+            items: updatedItems,
+          },
+        },
+      });
+    }
+  }
+};