Skip to content

Commit 72707a1

Browse files
committed
Move handleQuantityChange to functions
1 parent 94e2348 commit 72707a1

File tree

3 files changed

+64
-73
lines changed

3 files changed

+64
-73
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/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">

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)