Skip to content

Commit 4841666

Browse files
w3bdesignw3bdesign
authored
Merge pull request #974 from w3bdesign/develop
Move handleQuantityChange to functions
2 parents f86872c + 72707a1 commit 4841666

File tree

5 files changed

+83
-88
lines changed

5 files changed

+83
-88
lines changed

‎components/Cart/CartPage/CartItem.component.jsx

Lines changed: 11 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
11
/*eslint complexity: ["error", 6]*/
22

33
import { useState } from 'react';
4-
import { v4 as uuidv4 } from 'uuid';
54

65
import SVGX from 'components/SVG/SVGX.component';
7-
import { getUpdatedItems, paddedPrice } from 'utils/functions/functions';
6+
import { paddedPrice, handleQuantityChange } from 'utils/functions/functions';
87

98
const CartItem = ({
109
item,
@@ -16,40 +15,6 @@ const CartItem = ({
1615
const [productCount, setProductCount] = useState(item.qty);
1716
const totalPrice = paddedPrice(item.totalPrice, 'kr');
1817

19-
/*
20-
* When user changes the quantity, update the cart in localStorage
21-
* Also update the cart in the global Context
22-
*
23-
* @param {Object} event cartKey
24-
*
25-
* @return {void}
26-
*/
27-
const handleQuantityChange = (event, cartKey) => {
28-
if (process.browser) {
29-
event.stopPropagation();
30-
// Return if the previous update cart mutation request is still processing
31-
if (updateCartProcessing) {
32-
return;
33-
}
34-
// 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 )
35-
const newQty = event.target.value ? parseInt(event.target.value, 10) : 1;
36-
37-
// Set the new quantity in state.
38-
setProductCount(newQty);
39-
if (products.length) {
40-
const updatedItems = getUpdatedItems(products, newQty, cartKey);
41-
42-
updateCart({
43-
variables: {
44-
input: {
45-
clientMutationId: uuidv4(),
46-
items: updatedItems,
47-
},
48-
},
49-
});
50-
}
51-
}
52-
};
5318
return (
5419
<tr className="bg-gray-100">
5520
<td className="px-4 py-2 border">
@@ -77,7 +42,16 @@ const CartItem = ({
7742
type="number"
7843
min="1"
7944
defaultValue={productCount}
80-
onChange={(event) => handleQuantityChange(event, item.cartKey)}
45+
onChange={(event) =>
46+
handleQuantityChange(
47+
event,
48+
item.cartKey,
49+
products,
50+
updateCart,
51+
updateCartProcessing,
52+
setProductCount
53+
)
54+
}
8155
/>
8256
</td>
8357
<td className="px-4 py-2 border">

‎components/Cart/CartPage/MobileCart.component.jsx

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import React from 'react';
12
import { v4 as uuidv4 } from 'uuid';
23

34
import MobileCartItem from './MobileCartItem.component';
@@ -25,13 +26,14 @@ const MobileCart = ({ cart, handleRemoveProductClick, updateCart }) => (
2526
<tbody className="flex-1 sm:flex-none">
2627
{cart.products.length &&
2728
cart.products.map((item) => (
28-
<MobileCartItem
29-
key={uuidv4()}
30-
item={item}
31-
products={cart.products}
32-
handleRemoveProductClick={handleRemoveProductClick}
33-
updateCart={updateCart}
34-
/>
29+
<React.Fragment key={item.cartKey}>
30+
<MobileCartItem
31+
item={item}
32+
products={cart.products}
33+
handleRemoveProductClick={handleRemoveProductClick}
34+
updateCart={updateCart}
35+
/>
36+
</React.Fragment>
3537
))}
3638
</tbody>
3739
</table>

‎components/Cart/CartPage/MobileCartItem.component.jsx

Lines changed: 11 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
11
/*eslint complexity: ["error", 6]*/
22

33
import { useState } from 'react';
4-
import { v4 as uuidv4 } from 'uuid';
54

65
import SVGX from 'components/SVG/SVGX.component';
7-
import { getUpdatedItems } from 'utils/functions/functions';
6+
import { handleQuantityChange } from 'utils/functions/functions';
87

98
const MobileCartItem = ({
109
item,
@@ -15,39 +14,6 @@ const MobileCartItem = ({
1514
}) => {
1615
const [productCount, setProductCount] = useState(item.qty);
1716

18-
/*
19-
* When user changes the quantity, update the cart in localStorage
20-
* Also update the cart in the global Context
21-
*
22-
* @param {Object} event cartKey
23-
*
24-
* @return {void}
25-
*/
26-
const handleQuantityChange = (event, cartKey) => {
27-
if (process.browser) {
28-
event.stopPropagation();
29-
// Return if the previous update cart mutation request is still processing
30-
if (updateCartProcessing) {
31-
return;
32-
}
33-
// 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 )
34-
const newQty = event.target.value ? parseInt(event.target.value, 10) : 1;
35-
// Set the new quantity in state.
36-
setProductCount(newQty);
37-
if (products.length) {
38-
const updatedItems = getUpdatedItems(products, newQty, cartKey);
39-
updateCart({
40-
variables: {
41-
input: {
42-
clientMutationId: uuidv4(),
43-
items: updatedItems,
44-
},
45-
},
46-
});
47-
}
48-
}
49-
};
50-
5117
return (
5218
<tr className="flex flex-col mb-2 border border-gray-300 sm:mb-0">
5319
<td className="h-12 p-3">
@@ -68,7 +34,16 @@ const MobileCartItem = ({
6834
type="number"
6935
min="1"
7036
defaultValue={productCount}
71-
onChange={(event) => handleQuantityChange(event, item.cartKey)}
37+
onChange={(event) =>
38+
handleQuantityChange(
39+
event,
40+
item.cartKey,
41+
products,
42+
updateCart,
43+
updateCartProcessing,
44+
setProductCount
45+
)
46+
}
7247
/>
7348
</td>
7449
<td className="h-12 p-3">

‎components/Cart/CartPage/RegularCart.component.jsx

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import React from 'react';
12
import CartItem from './CartItem.component';
23

34
const RegularCart = ({
@@ -28,14 +29,15 @@ const RegularCart = ({
2829
<tbody>
2930
{cart.products.length &&
3031
cart.products.map((item) => (
31-
<CartItem
32-
key={item.cartKey}
33-
item={item}
34-
products={cart.products}
35-
handleRemoveProductClick={handleRemoveProductClick}
36-
updateCart={updateCart}
37-
updateCartProcessing={updateCartProcessing}
38-
/>
32+
<React.Fragment key={item.cartKey}>
33+
<CartItem
34+
item={item}
35+
products={cart.products}
36+
handleRemoveProductClick={handleRemoveProductClick}
37+
updateCart={updateCart}
38+
updateCartProcessing={updateCartProcessing}
39+
/>
40+
</React.Fragment>
3941
))}
4042
</tbody>
4143
</table>

‎utils/functions/functions.js

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -198,3 +198,45 @@ export const getUpdatedItems = (products, newQty, cartKey) => {
198198
// Return the updatedItems array with new Qtys.
199199
return updatedItems;
200200
};
201+
202+
/*
203+
* When user changes the quantity, update the cart in localStorage
204+
* Also update the cart in the global Context
205+
*
206+
* @param {Object} event cartKey
207+
*
208+
* @return {void}
209+
*/
210+
export const handleQuantityChange = (
211+
event,
212+
cartKey,
213+
products,
214+
updateCart,
215+
updateCartProcessing,
216+
setProductCount
217+
) => {
218+
if (process.browser) {
219+
event.stopPropagation();
220+
// Return if the previous update cart mutation request is still processing
221+
if (updateCartProcessing) {
222+
return;
223+
}
224+
// 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 )
225+
const newQty = event.target.value ? parseInt(event.target.value, 10) : 1;
226+
227+
// Set the new quantity in state.
228+
setProductCount(newQty);
229+
if (products.length) {
230+
const updatedItems = getUpdatedItems(products, newQty, cartKey);
231+
232+
updateCart({
233+
variables: {
234+
input: {
235+
clientMutationId: uuidv4(),
236+
items: updatedItems,
237+
},
238+
},
239+
});
240+
}
241+
}
242+
};

0 commit comments

Comments
 (0)