Be explicit about limit for unseen notifs

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(() => {

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<Notification[]>([])
@@ -127,8 +129,11 @@ export function useUnseenPreferredNotifications(
     useState<Notification[]>([])
 
   useEffect(() => {
-    return listenForNotifications(privateUser.id, setNotifications, true)
-  }, [privateUser.id])
+    return listenForNotifications(privateUser.id, setNotifications, {
+      unseenOnly: true,
+      limit,
+    })
+  }, [limit, privateUser.id])
 
   useEffect(() => {
     const notificationsToShow = getAppropriateNotifications(

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<Notification>(
-    getNotificationsQuery(
-      userId,
-      unseenOnly ? { unseenOnly, limit: NOTIFICATIONS_PER_PAGE } : undefined
-    ),
+    getNotificationsQuery(userId, unseenOnlyOptions),
     (notifs) => {
       notifs.sort((n1, n2) => n2.createdTime - n1.createdTime)
       setNotifications(notifs)