From 9ab14e1c2a1623f5b1bc237b2db8c01e67a16f41 Mon Sep 17 00:00:00 2001 From: w3bdesign <45217974+w3bdesign@users.noreply.github.com> Date: Wed, 23 Oct 2024 05:52:03 +0200 Subject: [PATCH 1/6] Update AddToCart.component.tsx --- src/components/Product/AddToCart.component.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/Product/AddToCart.component.tsx b/src/components/Product/AddToCart.component.tsx index 6c8569430..c0ebfc43f 100644 --- a/src/components/Product/AddToCart.component.tsx +++ b/src/components/Product/AddToCart.component.tsx @@ -129,7 +129,9 @@ const AddToCart = ({ updateCart(updatedCart); } }, - onError: () => { + onError: (error) => { + console.error('Error adding to cart'); + console.error(error); setRequestError(true); }, }); From 446ff9611afaa134622767d9811f37d3531a4175 Mon Sep 17 00:00:00 2001 From: w3bdesign <45217974+w3bdesign@users.noreply.github.com> Date: Wed, 23 Oct 2024 05:58:08 +0200 Subject: [PATCH 2/6] Update CartProvider.tsx --- src/stores/CartProvider.tsx | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/stores/CartProvider.tsx b/src/stores/CartProvider.tsx index 0b041579e..c6bcbc690 100644 --- a/src/stores/CartProvider.tsx +++ b/src/stores/CartProvider.tsx @@ -51,12 +51,14 @@ interface ICartContext { cart: RootObject | null | undefined; setCart: React.Dispatch>; updateCart: (newCart: RootObject) => void; + isLoading: boolean; } const CartState: ICartContext = { cart: null, setCart: () => {}, updateCart: () => {}, + isLoading: true, }; export const CartContext = createContext(CartState); @@ -66,6 +68,7 @@ export const CartContext = createContext(CartState); */ export const CartProvider = ({ children }: ICartProviderProps) => { const [cart, setCart] = useState(); + const [isLoading, setIsLoading] = useState(true); useEffect(() => { // Check if we are client-side before we access the localStorage @@ -75,6 +78,7 @@ export const CartProvider = ({ children }: ICartProviderProps) => { const cartData: RootObject = JSON.parse(localCartData); setCart(cartData); } + setIsLoading(false); } }, []); @@ -86,8 +90,8 @@ export const CartProvider = ({ children }: ICartProviderProps) => { }; const contextValue = useMemo(() => { - return { cart, setCart, updateCart }; - }, [cart]); + return { cart, setCart, updateCart, isLoading }; + }, [cart, isLoading]); return ( From 5980c4908227fa56ced6deb7d2b8e35986b960f2 Mon Sep 17 00:00:00 2001 From: w3bdesign <45217974+w3bdesign@users.noreply.github.com> Date: Wed, 23 Oct 2024 06:02:55 +0200 Subject: [PATCH 3/6] Revert "Update CartProvider.tsx" This reverts commit 446ff9611afaa134622767d9811f37d3531a4175. --- src/stores/CartProvider.tsx | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/src/stores/CartProvider.tsx b/src/stores/CartProvider.tsx index c6bcbc690..0b041579e 100644 --- a/src/stores/CartProvider.tsx +++ b/src/stores/CartProvider.tsx @@ -51,14 +51,12 @@ interface ICartContext { cart: RootObject | null | undefined; setCart: React.Dispatch>; updateCart: (newCart: RootObject) => void; - isLoading: boolean; } const CartState: ICartContext = { cart: null, setCart: () => {}, updateCart: () => {}, - isLoading: true, }; export const CartContext = createContext(CartState); @@ -68,7 +66,6 @@ export const CartContext = createContext(CartState); */ export const CartProvider = ({ children }: ICartProviderProps) => { const [cart, setCart] = useState(); - const [isLoading, setIsLoading] = useState(true); useEffect(() => { // Check if we are client-side before we access the localStorage @@ -78,7 +75,6 @@ export const CartProvider = ({ children }: ICartProviderProps) => { const cartData: RootObject = JSON.parse(localCartData); setCart(cartData); } - setIsLoading(false); } }, []); @@ -90,8 +86,8 @@ export const CartProvider = ({ children }: ICartProviderProps) => { }; const contextValue = useMemo(() => { - return { cart, setCart, updateCart, isLoading }; - }, [cart, isLoading]); + return { cart, setCart, updateCart }; + }, [cart]); return ( From a85c84cd5bb0855ece6c0084550923d4c8e7dd22 Mon Sep 17 00:00:00 2001 From: w3bdesign <45217974+w3bdesign@users.noreply.github.com> Date: Wed, 23 Oct 2024 06:05:44 +0200 Subject: [PATCH 4/6] Update AddToCart.component.tsx --- .../Product/AddToCart.component.tsx | 56 ++++++++++--------- 1 file changed, 31 insertions(+), 25 deletions(-) diff --git a/src/components/Product/AddToCart.component.tsx b/src/components/Product/AddToCart.component.tsx index c0ebfc43f..b5f1dde18 100644 --- a/src/components/Product/AddToCart.component.tsx +++ b/src/components/Product/AddToCart.component.tsx @@ -90,12 +90,13 @@ export interface IProductRootObject { * @param {number} variationId // Variation ID * @param {boolean} fullWidth // Whether the button should be full-width */ + const AddToCart = ({ product, variationId, fullWidth = false, }: IProductRootObject) => { - const { updateCart } = useContext(CartContext); + const { setCart, cart } = useContext(CartContext); const [requestError, setRequestError] = useState(false); const productId = product?.databaseId ? product?.databaseId : variationId; @@ -106,14 +107,20 @@ const AddToCart = ({ }; // Get cart data query - const { refetch } = useQuery(GET_CART, { + const { data, refetch } = useQuery(GET_CART, { notifyOnNetworkStatusChange: true, - onCompleted: (data) => { - // Update cart in the localStorage and React Context. + onCompleted: () => { + // Update cart in the localStorage. const updatedCart = getFormattedCart(data); - if (updatedCart) { - updateCart(updatedCart); + + if (!updatedCart) { + return; } + + localStorage.setItem('woocommerce-cart', JSON.stringify(updatedCart)); + + // Update cart data in React Context. + setCart(updatedCart); }, }); @@ -122,38 +129,37 @@ const AddToCart = ({ variables: { input: productQueryInput, }, - onCompleted: (data) => { - // Immediately update the cart with new values - const updatedCart = getFormattedCart(data); - if (updatedCart) { - updateCart(updatedCart); - } + + onCompleted: () => { + // Update the cart with new values in React context. + refetch(); }, - onError: (error) => { - console.error('Error adding to cart'); - console.error(error); + + onError: () => { setRequestError(true); }, }); - const handleAddToCart = async () => { - try { - await addToCart(); - // Refetch cart immediately after adding to cart - await refetch(); - } catch (error) { - setRequestError(true); + const handleAddToCart = () => { + if (!cart) { + console.log('Cart is not yet initialized. Please wait.'); + return; } + addToCart(); + // Refetch cart after 2 seconds + setTimeout(() => { + refetch(); + }, 2000); }; return ( <> ); From 368ac7aae96bb86090f377213439a64d65807622 Mon Sep 17 00:00:00 2001 From: w3bdesign <45217974+w3bdesign@users.noreply.github.com> Date: Wed, 23 Oct 2024 06:16:43 +0200 Subject: [PATCH 5/6] Update CartProvider.tsx --- src/stores/CartProvider.tsx | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/stores/CartProvider.tsx b/src/stores/CartProvider.tsx index 0b041579e..c6bcbc690 100644 --- a/src/stores/CartProvider.tsx +++ b/src/stores/CartProvider.tsx @@ -51,12 +51,14 @@ interface ICartContext { cart: RootObject | null | undefined; setCart: React.Dispatch>; updateCart: (newCart: RootObject) => void; + isLoading: boolean; } const CartState: ICartContext = { cart: null, setCart: () => {}, updateCart: () => {}, + isLoading: true, }; export const CartContext = createContext(CartState); @@ -66,6 +68,7 @@ export const CartContext = createContext(CartState); */ export const CartProvider = ({ children }: ICartProviderProps) => { const [cart, setCart] = useState(); + const [isLoading, setIsLoading] = useState(true); useEffect(() => { // Check if we are client-side before we access the localStorage @@ -75,6 +78,7 @@ export const CartProvider = ({ children }: ICartProviderProps) => { const cartData: RootObject = JSON.parse(localCartData); setCart(cartData); } + setIsLoading(false); } }, []); @@ -86,8 +90,8 @@ export const CartProvider = ({ children }: ICartProviderProps) => { }; const contextValue = useMemo(() => { - return { cart, setCart, updateCart }; - }, [cart]); + return { cart, setCart, updateCart, isLoading }; + }, [cart, isLoading]); return ( From 570271df28aba71b2745b048fc13205537bea758 Mon Sep 17 00:00:00 2001 From: w3bdesign <45217974+w3bdesign@users.noreply.github.com> Date: Wed, 23 Oct 2024 06:20:37 +0200 Subject: [PATCH 6/6] Update AddToCart.component.tsx --- src/components/Product/AddToCart.component.tsx | 10 +++------- 1 file changed, 3 insertions(+), 7 deletions(-) diff --git a/src/components/Product/AddToCart.component.tsx b/src/components/Product/AddToCart.component.tsx index b5f1dde18..d6db20183 100644 --- a/src/components/Product/AddToCart.component.tsx +++ b/src/components/Product/AddToCart.component.tsx @@ -96,7 +96,7 @@ const AddToCart = ({ variationId, fullWidth = false, }: IProductRootObject) => { - const { setCart, cart } = useContext(CartContext); + const { setCart, isLoading: isCartLoading } = useContext(CartContext); const [requestError, setRequestError] = useState(false); const productId = product?.databaseId ? product?.databaseId : variationId; @@ -141,10 +141,6 @@ const AddToCart = ({ }); const handleAddToCart = () => { - if (!cart) { - console.log('Cart is not yet initialized. Please wait.'); - return; - } addToCart(); // Refetch cart after 2 seconds setTimeout(() => { @@ -156,10 +152,10 @@ const AddToCart = ({ <> );