Create hook useCart

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

@@ -0,0 +1,59 @@
+import { useGetProfile } from "@/app/[name]/(Profile)/profile/hooks/userProfileData";
+import { useReceiptStore } from "@/zustand/receiptStore";
+import {
+  useClearCart,
+  useDecrementCart,
+  useGetCartItems,
+  useIncrementCart,
+} from "../hooks/useCartData";
+
+export const useCart = () => {
+  const { isSuccess } = useGetProfile();
+  const { clear, increment, decrement, items } = useReceiptStore();
+  const { mutate: mutateIncrementCart } = useIncrementCart();
+  const { mutate: mutateDecrementCart } = useDecrementCart();
+  const { mutate: mutateClearCart } = useClearCart();
+  const { data: cartItems } = useGetCartItems();
+
+  const addToCart = (id: string | number) => {
+    if (isSuccess) {
+      mutateIncrementCart(id);
+    } else {
+      increment(id);
+    }
+  };
+
+  const removeFromCart = (id: string | number) => {
+    if (isSuccess) {
+      mutateDecrementCart(id);
+    } else {
+      decrement(id);
+    }
+  };
+
+  const clearCart = () => {
+    if (isSuccess) {
+      mutateClearCart();
+    } else {
+      clear();
+    }
+  };
+
+  const getCartItems = () => {
+    if (isSuccess) {
+      return cartItems;
+    } else {
+      return items;
+    }
+  };
+
+  return {
+    items: getCartItems(),
+    increment,
+    decrement,
+    clear,
+    addToCart,
+    removeFromCart,
+    clearCart,
+  };
+};

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

@@ -1,4 +1,4 @@
-import { useMutation } from "@tanstack/react-query";
+import { useMutation, useQuery } from "@tanstack/react-query";
 import * as api from "../service/CartService";
 
 export const useBulkCart = () => {
@@ -6,3 +6,28 @@ export const useBulkCart = () => {
     mutationFn: api.bulkCart,
   });
 };
+
+export const useIncrementCart = () => {
+  return useMutation({
+    mutationFn: api.increment,
+  });
+};
+
+export const useDecrementCart = () => {
+  return useMutation({
+    mutationFn: api.decrement,
+  });
+};
+
+export const useClearCart = () => {
+  return useMutation({
+    mutationFn: api.clear,
+  });
+};
+
+export const useGetCartItems = () => {
+  return useQuery({
+    queryKey: ["cart-items"],
+    queryFn: api.getCartItems,
+  });
+};

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

@@ -5,3 +5,23 @@ export const bulkCart = async (params: BulkCartItem) => {
   const { data } = await api.post("/public/cart/items/bulk", params);
   return data;
 };
+
+export const increment = async (id: string | number) => {
+  const { data } = await api.post(`/public/cart/items/${id}/increment`);
+  return data;
+};
+
+export const decrement = async (id: string | number) => {
+  const { data } = await api.post(`/public/cart/items/${id}/decrement`);
+  return data;
+};
+
+export const clear = async () => {
+  const { data } = await api.delete("/public/cart/items");
+  return data;
+};
+
+export const getCartItems = async () => {
+  const { data } = await api.get("/public/cart");
+  return data;
+};

src/components/listview/MenuItem.tsx

@@ -12,8 +12,8 @@ interface MenuItemProps {
 }
 
 const MenuItem = ({ food }: MenuItemProps) => {
-  const quantity = useReceiptStore(state => state.items[food.id]?.quantity || 0);
 
+  const quantity = useReceiptStore(state => state.items[food.id]?.quantity || 0);
   const increment = useReceiptStore(state => state.increment);
   const decrement = useReceiptStore(state => state.decrement);