Bold more on new group chats

This commit is contained in:
Ian Philips 2022-07-07 15:52:28 -06:00
parent e456b9a855
commit 999c1cd8e3

View File

@ -9,7 +9,7 @@ import {
import { Transition, Dialog } from '@headlessui/react' import { Transition, Dialog } from '@headlessui/react'
import { useState, Fragment } from 'react' import { useState, Fragment } from 'react'
import Sidebar, { Item } from './sidebar' import Sidebar, { Item } from './sidebar'
import { useUser } from 'web/hooks/use-user' import { usePrivateUser, useUser } from 'web/hooks/use-user'
import { formatMoney } from 'common/util/format' import { formatMoney } from 'common/util/format'
import { Avatar } from '../avatar' import { Avatar } from '../avatar'
import clsx from 'clsx' import clsx from 'clsx'
@ -17,6 +17,8 @@ import { useRouter } from 'next/router'
import NotificationsIcon from 'web/components/notifications-icon' import NotificationsIcon from 'web/components/notifications-icon'
import { useIsIframe } from 'web/hooks/use-is-iframe' import { useIsIframe } from 'web/hooks/use-is-iframe'
import { trackCallback } from 'web/lib/service/analytics' import { trackCallback } from 'web/lib/service/analytics'
import { useUnseenPreferredNotifications } from 'web/hooks/use-notifications'
import { PrivateUser } from 'common/user'
function getNavigation() { function getNavigation() {
return [ return [
@ -42,6 +44,7 @@ export function BottomNavBar() {
const currentPage = router.pathname const currentPage = router.pathname
const user = useUser() const user = useUser()
const privateUser = usePrivateUser(user?.id)
const isIframe = useIsIframe() const isIframe = useIsIframe()
if (isIframe) { if (isIframe) {
@ -81,8 +84,12 @@ export function BottomNavBar() {
className="w-full select-none py-1 px-3 text-center hover:cursor-pointer hover:bg-indigo-200 hover:text-indigo-700" className="w-full select-none py-1 px-3 text-center hover:cursor-pointer hover:bg-indigo-200 hover:text-indigo-700"
onClick={() => setSidebarOpen(true)} onClick={() => setSidebarOpen(true)}
> >
<MenuAlt3Icon className="my-1 mx-auto h-6 w-6" aria-hidden="true" /> <MenuAlt3Icon className=" my-1 mx-auto h-6 w-6" aria-hidden="true" />
More {privateUser ? (
<MoreMenuWithGroupNotifications privateUser={privateUser} />
) : (
'More'
)}
</div> </div>
<MobileSidebar <MobileSidebar
@ -93,6 +100,22 @@ export function BottomNavBar() {
) )
} }
function MoreMenuWithGroupNotifications(props: { privateUser: PrivateUser }) {
const { privateUser } = props
const preferredNotifications = useUnseenPreferredNotifications(privateUser, {
customHref: '/group/',
})
return (
<span
className={
preferredNotifications.length > 0 ? 'font-bold' : 'font-normal'
}
>
More
</span>
)
}
function NavBarItem(props: { item: Item; currentPage: string }) { function NavBarItem(props: { item: Item; currentPage: string }) {
const { item, currentPage } = props const { item, currentPage } = props
const track = trackCallback(`navbar: ${item.trackingEventName ?? item.name}`) const track = trackCallback(`navbar: ${item.trackingEventName ?? item.name}`)