Skip to content

Commit c83c088

Browse files
w3bdesignw3bdesign
committed
We can now remove items from cart
1 parent 6bc8bd4 commit c83c088

File tree

5 files changed

+153
-35
lines changed

5 files changed

+153
-35
lines changed

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

Lines changed: 7 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -2,25 +2,17 @@ import { useState } from 'react';
22

33
import SVGX from 'components/SVG/SVGX.component';
44

5-
const CartItem = ({
6-
item,
7-
products,
8-
updateCartProcessing,
9-
handleRemoveProductClick,
10-
updateCart,
11-
}) => {
5+
const CartItem = ({ item, products, handleRemoveProductClick }) => {
126
const [productCount, setProductCount] = useState(item.qty);
137

148
return (
159
<tr className="bg-gray-100">
1610
<td className="px-4 py-2 border">
17-
<span>
18-
<SVGX
19-
onClick={() => {
20-
//setisExpanded(!isExpanded);
21-
}}
22-
/>
23-
</span>
11+
<SVGX
12+
cartKey={item.cartKey}
13+
handleRemoveProductClick={handleRemoveProductClick}
14+
products={products}
15+
/>
2416
</td>
2517
<td className="px-4 py-2 border">
2618
<img
@@ -38,9 +30,7 @@ const CartItem = ({
3830
</td>
3931

4032
<td className="px-4 py-2 border">
41-
<input
42-
className="w-12"
43-
type="number" min="1" value={productCount} />
33+
<input className="w-12" type="number" min="1" value={productCount} />
4434
</td>
4535

4636
<td className="px-4 py-2 border">

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

Lines changed: 54 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -8,25 +8,64 @@ import { AppContext } from 'utils/context/AppContext';
88
import {
99
getFormattedCart,
1010
getUpdatedItems,
11-
removeItemFromCart,
1211
} from '../../../utils/functions/functions';
1312

1413
import PageTitle from 'components/Header/PageTitle.component';
1514
import RegularCart from './RegularCart.component';
1615
import MobileCart from './MobileCart.component';
1716

1817
import { GET_CART } from 'utils/const/GQL_QUERIES';
19-
20-
/*
21-
import UPDATE_CART from "../../../mutations/update-cart";
22-
import GET_CART from "../../../queries/get-cart";
23-
import CLEAR_CART_MUTATION from "../../../mutations/clear-cart";
24-
*/
18+
import { UPDATE_CART } from 'utils/const/GQL_MUTATIONS';
2519

2620
const CartItemsContainer = () => {
2721
const [cart, setCart] = useContext(AppContext);
2822
const [requestError, setRequestError] = useState(null);
2923

24+
// Update Cart Mutation.
25+
const [
26+
updateCart,
27+
{
28+
data: updateCartResponse,
29+
loading: updateCartProcessing,
30+
error: updateCartError,
31+
},
32+
] = useMutation(UPDATE_CART, {
33+
onCompleted: () => {
34+
refetch();
35+
},
36+
onError: (error) => {
37+
if (error) {
38+
setRequestError(error);
39+
}
40+
},
41+
});
42+
43+
/*
44+
* Handle remove product click.
45+
*
46+
* @param {Object} event event
47+
* @param {Integer} Product Id.
48+
*
49+
* @return {void}
50+
*/
51+
const handleRemoveProductClick = (event, cartKey, products) => {
52+
event.stopPropagation();
53+
if (products.length) {
54+
// By passing the newQty to 0 in updateCart Mutation, it will remove the item.
55+
const newQty = 0;
56+
const updatedItems = getUpdatedItems(products, newQty, cartKey);
57+
58+
updateCart({
59+
variables: {
60+
input: {
61+
clientMutationId: v4(),
62+
items: updatedItems,
63+
},
64+
},
65+
});
66+
}
67+
};
68+
3069
const { loading, error, data, refetch } = useQuery(GET_CART, {
3170
onCompleted: () => {
3271
// Update cart in the localStorage.
@@ -49,10 +88,14 @@ const CartItemsContainer = () => {
4988
{cart ? (
5089
<div className="p-6 mx-auto mt-5">
5190
<PageTitle title="Handlekurv" />
52-
53-
<RegularCart cart={cart} />
54-
<MobileCart cart={cart} />
55-
91+
<RegularCart
92+
cart={cart}
93+
handleRemoveProductClick={handleRemoveProductClick}
94+
/>
95+
<MobileCart
96+
cart={cart}
97+
handleRemoveProductClick={handleRemoveProductClick}
98+
/>
5699
<div className="mt-4">
57100
<Link href="/kasse">
58101
<button className="px-4 py-2 font-bold bg-white border border-gray-400 border-solid rounded hover:bg-gray-400">
@@ -64,7 +107,6 @@ const CartItemsContainer = () => {
64107
) : (
65108
<div className="p-6 mx-auto mt-5">
66109
<h2 className="text-lg">Ingen varer i handlekurven</h2>
67-
68110
<button className="px-4 py-2 m-4 font-bold uppercase bg-white border border-gray-400 border-solid rounded hover:bg-gray-400">
69111
<Link href="/produkter">
70112
<a>Legg til varer</a>

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

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import CartItem from './CartItem.component';
22

3-
const RegularCart = ({ cart }) => {
3+
const RegularCart = ({ cart, handleRemoveProductClick }) => {
44
return (
55
<table className="hidden table-auto md:block lg:block xl:block">
66
<thead>
@@ -28,9 +28,7 @@ const RegularCart = ({ cart }) => {
2828
key={item.productId}
2929
item={item}
3030
products={cart.products}
31-
// updateCartProcessing={updateCartProcessing}
32-
// handleRemoveProductClick={handleRemoveProductClick}
33-
// updateCart={updateCart}
31+
handleRemoveProductClick={handleRemoveProductClick}
3432
/>
3533
))}
3634
</tbody>

‎components/SVG/SVGX.component.jsx

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,9 @@
22
* The SVG that we display inside of the cart to remove items
33
*/
44

5-
const SVGX = () => {
5+
const SVGX = ({ cartKey, products, handleRemoveProductClick }) => {
6+
//console.log("Props: ");
7+
//console.log(props);
68
return (
79
<>
810
<svg
@@ -16,7 +18,10 @@ const SVGX = () => {
1618
strokeWidth="2"
1719
strokeLinecap="round"
1820
strokeLinejoin="round"
19-
className="feather feather-x"
21+
className="cursor-pointer feather feather-x"
22+
onClick={(event) => {
23+
handleRemoveProductClick( event, cartKey, products )
24+
}}
2025
>
2126
<line x1="18" y1="6" x2="6" y2="18"></line>
2227
<line x1="6" y1="6" x2="18" y2="18"></line>

‎utils/const/GQL_MUTATIONS.js

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -80,3 +80,86 @@ export const CHECKOUT_MUTATION = gql`
8080
}
8181
}
8282
`;
83+
84+
export const UPDATE_CART = gql`
85+
mutation($input: UpdateItemQuantitiesInput!) {
86+
updateItemQuantities(input: $input) {
87+
items {
88+
key
89+
product {
90+
id
91+
productId
92+
name
93+
description
94+
type
95+
onSale
96+
slug
97+
averageRating
98+
reviewCount
99+
image {
100+
id
101+
sourceUrl
102+
altText
103+
}
104+
galleryImages {
105+
nodes {
106+
id
107+
sourceUrl
108+
altText
109+
}
110+
}
111+
}
112+
variation {
113+
id
114+
variationId
115+
name
116+
description
117+
type
118+
onSale
119+
price
120+
regularPrice
121+
salePrice
122+
image {
123+
id
124+
sourceUrl
125+
altText
126+
}
127+
attributes {
128+
nodes {
129+
id
130+
attributeId
131+
name
132+
value
133+
}
134+
}
135+
}
136+
quantity
137+
total
138+
subtotal
139+
subtotalTax
140+
}
141+
removed {
142+
key
143+
product {
144+
id
145+
productId
146+
}
147+
variation {
148+
id
149+
variationId
150+
}
151+
}
152+
updated {
153+
key
154+
product {
155+
id
156+
productId
157+
}
158+
variation {
159+
id
160+
variationId
161+
}
162+
}
163+
}
164+
}
165+
`;

0 commit comments

Comments
 (0)