Skip to content

Commit 1a3642a

Browse files
committed
Move localstorage code to zustand
1 parent a4a49fc commit 1a3642a

File tree

5 files changed

+32
-40
lines changed

5 files changed

+32
-40
lines changed

src/components/Cart/CartContents.component.tsx

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -21,21 +21,19 @@ import { UPDATE_CART } from '@/utils/gql/GQL_MUTATIONS';
2121

2222
const CartContents = () => {
2323
const router = useRouter();
24-
const { setCart } = useCartStore();
24+
const { clearWooCommerceSession, syncWithWooCommerce } = useCartStore();
2525
const isCheckoutPage = router.pathname === '/kasse';
2626

2727
const { data, refetch } = useQuery(GET_CART, {
2828
notifyOnNetworkStatusChange: true,
2929
onCompleted: () => {
3030
const updatedCart = getFormattedCart(data);
3131
if (!updatedCart && !data?.cart?.contents?.nodes?.length) {
32-
localStorage.removeItem('woocommerce-cart');
33-
setCart(null);
32+
clearWooCommerceSession();
3433
return;
3534
}
36-
localStorage.setItem('woocommerce-cart', JSON.stringify(updatedCart));
3735
if (updatedCart) {
38-
setCart(updatedCart);
36+
syncWithWooCommerce(updatedCart);
3937
}
4038
},
4139
});

src/components/Checkout/CheckoutForm.component.tsx

Lines changed: 4 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ export interface ICheckoutData {
5151
}
5252

5353
const CheckoutForm = () => {
54-
const { cart, setCart } = useCartStore();
54+
const { cart, clearWooCommerceSession, syncWithWooCommerce } = useCartStore();
5555
const [orderData, setOrderData] = useState<ICheckoutData | null>(null);
5656
const [requestError, setRequestError] = useState<ApolloError | null>(null);
5757
const [orderCompleted, setorderCompleted] = useState<boolean>(false);
@@ -60,21 +60,13 @@ const CheckoutForm = () => {
6060
const { data, refetch } = useQuery(GET_CART, {
6161
notifyOnNetworkStatusChange: true,
6262
onCompleted: () => {
63-
// Update cart in the localStorage.
6463
const updatedCart = getFormattedCart(data);
65-
6664
if (!updatedCart && !data?.cart?.contents?.nodes?.length) {
67-
localStorage.removeItem('woo-session');
68-
localStorage.removeItem('woocommerce-cart');
69-
setCart(null);
65+
clearWooCommerceSession();
7066
return;
7167
}
72-
73-
localStorage.setItem('woocommerce-cart', JSON.stringify(updatedCart));
74-
75-
// Update cart data in Zustand store
7668
if (updatedCart) {
77-
setCart(updatedCart);
69+
syncWithWooCommerce(updatedCart);
7870
}
7971
},
8072
});
@@ -87,10 +79,8 @@ const CheckoutForm = () => {
8779
input: orderData,
8880
},
8981
onCompleted: () => {
90-
localStorage.removeItem('woo-session');
91-
localStorage.removeItem('wooocommerce-cart');
82+
clearWooCommerceSession();
9283
setorderCompleted(true);
93-
setCart(null);
9484
refetch();
9585
},
9686
onError: (error) => {

src/components/Layout/Layout.component.tsx

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
// Imports
2-
import React, { ReactNode, useEffect } from 'react';
2+
import { ReactNode, useEffect } from 'react';
33
import { useQuery } from '@apollo/client';
44

55
// Components
@@ -31,17 +31,14 @@ interface ILayoutProps {
3131
*/
3232

3333
const Layout = ({ children, title }: ILayoutProps) => {
34-
const { updateCart } = useCartStore();
34+
const { syncWithWooCommerce } = useCartStore();
3535

3636
const { data, refetch } = useQuery(GET_CART, {
3737
notifyOnNetworkStatusChange: true,
3838
onCompleted: () => {
3939
const updatedCart = getFormattedCart(data);
40-
4140
if (updatedCart) {
42-
// Update cart in localStorage and Zustand store
43-
localStorage.setItem('woocommerce-cart', JSON.stringify(updatedCart));
44-
updateCart(updatedCart);
41+
syncWithWooCommerce(updatedCart);
4542
}
4643
},
4744
});

src/components/Product/AddToCart.component.tsx

Lines changed: 3 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -96,7 +96,7 @@ const AddToCart = ({
9696
variationId,
9797
fullWidth = false,
9898
}: IProductRootObject) => {
99-
const { setCart, isLoading: isCartLoading } = useCartStore();
99+
const { syncWithWooCommerce, isLoading: isCartLoading } = useCartStore();
100100
const [requestError, setRequestError] = useState<boolean>(false);
101101

102102
const productId = product?.databaseId ? product?.databaseId : variationId;
@@ -110,17 +110,10 @@ const AddToCart = ({
110110
const { data, refetch } = useQuery(GET_CART, {
111111
notifyOnNetworkStatusChange: true,
112112
onCompleted: () => {
113-
// Update cart in the localStorage.
114113
const updatedCart = getFormattedCart(data);
115-
116-
if (!updatedCart) {
117-
return;
114+
if (updatedCart) {
115+
syncWithWooCommerce(updatedCart);
118116
}
119-
120-
localStorage.setItem('woocommerce-cart', JSON.stringify(updatedCart));
121-
122-
// Update cart data in Zustand store
123-
setCart(updatedCart);
124117
},
125118
});
126119

src/stores/cartStore.ts

Lines changed: 19 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,8 @@ interface CartState {
2626
isLoading: boolean;
2727
setCart: (cart: CartState['cart']) => void;
2828
updateCart: (newCart: NonNullable<CartState['cart']>) => void;
29+
syncWithWooCommerce: (cart: NonNullable<CartState['cart']>) => void;
30+
clearWooCommerceSession: () => void;
2931
}
3032

3133
export const useCartStore = create<CartState>()(
@@ -34,12 +36,24 @@ export const useCartStore = create<CartState>()(
3436
cart: null,
3537
isLoading: false,
3638
setCart: (cart) => set({ cart }),
37-
updateCart: (newCart) => set({ cart: newCart }),
39+
updateCart: (newCart) => {
40+
set({ cart: newCart });
41+
// Sync with WooCommerce
42+
localStorage.setItem('woocommerce-cart', JSON.stringify(newCart));
43+
},
44+
syncWithWooCommerce: (cart) => {
45+
set({ cart });
46+
localStorage.setItem('woocommerce-cart', JSON.stringify(cart));
47+
},
48+
clearWooCommerceSession: () => {
49+
set({ cart: null });
50+
localStorage.removeItem('woo-session');
51+
localStorage.removeItem('woocommerce-cart');
52+
},
3853
}),
3954
{
40-
name: 'woocommerce-cart',
41-
// Only persist the cart data, not the loading state
55+
name: 'cart-store',
4256
partialize: (state) => ({ cart: state.cart }),
43-
}
44-
)
57+
},
58+
),
4559
);

0 commit comments

Comments
 (0)