Make Action comp easier to use, clarify list purpose

This commit is contained in:
Eric Bailey
2024-06-25 18:36:35 -05:00
parent f4d4a176e0
commit bf935e55da
2 changed files with 22 additions and 16 deletions
+11 -10
View File
@@ -3,6 +3,7 @@ import {GestureResponderEvent, View} from 'react-native'
import { import {
AppBskyActorDefs, AppBskyActorDefs,
AppBskyFeedDefs, AppBskyFeedDefs,
AppBskyGraphDefs,
AtUri, AtUri,
RichText as RichTextApi, RichText as RichTextApi,
} from '@atproto/api' } from '@atproto/api'
@@ -44,7 +45,7 @@ export function Default(props: Props) {
<Header> <Header>
<Avatar src={view.avatar} /> <Avatar src={view.avatar} />
<TitleAndByline title={view.displayName} creator={view.creator} /> <TitleAndByline title={view.displayName} creator={view.creator} />
<Action uri={view.uri} pin type="feed" /> <Action view={view} pin />
</Header> </Header>
<Description description={view.description} /> <Description description={view.description} />
<Likes count={view.likeCount || 0} /> <Likes count={view.likeCount || 0} />
@@ -190,27 +191,23 @@ export function Likes({count}: {count: number}) {
} }
export function Action({ export function Action({
uri, view,
pin, pin,
type,
}: { }: {
uri: string view: AppBskyFeedDefs.GeneratorView | AppBskyGraphDefs.ListView
pin?: boolean pin?: boolean
type: 'feed' | 'list'
}) { }) {
const {hasSession} = useSession() const {hasSession} = useSession()
if (!hasSession) return null if (!hasSession) return null
return <ActionInner uri={uri} pin={pin} type={type} /> return <ActionInner view={view} pin={pin} />
} }
function ActionInner({ function ActionInner({
uri, view,
pin, pin,
type,
}: { }: {
uri: string view: AppBskyFeedDefs.GeneratorView | AppBskyGraphDefs.ListView
pin?: boolean pin?: boolean
type: 'feed' | 'list'
}) { }) {
const {_} = useLingui() const {_} = useLingui()
const {data: preferences} = usePreferencesQuery() const {data: preferences} = usePreferencesQuery()
@@ -218,6 +215,10 @@ function ActionInner({
useAddSavedFeedsMutation() useAddSavedFeedsMutation()
const {isPending: isRemovePending, mutateAsync: removeFeed} = const {isPending: isRemovePending, mutateAsync: removeFeed} =
useRemoveFeedMutation() useRemoveFeedMutation()
const uri = view.uri
const type = view.uri.includes('app.bsky.feed.generator') ? 'feed' : 'list'
const savedFeedConfig = React.useMemo(() => { const savedFeedConfig = React.useMemo(() => {
return preferences?.savedFeeds?.find(feed => feed.value === uri) return preferences?.savedFeeds?.find(feed => feed.value === uri)
}, [preferences?.savedFeeds, uri]) }, [preferences?.savedFeeds, uri])
+11 -6
View File
@@ -27,6 +27,9 @@ export {
TitleAndBylinePlaceholder, TitleAndBylinePlaceholder,
} from '#/components/FeedCard' } from '#/components/FeedCard'
const CURATELIST = 'app.bsky.graph.defs#curatelist'
const MODLIST = 'app.bsky.graph.defs#modlist'
type Props = { type Props = {
view: AppBskyGraphDefs.ListView view: AppBskyGraphDefs.ListView
showPinButton?: boolean showPinButton?: boolean
@@ -44,7 +47,9 @@ export function Default(props: Props) {
creator={view.creator} creator={view.creator}
purpose={view.purpose} purpose={view.purpose}
/> />
{showPinButton && <Action uri={view.uri} pin type="list" />} {showPinButton && view.purpose === CURATELIST && (
<Action view={view} pin />
)}
</Header> </Header>
<Description description={view.description} /> <Description description={view.description} />
</Outer> </Outer>
@@ -77,11 +82,11 @@ export function Link({
export function TitleAndByline({ export function TitleAndByline({
title, title,
creator, creator,
purpose, purpose = CURATELIST,
}: { }: {
title: string title: string
creator?: AppBskyActorDefs.ProfileViewBasic creator?: AppBskyActorDefs.ProfileViewBasic
purpose: AppBskyGraphDefs.ListView['purpose'] purpose?: AppBskyGraphDefs.ListView['purpose']
}) { }) {
const t = useTheme() const t = useTheme()
@@ -94,12 +99,12 @@ export function TitleAndByline({
<Text <Text
style={[a.leading_snug, t.atoms.text_contrast_medium]} style={[a.leading_snug, t.atoms.text_contrast_medium]}
numberOfLines={1}> numberOfLines={1}>
{purpose === 'app.bsky.graph.defs#curatelist' ? ( {purpose === MODLIST ? (
<Trans>List by {sanitizeHandle(creator.handle, '@')}</Trans>
) : (
<Trans> <Trans>
Moderation list by {sanitizeHandle(creator.handle, '@')} Moderation list by {sanitizeHandle(creator.handle, '@')}
</Trans> </Trans>
) : (
<Trans>List by {sanitizeHandle(creator.handle, '@')}</Trans>
)} )}
</Text> </Text>
)} )}