diff --git a/web/components/nav/sidebar.tsx b/web/components/nav/sidebar.tsx index b40f02e9..45c37aa2 100644 --- a/web/components/nav/sidebar.tsx +++ b/web/components/nav/sidebar.tsx @@ -265,9 +265,13 @@ function GroupsList(props: { privateUser: PrivateUser }) { const { currentPage, memberItems, privateUser } = props - const preferredNotifications = useUnseenPreferredNotifications(privateUser, { - customHref: '/group/', - }) + const preferredNotifications = useUnseenPreferredNotifications( + privateUser, + { + customHref: '/group/', + }, + memberItems.length + ) // Set notification as seen if our current page is equal to the isSeenOnHref property useEffect(() => { diff --git a/web/hooks/use-notifications.ts b/web/hooks/use-notifications.ts index f19aefca..f5502b85 100644 --- a/web/hooks/use-notifications.ts +++ b/web/hooks/use-notifications.ts @@ -7,6 +7,7 @@ import { } from 'web/lib/firebase/notifications' import { groupBy, map } from 'lodash' import { useFirestoreQuery } from '@react-query-firebase/firestore' +import { NOTIFICATIONS_PER_PAGE } from 'web/pages/notifications' export type NotificationGroup = { notifications: Notification[] @@ -119,7 +120,8 @@ export function groupNotifications(notifications: Notification[]) { export function useUnseenPreferredNotifications( privateUser: PrivateUser, - options: { customHref?: string } + options: { customHref?: string }, + limit: number = NOTIFICATIONS_PER_PAGE ) { const { customHref } = options const [notifications, setNotifications] = useState([]) @@ -127,8 +129,11 @@ export function useUnseenPreferredNotifications( useState([]) useEffect(() => { - return listenForNotifications(privateUser.id, setNotifications, true) - }, [privateUser.id]) + return listenForNotifications(privateUser.id, setNotifications, { + unseenOnly: true, + limit, + }) + }, [limit, privateUser.id]) useEffect(() => { const notificationsToShow = getAppropriateNotifications( diff --git a/web/lib/firebase/notifications.ts b/web/lib/firebase/notifications.ts index a4e1b527..d2db3665 100644 --- a/web/lib/firebase/notifications.ts +++ b/web/lib/firebase/notifications.ts @@ -27,13 +27,10 @@ export function getNotificationsQuery( export function listenForNotifications( userId: string, setNotifications: (notifs: Notification[]) => void, - unseenOnly?: boolean + unseenOnlyOptions?: { unseenOnly: boolean; limit: number } ) { return listenForValues( - getNotificationsQuery( - userId, - unseenOnly ? { unseenOnly, limit: NOTIFICATIONS_PER_PAGE } : undefined - ), + getNotificationsQuery(userId, unseenOnlyOptions), (notifs) => { notifs.sort((n1, n2) => n2.createdTime - n1.createdTime) setNotifications(notifs)