Skip to content

Commit 9f32d65

Browse files
w3bdesignw3bdesign
authored
Merge pull request #166 from w3bdesign/development
Fix bug with session expiration
2 parents 7f07179 + 1353d9e commit 9f32d65

12 files changed

+198
-66
lines changed

‎components/Cart/AddToCartButton.component.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { v4 as uuidv4 } from 'uuid';
55
import { useQuery, useMutation } from '@apollo/react-hooks';
66

77
import { AppContext } from 'utils/context/AppContext';
8-
import LoadingSpinner from '../LoadingSpinner/LoadingSpinner.component';
8+
import LoadingSpinner from 'components/LoadingSpinner/LoadingSpinner.component';
99

1010
import { GET_CART } from 'utils/const/GQL_QUERIES';
1111
import { ADD_TO_CART } from 'utils/const/GQL_MUTATIONS';

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

Lines changed: 15 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,15 @@ 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
34+
className="w-12"
35+
type="number"
36+
min="1"
37+
defaultValue={productCount}
38+
onChange={() => {
39+
console.log('Changed quantity ...');
40+
}}
41+
/>
4442
</td>
4543

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

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

Lines changed: 67 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,72 @@
11
import Link from 'next/link';
22
import { v4 } from 'uuid';
3-
import { useContext, useState, useEffect } from 'react';
3+
import { useContext, useState } from 'react';
44

55
import { useQuery, useMutation } from '@apollo/react-hooks';
66

77
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';
16+
import LoadingSpinner from 'components/LoadingSpinner/LoadingSpinner.component';
1717

1818
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-
*/
19+
import { UPDATE_CART } from 'utils/const/GQL_MUTATIONS';
2520

