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

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

src/Navigation.tsx

@@ -28,7 +28,6 @@ import {isNative} from 'platform/detection'
 import {useColorSchemeStyle} from 'lib/hooks/useColorSchemeStyle'
 import {router} from './routes'
 import {usePalette} from 'lib/hooks/usePalette'
-import {useUnreadCountLabel} from 'lib/hooks/useUnreadCountLabel'
 import {useStores} from './state'
 
 import {HomeScreen} from './view/screens/Home'
@@ -296,9 +295,9 @@ const MyProfileTabNavigator = observer(() => {
  * The FlatNavigator is used by Web to represent the routes
  * in a single ("flat") stack.
  */
-function FlatNavigator() {
+const FlatNavigator = observer(() => {
   const pal = usePalette('default')
-  const unreadCountLabel = useUnreadCountLabel()
+  const unreadCountLabel = useStores().me.notifications.unreadCountLabel
   const title = (page: string) => bskyTitle(page, unreadCountLabel)
   return (
     <Flat.Navigator
@@ -327,7 +326,7 @@ function FlatNavigator() {
       {commonScreens(Flat as typeof HomeTab, unreadCountLabel)}
     </Flat.Navigator>
   )
-}
+})
 
 /**
  * The RoutesContainer should wrap all components which need access

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)})

src/lib/hooks/useUnreadCountLabel.ts

@@ -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
-}