Replace Context with Zustand

Author: w3bdesign

README.md

@@ -79,11 +79,17 @@ The current release has been tested and is confirmed working with the following
 - Tests with Playwright
 - Connect to Woocommerce GraphQL API and list name, price and display image for products
 - Support for simple products and variable products
-- Cart handling and checkout with WooCommerce (Cash On Delivery only for now)
+- Cart handling and checkout with WooCommerce using Zustand for state management
+  - Persistent cart state with localStorage sync
+  - Efficient updates through selective subscriptions
+  - Type-safe cart operations
+  - Cash On Delivery payment method
 - Algolia search (requires [algolia-woo-indexer](https://github.com/w3bdesign/algolia-woo-indexer))
 - Meets WCAG accessibility standards where possible
 - Placeholder for products without images
-- Apollo Client with GraphQL
+- State Management:
+  - Zustand for global state management
+  - Apollo Client with GraphQL
 - React Hook Form
 - Native HTML5 form validation
 - Animations with Framer motion, Styled components and Animate.css

package-lock.json

@@ -36,11 +36,12 @@
     "next": "15.3.0",
     "nprogress": "^0.2.0",
     "postcss": "^8.5.3",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
+    "react": "19.1.0",
+    "react-dom": "19.1.0",
     "react-hook-form": "^7.55.0",
     "react-instantsearch-dom": "^6.40.4",
-    "uuid": "^11.1.0"
+    "uuid": "^11.1.0",
+    "zustand": "^5.0.3"
   },
   "devDependencies": {
     "@lhci/cli": "^0.14.0",
@@ -52,7 +53,7 @@
     "@types/uuid": "^10.0.0",
     "@typescript-eslint/eslint-plugin": "^8.29.1",
     "@typescript-eslint/parser": "^8.29.1",
-    "babel-plugin-styled-components": "^2.1.4",   
+    "babel-plugin-styled-components": "^2.1.4",
     "eslint-config-next": "^15.3.0",
     "postcss-preset-env": "^10.1.5",
     "prettier": "^3.5.3",

package.json

@@ -1,11 +1,11 @@
-import { useContext, useEffect } from 'react';
+import { useEffect } from 'react';
 import { useMutation, useQuery } from '@apollo/client';
 import Link from 'next/link';
 import Image from 'next/image';
 import { useRouter } from 'next/router';
 import { v4 as uuidv4 } from 'uuid';
 
-import { CartContext } from '@/stores/CartProvider';
+import { useCartStore } from '@/stores/cartStore';
 import Button from '@/components/UI/Button.component';
 import LoadingSpinner from '../LoadingSpinner/LoadingSpinner.component';
 
@@ -21,20 +21,22 @@ import { UPDATE_CART } from '@/utils/gql/GQL_MUTATIONS';
 
 const CartContents = () => {
   const router = useRouter();
-  const { setCart } = useContext(CartContext);
+  const { setCart } = useCartStore();
   const isCheckoutPage = router.pathname === '/kasse';
 
   const { data, refetch } = useQuery(GET_CART, {
     notifyOnNetworkStatusChange: true,
     onCompleted: () => {
       const updatedCart = getFormattedCart(data);
-      if (!updatedCart && !data.cart.contents.nodes.length) {
+      if (!updatedCart && !data?.cart?.contents?.nodes?.length) {
         localStorage.removeItem('woocommerce-cart');
         setCart(null);
         return;
       }
       localStorage.setItem('woocommerce-cart', JSON.stringify(updatedCart));
-      setCart(updatedCart);
+      if (updatedCart) {
+        setCart(updatedCart);
+      }
     },
   });
 

src/components/Cart/CartContents.component.tsx

@@ -1,6 +1,6 @@
 /*eslint complexity: ["error", 20]*/
 // Imports
-import { useState, useContext, useEffect } from 'react';
+import { useState, useEffect } from 'react';
 import { useQuery, useMutation, ApolloError } from '@apollo/client';
 
 // Components
@@ -11,7 +11,7 @@ import LoadingSpinner from '../LoadingSpinner/LoadingSpinner.component';
 // GraphQL
 import { GET_CART } from '@/utils/gql/GQL_QUERIES';
 import { CHECKOUT_MUTATION } from '@/utils/gql/GQL_MUTATIONS';
-import { CartContext } from '@/stores/CartProvider';
+import { useCartStore } from '@/stores/cartStore';
 
 // Utils
 import {
@@ -51,7 +51,7 @@ export interface ICheckoutData {
 }
 
 const CheckoutForm = () => {
-  const { cart, setCart } = useContext(CartContext);
+  const { cart, setCart } = useCartStore();
   const [orderData, setOrderData] = useState<ICheckoutData | null>(null);
   const [requestError, setRequestError] = useState<ApolloError | null>(null);
   const [orderCompleted, setorderCompleted] = useState<boolean>(false);
@@ -63,17 +63,19 @@ const CheckoutForm = () => {
       // Update cart in the localStorage.
       const updatedCart = getFormattedCart(data);
 
-      if (!updatedCart && !data.cart.contents.nodes.length) {
+      if (!updatedCart && !data?.cart?.contents?.nodes?.length) {
         localStorage.removeItem('woo-session');
-        localStorage.removeItem('wooocommerce-cart');
+        localStorage.removeItem('woocommerce-cart');
         setCart(null);
         return;
       }
 
       localStorage.setItem('woocommerce-cart', JSON.stringify(updatedCart));
 
-      // Update cart data in React Context.
-      setCart(updatedCart);
+      // Update cart data in Zustand store
+      if (updatedCart) {
+        setCart(updatedCart);
+      }
     },
   });
 

src/components/Checkout/CheckoutForm.component.tsx

@@ -1,7 +1,7 @@
-import { useContext, useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
 import Link from 'next/link';
 
-import { CartContext } from '@/stores/CartProvider';
+import { useCartStore } from '@/stores/cartStore';
 
 interface ICartProps {
   stickyNav?: boolean;
@@ -12,7 +12,7 @@ interface ICartProps {
  * Displays amount of items in cart.
  */
 const Cart = ({ stickyNav }: ICartProps) => {
-  const { cart } = useContext(CartContext);
+  const cart = useCartStore((state) => state.cart);
   const [productCount, setProductCount] = useState<number | null | undefined>();
 
   useEffect(() => {

src/components/Header/Cart.component.tsx

@@ -1,5 +1,5 @@
 // Imports
-import { ReactNode, useContext, useEffect } from 'react';
+import React, { ReactNode, useEffect } from 'react';
 import { useQuery } from '@apollo/client';
 
 // Components
@@ -9,7 +9,7 @@ import Footer from '@/components/Footer/Footer.component';
 import Stickynav from '@/components/Footer/Stickynav.component';
 
 // State
-import { CartContext } from '@/stores/CartProvider';
+import { useCartStore } from '@/stores/cartStore';
 
 // Utils
 import { getFormattedCart } from '@/utils/functions/functions';
@@ -31,23 +31,18 @@ interface ILayoutProps {
  */
 
 const Layout = ({ children, title }: ILayoutProps) => {
-  const { setCart } = useContext(CartContext);
+  const { updateCart } = useCartStore();
 
   const { data, refetch } = useQuery(GET_CART, {
     notifyOnNetworkStatusChange: true,
     onCompleted: () => {
-      // Update cart in the localStorage.
       const updatedCart = getFormattedCart(data);
-
-      if (!updatedCart && !data?.cart?.contents?.nodes.length) {
-        // Should we clear the localStorage if we have no remote cart?
-        return;
+      
+      if (updatedCart) {
+        // Update cart in localStorage and Zustand store
+        localStorage.setItem('woocommerce-cart', JSON.stringify(updatedCart));
+        updateCart(updatedCart);
       }
-
-      localStorage.setItem('woocommerce-cart', JSON.stringify(updatedCart));
-
-      // Update cart data in React Context.
-      setCart(updatedCart);
     },
   });
 

src/components/Layout/Layout.component.tsx

@@ -7,7 +7,7 @@ import { v4 as uuidv4 } from 'uuid';
 import Button from '@/components/UI/Button.component';
 
 // State
-import { CartContext } from '@/stores/CartProvider';
+import { useCartStore } from '@/stores/cartStore';
 
 // Utils
 import { getFormattedCart } from '@/utils/functions/functions';
@@ -96,7 +96,7 @@ const AddToCart = ({
   variationId,
   fullWidth = false,
 }: IProductRootObject) => {
-  const { setCart, isLoading: isCartLoading } = useContext(CartContext);
+  const { setCart, isLoading: isCartLoading } = useCartStore();
   const [requestError, setRequestError] = useState<boolean>(false);
 
   const productId = product?.databaseId ? product?.databaseId : variationId;
@@ -119,7 +119,7 @@ const AddToCart = ({
 
       localStorage.setItem('woocommerce-cart', JSON.stringify(updatedCart));
 
-      // Update cart data in React Context.
+      // Update cart data in Zustand store
       setCart(updatedCart);
     },
   });