Zustand

Author: w3bdesign

src/components/Cart/CartContents.component.tsx

@@ -7,7 +7,6 @@ import { v4 as uuidv4 } from 'uuid';
 
 import useCartStore, { RootObject, Product } from '@/stores/cart';
 import Button from '@/components/UI/Button.component';
-import LoadingSpinner from '../LoadingSpinner/LoadingSpinner.component';
 
 import {
   getFormattedCart,
@@ -32,13 +31,10 @@ const CartContents = () => {
     },
   });
 
-  const [updateCart, { loading: updateCartProcessing }] = useMutation(
-    UPDATE_CART,
-    {
-      refetchQueries: [{ query: GET_CART }],
-      awaitRefetchQueries: true,
-    },
-  );
+  const [updateCart] = useMutation(UPDATE_CART, {
+    refetchQueries: [{ query: GET_CART }],
+    awaitRefetchQueries: true,
+  });
 
   const handleRemoveProductClick = (
     cartKey: string,
@@ -66,7 +62,6 @@ const CartContents = () => {
           },
         },
       });
-
     }
   };
 
@@ -141,8 +136,7 @@ const CartContents = () => {
                         event,
                         item.key,
                         data.cart.contents.nodes,
-                        updateCart,
-                        updateCartProcessing,
+                        updateCart
                       );
                     }}
                     className="w-16 px-2 py-1 text-center border border-gray-300 rounded mr-2"
@@ -155,7 +149,6 @@ const CartContents = () => {
                       )
                     }
                     variant="secondary"
-                    buttonDisabled={updateCartProcessing}
                   >
                     Fjern
                   </Button>
@@ -190,14 +183,6 @@ const CartContents = () => {
           </Link>
         </div>
       )}
-      {updateCartProcessing && (
-        <div className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50">
-          <div className="bg-white p-4 rounded-lg">
-            <p className="text-lg mb-2">Oppdaterer handlekurv...</p>
-            <LoadingSpinner />
-          </div>
-        </div>
-      )}
     </div>
   );
 };

src/components/Checkout/CheckoutForm.component.tsx

@@ -57,7 +57,7 @@ const CheckoutForm = () => {
   const [orderCompleted, setorderCompleted] = useState<boolean>(false);
 
   // Get cart data query
-  const { data } = useQuery(GET_CART, {
+  useQuery(GET_CART, {
     notifyOnNetworkStatusChange: true,
     onCompleted: (data) => {
       const updatedCart = getFormattedCart(data) as RootObject | undefined;

src/utils/functions/functions.tsx

@@ -290,16 +290,10 @@ export const handleQuantityChange = (
   cartKey: string,
   cart: IProductRootObject[],
   updateCart: (variables: IUpdateCartRootObject) => void,
-  updateCartProcessing: boolean,
 ) => {
   if (process.browser) {
     event.stopPropagation();
 
-    // Return if the previous update cart mutation request is still processing
-    if (updateCartProcessing || !cart) {
-      return;
-    }
-
     // If the user tries to delete the count of product, set that to 1 by default ( This will not allow him to reduce it less than zero )
     const newQty = event.target.value ? parseInt(event.target.value, 10) : 1;