Rework notifications to sync locally in full and give users better control

src/view/com/notifications/Feed.tsx

@@ -45,7 +45,6 @@ export const Feed = observer(function Feed({
   const onRefresh = React.useCallback(async () => {
     try {
       await view.refresh()
-      await view.markAllRead()
     } catch (err) {
       view.rootStore.log.error('Failed to refresh notifications feed', err)
     }

src/view/com/util/LoadLatestBtn.tsx

@@ -10,31 +10,33 @@ import {useStores} from 'state/index'
 
 const HITSLOP = {left: 20, top: 20, right: 20, bottom: 20}
 
-export const LoadLatestBtn = observer(({onPress}: {onPress: () => void}) => {
-  const store = useStores()
-  const safeAreaInsets = useSafeAreaInsets()
-  return (
-    <TouchableOpacity
-      style={[
-        styles.loadLatest,
-        !store.shell.minimalShellMode && {
-          bottom: 60 + clamp(safeAreaInsets.bottom, 15, 30),
-        },
-      ]}
-      onPress={onPress}
-      hitSlop={HITSLOP}>
-      <LinearGradient
-        colors={[gradients.blueLight.start, gradients.blueLight.end]}
-        start={{x: 0, y: 0}}
-        end={{x: 1, y: 1}}
-        style={styles.loadLatestInner}>
-        <Text type="md-bold" style={styles.loadLatestText}>
-          Load new posts
-        </Text>
-      </LinearGradient>
-    </TouchableOpacity>
-  )
-})
+export const LoadLatestBtn = observer(
+  ({onPress, label}: {onPress: () => void; label: string}) => {
+    const store = useStores()
+    const safeAreaInsets = useSafeAreaInsets()
+    return (
+      <TouchableOpacity
+        style={[
+          styles.loadLatest,
+          !store.shell.minimalShellMode && {
+            bottom: 60 + clamp(safeAreaInsets.bottom, 15, 30),
+          },
+        ]}
+        onPress={onPress}
+        hitSlop={HITSLOP}>
+        <LinearGradient
+          colors={[gradients.blueLight.start, gradients.blueLight.end]}
+          start={{x: 0, y: 0}}
+          end={{x: 1, y: 1}}
+          style={styles.loadLatestInner}>
+          <Text type="md-bold" style={styles.loadLatestText}>
+            Load new {label}
+          </Text>
+        </LinearGradient>
+      </TouchableOpacity>
+    )
+  },
+)
 
 const styles = StyleSheet.create({
   loadLatest: {

src/view/com/util/LoadLatestBtn.web.tsx

@@ -6,7 +6,13 @@ import {UpIcon} from 'lib/icons'
 
 const HITSLOP = {left: 20, top: 20, right: 20, bottom: 20}
 
-export const LoadLatestBtn = ({onPress}: {onPress: () => void}) => {
+export const LoadLatestBtn = ({
+  onPress,
+  label,
+}: {
+  onPress: () => void
+  label: string
+}) => {
   const pal = usePalette('default')
   return (
     <TouchableOpacity
@@ -15,7 +21,7 @@ export const LoadLatestBtn = ({onPress}: {onPress: () => void}) => {
       hitSlop={HITSLOP}>
       <Text type="md-bold" style={pal.text}>
         <UpIcon size={16} strokeWidth={1} style={[pal.text, styles.icon]} />
-        Load new posts
+        Load new {label}
       </Text>
     </TouchableOpacity>
   )

src/view/screens/Home.tsx

@@ -194,7 +194,7 @@ const FeedPage = observer(
           headerOffset={HEADER_OFFSET}
         />
         {feed.hasNewLatest && !feed.isRefreshing && (
-          <LoadLatestBtn onPress={onPressLoadLatest} />
+          <LoadLatestBtn onPress={onPressLoadLatest} label="posts" />
         )}
         <FAB
           testID="composeFAB"

src/view/screens/Notifications.tsx

@@ -1,8 +1,7 @@
-import React, {useEffect} from 'react'
+import React from 'react'
 import {FlatList, View} from 'react-native'
 import {useFocusEffect} from '@react-navigation/native'
 import {observer} from 'mobx-react-lite'
-import useAppState from 'react-native-appstate-hook'
 import {
   NativeStackScreenProps,
   NotificationsTabNavigatorParams,
@@ -11,13 +10,12 @@ import {withAuthRequired} from 'view/com/auth/withAuthRequired'
 import {ViewHeader} from '../com/util/ViewHeader'
 import {Feed} from '../com/notifications/Feed'
 import {InvitedUsers} from '../com/notifications/InvitedUsers'
+import {LoadLatestBtn} from 'view/com/util/LoadLatestBtn'
 import {useStores} from 'state/index'
 import {useOnMainScroll} from 'lib/hooks/useOnMainScroll'
 import {s} from 'lib/styles'
 import {useAnalytics} from 'lib/analytics'
 
-const NOTIFICATIONS_POLL_INTERVAL = 15e3
-
 type Props = NativeStackScreenProps<
   NotificationsTabNavigatorParams,
   'Notifications'
@@ -28,46 +26,21 @@ export const NotificationsScreen = withAuthRequired(
     const onMainScroll = useOnMainScroll(store)
     const scrollElRef = React.useRef<FlatList>(null)
     const {screen} = useAnalytics()
-    const {appState} = useAppState({
-      onForeground: () => doPoll(true),
-    })
 
     // event handlers
     // =
-    const onPressTryAgain = () => {
+    const onPressTryAgain = React.useCallback(() => {
       store.me.notifications.refresh()
-    }
+    }, [store])
+
     const scrollToTop = React.useCallback(() => {
       scrollElRef.current?.scrollToOffset({offset: 0})
     }, [scrollElRef])
 
-    // periodic polling
-    // =
-    const doPoll = React.useCallback(
-      async (isForegrounding = false) => {
-        if (isForegrounding) {
-          // app is foregrounding, refresh optimistically
-          store.log.debug('NotificationsScreen: Refreshing on app foreground')
-          await Promise.all([
-            store.me.notifications.loadUnreadCount(),
-            store.me.notifications.refresh(),
-          ])
-        } else if (appState === 'active') {
-          // periodic poll, refresh if there are new notifs
-          store.log.debug('NotificationsScreen: Polling for new notifications')
-          const didChange = await store.me.notifications.loadUnreadCount()
-          if (didChange) {
-            store.log.debug('NotificationsScreen: Loading new notifications')
-            await store.me.notifications.loadLatest()
-          }
-        }
-      },
-      [appState, store],
-    )
-    useEffect(() => {
-      const pollInterval = setInterval(doPoll, NOTIFICATIONS_POLL_INTERVAL)
-      return () => clearInterval(pollInterval)
-    }, [doPoll])
+    const onPressLoadLatest = React.useCallback(() => {
+      store.me.notifications.processQueue()
+      scrollToTop()
+    }, [store, scrollToTop])
 
     // on-visible setup
     // =
@@ -75,16 +48,16 @@ export const NotificationsScreen = withAuthRequired(
       React.useCallback(() => {
         store.shell.setMinimalShellMode(false)
         store.log.debug('NotificationsScreen: Updating feed')
-        const softResetSub = store.onScreenSoftReset(scrollToTop)
-        store.me.notifications.loadUnreadCount()
-        store.me.notifications.loadLatest()
+        const softResetSub = store.onScreenSoftReset(onPressLoadLatest)
+        store.me.notifications.syncQueue()
+        store.me.notifications.update()
         screen('Notifications')
 
         return () => {
           softResetSub.remove()
-          store.me.notifications.markAllRead()
+          store.me.notifications.markAllUnqueuedRead()
         }
-      }, [store, screen, scrollToTop]),
+      }, [store, screen, onPressLoadLatest]),
     )
 
     return (
@@ -97,6 +70,11 @@ export const NotificationsScreen = withAuthRequired(
           onScroll={onMainScroll}
           scrollElRef={scrollElRef}
         />
+
+        {store.me.notifications.hasNewLatest &&
+          !store.me.notifications.isRefreshing && (
+            <LoadLatestBtn onPress={onPressLoadLatest} label="notifications" />
+          )}
       </View>
     )
   }),