From 5c66bf0e42f5b414d701abe93fb634321f94aff8 Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Wed, 12 Apr 2023 09:30:45 +0700
Subject: cart icon count

---
 src/core/components/elements/Appbar/Appbar.jsx     | 24 +++++++++++++++-
 .../components/elements/Navbar/NavbarDesktop.jsx   | 33 ++++++++++++++++++----
 .../components/elements/Navbar/NavbarMobile.jsx    | 22 ++++++++++++++-
 3 files changed, 72 insertions(+), 7 deletions(-)

(limited to 'src/core/components')

diff --git a/src/core/components/elements/Appbar/Appbar.jsx b/src/core/components/elements/Appbar/Appbar.jsx
index f1456a7c..e19d5f0a 100644
--- a/src/core/components/elements/Appbar/Appbar.jsx
+++ b/src/core/components/elements/Appbar/Appbar.jsx
@@ -1,6 +1,8 @@
 import { useRouter } from 'next/router'
 import Link from '../Link/Link'
 import { HomeIcon, Bars3Icon, ShoppingCartIcon, ChevronLeftIcon } from '@heroicons/react/24/outline'
+import { useEffect, useState } from 'react'
+import { getCart } from '@/core/utils/cart'
 
 /**
  * The AppBar component is a navigation component used to display a header or toolbar
@@ -13,6 +15,21 @@ import { HomeIcon, Bars3Icon, ShoppingCartIcon, ChevronLeftIcon } from '@heroico
 const AppBar = ({ title }) => {
   const router = useRouter()
 
+  const [cartCount, setCartCount] = useState(0)
+
+  useEffect(() => {
+    const handleCartChange = () => {
+      setCartCount(Object.keys(getCart()).length)
+    }
+    handleCartChange()
+
+    window.addEventListener('localStorageChange', handleCartChange)
+
+    return () => {
+      window.removeEventListener('localStorageChange', handleCartChange)
+    }
+  }, [])
+
   return (
     <nav className='sticky top-0 z-50 bg-white border-b border-gray_r-6 flex justify-between'>
       <div className='flex items-center'>
@@ -23,7 +40,12 @@ const AppBar = ({ title }) => {
       </div>
       <div className='flex items-center px-2'>
         <Link href='/shop/cart' className='py-4 px-2'>
-          <ShoppingCartIcon className='w-6 text-gray_r-12' />
+          <div className='relative'>
+            <ShoppingCartIcon className='w-6 text-gray_r-12' />
+            <span className='absolute -top-2 -right-2 badge-solid-red rounded-full w-5 h-5 flex items-center justify-center'>
+              {cartCount}
+            </span>
+          </div>
         </Link>
         <Link href='/' className='py-4 px-2'>
           <HomeIcon className='w-6 text-gray_r-12' />
diff --git a/src/core/components/elements/Navbar/NavbarDesktop.jsx b/src/core/components/elements/Navbar/NavbarDesktop.jsx
index fcb54802..837d436c 100644
--- a/src/core/components/elements/Navbar/NavbarDesktop.jsx
+++ b/src/core/components/elements/Navbar/NavbarDesktop.jsx
@@ -10,9 +10,10 @@ import DesktopView from '../../views/DesktopView'
 import dynamic from 'next/dynamic'
 import IndoteknikLogo from '@/images/logo.png'
 import Category from '@/lib/category/components/Category'
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import useAuth from '@/core/hooks/useAuth'
 import NavbarUserDropdown from './NavbarUserDropdown'
+import { getCart } from '@/core/utils/cart'
 
 const Search = dynamic(() => import('./Search'))
 
@@ -20,6 +21,21 @@ const NavbarDesktop = () => {
   const [isOpenCategory, setIsOpenCategory] = useState(false)
   const auth = useAuth()
 
+  const [cartCount, setCartCount] = useState(0)
+
+  useEffect(() => {
+    const handleCartChange = () => {
+      setCartCount(Object.keys(getCart()).length)
+    }
+    handleCartChange()
+
+    window.addEventListener('localStorageChange', handleCartChange)
+
+    return () => {
+      window.removeEventListener('localStorageChange', handleCartChange)
+    }
+  }, [])
+
   return (
     <DesktopView>
       <div className='py-3 bg-warning-400' id='desktop-nav-top'>
@@ -57,10 +73,17 @@ const NavbarDesktop = () => {
               Quotation
             </Link>
             <Link href='/shop/cart' className='flex items-center gap-x-2 !text-gray_r-12/80'>
-              <ShoppingCartIcon className='w-7' />
-              Keranjang
-              <br />
-              Belanja
+              <div className='relative mr-2'>
+                <ShoppingCartIcon className='w-7' />
+                <span className='absolute -top-2 -right-2 badge-solid-red rounded-full w-5 h-5 flex items-center justify-center'>
+                  {cartCount}
+                </span>
+              </div>
+              <span>
+                Keranjang
+                <br />
+                Belanja
+              </span>
             </Link>
             <Link href='/my/wishlist' className='flex items-center gap-x-2 !text-gray_r-12/80'>
               <HeartIcon className='w-7' />
diff --git a/src/core/components/elements/Navbar/NavbarMobile.jsx b/src/core/components/elements/Navbar/NavbarMobile.jsx
index 24ff3a51..0502dba5 100644
--- a/src/core/components/elements/Navbar/NavbarMobile.jsx
+++ b/src/core/components/elements/Navbar/NavbarMobile.jsx
@@ -5,12 +5,29 @@ import { Bars3Icon, HeartIcon, ShoppingCartIcon } from '@heroicons/react/24/outl
 import useSidebar from '@/core/hooks/useSidebar'
 import dynamic from 'next/dynamic'
 import IndoteknikLogo from '@/images/logo.png'
+import { useEffect, useState } from 'react'
+import { getCart } from '@/core/utils/cart'
 
 const Search = dynamic(() => import('./Search'))
 
 const NavbarMobile = () => {
   const { Sidebar, open } = useSidebar()
 
+  const [cartCount, setCartCount] = useState(0)
+
+  useEffect(() => {
+    const handleCartChange = () => {
+      setCartCount(Object.keys(getCart()).length)
+    }
+    handleCartChange()
+
+    window.addEventListener('localStorageChange', handleCartChange)
+
+    return () => {
+      window.removeEventListener('localStorageChange', handleCartChange)
+    }
+  }, [])
+
   return (
     <MobileView>
       <nav className='px-4 py-2 pb-3 sticky top-0 z-50 bg-white shadow'>
@@ -22,8 +39,11 @@ const NavbarMobile = () => {
             <Link href='/my/wishlist'>
               <HeartIcon className='w-6 text-gray_r-12' />
             </Link>
-            <Link href='/shop/cart'>
+            <Link href='/shop/cart' className='relative'>
               <ShoppingCartIcon className='w-6 text-gray_r-12' />
+              <span className='absolute -top-2 -right-2 badge-solid-red rounded-full w-5 h-5 flex items-center justify-center'>
+                {cartCount}
+              </span>
             </Link>
             <button type='button' onClick={open}>
               <Bars3Icon className='w-6 text-gray_r-12' />
-- 
cgit v1.2.3