Commit 9f5c588b authored by Jordan Frankfurt's avatar Jordan Frankfurt Committed by GitHub

feat(sell-bag): patch open/close behavior (#5107)

keep bag link in nav bar at all times
parent 415b3a15
import { NavIcon } from 'components/NavBar/NavIcon' import { NavIcon } from 'components/NavBar/NavIcon'
import * as styles from 'components/NavBar/ShoppingBag.css' import * as styles from 'components/NavBar/ShoppingBag.css'
import { Box } from 'nft/components/Box' import { Box } from 'nft/components/Box'
import { BagIcon, HundredsOverflowIcon, TagIcon } from 'nft/components/icons' import { BagIcon, HundredsOverflowIcon } from 'nft/components/icons'
import { useBag, useSellAsset } from 'nft/hooks' import { useBag } from 'nft/hooks'
import { useEffect, useState } from 'react' import { useEffect, useState } from 'react'
import { useLocation } from 'react-router-dom'
export const ShoppingBag = () => { export const ShoppingBag = () => {
const itemsInBag = useBag((state) => state.itemsInBag) const itemsInBag = useBag((state) => state.itemsInBag)
const sellAssets = useSellAsset((state) => state.sellAssets)
const [bagQuantity, setBagQuantity] = useState(0) const [bagQuantity, setBagQuantity] = useState(0)
const [sellQuantity, setSellQuantity] = useState(0)
const location = useLocation()
const toggleBag = useBag((s) => s.toggleBag) const toggleBag = useBag((s) => s.toggleBag)
...@@ -19,28 +15,13 @@ export const ShoppingBag = () => { ...@@ -19,28 +15,13 @@ export const ShoppingBag = () => {
setBagQuantity(itemsInBag.length) setBagQuantity(itemsInBag.length)
}, [itemsInBag]) }, [itemsInBag])
useEffect(() => { const bagHasItems = bagQuantity > 0
setSellQuantity(sellAssets.length)
}, [sellAssets])
const isProfilePage = location.pathname === '/nfts/profile'
return ( return (
<NavIcon onClick={toggleBag}> <NavIcon onClick={toggleBag}>
{isProfilePage ? ( <BagIcon viewBox="0 0 20 20" width={24} height={24} />
<> {bagHasItems && (
<TagIcon viewBox="0 0 20 20" width={24} height={24} /> <Box className={styles.bagQuantity}>{bagQuantity > 99 ? <HundredsOverflowIcon /> : bagQuantity}</Box>
{sellQuantity ? (
<Box className={styles.bagQuantity}>{sellQuantity > 99 ? <HundredsOverflowIcon /> : sellQuantity}</Box>
) : null}
</>
) : (
<>
<BagIcon viewBox="0 0 20 20" width={24} height={24} />
{bagQuantity ? (
<Box className={styles.bagQuantity}>{bagQuantity > 99 ? <HundredsOverflowIcon /> : bagQuantity}</Box>
) : null}
</>
)} )}
</NavIcon> </NavIcon>
) )
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment