zio/bsky-app
2
0
Fork 0
Code Pull requests Releases Packages Activity

Respect labels on feeds and lists (#4818)

Browse source 
* 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
This commit is contained in:
Eric Bailey 2024-08-02 13:05:33 -05:00 • committed by GitHub
parent 293ac6fab2
commit c3d8beee6d
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
9 changed files with 261 additions and 145 deletions
Download patch file Download diff file Expand all files Collapse all files

127
src/view/screens/ProfileList.tsx
View file

@ -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>
)
}