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

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,10 @@ export const NotificationsScreen = withAuthRequired(
           onScroll={onMainScroll}
           scrollElRef={scrollElRef}
         />
+        {store.me.notifications.hasNewLatest &&
+          !store.me.notifications.isRefreshing && (
+            <LoadLatestBtn onPress={onPressLoadLatest} label="notifications" />
+          )}
       </View>
     )
   }),

src/view/screens/Search.tsx

@@ -155,6 +155,7 @@ export const SearchScreen = withAuthRequired(
                       testID={`searchAutoCompleteResult-${item.handle}`}
                       handle={item.handle}
                       displayName={item.displayName}
+                      labels={item.labels}
                       avatar={item.avatar}
                     />
                   ))}

src/view/screens/Settings.tsx

@@ -124,6 +124,11 @@ export const SettingsScreen = withAuthRequired(
       store.shell.openModal({name: 'invite-codes'})
     }, [track, store])
 
+    const onPressContentFiltering = React.useCallback(() => {
+      track('Settings:ContentfilteringButtonClicked')
+      store.shell.openModal({name: 'content-filtering-settings'})
+    }, [track, store])
+
     const onPressSignout = React.useCallback(() => {
       track('Settings:SignOutButtonClicked')
       store.session.logout()
@@ -248,6 +253,20 @@ export const SettingsScreen = withAuthRequired(
           <Text type="xl-bold" style={[pal.text, styles.heading]}>
             Advanced
           </Text>
+          <TouchableOpacity
+            testID="contentFilteringBtn"
+            style={[styles.linkCard, pal.view, isSwitching && styles.dimmed]}
+            onPress={isSwitching ? undefined : onPressContentFiltering}>
+            <View style={[styles.iconContainer, pal.btn]}>
+              <FontAwesomeIcon
+                icon="eye"
+                style={pal.text as FontAwesomeIconStyle}
+              />
+            </View>
+            <Text type="lg" style={pal.text}>
+              Content moderation
+            </Text>
+          </TouchableOpacity>
           <TouchableOpacity
             testID="changeHandleBtn"
             style={[styles.linkCard, pal.view, isSwitching && styles.dimmed]}