forked from crowetic/commerce
Add a counter of total items
This commit is contained in:
parent
855492684c
commit
5e999920d2
@ -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}>
|
||||||
|
@ -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
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user