<iman> update unchek cart

3 files changed, 58 insertions, 21 deletions

diff --git a/src-migrate/modules/cart/components/ItemSelect.tsx b/src-migrate/modules/cart/components/ItemSelect.tsx
index b904a1de..2faf5172 100644
--- a/src-migrate/modules/cart/components/ItemSelect.tsx
+++ b/src-migrate/modules/cart/components/ItemSelect.tsx
@@ -13,23 +13,23 @@ type Props = {
 
 const CartItemSelect = ({ item }: Props) => {
   const auth = getAuth()
-  const { loadCart } = useCartStore()
+  const { updateCartItem, cart } = useCartStore()
 
   const [isLoad, setIsLoad] = useState<boolean>(false)
 
   const handleChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
-    if (typeof auth !== 'object') return
-
-    setIsLoad(true)
-    await upsertUserCart({
-      userId: auth.id,
-      type: item.cart_type,
-      id: item.id,
-      qty: item.quantity,
-      selected: e.target.checked
-    })
-    await loadCart(auth.id)
-    setIsLoad(false)
+    if (typeof auth !== 'object' || !cart) return
+    
+    setIsLoad(true);
+    const updatedCartItems = cart.products.map(cartItem =>
+      cartItem.id === item.id
+        ? { ...cartItem, selected: e.target.checked }
+        : cartItem
+    );
+    // Update the entire cart
+    const updatedCart = { ...cart, products: updatedCartItems };
+    updateCartItem(updatedCart);
+    setIsLoad(false);
   }
 
   return (
diff --git a/src-migrate/modules/cart/stores/useCartStore.ts b/src-migrate/modules/cart/stores/useCartStore.ts
index 3d9a0aed..ae551846 100644
--- a/src-migrate/modules/cart/stores/useCartStore.ts
+++ b/src-migrate/modules/cart/stores/useCartStore.ts
@@ -1,5 +1,5 @@
 import { create } from 'zustand';
-import { CartProps } from '~/types/cart';
+import { CartItem, CartProps } from '~/types/cart';
 import { getUserCart } from '~/services/cart';
 
 type State = {
@@ -16,6 +16,7 @@ type State = {
 
 type Action = {
   loadCart: (userId: number) => Promise<void>;
+  updateCartItem: (updateCart: CartProps) => void;
 };
 
 export const useCartStore = create<State & Action>((set, get) => ({
@@ -39,6 +40,14 @@ export const useCartStore = create<State & Action>((set, get) => ({
     const summary = computeSummary(cart);
     set({ summary });
   },
+  updateCartItem: (updatedCart) => {
+    const cart = get().cart;
+    if (!cart) return;
+    
+    set({ cart: updatedCart });
+    const summary = computeSummary(updatedCart);
+    set({ summary });
+  },
 }));
 
 const computeSummary = (cart: CartProps) => {
diff --git a/src-migrate/pages/shop/cart/index.tsx b/src-migrate/pages/shop/cart/index.tsx
index f33dde09..cfb20284 100644
--- a/src-migrate/pages/shop/cart/index.tsx
+++ b/src-migrate/pages/shop/cart/index.tsx
@@ -1,6 +1,6 @@
 import style from './cart.module.css';
 
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 import Link from 'next/link';
 import { Button, Checkbox, Spinner, Tooltip } from '@chakra-ui/react';
 import { toast } from 'react-hot-toast';
@@ -28,10 +28,12 @@ const CartPage = () => {
   const [buttonSelectNow, setButtonSelectNow] = useState(true);
   const [isLoad, setIsLoad] = useState<boolean>(false)
   const [isLoadDelete, setIsLoadDelete] = useState<boolean>(false)
-  const { loadCart, cart, summary } = useCartStore();
+  const { loadCart, cart, summary, updateCartItem } = useCartStore();
   const useDivvice = useDevice();
   const { setRefreshCart } = useProductCartContext()
   const [isTop, setIsTop] = useState(true);
+  const [hasChanged, setHasChanged] = useState(false);
+  const prevCartRef = useRef<CartItem[] | null>(null);
 
   useEffect(() => {
     const handleScroll = () => {
@@ -76,6 +78,7 @@ const CartPage = () => {
       setHasChanged(false)
     }
 
+    // Update the ref to the current cart state
     prevCartRef.current = cart ? [...cart.products] : null;
   }, [cart]);
 
@@ -99,6 +102,31 @@ const CartPage = () => {
     return cart.products.every(item => item.selected);
   }, [cart]);
 
+
+  useEffect(() => {
+    const updateCartItems = async () => {
+      if (typeof auth === 'object' && cart) {
+        const upsertPromises = cart.products.map(item => 
+          upsertUserCart({
+            userId: auth.id,
+            type: item.cart_type,
+            id: item.id,
+            qty: item.quantity,
+            selected: item.selected
+          })
+        );
+        try {
+          await Promise.all(upsertPromises);
+          await loadCart(auth.id);
+        } catch (error) {
+          console.error('Failed to update cart items:', error);
+        }
+      }
+    };
+
+    updateCartItems();
+  }, [hasChanged]);
+
   const handleCheckout = () => {
     router.push('/shop/checkout');
   }
@@ -113,7 +141,7 @@ const CartPage = () => {
 
   const handleChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
     
-    
+    // Ensure that cart is not null before attempting to update
     if (cart) {
       const updatedCart = {
         ...cart,
@@ -123,7 +151,7 @@ const CartPage = () => {
         }))
       };
       
-      updateCartItem(updatedCart); 
+      updateCartItem(updatedCart); // Pass only valid CartProps to updateCartItem
       if(hasSelectedAll){
         setIsSelectedAll(false);
       }else{
@@ -149,7 +177,7 @@ const CartPage = () => {
 
   return (
     <>
-      <div className={`${isTop ? 'border-b-[0px]' : 'border-b-[1px]'} sticky top-[180px] bg-white py-4 border-gray-300 z-50 w-3/4`}>
+      <div className={`${isTop ? 'border-b-[0px]' : 'border-b-[1px]'} sticky top-[157px] bg-white py-4 border-gray-300 z-50 w-3/4`}>
         <div className={`${style['title']}`}>Keranjang Belanja</div>
         <div className='h-2' />
         <div className={`flex items-center object-center justify-between `}>
@@ -167,7 +195,7 @@ const CartPage = () => {
               />
             )}
               <p className='p-2 text-caption-2'>
-                {hasSelectedAll ? "Unchek all" : "Select all"}
+                {hasSelectedAll ? "Uncheck all" : "Select all"}
               </p>
           </div>
             <div className='delate all flex items-center object-center'>
@@ -181,7 +209,7 @@ const CartPage = () => {
                       variant='outline' 
                       colorScheme='red'
                       w='full'
-                      isDisabled={!hasSelected || hasSelectNoPrice}
+                      isDisabled={!hasSelected}
                       onClick={handleDelete}
                     >
                       {isLoadDelete && <Spinner size='xs' />}