diff --git a/src/components/moderation/ScreenHider.tsx b/src/components/moderation/ScreenHider.tsx index 0d316bc885..f855d63331 100644 --- a/src/components/moderation/ScreenHider.tsx +++ b/src/components/moderation/ScreenHider.tsx @@ -14,7 +14,7 @@ import {useModerationCauseDescription} from '#/lib/moderation/useModerationCause import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' import {NavigationProp} from 'lib/routes/types' import {CenteredView} from '#/view/com/util/Views' -import {atoms as a, useTheme} from '#/alf' +import {atoms as a, useTheme, web} from '#/alf' import {Button, ButtonText} from '#/components/Button' import { ModerationDetailsDialog, @@ -105,6 +105,7 @@ export function ScreenHider({ a.mb_md, a.px_lg, a.text_center, + a.leading_snug, t.atoms.text_contrast_medium, ]}> {isNoPwi ? ( @@ -113,8 +114,15 @@ export function ScreenHider({ ) : ( <> - This {screenDescription} has been flagged: - + This {screenDescription} has been flagged:{' '} + {desc.name}.{' '} Learn More - )}{' '} diff --git a/src/screens/StarterPack/Wizard/StepFeeds.tsx b/src/screens/StarterPack/Wizard/StepFeeds.tsx index de8d856aba..f047b612ae 100644 --- a/src/screens/StarterPack/Wizard/StepFeeds.tsx +++ b/src/screens/StarterPack/Wizard/StepFeeds.tsx @@ -8,8 +8,8 @@ import {useA11y} from '#/state/a11y' import {DISCOVER_FEED_URI} from 'lib/constants' import { useGetPopularFeedsQuery, + usePopularFeedsSearch, useSavedFeeds, - useSearchPopularFeedsQuery, } from 'state/queries/feed' import {SearchInput} from 'view/com/util/forms/SearchInput' import {List} from 'view/com/util/List' @@ -59,7 +59,7 @@ export function StepFeeds({moderationOpts}: {moderationOpts: ModerationOpts}) { : undefined const {data: searchedFeeds, isFetching: isFetchingSearchedFeeds} = - useSearchPopularFeedsQuery({q: throttledQuery}) + usePopularFeedsSearch({query: throttledQuery}) const isLoading = !isFetchedSavedFeeds || isLoadingPopularFeeds || isFetchingSearchedFeeds diff --git a/src/state/queries/feed.ts b/src/state/queries/feed.ts index 36555c1813..2b6751e890 100644 --- a/src/state/queries/feed.ts +++ b/src/state/queries/feed.ts @@ -5,6 +5,7 @@ import { AppBskyGraphDefs, AppBskyUnspeccedGetPopularFeedGenerators, AtUri, + moderateFeedGenerator, RichText, } from '@atproto/api' import { @@ -26,6 +27,7 @@ import {RQKEY as listQueryKey} from '#/state/queries/list' import {usePreferencesQuery} from '#/state/queries/preferences' import {useAgent, useSession} from '#/state/session' import {router} from '#/routes' +import {useModerationOpts} from '../preferences/moderation-opts' import {FeedDescriptor} from './post-feed' import {precacheResolvedUri} from './resolve-uri' @@ -207,14 +209,16 @@ export function useGetPopularFeedsQuery(options?: GetPopularFeedsOptions) { const limit = options?.limit || 10 const {data: preferences} = usePreferencesQuery() const queryClient = useQueryClient() + const moderationOpts = useModerationOpts() // Make sure this doesn't invalidate unless really needed. const selectArgs = useMemo( () => ({ hasSession, savedFeeds: preferences?.savedFeeds || [], + moderationOpts, }), - [hasSession, preferences?.savedFeeds], + [hasSession, preferences?.savedFeeds, moderationOpts], ) const lastPageCountRef = useRef(0) @@ -225,6 +229,7 @@ export function useGetPopularFeedsQuery(options?: GetPopularFeedsOptions) { QueryKey, string | undefined >({ + enabled: Boolean(moderationOpts), queryKey: createGetPopularFeedsQueryKey(options), queryFn: async ({pageParam}) => { const res = await agent.app.bsky.unspecced.getPopularFeedGenerators({ @@ -246,7 +251,11 @@ export function useGetPopularFeedsQuery(options?: GetPopularFeedsOptions) { ( data: InfiniteData, ) => { - const {savedFeeds, hasSession: hasSessionInner} = selectArgs + const { + savedFeeds, + hasSession: hasSessionInner, + moderationOpts, + } = selectArgs return { ...data, pages: data.pages.map(page => { @@ -264,7 +273,8 @@ export function useGetPopularFeedsQuery(options?: GetPopularFeedsOptions) { return f.value === feed.uri }), ) - return !alreadySaved + const decision = moderateFeedGenerator(feed, moderationOpts!) + return !alreadySaved && !decision.ui('contentList').filter }), } }), @@ -304,6 +314,8 @@ export function useGetPopularFeedsQuery(options?: GetPopularFeedsOptions) { export function useSearchPopularFeedsMutation() { const agent = useAgent() + const moderationOpts = useModerationOpts() + return useMutation({ mutationFn: async (query: string) => { const res = await agent.app.bsky.unspecced.getPopularFeedGenerators({ @@ -311,24 +323,15 @@ export function useSearchPopularFeedsMutation() { query: query, }) - return res.data.feeds - }, - }) -} - -export function useSearchPopularFeedsQuery({q}: {q: string}) { - const agent = useAgent() - return useQuery({ - queryKey: ['searchPopularFeeds', q], - queryFn: async () => { - const res = await agent.app.bsky.unspecced.getPopularFeedGenerators({ - limit: 15, - query: q, - }) + if (moderationOpts) { + return res.data.feeds.filter(feed => { + const decision = moderateFeedGenerator(feed, moderationOpts) + return !decision.ui('contentList').filter + }) + } return res.data.feeds }, - placeholderData: keepPreviousData, }) } @@ -346,17 +349,27 @@ export function usePopularFeedsSearch({ enabled?: boolean }) { const agent = useAgent() + const moderationOpts = useModerationOpts() + const enabledInner = enabled ?? Boolean(moderationOpts) + return useQuery({ - enabled, + enabled: enabledInner, queryKey: createPopularFeedsSearchQueryKey(query), queryFn: async () => { const res = await agent.app.bsky.unspecced.getPopularFeedGenerators({ - limit: 10, + limit: 15, query: query, }) return res.data.feeds }, + placeholderData: keepPreviousData, + select(data) { + return data.filter(feed => { + const decision = moderateFeedGenerator(feed, moderationOpts!) + return !decision.ui('contentList').filter + }) + }, }) } diff --git a/src/state/queries/profile-feedgens.ts b/src/state/queries/profile-feedgens.ts index 8ad12ab611..b50a2a2890 100644 --- a/src/state/queries/profile-feedgens.ts +++ b/src/state/queries/profile-feedgens.ts @@ -1,7 +1,8 @@ -import {AppBskyFeedGetActorFeeds} from '@atproto/api' +import {AppBskyFeedGetActorFeeds, moderateFeedGenerator} from '@atproto/api' import {InfiniteData, QueryKey, useInfiniteQuery} from '@tanstack/react-query' import {useAgent} from '#/state/session' +import {useModerationOpts} from '../preferences/moderation-opts' const PAGE_SIZE = 50 type RQPageParam = string | undefined @@ -14,7 +15,8 @@ export function useProfileFeedgensQuery( did: string, opts?: {enabled?: boolean}, ) { - const enabled = opts?.enabled !== false + const moderationOpts = useModerationOpts() + const enabled = opts?.enabled !== false && Boolean(moderationOpts) const agent = useAgent() return useInfiniteQuery< AppBskyFeedGetActorFeeds.OutputSchema, @@ -38,5 +40,21 @@ export function useProfileFeedgensQuery( initialPageParam: undefined, getNextPageParam: lastPage => lastPage.cursor, enabled, + select(data) { + return { + ...data, + pages: data.pages.map(page => { + return { + ...page, + feeds: page.feeds + // filter by labels + .filter(list => { + const decision = moderateFeedGenerator(list, moderationOpts!) + return !decision.ui('contentList').filter + }), + } + }), + } + }, }) } diff --git a/src/state/queries/profile-lists.ts b/src/state/queries/profile-lists.ts index 112a62c839..75e3dd6e48 100644 --- a/src/state/queries/profile-lists.ts +++ b/src/state/queries/profile-lists.ts @@ -1,7 +1,8 @@ -import {AppBskyGraphGetLists} from '@atproto/api' +import {AppBskyGraphGetLists, moderateUserList} from '@atproto/api' import {InfiniteData, QueryKey, useInfiniteQuery} from '@tanstack/react-query' import {useAgent} from '#/state/session' +import {useModerationOpts} from '../preferences/moderation-opts' const PAGE_SIZE = 30 type RQPageParam = string | undefined @@ -10,7 +11,8 @@ const RQKEY_ROOT = 'profile-lists' export const RQKEY = (did: string) => [RQKEY_ROOT, did] export function useProfileListsQuery(did: string, opts?: {enabled?: boolean}) { - const enabled = opts?.enabled !== false + const moderationOpts = useModerationOpts() + const enabled = opts?.enabled !== false && Boolean(moderationOpts) const agent = useAgent() return useInfiniteQuery< AppBskyGraphGetLists.OutputSchema, @@ -27,17 +29,32 @@ export function useProfileListsQuery(did: string, opts?: {enabled?: boolean}) { cursor: pageParam, }) - // Starter packs use a reference list, which we do not want to show on profiles. At some point we could probably - // just filter this out on the backend instead of in the client. - return { - ...res.data, - lists: res.data.lists.filter( - l => l.purpose !== 'app.bsky.graph.defs#referencelist', - ), - } + return res.data }, initialPageParam: undefined, getNextPageParam: lastPage => lastPage.cursor, enabled, + select(data) { + return { + ...data, + pages: data.pages.map(page => { + return { + ...page, + lists: page.lists + /* + * Starter packs use a reference list, which we do not want to + * show on profiles. At some point we could probably just filter + * this out on the backend instead of in the client. + */ + .filter(l => l.purpose !== 'app.bsky.graph.defs#referencelist') + // filter by labels + .filter(list => { + const decision = moderateUserList(list, moderationOpts!) + return !decision.ui('contentList').filter + }), + } + }), + } + }, }) } diff --git a/src/view/com/feeds/ProfileFeedgens.tsx b/src/view/com/feeds/ProfileFeedgens.tsx index 831ab4d1dd..6f98cc49a4 100644 --- a/src/view/com/feeds/ProfileFeedgens.tsx +++ b/src/view/com/feeds/ProfileFeedgens.tsx @@ -129,46 +129,49 @@ export const ProfileFeedgens = React.forwardRef< // rendering // = - const renderItem = ({item, index}: ListRenderItemInfo) => { - if (item === EMPTY) { - return ( - - ) - } else if (item === ERROR_ITEM) { - return ( - - ) - } else if (item === LOAD_MORE_ERROR_ITEM) { - return ( - - ) - } else if (item === LOADING) { - return - } - if (preferences) { - return ( - - - - ) - } - return null - } + const renderItem = React.useCallback( + ({item, index}: ListRenderItemInfo) => { + if (item === EMPTY) { + return ( + + ) + } else if (item === ERROR_ITEM) { + return ( + + ) + } else if (item === LOAD_MORE_ERROR_ITEM) { + return ( + + ) + } else if (item === LOADING) { + return + } + if (preferences) { + return ( + + + + ) + } + return null + }, + [_, t, error, refetch, onPressRetryLoadMore, preferences], + ) React.useEffect(() => { if (enabled && scrollElRef.current) { diff --git a/src/view/com/lists/ProfileLists.tsx b/src/view/com/lists/ProfileLists.tsx index dc385d4361..f633774c7a 100644 --- a/src/view/com/lists/ProfileLists.tsx +++ b/src/view/com/lists/ProfileLists.tsx @@ -75,12 +75,7 @@ export const ProfileLists = React.forwardRef( items = items.concat([EMPTY]) } else if (data?.pages) { for (const page of data?.pages) { - items = items.concat( - page.lists.map(l => ({ - ...l, - _reactKey: l.uri, - })), - ) + items = items.concat(page.lists) } } if (isError && !isEmpty) { @@ -192,7 +187,7 @@ export const ProfileLists = React.forwardRef( testID={testID ? `${testID}-flatlist` : undefined} ref={scrollElRef} data={items} - keyExtractor={(item: any) => item._reactKey} + keyExtractor={(item: any) => item._reactKey || item.uri} renderItem={renderItemInner} refreshing={isPTRing} onRefresh={onRefresh} diff --git a/src/view/com/util/post-embeds/index.tsx b/src/view/com/util/post-embeds/index.tsx index a0dc94e4d8..0462212fbd 100644 --- a/src/view/com/util/post-embeds/index.tsx +++ b/src/view/com/util/post-embeds/index.tsx @@ -15,11 +15,14 @@ import { AppBskyEmbedRecordWithMedia, AppBskyFeedDefs, AppBskyGraphDefs, + moderateFeedGenerator, + moderateUserList, ModerationDecision, } from '@atproto/api' import {ImagesLightbox, useLightboxControls} from '#/state/lightbox' import {useLargeAltBadgeEnabled} from '#/state/preferences/large-alt-badge' +import {useModerationOpts} from '#/state/preferences/moderation-opts' import {usePalette} from 'lib/hooks/usePalette' import {FeedSourceCard} from 'view/com/feeds/FeedSourceCard' import {atoms as a} from '#/alf' @@ -51,7 +54,6 @@ export function PostEmbeds({ style?: StyleProp allowNestedQuotes?: boolean }) { - const pal = usePalette('default') const {openLightbox} = useLightboxControls() const largeAltBadge = useLargeAltBadgeEnabled() @@ -72,22 +74,13 @@ export function PostEmbeds({ if (AppBskyEmbedRecord.isView(embed)) { // custom feed embed (i.e. generator view) - // = if (AppBskyFeedDefs.isGeneratorView(embed.record)) { - // TODO moderation - return ( - - ) + return } // list embed if (AppBskyGraphDefs.isListView(embed.record)) { - // TODO moderation - return + return } if (AppBskyGraphDefs.isStarterPackViewBasic(embed.record)) { @@ -185,6 +178,39 @@ export function PostEmbeds({ return } +function MaybeFeedCard({view}: {view: AppBskyFeedDefs.GeneratorView}) { + const pal = usePalette('default') + const moderationOpts = useModerationOpts() + const moderation = React.useMemo(() => { + return moderationOpts + ? moderateFeedGenerator(view, moderationOpts) + : undefined + }, [view, moderationOpts]) + + return ( + + + + ) +} + +function MaybeListCard({view}: {view: AppBskyGraphDefs.ListView}) { + const moderationOpts = useModerationOpts() + const moderation = React.useMemo(() => { + return moderationOpts ? moderateUserList(view, moderationOpts) : undefined + }, [view, moderationOpts]) + + return ( + + + + ) +} + const styles = StyleSheet.create({ container: { marginTop: 8, diff --git a/src/view/screens/ProfileList.tsx b/src/view/screens/ProfileList.tsx index 0ed44758d4..bf13791ae6 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 ? ( - + return resolvedUri && list && moderationOpts ? ( + ) : ( ) @@ -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 ( + + + + {({headerHeight, scrollElRef, isFocused}) => ( + + )} + {({headerHeight, scrollElRef}) => ( + + )} + + openComposer({})} + icon={ + + } + accessibilityRole="button" + accessibilityLabel={_(msg`New post`)} + accessibilityHint="" + /> + + + ) + } + return ( + - {({headerHeight, scrollElRef, isFocused}) => ( - - )} + renderHeader={renderHeader}> {({headerHeight, scrollElRef}) => ( @@ -201,34 +263,7 @@ function ProfileListScreenLoaded({ accessibilityHint="" /> - ) - } - return ( - - - {({headerHeight, scrollElRef}) => ( - - )} - - openComposer({})} - icon={ - - } - accessibilityRole="button" - accessibilityLabel={_(msg`New post`)} - accessibilityHint="" - /> - + ) }