Add first round of labeling tools (#467)

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

* Fix positioning of load more btn on web

* Improve behavior of load more notifications btn

* Fix to post rendering

* Fix notification fetch abort condition

* Add start of post-hiding by labels

* Create a standard postcontainer and improve show/hide UI on posts

* Add content hiding to expanded post form

* Improve label rendering to give more context to users when appropriate

* Fix rendering bug

* Add user/profile labeling

* Implement content filtering preferences

* Filter notifications by content prefs

* Update test-pds config

* Bump deps

1 files changed, 18 insertions, 41 deletions

diff --git a/src/view/screens/Notifications.tsx b/src/view/screens/Notifications.tsx
index 2a2d3c13f..8fc47b248 100644
--- a/src/view/screens/Notifications.tsx
+++ b/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,10 @@ export const NotificationsScreen = withAuthRequired(
           onScroll={onMainScroll}
           scrollElRef={scrollElRef}
         />
+        {store.me.notifications.hasNewLatest &&
+          !store.me.notifications.isRefreshing && (
+            <LoadLatestBtn onPress={onPressLoadLatest} label="notifications" />
+          )}
       </View>
     )
   }),