remove unused button, massively simplify

This commit is contained in:
Samuel Newman
2025-06-27 11:31:48 +03:00
parent 8fd2665046
commit f5f34979af
+76 -217
View File
@@ -1,4 +1,3 @@
import React from 'react'
import {
Linking,
Pressable,
@@ -13,33 +12,23 @@ import {
type AppBskyGraphDefs,
AtUri,
} from '@atproto/api'
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
import {msg, Plural, Trans} from '@lingui/macro'
import {useLingui} from '@lingui/react'
import {Plural, Trans} from '@lingui/macro'
import {useNavigationDeduped} from '#/lib/hooks/useNavigationDeduped'
import {usePalette} from '#/lib/hooks/usePalette'
import {sanitizeHandle} from '#/lib/strings/handles'
import {s} from '#/lib/styles'
import {logger} from '#/logger'
import {
type FeedSourceInfo,
hydrateFeedGenerator,
hydrateList,
useFeedSourceInfoQuery,
} from '#/state/queries/feed'
import {
useAddSavedFeedsMutation,
usePreferencesQuery,
useRemoveFeedMutation,
} from '#/state/queries/preferences'
import {FeedLoadingPlaceholder} from '#/view/com/util/LoadingPlaceholder'
import {Text} from '#/view/com/util/text/Text'
import * as Toast from '#/view/com/util/Toast'
import {UserAvatar} from '#/view/com/util/UserAvatar'
import {atoms as a, useTheme} from '#/alf'
import {shouldClickOpenNewTab} from '#/components/Link'
import * as Prompt from '#/components/Prompt'
import {RichText} from '#/components/RichText'
type FeedSourceCardProps = {
@@ -68,7 +57,7 @@ export function FeedSourceCard({
} else {
feed = hydrateList(feedData)
}
return <FeedSourceCardLoaded feedUri={feedUri} feed={feed} {...props} />
return <FeedSourceCardLoaded feed={feed} {...props} />
} else {
return <FeedSourceCardWithoutData feedUri={feedUri} {...props} />
}
@@ -82,93 +71,36 @@ export function FeedSourceCardWithoutData({
uri: feedUri,
})
return <FeedSourceCardLoaded feedUri={feedUri} feed={feed} {...props} />
return <FeedSourceCardLoaded feed={feed} {...props} />
}
export function FeedSourceCardLoaded({
feedUri,
feed,
style,
showSaveBtn = false,
showDescription = false,
showLikes = false,
pinOnSave = false,
showMinimalPlaceholder,
hideTopBorder,
}: {
feedUri: string
feed?: FeedSourceInfo
style?: StyleProp<ViewStyle>
showSaveBtn?: boolean
showDescription?: boolean
showLikes?: boolean
pinOnSave?: boolean
showMinimalPlaceholder?: boolean
hideTopBorder?: boolean
}) {
const {data: preferences} = usePreferencesQuery()
const t = useTheme()
const pal = usePalette('default')
const {_} = useLingui()
const removePromptControl = Prompt.usePromptControl()
const navigation = useNavigationDeduped()
const {isPending: isAddSavedFeedPending, mutateAsync: addSavedFeeds} =
useAddSavedFeedsMutation()
const {isPending: isRemovePending, mutateAsync: removeFeed} =
useRemoveFeedMutation()
const savedFeedConfig = preferences?.savedFeeds?.find(
f => f.value === feedUri,
)
const isSaved = Boolean(savedFeedConfig)
const onSave = React.useCallback(async () => {
if (!feed || isSaved) return
try {
await addSavedFeeds([
{
type: 'feed',
value: feed.uri,
pinned: pinOnSave,
},
])
Toast.show(_(msg`Added to my feeds`))
} catch (e) {
Toast.show(_(msg`There was an issue contacting your server`), 'xmark')
logger.error('Failed to save feed', {message: e})
}
}, [_, feed, pinOnSave, addSavedFeeds, isSaved])
const onUnsave = React.useCallback(async () => {
if (!savedFeedConfig) return
try {
await removeFeed(savedFeedConfig)
// await item.unsave()
Toast.show(_(msg`Removed from my feeds`))
} catch (e) {
Toast.show(_(msg`There was an issue contacting your server`), 'xmark')
logger.error('Failed to unsave feed', {message: e})
}
}, [_, removeFeed, savedFeedConfig])
const onToggleSaved = React.useCallback(async () => {
if (isSaved) {
removePromptControl.open()
} else {
await onSave()
}
}, [isSaved, removePromptControl, onSave])
/*
* LOAD STATE
*
* This state also captures the scenario where a feed can't load for whatever
* reason.
*/
if (!feed || !preferences)
if (!feed)
return (
<View
style={[
@@ -186,162 +118,89 @@ export function FeedSourceCardLoaded({
]}>
{showMinimalPlaceholder ? (
<FeedLoadingPlaceholder
style={{flex: 1}}
style={[a.flex_1]}
showTopBorder={false}
showLowerPlaceholder={false}
/>
) : (
<FeedLoadingPlaceholder style={{flex: 1}} showTopBorder={false} />
)}
{showSaveBtn && (
<Pressable
testID={`feed-${feedUri}-toggleSave`}
disabled={isRemovePending}
accessibilityRole="button"
accessibilityLabel={_(msg`Remove from my feeds`)}
accessibilityHint=""
onPress={onUnsave}
hitSlop={15}
style={styles.btn}>
<FontAwesomeIcon
icon={['far', 'trash-can']}
size={19}
color={pal.colors.icon}
/>
</Pressable>
<FeedLoadingPlaceholder style={[a.flex_1]} showTopBorder={false} />
)}
</View>
)
return (
<>
<Pressable
testID={`feed-${feed.displayName}`}
accessibilityRole="button"
style={[
a.flex_1,
a.p_lg,
a.gap_md,
!hideTopBorder && !a.border_t,
t.atoms.border_contrast_low,
style,
]}
onPress={e => {
const shouldOpenInNewTab = shouldClickOpenNewTab(e)
if (feed.type === 'feed') {
if (shouldOpenInNewTab) {
Linking.openURL(
`/profile/${feed.creatorDid}/feed/${new AtUri(feed.uri).rkey}`,
)
} else {
navigation.push('ProfileFeed', {
name: feed.creatorDid,
rkey: new AtUri(feed.uri).rkey,
})
}
} else if (feed.type === 'list') {
if (shouldOpenInNewTab) {
Linking.openURL(
`/profile/${feed.creatorDid}/lists/${new AtUri(feed.uri).rkey}`,
)
} else {
navigation.push('ProfileList', {
name: feed.creatorDid,
rkey: new AtUri(feed.uri).rkey,
})
}
<Pressable
testID={`feed-${feed.displayName}`}
accessibilityRole="button"
style={[
a.flex_1,
a.p_lg,
a.gap_md,
!hideTopBorder && !a.border_t,
t.atoms.border_contrast_low,
style,
]}
onPress={e => {
const shouldOpenInNewTab = shouldClickOpenNewTab(e)
if (feed.type === 'feed') {
if (shouldOpenInNewTab) {
Linking.openURL(
`/profile/${feed.creatorDid}/feed/${new AtUri(feed.uri).rkey}`,
)
} else {
navigation.push('ProfileFeed', {
name: feed.creatorDid,
rkey: new AtUri(feed.uri).rkey,
})
}
}}
key={feed.uri}>
<View style={[a.flex_row, a.align_center]}>
<View style={[s.mr10]}>
<UserAvatar type="algo" size={36} avatar={feed.avatar} />
</View>
<View style={[a.flex_1, a.gap_2xs]}>
<Text emoji style={[pal.text, s.bold]} numberOfLines={1}>
{feed.displayName}
</Text>
<Text type="sm" style={[pal.textLight]} numberOfLines={1}>
{feed.type === 'feed' ? (
<Trans>Feed by {sanitizeHandle(feed.creatorHandle, '@')}</Trans>
) : (
<Trans>List by {sanitizeHandle(feed.creatorHandle, '@')}</Trans>
)}
</Text>
</View>
{showSaveBtn && (
<View style={{alignSelf: 'center'}}>
<Pressable
testID={`feed-${feed.displayName}-toggleSave`}
disabled={isAddSavedFeedPending || isRemovePending}
accessibilityRole="button"
accessibilityLabel={
isSaved
? _(msg`Remove from my feeds`)
: _(msg`Add to my feeds`)
}
accessibilityHint=""
onPress={onToggleSaved}
hitSlop={15}
style={styles.btn}>
{isSaved ? (
<FontAwesomeIcon
icon={['far', 'trash-can']}
size={19}
color={pal.colors.icon}
/>
) : (
<FontAwesomeIcon
icon="plus"
size={18}
color={pal.colors.link}
/>
)}
</Pressable>
</View>
)}
} else if (feed.type === 'list') {
if (shouldOpenInNewTab) {
Linking.openURL(
`/profile/${feed.creatorDid}/lists/${new AtUri(feed.uri).rkey}`,
)
} else {
navigation.push('ProfileList', {
name: feed.creatorDid,
rkey: new AtUri(feed.uri).rkey,
})
}
}
}}
key={feed.uri}>
<View style={[a.flex_row, a.align_center]}>
<View style={[s.mr10]}>
<UserAvatar type="algo" size={36} avatar={feed.avatar} />
</View>
{showDescription && feed.description ? (
<RichText
style={[t.atoms.text_contrast_high, a.flex_1, a.flex_wrap]}
value={feed.description}
numberOfLines={3}
/>
) : null}
{showLikes && feed.type === 'feed' ? (
<Text type="sm-medium" style={[pal.text, pal.textLight]}>
<Trans>
Liked by{' '}
<Plural
value={feed.likeCount || 0}
one="# user"
other="# users"
/>
</Trans>
<View style={[a.flex_1, a.gap_2xs]}>
<Text emoji style={[pal.text, s.bold]} numberOfLines={1}>
{feed.displayName}
</Text>
) : null}
</Pressable>
<Text type="sm" style={[pal.textLight]} numberOfLines={1}>
{feed.type === 'feed' ? (
<Trans>Feed by {sanitizeHandle(feed.creatorHandle, '@')}</Trans>
) : (
<Trans>List by {sanitizeHandle(feed.creatorHandle, '@')}</Trans>
)}
</Text>
</View>
</View>
<Prompt.Basic
control={removePromptControl}
title={_(msg`Remove from your feeds?`)}
description={_(
msg`Are you sure you want to remove ${feed.displayName} from your feeds?`,
)}
onConfirm={onUnsave}
confirmButtonCta={_(msg`Remove`)}
confirmButtonColor="negative"
/>
</>
{showDescription && feed.description ? (
<RichText
style={[t.atoms.text_contrast_high, a.flex_1, a.flex_wrap]}
value={feed.description}
numberOfLines={3}
/>
) : null}
{showLikes && feed.type === 'feed' ? (
<Text type="sm-medium" style={[pal.text, pal.textLight]}>
<Trans>
Liked by{' '}
<Plural value={feed.likeCount || 0} one="# user" other="# users" />
</Trans>
</Text>
) : null}
</Pressable>
)
}
const styles = StyleSheet.create({
btn: {
paddingVertical: 6,
},
})