Conditionally load unreads (#4072)

zio/stable
Eric Bailey 2024-05-16 20:13:55 -05:00 committed by GitHub
parent 0444e69c35
commit 829f6a9e64
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 37 additions and 25 deletions

View File

@ -66,6 +66,8 @@ import {
} from '#/components/icons/UserCircle'
import {router} from '../../../routes'
const NAV_ICON_WIDTH = 28
function ProfileCard() {
const {currentAccount} = useSession()
const {isLoading, data: profile} = useProfileQuery({did: currentAccount!.did})
@ -280,15 +282,29 @@ function ComposeBtn() {
)
}
function ChatNavItem() {
const pal = usePalette('default')
const {_} = useLingui()
const numUnreadMessages = useUnreadMessageCount()
return (
<NavItem
href="/messages"
count={numUnreadMessages.numUnread}
icon={<Message style={pal.text} width={NAV_ICON_WIDTH} />}
iconFilled={<MessageFilled style={pal.text} width={NAV_ICON_WIDTH} />}
label={_(msg`Chat`)}
/>
)
}
export function DesktopLeftNav() {
const {hasSession, currentAccount} = useSession()
const pal = usePalette('default')
const {_} = useLingui()
const {isDesktop, isTablet} = useWebMediaQueries()
const numUnreadNotifications = useUnreadNotifications()
const numUnreadMessages = useUnreadMessageCount()
const gate = useGate()
const iconWidth = 28
if (!hasSession && !isDesktop) {
return null
@ -316,66 +332,62 @@ export function DesktopLeftNav() {
<NavItem
href="/"
icon={<Home width={iconWidth} style={pal.text} />}
iconFilled={<HomeFilled width={iconWidth} style={pal.text} />}
icon={<Home width={NAV_ICON_WIDTH} style={pal.text} />}
iconFilled={<HomeFilled width={NAV_ICON_WIDTH} style={pal.text} />}
label={_(msg`Home`)}
/>
<NavItem
href="/search"
icon={<MagnifyingGlass style={pal.text} width={iconWidth} />}
icon={<MagnifyingGlass style={pal.text} width={NAV_ICON_WIDTH} />}
iconFilled={
<MagnifyingGlassFilled style={pal.text} width={iconWidth} />
<MagnifyingGlassFilled style={pal.text} width={NAV_ICON_WIDTH} />
}
label={_(msg`Search`)}
/>
<NavItem
href="/notifications"
count={numUnreadNotifications}
icon={<Bell width={iconWidth} style={pal.text} />}
iconFilled={<BellFilled width={iconWidth} style={pal.text} />}
icon={<Bell width={NAV_ICON_WIDTH} style={pal.text} />}
iconFilled={<BellFilled width={NAV_ICON_WIDTH} style={pal.text} />}
label={_(msg`Notifications`)}
/>
{gate('dms') && (
<NavItem
href="/messages"
count={numUnreadMessages.numUnread}
icon={<Message style={pal.text} width={iconWidth} />}
iconFilled={<MessageFilled style={pal.text} width={iconWidth} />}
label={_(msg`Chat`)}
/>
)}
{gate('dms') && <ChatNavItem />}
<NavItem
href="/feeds"
icon={
<Hashtag
style={pal.text as FontAwesomeIconStyle}
width={iconWidth}
width={NAV_ICON_WIDTH}
/>
}
iconFilled={
<HashtagFilled
style={pal.text as FontAwesomeIconStyle}
width={iconWidth}
width={NAV_ICON_WIDTH}
/>
}
label={_(msg`Feeds`)}
/>
<NavItem
href="/lists"
icon={<List style={pal.text} width={iconWidth} />}
iconFilled={<ListFilled style={pal.text} width={iconWidth} />}
icon={<List style={pal.text} width={NAV_ICON_WIDTH} />}
iconFilled={<ListFilled style={pal.text} width={NAV_ICON_WIDTH} />}
label={_(msg`Lists`)}
/>
<NavItem
href={currentAccount ? makeProfileLink(currentAccount) : '/'}
icon={<UserCircle width={iconWidth} style={pal.text} />}
iconFilled={<UserCircleFilled width={iconWidth} style={pal.text} />}
icon={<UserCircle width={NAV_ICON_WIDTH} style={pal.text} />}
iconFilled={
<UserCircleFilled width={NAV_ICON_WIDTH} style={pal.text} />
}
label={_(msg`Profile`)}
/>
<NavItem
href="/settings"
icon={<Settings width={iconWidth} style={pal.text} />}
iconFilled={<SettingsFilled width={iconWidth} style={pal.text} />}
icon={<Settings width={NAV_ICON_WIDTH} style={pal.text} />}
iconFilled={
<SettingsFilled width={NAV_ICON_WIDTH} style={pal.text} />
}
label={_(msg`Settings`)}
/>