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,10 +82,11 @@ export function registerTokenChangeHandler(
   }
 }
 
-export function init(queryClient: QueryClient) {
+export function useNotificationsListener(queryClient: QueryClient) {
+  useEffect(() => {
     // handle notifications that are received, both in the foreground or background
     // NOTE: currently just here for debug logging
-  Notifications.addNotificationReceivedListener(event => {
+    const sub1 = Notifications.addNotificationReceivedListener(event => {
       logger.debug(
         'Notifications: received',
         {event},
@@ -109,7 +112,8 @@ export function init(queryClient: QueryClient) {
     })
 
     // handle notifications that are tapped on
-  Notifications.addNotificationResponseReceivedListener(response => {
+    const sub2 = Notifications.addNotificationResponseReceivedListener(
+      response => {
         logger.debug(
           'Notifications: response received',
           {
@@ -117,7 +121,9 @@ export function init(queryClient: QueryClient) {
           },
           logger.DebugContext.notifications,
         )
-    if (response.actionIdentifier === Notifications.DEFAULT_ACTION_IDENTIFIER) {
+        if (
+          response.actionIdentifier === Notifications.DEFAULT_ACTION_IDENTIFIER
+        ) {
           logger.debug(
             'User pressed a notification, opening notifications tab',
             {},
@@ -128,5 +134,11 @@ export function init(queryClient: QueryClient) {
           truncateAndInvalidate(queryClient, RQKEY_NOTIFS())
           resetToTab('NotificationsTab') // open notifications tab
         }
-  })
+      },
+    )
+    return () => {
+      sub1.remove()
+      sub2.remove()
+    }
+  }, [queryClient])
 }