Use single react query to subscribe to notifications

web/components/groups/group-chat.tsx

@@ -278,12 +278,16 @@ function GroupChatNotificationsIcon(props: {
 }) {
   const { privateUser, group, shouldSetAsSeen, hidden } = props
   const preferredNotificationsForThisGroup = useUnseenPreferredNotifications(
-    privateUser,
-    {
-      customHref: `/group/${group.slug}`,
-    }
+    privateUser
+    // Disabled tracking by customHref for now.
+    // {
+    //   customHref: `/group/${group.slug}`,
+    // }
   )
+
   useEffect(() => {
+    if (!preferredNotificationsForThisGroup) return
+
     preferredNotificationsForThisGroup.forEach((notification) => {
       if (
         (shouldSetAsSeen && notification.isSeenOnHref?.includes('chat')) ||
@@ -299,6 +303,7 @@ function GroupChatNotificationsIcon(props: {
     <div
       className={
         !hidden &&
+        preferredNotificationsForThisGroup &&
         preferredNotificationsForThisGroup.length > 0 &&
         !shouldSetAsSeen
           ? 'absolute right-4 top-4 h-3 w-3 rounded-full border-2 border-white bg-red-500'

web/hooks/use-notifications.ts

@@ -1,13 +1,9 @@
-import { useEffect, useMemo, useState } from 'react'
+import { useMemo } from 'react'
 import { notification_subscribe_types, PrivateUser } from 'common/user'
 import { Notification } from 'common/notification'
-import {
-  getNotificationsQuery,
-  listenForNotifications,
-} from 'web/lib/firebase/notifications'
+import { getNotificationsQuery } from 'web/lib/firebase/notifications'
 import { groupBy, map, partition } from 'lodash'
 import { useFirestoreQueryData } from '@react-query-firebase/firestore'
-import { NOTIFICATIONS_PER_PAGE } from 'web/pages/notifications'
 
 export type NotificationGroup = {
   notifications: Notification[]
@@ -17,49 +13,49 @@ export type NotificationGroup = {
   type: 'income' | 'normal'
 }
 
-// For some reason react-query subscriptions don't actually listen for notifications
-// Use useUnseenPreferredNotificationGroups to listen for new notifications
-export function usePreferredGroupedNotifications(
-  privateUser: PrivateUser,
-  cachedNotifications?: Notification[]
-) {
+function usePreferredNotifications(privateUser: PrivateUser) {
   const result = useFirestoreQueryData(
     ['notifications-all', privateUser.id],
-    getNotificationsQuery(privateUser.id)
+    getNotificationsQuery(privateUser.id),
+    { subscribe: true, includeMetadataChanges: true },
+    // Temporary workaround for react-query bug:
+    // https://github.com/invertase/react-query-firebase/issues/25
+    { cacheTime: 0 }
   )
   const notifications = useMemo(() => {
-    if (result.isLoading) return cachedNotifications ?? []
-    if (!result.data) return cachedNotifications ?? []
+    if (!result.data) return undefined
     const notifications = result.data as Notification[]
 
     return getAppropriateNotifications(
       notifications,
       privateUser.notificationPreferences
     ).filter((n) => !n.isSeenOnHref)
-  }, [
-    cachedNotifications,
-    privateUser.notificationPreferences,
-    result.data,
-    result.isLoading,
-  ])
+  }, [privateUser.notificationPreferences, result.data])
 
+  return notifications
+}
+
+export function useUnseenPreferredNotifications(privateUser: PrivateUser) {
+  const notifications = usePreferredNotifications(privateUser)
+  const unseen = useMemo(
+    () => notifications && notifications.filter((n) => !n.isSeen),
+    [notifications]
+  )
+  return unseen
+}
+
+export function usePreferredGroupedNotifications(privateUser: PrivateUser) {
+  const notifications = usePreferredNotifications(privateUser)
   return useMemo(() => {
     if (notifications) return groupNotifications(notifications)
   }, [notifications])
 }
 
 export function useUnseenPreferredNotificationGroups(privateUser: PrivateUser) {
-  const notifications = useUnseenPreferredNotifications(privateUser, {})
-  const [notificationGroups, setNotificationGroups] = useState<
-    NotificationGroup[] | undefined
-  >(undefined)
-  useEffect(() => {
-    if (!notifications) return
-
-    const groupedNotifications = groupNotifications(notifications)
-    setNotificationGroups(groupedNotifications)
+  const notifications = useUnseenPreferredNotifications(privateUser)
+  return useMemo(() => {
+    if (notifications) return groupNotifications(notifications)
   }, [notifications])
-  return notificationGroups
 }
 
 export function groupNotifications(notifications: Notification[]) {
@@ -114,36 +110,6 @@ export function groupNotifications(notifications: Notification[]) {
   return notificationGroups
 }
 
-export function useUnseenPreferredNotifications(
-  privateUser: PrivateUser,
-  options: { customHref?: string },
-  limit: number = NOTIFICATIONS_PER_PAGE
-) {
-  const { customHref } = options
-  const [notifications, setNotifications] = useState<Notification[]>([])
-  const [userAppropriateNotifications, setUserAppropriateNotifications] =
-    useState<Notification[]>([])
-
-  useEffect(() => {
-    return listenForNotifications(privateUser.id, setNotifications, {
-      unseenOnly: true,
-      limit,
-    })
-  }, [limit, privateUser.id])
-
-  useEffect(() => {
-    const notificationsToShow = getAppropriateNotifications(
-      notifications,
-      privateUser.notificationPreferences
-    ).filter((n) =>
-      customHref ? n.isSeenOnHref?.includes(customHref) : !n.isSeenOnHref
-    )
-    setUserAppropriateNotifications(notificationsToShow)
-  }, [notifications, customHref, privateUser.notificationPreferences])
-
-  return userAppropriateNotifications
-}
-
 const lessPriorityReasons = [
   'on_contract_with_users_comment',
   'on_contract_with_users_answer',

web/lib/firebase/notifications.ts

@@ -1,7 +1,5 @@
 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(
@@ -23,17 +21,3 @@ export function getNotificationsQuery(
     limit(NOTIFICATIONS_PER_PAGE * 10)
   )
 }
-
-export function listenForNotifications(
-  userId: string,
-  setNotifications: (notifs: Notification[]) => void,
-  unseenOnlyOptions?: { unseenOnly: boolean; limit: number }
-) {
-  return listenForValues<Notification>(
-    getNotificationsQuery(userId, unseenOnlyOptions),
-    (notifs) => {
-      notifs.sort((n1, n2) => n2.createdTime - n1.createdTime)
-      setNotifications(notifs)
-    }
-  )
-}

web/pages/notifications.tsx

@@ -45,6 +45,7 @@ import { SiteLink } from 'web/components/site-link'
 import { NotificationSettings } from 'web/components/NotificationSettings'
 import { SEO } from 'web/components/SEO'
 import { useUser } from 'web/hooks/use-user'
+import { LoadingIndicator } from 'web/components/loading-indicator'
 
 export const NOTIFICATIONS_PER_PAGE = 30
 const MULTIPLE_USERS_KEY = 'multipleUsers'
@@ -58,16 +59,6 @@ export default function Notifications(props: {
   auth: { privateUser: PrivateUser }
 }) {
   const { privateUser } = props.auth
-  const local = safeLocalStorage()
-  let localNotifications = [] as Notification[]
-  const localSavedNotificationGroups = local?.getItem('notification-groups')
-  let localNotificationGroups = [] as NotificationGroup[]
-  if (localSavedNotificationGroups) {
-    localNotificationGroups = JSON.parse(localSavedNotificationGroups)
-    localNotifications = localNotificationGroups
-      .map((g) => g.notifications)
-      .flat()
-  }
 
   return (
     <Page>
@@ -84,12 +75,7 @@ export default function Notifications(props: {
             tabs={[
               {
                 title: 'Notifications',
-                content: (
-                  <NotificationsList
-                    privateUser={privateUser}
-                    cachedNotifications={localNotifications}
-                  />
-                ),
+                content: <NotificationsList privateUser={privateUser} />,
               },
               {
                 title: 'Settings',
@@ -135,16 +121,10 @@ function RenderNotificationGroups(props: {
   )
 }
 
-function NotificationsList(props: {
-  privateUser: PrivateUser
-  cachedNotifications: Notification[]
-}) {
-  const { privateUser, cachedNotifications } = props
+function NotificationsList(props: { privateUser: PrivateUser }) {
+  const { privateUser } = props
   const [page, setPage] = useState(0)
-  const allGroupedNotifications = usePreferredGroupedNotifications(
-    privateUser,
-    cachedNotifications
-  )
+  const allGroupedNotifications = usePreferredGroupedNotifications(privateUser)
   const paginatedGroupedNotifications = useMemo(() => {
     if (!allGroupedNotifications) return
     const start = page * NOTIFICATIONS_PER_PAGE
@@ -163,7 +143,8 @@ function NotificationsList(props: {
     return maxNotificationsToShow
   }, [allGroupedNotifications, page])
 
-  if (!paginatedGroupedNotifications || !allGroupedNotifications) return <div />
+  if (!paginatedGroupedNotifications || !allGroupedNotifications)
+    return <LoadingIndicator />
 
   return (
     <div className={'min-h-[100vh] text-sm'}>