online cart

src/app/[name]/(Dialogs)/cart/hook/useCart.ts

@@ -1,3 +1,4 @@
+import { useState } from "react";
 import { useGetProfile } from "@/app/[name]/(Profile)/profile/hooks/userProfileData";
 import { useReceiptStore } from "@/zustand/receiptStore";
 import {
@@ -10,6 +11,9 @@ import {
 export const useCart = () => {
   const { isSuccess } = useGetProfile();
   const { clear, increment, decrement, items } = useReceiptStore();
+  const [loadingItems, setLoadingItems] = useState<Set<string | number>>(
+    new Set()
+  );
   const { mutate: mutateIncrementCart } = useIncrementCart();
   const { mutate: mutateDecrementCart } = useDecrementCart();
   const { mutate: mutateClearCart } = useClearCart();
@@ -17,7 +21,23 @@ export const useCart = () => {
 
   const addToCart = (id: string | number) => {
     if (isSuccess) {
-      mutateIncrementCart(id);
+      setLoadingItems((prev) => new Set(prev).add(id));
+      mutateIncrementCart(id, {
+        onSuccess: () => {
+          setLoadingItems((prev) => {
+            const next = new Set(prev);
+            next.delete(id);
+            return next;
+          });
+        },
+        onError: () => {
+          setLoadingItems((prev) => {
+            const next = new Set(prev);
+            next.delete(id);
+            return next;
+          });
+        },
+      });
     } else {
       increment(id);
     }
@@ -25,7 +45,23 @@ export const useCart = () => {
 
   const removeFromCart = (id: string | number) => {
     if (isSuccess) {
-      mutateDecrementCart(id);
+      setLoadingItems((prev) => new Set(prev).add(id));
+      mutateDecrementCart(id, {
+        onSuccess: () => {
+          setLoadingItems((prev) => {
+            const next = new Set(prev);
+            next.delete(id);
+            return next;
+          });
+        },
+        onError: () => {
+          setLoadingItems((prev) => {
+            const next = new Set(prev);
+            next.delete(id);
+            return next;
+          });
+        },
+      });
     } else {
       decrement(id);
     }
@@ -41,12 +77,23 @@ export const useCart = () => {
 
   const getCartItems = () => {
     if (isSuccess) {
-      return cartItems;
+      if (!cartItems?.data?.items) {
+        return {};
+      }
+      return cartItems.data.items.reduce((acc, item) => {
+        acc[item.foodId] = { quantity: item.quantity };
+        return acc;
+      }, {} as Record<string | number, { quantity: number }>);
     } else {
       return items;
     }
   };
 
+  const isItemLoading = (id: string | number) => {
+    if (!isSuccess) return false;
+    return loadingItems.has(id);
+  };
+
   return {
     items: getCartItems(),
     increment,
@@ -55,5 +102,6 @@ export const useCart = () => {
     addToCart,
     removeFromCart,
     clearCart,
+    isItemLoading,
   };
 };

src/app/[name]/(Dialogs)/cart/hooks/useCartData.ts

@@ -1,27 +1,43 @@
-import { useMutation, useQuery } from "@tanstack/react-query";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import * as api from "../service/CartService";
 
 export const useBulkCart = () => {
+  const queryClient = useQueryClient();
   return useMutation({
     mutationFn: api.bulkCart,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["cart-items"] });
+    },
   });
 };
 
 export const useIncrementCart = () => {
+  const queryClient = useQueryClient();
   return useMutation({
     mutationFn: api.increment,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["cart-items"] });
+    },
   });
 };
 
 export const useDecrementCart = () => {
+  const queryClient = useQueryClient();
   return useMutation({
     mutationFn: api.decrement,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["cart-items"] });
+    },
   });
 };
 
 export const useClearCart = () => {
+  const queryClient = useQueryClient();
   return useMutation({
     mutationFn: api.clear,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["cart-items"] });
+    },
   });
 };
 

src/app/[name]/(Dialogs)/cart/service/CartService.ts

@@ -1,5 +1,5 @@
 import { api } from "@/config/axios";
-import { BulkCartItem } from "../types/Types";
+import { BulkCartItem, CartResponse } from "../types/Types";
 
 export const bulkCart = async (params: BulkCartItem) => {
   const { data } = await api.post("/public/cart/items/bulk", params);
@@ -21,7 +21,7 @@ export const clear = async () => {
   return data;
 };
 
-export const getCartItems = async () => {
-  const { data } = await api.get("/public/cart");
+export const getCartItems = async (): Promise<CartResponse> => {
+  const { data } = await api.get<CartResponse>("/public/cart");
   return data;
 };

src/app/[name]/(Dialogs)/cart/types/Types.ts

@@ -1,6 +1,36 @@
+import { BaseResponse } from "@/app/[name]/(Main)/types/Types";
+
 export type BulkCartItem = {
   items: {
     foodId: string;
     quantity: number;
   }[];
 };
+
+export interface CartItem {
+  foodId: string;
+  foodTitle: string;
+  quantity: number;
+  price: number;
+  discount: number;
+  totalPrice: number;
+}
+
+export interface CartData {
+  userId: string;
+  restaurantId: string;
+  restaurantName: string;
+  items: CartItem[];
+  deliveryFee: number;
+  subTotal: number;
+  itemsDiscount: number;
+  couponDiscount: number;
+  totalDiscount: number;
+  tax: number;
+  total: number;
+  totalItems: number;
+  createdAt: string;
+  updatedAt: string;
+}
+
+export type CartResponse = BaseResponse<CartData>;