From c3d8beee6dc141ced2c41795f90b3309a2bc75a2 Mon Sep 17 00:00:00 2001
From: Eric Bailey <git@esb.lol>
Date: Fri, 2 Aug 2024 13:05:33 -0500
Subject: Respect labels on feeds and lists (#4818)

* Prep

* Pass in optional moderation to FeedCard

* Compute moderation decision, filter contentList contexts, pass into card

* Let's go a different route

* Filter from within search queries

* Use same search query for starter packs

* Filter lists from profile tabs

* Cleanup

* Filter from profile feeds

* Moderate post embeds

* Memoize

* Use ScreenHider on lists

* Hide both list types

* Fix crash on iOS in screen hider, fix lineheight

* Memoize renderItem

* Reuse objects to prevent re-renders
---
 src/view/screens/ProfileList.tsx | 127 +++++++++++++++++++++++++--------------
 1 file changed, 81 insertions(+), 46 deletions(-)

(limited to 'src/view/screens/ProfileList.tsx')

diff --git a/src/view/screens/ProfileList.tsx b/src/view/screens/ProfileList.tsx
index 0ed44758d..bf13791ae 100644
--- a/src/view/screens/ProfileList.tsx
+++ b/src/view/screens/ProfileList.tsx
@@ -1,6 +1,12 @@
 import React, {useCallback, useMemo} from 'react'
 import {Pressable, StyleSheet, View} from 'react-native'
-import {AppBskyGraphDefs, AtUri, RichText as RichTextAPI} from '@atproto/api'
+import {
+  AppBskyGraphDefs,
+  AtUri,
+  moderateUserList,
+  ModerationOpts,
+  RichText as RichTextAPI,
+} from '@atproto/api'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
@@ -14,6 +20,7 @@ import {logger} from '#/logger'
 import {isNative, isWeb} from '#/platform/detection'
 import {listenSoftReset} from '#/state/events'
 import {useModalControls} from '#/state/modals'
+import {useModerationOpts} from '#/state/preferences/moderation-opts'
 import {
   useListBlockMutation,
   useListDeleteMutation,
@@ -62,6 +69,7 @@ import * as Toast from 'view/com/util/Toast'
 import {CenteredView} from 'view/com/util/Views'
 import {atoms as a, useTheme} from '#/alf'
 import {useDialogControl} from '#/components/Dialog'
+import {ScreenHider} from '#/components/moderation/ScreenHider'
 import * as Prompt from '#/components/Prompt'
 import {ReportDialog, useReportDialogControl} from '#/components/ReportDialog'
 import {RichText} from '#/components/RichText'
@@ -81,6 +89,7 @@ export function ProfileListScreen(props: Props) {
     AtUri.make(handleOrDid, 'app.bsky.graph.list', rkey).toString(),
   )
   const {data: list, error: listError} = useListQuery(resolvedUri?.uri)
+  const moderationOpts = useModerationOpts()
 
   if (resolveError) {
     return (
@@ -101,8 +110,13 @@ export function ProfileListScreen(props: Props) {
     )
   }
 
-  return resolvedUri && list ? (
-    <ProfileListScreenLoaded {...props} uri={resolvedUri.uri} list={list} />
+  return resolvedUri && list && moderationOpts ? (
+    <ProfileListScreenLoaded
+      {...props}
+      uri={resolvedUri.uri}
+      list={list}
+      moderationOpts={moderationOpts}
+    />
   ) : (
     <LoadingScreen />
   )
@@ -112,7 +126,12 @@ function ProfileListScreenLoaded({
   route,
   uri,
   list,
-}: Props & {uri: string; list: AppBskyGraphDefs.ListView}) {
+  moderationOpts,
+}: Props & {
+  uri: string
+  list: AppBskyGraphDefs.ListView
+  moderationOpts: ModerationOpts
+}) {
   const {_} = useLingui()
   const queryClient = useQueryClient()
   const {openComposer} = useComposerControls()
@@ -124,6 +143,10 @@ function ProfileListScreenLoaded({
   const isCurateList = list.purpose === 'app.bsky.graph.defs#curatelist'
   const isScreenFocused = useIsFocused()
 
+  const moderation = React.useMemo(() => {
+    return moderateUserList(list, moderationOpts)
+  }, [list, moderationOpts])
+
   useSetTitle(list.name)
 
   useFocusEffect(
@@ -161,26 +184,65 @@ function ProfileListScreenLoaded({
 
   if (isCurateList) {
     return (
+      <ScreenHider
+        screenDescription={'list'}
+        modui={moderation.ui('contentView')}>
+        <View style={s.hContentRegion}>
+          <PagerWithHeader
+            items={SECTION_TITLES_CURATE}
+            isHeaderReady={true}
+            renderHeader={renderHeader}
+            onCurrentPageSelected={onCurrentPageSelected}>
+            {({headerHeight, scrollElRef, isFocused}) => (
+              <FeedSection
+                ref={feedSectionRef}
+                feed={`list|${uri}`}
+                scrollElRef={scrollElRef as ListRef}
+                headerHeight={headerHeight}
+                isFocused={isScreenFocused && isFocused}
+              />
+            )}
+            {({headerHeight, scrollElRef}) => (
+              <AboutSection
+                ref={aboutSectionRef}
+                scrollElRef={scrollElRef as ListRef}
+                list={list}
+                onPressAddUser={onPressAddUser}
+                headerHeight={headerHeight}
+              />
+            )}
+          </PagerWithHeader>
+          <FAB
+            testID="composeFAB"
+            onPress={() => openComposer({})}
+            icon={
+              <ComposeIcon2
+                strokeWidth={1.5}
+                size={29}
+                style={{color: 'white'}}
+              />
+            }
+            accessibilityRole="button"
+            accessibilityLabel={_(msg`New post`)}
+            accessibilityHint=""
+          />
+        </View>
+      </ScreenHider>
+    )
+  }
+  return (
+    <ScreenHider
+      screenDescription={_(msg`list`)}
+      modui={moderation.ui('contentView')}>
       <View style={s.hContentRegion}>
         <PagerWithHeader
-          items={SECTION_TITLES_CURATE}
+          items={SECTION_TITLES_MOD}
           isHeaderReady={true}
-          renderHeader={renderHeader}
-          onCurrentPageSelected={onCurrentPageSelected}>
-          {({headerHeight, scrollElRef, isFocused}) => (
-            <FeedSection
-              ref={feedSectionRef}
-              feed={`list|${uri}`}
-              scrollElRef={scrollElRef as ListRef}
-              headerHeight={headerHeight}
-              isFocused={isScreenFocused && isFocused}
-            />
-          )}
+          renderHeader={renderHeader}>
           {({headerHeight, scrollElRef}) => (
             <AboutSection
-              ref={aboutSectionRef}
-              scrollElRef={scrollElRef as ListRef}
               list={list}
+              scrollElRef={scrollElRef as ListRef}
               onPressAddUser={onPressAddUser}
               headerHeight={headerHeight}
             />
@@ -201,34 +263,7 @@ function ProfileListScreenLoaded({
           accessibilityHint=""
         />
       </View>
-    )
-  }
-  return (
-    <View style={s.hContentRegion}>
-      <PagerWithHeader
-        items={SECTION_TITLES_MOD}
-        isHeaderReady={true}
-        renderHeader={renderHeader}>
-        {({headerHeight, scrollElRef}) => (
-          <AboutSection
-            list={list}
-            scrollElRef={scrollElRef as ListRef}
-            onPressAddUser={onPressAddUser}
-            headerHeight={headerHeight}
-          />
-        )}
-      </PagerWithHeader>
-      <FAB
-        testID="composeFAB"
-        onPress={() => openComposer({})}
-        icon={
-          <ComposeIcon2 strokeWidth={1.5} size={29} style={{color: 'white'}} />
-        }
-        accessibilityRole="button"
-        accessibilityLabel={_(msg`New post`)}
-        accessibilityHint=""
-      />
-    </View>
+    </ScreenHider>
   )
 }
 
-- 
cgit 1.4.1