diff --git a/web/hooks/use-notifications.ts b/web/hooks/use-notifications.ts index 129efa18..f19aefca 100644 --- a/web/hooks/use-notifications.ts +++ b/web/hooks/use-notifications.ts @@ -25,10 +25,7 @@ export function usePreferredGroupedNotifications(privateUser: PrivateUser) { const [notifications, setNotifications] = useState([]) const key = `notifications-${privateUser.id}-all` - const result = useFirestoreQuery( - [key], - getNotificationsQuery(privateUser.id, false) - ) + const result = useFirestoreQuery([key], getNotificationsQuery(privateUser.id)) useEffect(() => { if (result.isLoading) return if (!result.data) return setNotifications([]) diff --git a/web/lib/firebase/notifications.ts b/web/lib/firebase/notifications.ts index 302c4d55..a4e1b527 100644 --- a/web/lib/firebase/notifications.ts +++ b/web/lib/firebase/notifications.ts @@ -1,17 +1,27 @@ -import { collection, orderBy, query, where } from 'firebase/firestore' +import { collection, limit, orderBy, query, where } from 'firebase/firestore' import { Notification } from 'common/notification' import { db } from 'web/lib/firebase/init' import { listenForValues } from 'web/lib/firebase/utils' +import { NOTIFICATIONS_PER_PAGE } from 'web/pages/notifications' -export function getNotificationsQuery(userId: string, unseenOnly?: boolean) { +export function getNotificationsQuery( + userId: string, + unseenOnlyOptions?: { unseenOnly: boolean; limit: number } +) { const notifsCollection = collection(db, `/users/${userId}/notifications`) - if (unseenOnly) + if (unseenOnlyOptions?.unseenOnly) return query( notifsCollection, where('isSeen', '==', false), - orderBy('createdTime', 'desc') + orderBy('createdTime', 'desc'), + limit(unseenOnlyOptions.limit) ) - return query(notifsCollection, orderBy('createdTime', 'desc')) + return query( + notifsCollection, + orderBy('createdTime', 'desc'), + // Nobody's going through 10 pages of notifications, right? + limit(NOTIFICATIONS_PER_PAGE * 10) + ) } export function listenForNotifications( @@ -20,11 +30,13 @@ export function listenForNotifications( unseenOnly?: boolean ) { return listenForValues( - getNotificationsQuery(userId, unseenOnly), + getNotificationsQuery( + userId, + unseenOnly ? { unseenOnly, limit: NOTIFICATIONS_PER_PAGE } : undefined + ), (notifs) => { notifs.sort((n1, n2) => n2.createdTime - n1.createdTime) setNotifications(notifs) - }, - true + } ) }