Refactor notifications to use react-query (#1878)

* Move broadcast channel to lib

* Refactor view/com/post/Post and remove temporary 2 components

* Add useModerationOpts hook

* Refactor notifications to use react-query

* Fix: only trigger updates in useModerationOpts when the values have changed

* Implement unread notification tracking

* Add moderation filtering to notifications

* Handle native/push notifications

* Remove dead code

---------

Co-authored-by: Eric Bailey <git@esb.lol>

src/lib/broadcast/index.ts

@@ -0,0 +1,11 @@
+export default class BroadcastChannel {
+  constructor(public name: string) {}
+  postMessage(_data: any) {}
+  close() {}
+  onmessage: (event: MessageEvent) => void = () => {}
+  addEventListener(_type: string, _listener: (event: MessageEvent) => void) {}
+  removeEventListener(
+    _type: string,
+    _listener: (event: MessageEvent) => void,
+  ) {}
+}

src/lib/broadcast/index.web.ts

@@ -0,0 +1 @@
+export default BroadcastChannel

src/lib/hooks/useSetTitle.ts

@@ -3,18 +3,14 @@ import {useNavigation} from '@react-navigation/native'
 
 import {NavigationProp} from 'lib/routes/types'
 import {bskyTitle} from 'lib/strings/headings'
-import {useStores} from 'state/index'
+import {useUnreadNotifications} from '#/state/queries/notifications/unread'
 
-/**
- * Requires consuming component to be wrapped in `observer`:
- * https://stackoverflow.com/a/71488009
- */
 export function useSetTitle(title?: string) {
   const navigation = useNavigation<NavigationProp>()
-  const {unreadCountLabel} = useStores().me.notifications
+  const numUnread = useUnreadNotifications()
   useEffect(() => {
     if (title) {
-      navigation.setOptions({title: bskyTitle(title, unreadCountLabel)})
+      navigation.setOptions({title: bskyTitle(title, numUnread)})
     }
-  }, [title, navigation, unreadCountLabel])
+  }, [title, navigation, numUnread])
 }

src/lib/notifications/notifications.ts

@@ -1,18 +1,18 @@
 import * as Notifications from 'expo-notifications'
+import {QueryClient} from '@tanstack/react-query'
 import {RootStoreModel} from '../../state'
 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'
 
 const SERVICE_DID = (serviceUrl?: string) =>
   serviceUrl?.includes('staging')
     ? 'did:web:api.staging.bsky.dev'
     : 'did:web:api.bsky.app'
 
-export function init(store: RootStoreModel) {
-  store.onUnreadNotifications(count => Notifications.setBadgeCountAsync(count))
-
+export function init(store: RootStoreModel, queryClient: QueryClient) {
   store.onSessionLoaded(async () => {
     // request notifications permission once the user has logged in
     const perms = await Notifications.getPermissionsAsync()
@@ -83,7 +83,7 @@ export function init(store: RootStoreModel) {
     )
     if (event.request.trigger.type === 'push') {
       // refresh notifications in the background
-      store.me.notifications.syncQueue()
+      queryClient.invalidateQueries({queryKey: RQKEY_NOTIFS()})
       // handle payload-based deeplinks
       let payload
       if (isIOS) {
@@ -121,7 +121,7 @@ export function init(store: RootStoreModel) {
           logger.DebugContext.notifications,
         )
         track('Notificatons:OpenApp')
-        store.me.notifications.refresh() // refresh notifications
+        queryClient.invalidateQueries({queryKey: RQKEY_NOTIFS()})
         resetToTab('NotificationsTab') // open notifications tab
       }
     },