4
0
forked from crowetic/commerce

Add a counter of total items

This commit is contained in:
Luis Alvarez 2020-10-06 22:16:33 -05:00
parent 855492684c
commit 5e999920d2
2 changed files with 25 additions and 13 deletions

View File

@ -1,25 +1,32 @@
import cn from 'classnames'
import { FC } from 'react' 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 { Avatar } from '@components/core'
import { Heart, Bag } from '@components/icon' import { Heart, Bag } from '@components/icon'
import { useUI } from '@components/ui/context' import { useUI } from '@components/ui/context'
import s from './UserNav.module.css'
interface Props { interface Props {
className?: string 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 UserNav: FC<Props> = ({ className }) => {
const rootClassName = cn(s.root, className)
const { openSidebar } = useUI() const { openSidebar } = useUI()
const { data } = useCart()
const itemsCount = Object.values(data?.line_items ?? {}).reduce(countItems, 0)
return ( return (
<nav className={rootClassName}> <nav className={cn(s.root, className)}>
<ul className={s.list}> <ul className={s.list}>
<li className={s.item} onClick={() => openSidebar()}> <li className={s.item} onClick={() => openSidebar()}>
<Bag /> <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"> <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> </span>
</li> </li>
<li className={s.item}> <li className={s.item}>

View File

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