Add a counter of total items

components/core/UserNav/UserNav.tsx

@@ -1,25 +1,32 @@
-import cn from 'classnames'
 import { FC } from 'react'
-import s from './UserNav.module.css'
+import cn from 'classnames'
+import { useCart } from '@lib/bigcommerce/cart'
 import { Avatar } from '@components/core'
 import { Heart, Bag } from '@components/icon'
 import { useUI } from '@components/ui/context'
+import s from './UserNav.module.css'
 
 interface Props {
   className?: string
 }
 
+const countItem = (count: number, item: any) => count + item.quantity
+
+const countItems = (count: number, items: any[]) =>
+  items.reduce(countItem, count)
+
 const UserNav: FC<Props> = ({ className }) => {
-  const rootClassName = cn(s.root, className)
   const { openSidebar } = useUI()
+  const { data } = useCart()
+  const itemsCount = Object.values(data?.line_items ?? {}).reduce(countItems, 0)
 
   return (
-    <nav className={rootClassName}>
+    <nav className={cn(s.root, className)}>
       <ul className={s.list}>
         <li className={s.item} onClick={() => openSidebar()}>
           <Bag />
           <span className="bg-black h-4 w-4 absolute rounded-full inset-3 text-white flex items-center justify-center font-bold text-xs">
-            1
+            {itemsCount}
           </span>
         </li>
         <li className={s.item}>

components/ui/context.tsx

@@ -17,6 +17,7 @@ type Action =
     }
 
 export const UIContext = React.createContext<State | any>(initialState)
+
 UIContext.displayName = 'UIContext'
 
 export const UIProvider: FC = (props) => {
@@ -45,16 +46,20 @@ export const useUI = () => {
 function uiReducer(state: State, action: Action) {
   switch (action.type) {
     case 'OPEN_SIDEBAR': {
-      return {
-        ...state,
-        displaySidebar: true,
-      }
+      return !state.displaySidebar
+        ? {
+            ...state,
+            displaySidebar: true,
+          }
+        : state
     }
     case 'CLOSE_SIDEBAR': {
-      return {
-        ...state,
-        displaySidebar: false,
-      }
+      return state.displaySidebar
+        ? {
+            ...state,
+            displaySidebar: false,
+          }
+        : state
     }
   }
 }