Make Action comp easier to use, clarify list purpose
This commit is contained in:
+11
-10
@@ -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])
|
||||||
|
|||||||
@@ -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>
|
||||||
)}
|
)}
|
||||||
|
|||||||
Reference in New Issue
Block a user