Merged in CR/optimize_performance_2 (pull request #391)

CR/optimize performance 2

1 files changed, 29 insertions, 14 deletions

diff --git a/src/core/components/elements/Navbar/NavbarMobile.jsx b/src/core/components/elements/Navbar/NavbarMobile.jsx
index 90314671..47182a47 100644
--- a/src/core/components/elements/Navbar/NavbarMobile.jsx
+++ b/src/core/components/elements/Navbar/NavbarMobile.jsx
@@ -12,30 +12,44 @@ import { useEffect, useState } from 'react';
 import MobileView from '../../views/MobileView';
 import Link from '../Link/Link';
 import TopBanner from './TopBanner';
+import { useCartStore } from '~/modules/cart/stores/useCartStore';
+import useAuth from '@/core/hooks/useAuth';
 
 const Search = dynamic(() => import('./Search'));
 
 const NavbarMobile = () => {
   const { Sidebar, open } = useSidebar();
+  const auth = useAuth();
 
   const [cartCount, setCartCount] = useState(0);
+  const { loadCart, cart, summary, updateCartItem } = useCartStore();
 
-  useEffect(() => {
-    const handleCartChange = () => {
-      const cart = async () => {
-        const listCart = await getCountCart();
-        setCartCount(listCart);
-      };
-      cart();
-    };
-    handleCartChange();
+  // useEffect(() => {
+  //   const handleCartChange = () => {
+  //     const cart = async () => {
+  //       const listCart = await getCountCart();
+  //       setCartCount(listCart);
+  //     };
+  //     cart();
+  //   };
+  //   handleCartChange();
+
+  //   window.addEventListener('localStorageChange', handleCartChange);
 
-    window.addEventListener('localStorageChange', handleCartChange);
+  //   return () => {
+  //     window.removeEventListener('localStorageChange', handleCartChange);
+  //   };
+  // }, []);
 
-    return () => {
-      window.removeEventListener('localStorageChange', handleCartChange);
-    };
-  }, []);
+  useEffect(() => {
+    if(auth){
+      loadCart(auth?.id);
+    }
+  }, [auth]);
+
+  useEffect(() => {
+    setCartCount(cart?.products?.length);
+  }, [cart]);
 
   return (
     <MobileView>
@@ -48,6 +62,7 @@ const NavbarMobile = () => {
               alt='Indoteknik Logo'
               width={120}
               height={40}
+              loading='eager'
             />
           </Link>
           <div className='flex gap-x-3'>