style: remove `useUnreadCountLabel` hack from `50c1841` (#655) (#686)

I just realized how `mobx` works (never used before lol) and now I feel
dumb.

2 files changed, 6 insertions, 21 deletions

diff --git a/src/lib/hooks/useSetTitle.ts b/src/lib/hooks/useSetTitle.ts
index 85ba44d29..c5c7a5ca1 100644
--- a/src/lib/hooks/useSetTitle.ts
+++ b/src/lib/hooks/useSetTitle.ts
@@ -3,11 +3,15 @@ import {useNavigation} from '@react-navigation/native'
 
 import {NavigationProp} from 'lib/routes/types'
 import {bskyTitle} from 'lib/strings/headings'
-import {useUnreadCountLabel} from './useUnreadCountLabel'
+import {useStores} from 'state/index'
 
+/**
+ * Requires consuming component to be wrapped in `observer`:
+ * https://stackoverflow.com/a/71488009
+ */
 export function useSetTitle(title?: string) {
   const navigation = useNavigation<NavigationProp>()
-  const unreadCountLabel = useUnreadCountLabel()
+  const {unreadCountLabel} = useStores().me.notifications
   useEffect(() => {
     if (title) {
       navigation.setOptions({title: bskyTitle(title, unreadCountLabel)})
diff --git a/src/lib/hooks/useUnreadCountLabel.ts b/src/lib/hooks/useUnreadCountLabel.ts
deleted file mode 100644
index e2bf77885..000000000
--- a/src/lib/hooks/useUnreadCountLabel.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import {useEffect, useReducer} from 'react'
-import {DeviceEventEmitter} from 'react-native'
-import {useStores} from 'state/index'
-
-export function useUnreadCountLabel() {
-  // HACK: We don't have anything like Redux selectors,
-  // and we don't want to use <RootStoreContext.Consumer />
-  // to react to the whole store
-  const [, forceUpdate] = useReducer(x => x + 1, 0)
-  useEffect(() => {
-    const subscription = DeviceEventEmitter.addListener(
-      'unread-notifications',
-      forceUpdate,
-    )
-    return () => subscription?.remove()
-  }, [forceUpdate])
-
-  return useStores().me.notifications.unreadCountLabel
-}