1 files changed, 30 insertions, 36 deletions

diff --git a/src/lib/cart/components/Cart.jsx b/src/lib/cart/components/Cart.jsx
index 561a0064..31aa034d 100644
--- a/src/lib/cart/components/Cart.jsx
+++ b/src/lib/cart/components/Cart.jsx
@@ -4,7 +4,7 @@ import Image from '@/core/components/elements/Image/Image'
 import NextImage from 'next/image'
 import currencyFormat from '@/core/utils/currencyFormat'
 import { useEffect, useState } from 'react'
-import { deleteItemCart, getCart, getCartnew, getItemCart, updateItemCart } from '@/core/utils/cart'
+import { addCart, deleteItemCart, getCart, getCartApi, getCartnew, getItemCart, updateItemCart } from '@/core/utils/cart'
 import { CheckIcon, TrashIcon } from '@heroicons/react/24/outline'
 import { createSlug } from '@/core/utils/slug'
 import { useRouter } from 'next/router'
@@ -19,28 +19,34 @@ import productSearchApi from '@/lib/product/api/productSearchApi'
 import whatsappUrl from '@/core/utils/whatsappUrl'
 import useAuth from '@/core/hooks/useAuth'
 
-
-const { useQuery } = require('react-query')
-const { getCartApi } = require('../api/CartApi')
-
 const Cart = () => {
   const router = useRouter()
   const [products, setProducts] = useState(null)
+  const [isLoading, setIsLoading] = useState(true)
   const auth = useAuth()
-  const { data: listCart } = useQuery('listCart', getCartApi)
+
+
+  const [cart, setCart]  = useState(null)
 
   useEffect(() => {
     if (!auth) return
   }, [auth])
 
   useEffect(() => {
-    if(listCart){
-      setProducts(listCart.products)
+    const cart = async () => {
+      const listCart = await getCartApi()
+      setCart(listCart)
     }
-  }, [listCart])
+    cart()
+  })
+
+  useEffect(() => {
+    if(cart){
+      setProducts(cart.products)
+      setIsLoading(false)
+    }
+  }, [cart])
 
-  console.log('product', products)
-  const { cart } = useCart({ enabled: !products })
 
   const [totalPriceBeforeTax, setTotalPriceBeforeTax] = useState(0)
   const [totalTaxAmount, setTotalTaxAmount] = useState(0)
@@ -50,20 +56,6 @@ const Cart = () => {
 
   const [productRecomendation, setProductRecomendation] = useState(null)
 
-  useEffect(() => {
-    if (cart.data && !products) {
-      const productsWithQuantity = cart.data.map((product) => {
-        const productInCart = getItemCart({ productId: product.id })
-        if (!productInCart) return
-        return {
-          ...product,
-          quantity: productInCart.quantity,
-          selected: productInCart.selected
-        }
-      })
-      setProducts(productsWithQuantity)
-    }
-  }, [cart, products])
 
   useEffect(() => {
     if (!products) return
@@ -73,11 +65,6 @@ const Cart = () => {
     let calculateTotalDiscountAmount = 0
     for (const product of products) {
       if (product.quantity == '') continue
-      updateItemCart({
-        productId: product.id,
-        quantity: product.quantity,
-        selected: product.selected
-      })
 
       if (!product.selected) continue
       let priceBeforeTax = product.price.price / 1.11
@@ -127,8 +114,11 @@ const Cart = () => {
         quantity = value != '' && value < 1 ? 1 : value
         break
     }
-    productsToUpdate[productIndex].quantity = quantity
+    let qty = quantity
+    productsToUpdate[productIndex].quantity = qty
+    
     setProducts([...productsToUpdate])
+    addCart(productId, qty, productsToUpdate[productIndex].selected)
   }
 
   const toggleSelected = (productId) => {
@@ -136,8 +126,12 @@ const Cart = () => {
     if (productIndex < 0) return
 
     let productsToUpdate = products
-    productsToUpdate[productIndex].selected = !productsToUpdate[productIndex].selected
+    let isSelected = !productsToUpdate[productIndex].selected
+    productsToUpdate[productIndex].selected = isSelected
+    
+    
     setProducts([...productsToUpdate])
+    addCart(productId, productsToUpdate[productIndex].quantity, isSelected)
   }
 
   const selectedProduct = () => {
@@ -190,13 +184,13 @@ const Cart = () => {
           </div>
 
           <div className='flex flex-col gap-y-4 h-screen'>
-            {cart.isLoading && (
+            {isLoading && (
               <div className='flex justify-center my-4'>
                 <Spinner className='w-6 text-gray_r-12/50 fill-gray_r-12' />
               </div>
             )}
 
-            {!cart.isLoading && (!products || products?.length == 0) && (
+            {!isLoading && (!products || products?.length == 0) && (
               <div className='px-4'>
                 <Alert className='text-center my-2' type='info'>
                   Keranjang belanja anda masih kosong
@@ -335,7 +329,7 @@ const Cart = () => {
                 </tr>
               </thead>
               <tbody>
-                {cart.isLoading && (
+                {isLoading && (
                   <tr>
                     <td colSpan={6}>
                       <div className='flex justify-center my-2'>
@@ -344,7 +338,7 @@ const Cart = () => {
                     </td>
                   </tr>
                 )}
-                {!cart.isLoading && (!products || products?.length == 0) && (
+                {!isLoading && (!products || products?.length == 0) && (
                   <tr>
                     <td colSpan={6}>Keranjang belanja anda masih kosong</td>
                   </tr>