Compute moderation decision, filter contentList contexts, pass into card

src/view/screens/Feeds.tsx

@@ -1,6 +1,10 @@
 import React from 'react'
 import {ActivityIndicator, type FlatList, StyleSheet, View} from 'react-native'
-import {AppBskyFeedDefs} from '@atproto/api'
+import {
+  AppBskyFeedDefs,
+  moderateFeedGenerator,
+  ModerationDecision,
+} from '@atproto/api'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import {useFocusEffect} from '@react-navigation/native'
@@ -38,6 +42,7 @@ import {FilterTimeline_Stroke2_Corner0_Rounded as FilterTimeline} from '#/compon
 import {ListMagnifyingGlass_Stroke2_Corner0_Rounded} from '#/components/icons/ListMagnifyingGlass'
 import {ListSparkle_Stroke2_Corner0_Rounded} from '#/components/icons/ListSparkle'
 import hairlineWidth = StyleSheet.hairlineWidth
+import {useModerationOpts} from '#/state/preferences/moderation-opts'
 import {Divider} from '#/components/Divider'
 import * as FeedCard from '#/components/FeedCard'
 import {ChevronRight_Stroke2_Corner0_Rounded as ChevronRight} from '#/components/icons/Chevron'
@@ -89,6 +94,7 @@ type FlatlistSlice =
       key: string
       feedUri: string
       feed: AppBskyFeedDefs.GeneratorView
+      moderation: ModerationDecision
     }
   | {
       type: 'popularFeedsLoadingMore'
@@ -101,6 +107,7 @@ type FlatlistSlice =
 
 export function FeedsScreen(_props: Props) {
   const pal = usePalette('default')
+  const moderationOpts = useModerationOpts()
   const {openComposer} = useComposerControls()
   const {isMobile, isTabletOrDesktop} = useWebMediaQueries()
   const [query, setQuery] = React.useState('')
@@ -300,7 +307,7 @@ export function FeedsScreen(_props: Props) {
         })
       } else {
         if (isUserSearching) {
-          if (isSearchPending || !searchResults) {
+          if (isSearchPending || !searchResults || !moderationOpts) {
             slices.push({
               key: 'popularFeedsLoading',
               type: 'popularFeedsLoading',
@@ -313,19 +320,30 @@ export function FeedsScreen(_props: Props) {
               })
             } else {
               slices = slices.concat(
-                searchResults.map(feed => {
+                searchResults
-                  return {
+                  .map(feed => {
+                    const moderation = moderateFeedGenerator(
+                      feed,
+                      moderationOpts,
+                    )
+                    const slice: FlatlistSlice = {
                       key: `popularFeed:${feed.uri}`,
                       type: 'popularFeed',
                       feedUri: feed.uri,
                       feed,
+                      moderation,
                     }
-                }),
+                    return slice
+                  })
+                  .filter(i => !i.moderation.ui('contentList').filter),
               )
             }
           }
         } else {
-          if (isPopularFeedsFetching && !popularFeeds?.pages) {
+          if (
+            (isPopularFeedsFetching && !popularFeeds?.pages) ||
+            !moderationOpts
+          ) {
             slices.push({
               key: 'popularFeedsLoading',
               type: 'popularFeedsLoading',
@@ -339,14 +357,22 @@ export function FeedsScreen(_props: Props) {
             } else {
               for (const page of popularFeeds.pages || []) {
                 slices = slices.concat(
-                  page.feeds.map(feed => {
+                  page.feeds
-                    return {
+                    .map(feed => {
+                      const moderation = moderateFeedGenerator(
+                        feed,
+                        moderationOpts,
+                      )
+                      const slice: FlatlistSlice = {
                         key: `popularFeed:${feed.uri}`,
                         type: 'popularFeed',
                         feedUri: feed.uri,
                         feed,
+                        moderation,
                       }
-                  }),
+                      return slice
+                    })
+                    .filter(i => !i.moderation.ui('contentList').filter),
                 )
               }
 
@@ -376,6 +402,7 @@ export function FeedsScreen(_props: Props) {
     isSearchPending,
     searchError,
     isUserSearching,
+    moderationOpts,
   ])
 
   const renderHeaderBtn = React.useCallback(() => {
@@ -500,7 +527,7 @@ export function FeedsScreen(_props: Props) {
       } else if (item.type === 'popularFeed') {
         return (
           <View style={[a.px_lg, a.pt_lg, a.gap_lg]}>
-            <FeedCard.Default view={item.feed} />
+            <FeedCard.Default view={item.feed} moderation={item.moderation} />
             <Divider />
           </View>
         )