Make notifications init reactive to queryClient (#3329)

src/App.native.tsx

@@ -19,8 +19,8 @@ import {init as initPersistedState} from '#/state/persisted'
 import * as persisted from '#/state/persisted'
 import {Provider as LabelDefsProvider} from '#/state/preferences/label-defs'
 import {useIntentHandler} from 'lib/hooks/useIntentHandler'
+import {useNotificationsListener} from 'lib/notifications/notifications'
 import {useOTAUpdates} from 'lib/hooks/useOTAUpdates'
-import * as notifications from 'lib/notifications/notifications'
 import {
   asyncStoragePersister,
   dehydrateOptions,
@@ -61,11 +61,11 @@ function InnerApp() {
   const theme = useColorModeTheme()
   const {_} = useLingui()
   useIntentHandler()
+  useNotificationsListener(queryClient)
   useOTAUpdates()
 
   // init
   useEffect(() => {
-    notifications.init(queryClient)
     listenSessionDropped(() => {
       Toast.show(_(msg`Sorry! Your session expired. Please log in again.`))
     })

src/lib/notifications/notifications.ts

@@ -1,12 +1,14 @@
+import {useEffect} from 'react'
 import * as Notifications from 'expo-notifications'
 import {QueryClient} from '@tanstack/react-query'
-import {resetToTab} from '../../Navigation'
+
-import {devicePlatform, isIOS} from 'platform/detection'
-import {track} from 'lib/analytics/analytics'
 import {logger} from '#/logger'
 import {RQKEY as RQKEY_NOTIFS} from '#/state/queries/notifications/feed'
 import {truncateAndInvalidate} from '#/state/queries/util'
-import {SessionAccount, getAgent} from '#/state/session'
+import {getAgent, SessionAccount} from '#/state/session'
+import {track} from 'lib/analytics/analytics'
+import {devicePlatform, isIOS} from 'platform/detection'
+import {resetToTab} from '../../Navigation'
 import {logEvent} from '../statsig/statsig'
 
 const SERVICE_DID = (serviceUrl?: string) =>
@@ -80,53 +82,63 @@ export function registerTokenChangeHandler(
   }
 }
 
-export function init(queryClient: QueryClient) {
+export function useNotificationsListener(queryClient: QueryClient) {
-  // handle notifications that are received, both in the foreground or background
+  useEffect(() => {
-  // NOTE: currently just here for debug logging
+    // handle notifications that are received, both in the foreground or background
-  Notifications.addNotificationReceivedListener(event => {
+    // NOTE: currently just here for debug logging
-    logger.debug(
+    const sub1 = Notifications.addNotificationReceivedListener(event => {
-      'Notifications: received',
-      {event},
-      logger.DebugContext.notifications,
-    )
-    if (event.request.trigger.type === 'push') {
-      // handle payload-based deeplinks
-      let payload
-      if (isIOS) {
-        payload = event.request.trigger.payload
-      } else {
-        // TODO: handle android payload deeplink
-      }
-      if (payload) {
-        logger.debug(
-          'Notifications: received payload',
-          payload,
-          logger.DebugContext.notifications,
-        )
-        // TODO: deeplink notif here
-      }
-    }
-  })
-
-  // handle notifications that are tapped on
-  Notifications.addNotificationResponseReceivedListener(response => {
-    logger.debug(
-      'Notifications: response received',
-      {
-        actionIdentifier: response.actionIdentifier,
-      },
-      logger.DebugContext.notifications,
-    )
-    if (response.actionIdentifier === Notifications.DEFAULT_ACTION_IDENTIFIER) {
       logger.debug(
-        'User pressed a notification, opening notifications tab',
+        'Notifications: received',
-        {},
+        {event},
         logger.DebugContext.notifications,
       )
-      track('Notificatons:OpenApp')
+      if (event.request.trigger.type === 'push') {
-      logEvent('notifications:openApp', {})
+        // handle payload-based deeplinks
-      truncateAndInvalidate(queryClient, RQKEY_NOTIFS())
+        let payload
-      resetToTab('NotificationsTab') // open notifications tab
+        if (isIOS) {
+          payload = event.request.trigger.payload
+        } else {
+          // TODO: handle android payload deeplink
+        }
+        if (payload) {
+          logger.debug(
+            'Notifications: received payload',
+            payload,
+            logger.DebugContext.notifications,
+          )
+          // TODO: deeplink notif here
+        }
+      }
+    })
+
+    // handle notifications that are tapped on
+    const sub2 = Notifications.addNotificationResponseReceivedListener(
+      response => {
+        logger.debug(
+          'Notifications: response received',
+          {
+            actionIdentifier: response.actionIdentifier,
+          },
+          logger.DebugContext.notifications,
+        )
+        if (
+          response.actionIdentifier === Notifications.DEFAULT_ACTION_IDENTIFIER
+        ) {
+          logger.debug(
+            'User pressed a notification, opening notifications tab',
+            {},
+            logger.DebugContext.notifications,
+          )
+          track('Notificatons:OpenApp')
+          logEvent('notifications:openApp', {})
+          truncateAndInvalidate(queryClient, RQKEY_NOTIFS())
+          resetToTab('NotificationsTab') // open notifications tab
+        }
+      },
+    )
+    return () => {
+      sub1.remove()
+      sub2.remove()
     }
-  })
+  }, [queryClient])
 }