2621
const CartItemsContainer = () => {
2722
const [cart, setCart] = useContext(AppContext);
2823
const [requestError, setRequestError] = useState(null);
2924

25+
// Update Cart Mutation.
26+
const [
27+
updateCart,
28+
{
29+
data: updateCartResponse,
30+
loading: updateCartProcessing,
31+
error: updateCartError,
32+
},
33+
] = useMutation(UPDATE_CART, {
34+
onCompleted: () => {
35+
refetch();
36+
},
37+
onError: (error) => {
38+
if (error) {
39+
setRequestError(error);
40+
}
41+
},
42+
});
43+
44+
/*
45+
* Handle remove product click.
46+
*
47+
* @param {Object} event event
48+
* @param {Integer} Product Id.
49+
*
50+
* @return {void}
51+
*/
52+
const handleRemoveProductClick = (event, cartKey, products) => {
53+
event.stopPropagation();
54+
if (products.length) {
55+
// By passing the newQty to 0 in updateCart Mutation, it will remove the item.
56+
const newQty = 0;
57+
const updatedItems = getUpdatedItems(products, newQty, cartKey);
58+
59+
updateCart({
60+
variables: {
61+
input: {
62+
clientMutationId: v4(),
63+
items: updatedItems,
64+
},
65+
},
66+
});
67+
}
68+
};
69+
3070
const { loading, error, data, refetch } = useQuery(GET_CART, {
3171
onCompleted: () => {
3272
// Update cart in the localStorage.
@@ -49,22 +89,36 @@ const CartItemsContainer = () => {
4989
{cart ? (
5090
<div className="p-6 mx-auto mt-5">
5191
<PageTitle title="Handlekurv" />
52-
53-
<RegularCart cart={cart} />
54-
<MobileCart cart={cart} />
55-
92+
<RegularCart
93+
cart={cart}
94+
handleRemoveProductClick={handleRemoveProductClick}
95+
/>
96+
<MobileCart
97+
cart={cart}
98+
handleRemoveProductClick={handleRemoveProductClick}
99+
/>
56100
<div className="mt-4">
57101
<Link href="/kasse">
58102
<button className="px-4 py-2 font-bold bg-white border border-gray-400 border-solid rounded hover:bg-gray-400">
59103
GÅ TIL KASSE
60104
</button>
61105
</Link>
62106
</div>
107+
{updateCartProcessing && (
108+
<>
109+
<div className="mt-4 text-xl text-left">
110+
Oppdaterer antall, vennligst vent ...
111+
<br />
112+
</div>
113+
<div>
114+
<LoadingSpinner />
115+
</div>
116+
</>
117+
)}
63118
</div>
64119
) : (
65120
<div className="p-6 mx-auto mt-5">
66121
<h2 className="text-lg">Ingen varer i handlekurven</h2>
67-
68122
<button className="px-4 py-2 m-4 font-bold uppercase bg-white border border-gray-400 border-solid rounded hover:bg-gray-400">
69123
<Link href="/produkter">
70124
<a>Legg til varer</a>

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

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,17 @@
11
import MobileCartItem from './MobileCartItem.component';
22

3-
const MobileCart = ({ cart }) => {
3+
const MobileCart = ({ cart, handleRemoveProductClick }) => {
44
return (
55
<section
66
//className="container mx-auto bg-white md:hidden lg:hidden xl:hidden"
77
className="bg-white md:hidden lg:hidden xl:hidden"
88
>
99
<div className="flex items-center justify-center">
1010
<div className="container">
11-
<table className="flex flex-row flex-no-wrap my-5 overflow-hidden rounded-lg sm:bg-white sm:shadow-lg" style={{width: "365px"}}>
11+
<table
12+
className="flex flex-row flex-no-wrap my-5 overflow-hidden rounded-lg sm:bg-white sm:shadow-lg"
13+
style={{ width: '365px' }}
14+
>
1215
<thead className="text-black">
1316
<tr className="flex flex-col mb-2 bg-gray-200 rounded-l-lg flex-no wrap sm:table-row sm:rounded-none sm:mb-0">
1417
<th className="p-3 text-left">Fjern</th>
@@ -113,19 +116,14 @@ const MobileCart = ({ cart }) => {
113116
</div>
114117
</div>
115118

116-
<div
117-
//className="flex flex-col"
118-
className="flex flex-col justify-between"
119-
>
119+
<div className="flex flex-col justify-between">
120120
{cart.products.length &&
121121
cart.products.map((item) => (
122122
<MobileCartItem
123123
key={item.productId}
124124
item={item}
125125
products={cart.products}
126-
// updateCartProcessing={updateCartProcessing}
127-
// handleRemoveProductClick={handleRemoveProductClick}
128-
// updateCart={updateCart}
126+
handleRemoveProductClick={handleRemoveProductClick}
129127
/>
130128
))}
131129
</div>

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

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -11,26 +11,28 @@ const MobileCartItem = ({ item }) => {
1111
<SVGX />
1212
</div>
1313

14-
<div className="inline-block pt-2">
15-
{item.name}
16-
17-
</div>
14+
<div className="inline-block pt-2">{item.name}</div>
1815

1916
<div className="inline-block pt-2">
2017
{'string' !== typeof item.price ? item.price.toFixed(2) : item.price}
21-
2218
</div>
2319

2420
<div className="inline-block pt-2">
25-
<input className="w-12" type="number" min="1" value={productCount} />
26-
21+
<input
22+
className="w-12"
23+
type="number"
24+
min="1"
25+
defaultValue={productCount}
26+
onChange={() => {
27+
console.log('Changed quantity ...');
28+
}}
29+
/>
2730
</div>
2831

2932
<div className="inline-block pt-2">
3033
{'string' !== typeof item.totalPrice
3134
? item.totalPrice.toFixed(2)
3235
: item.totalPrice}
33-
3436
</div>
3537
</>
3638
);

‎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/Product/SingleProduct.component.jsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -89,9 +89,9 @@ const SingleProduct = ({ product }) => {
8989
<option value="sort">Large</option>
9090
</select>
9191
</p>
92-
<p className="pt-1 mt-2">
92+
<div className="pt-1 mt-2">
9393
<AddToCartButton product={product} />
94-
</p>
94+
</div>
9595
</div>
9696
</div>
9797
</div>

‎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>

‎pages/handlekurv.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import CartItemsContainer from '../components/Cart/CartPage/CartItemsContainer.component';
1+
import CartItemsContainer from 'components/Cart/CartPage/CartItemsContainer.component';
22

33
const Handlekurv = () => {
44
return (

‎utils/apollo/ApolloClient.js

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,9 +26,10 @@ export const middleware = new ApolloLink((operation, forward) => {
2626
const sessionAge = process.browser
2727
? localStorage.getItem('woo-session-expiry')
2828
: null;
29-
29+
const todaysDate = new Date();
3030
const oneDay = 60 * 60 * 24 * 1000;
31-
const olderThan24h = new Date() - sessionAge > oneDay;
31+
const olderThan24h = new Date(todaysDate) - new Date(sessionAge) > oneDay;
32+
3233
if (olderThan24h && process.browser) {
3334
localStorage.removeItem('woo-session');
3435
localStorage.removeItem('woo-session-expiry');

0 commit comments

Comments
 (0)