diff options
Diffstat (limited to 'src/view/com/feeds/FeedSourceCard.tsx')
| -rw-r--r-- | src/view/com/feeds/FeedSourceCard.tsx | 451 |
1 files changed, 158 insertions, 293 deletions
diff --git a/src/view/com/feeds/FeedSourceCard.tsx b/src/view/com/feeds/FeedSourceCard.tsx index 3a658755a..18e2807a8 100644 --- a/src/view/com/feeds/FeedSourceCard.tsx +++ b/src/view/com/feeds/FeedSourceCard.tsx @@ -1,50 +1,33 @@ -import React from 'react' +import {type StyleProp, View, type ViewStyle} from 'react-native' import { - Linking, - Pressable, - StyleProp, - StyleSheet, - View, - ViewStyle, -} from 'react-native' -import {AtUri} from '@atproto/api' -import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' + type $Typed, + AppBskyFeedDefs, + type AppBskyGraphDefs, + AtUri, +} from '@atproto/api' import {msg, Plural, Trans} from '@lingui/macro' import {useLingui} from '@lingui/react' -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 {FeedSourceInfo, useFeedSourceInfoQuery} from '#/state/queries/feed' import { - useAddSavedFeedsMutation, - usePreferencesQuery, - UsePreferencesQueryResponse, - useRemoveFeedMutation, -} from '#/state/queries/preferences' + type FeedSourceInfo, + hydrateFeedGenerator, + hydrateList, + useFeedSourceInfoQuery, +} from '#/state/queries/feed' import {FeedLoadingPlaceholder} from '#/view/com/util/LoadingPlaceholder' -import * as Toast from '#/view/com/util/Toast' -import {useTheme} from '#/alf' -import {atoms as a} from '#/alf' -import {shouldClickOpenNewTab} from '#/components/Link' -import * as Prompt from '#/components/Prompt' +import {UserAvatar} from '#/view/com/util/UserAvatar' +import {atoms as a, useTheme} from '#/alf' +import {Link} from '#/components/Link' import {RichText} from '#/components/RichText' -import {Text} from '../util/text/Text' -import {UserAvatar} from '../util/UserAvatar' +import {Text} from '#/components/Typography' +import {MissingFeed} from './MissingFeed' -export function FeedSourceCard({ - feedUri, - style, - showSaveBtn = false, - showDescription = false, - showLikes = false, - pinOnSave = false, - showMinimalPlaceholder, - hideTopBorder, -}: { +type FeedSourceCardProps = { feedUri: string + feedData?: + | $Typed<AppBskyFeedDefs.GeneratorView> + | $Typed<AppBskyGraphDefs.ListView> style?: StyleProp<ViewStyle> showSaveBtn?: boolean showDescription?: boolean @@ -52,22 +35,41 @@ export function FeedSourceCard({ pinOnSave?: boolean showMinimalPlaceholder?: boolean hideTopBorder?: boolean -}) { - const {data: preferences} = usePreferencesQuery() - const {data: feed} = useFeedSourceInfoQuery({uri: feedUri}) + link?: boolean +} + +export function FeedSourceCard({ + feedUri, + feedData, + ...props +}: FeedSourceCardProps) { + if (feedData) { + let feed: FeedSourceInfo + if (AppBskyFeedDefs.isGeneratorView(feedData)) { + feed = hydrateFeedGenerator(feedData) + } else { + feed = hydrateList(feedData) + } + return <FeedSourceCardLoaded feedUri={feedUri} feed={feed} {...props} /> + } else { + return <FeedSourceCardWithoutData feedUri={feedUri} {...props} /> + } +} + +export function FeedSourceCardWithoutData({ + feedUri, + ...props +}: Omit<FeedSourceCardProps, 'feedData'>) { + const {data: feed, error} = useFeedSourceInfoQuery({ + uri: feedUri, + }) return ( <FeedSourceCardLoaded feedUri={feedUri} feed={feed} - preferences={preferences} - style={style} - showSaveBtn={showSaveBtn} - showDescription={showDescription} - showLikes={showLikes} - pinOnSave={pinOnSave} - showMinimalPlaceholder={showMinimalPlaceholder} - hideTopBorder={hideTopBorder} + error={error} + {...props} /> ) } @@ -75,80 +77,26 @@ export function FeedSourceCard({ export function FeedSourceCardLoaded({ feedUri, feed, - preferences, style, - showSaveBtn = false, showDescription = false, showLikes = false, - pinOnSave = false, showMinimalPlaceholder, hideTopBorder, + link = true, + error, }: { feedUri: string feed?: FeedSourceInfo - preferences?: UsePreferencesQueryResponse style?: StyleProp<ViewStyle> - showSaveBtn?: boolean showDescription?: boolean showLikes?: boolean - pinOnSave?: boolean showMinimalPlaceholder?: boolean hideTopBorder?: boolean + link?: boolean + error?: unknown }) { 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 @@ -156,200 +104,117 @@ export function FeedSourceCardLoaded({ * This state also captures the scenario where a feed can't load for whatever * reason. */ - if (!feed || !preferences) - return ( - <View - style={[ - pal.border, - { - borderTopWidth: - showMinimalPlaceholder || hideTopBorder - ? 0 - : StyleSheet.hairlineWidth, - flexDirection: 'row', - alignItems: 'center', - flex: 1, - paddingRight: 18, - }, - ]}> - {showMinimalPlaceholder ? ( - <FeedLoadingPlaceholder - style={{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> - )} - </View> - ) + if (!feed) { + if (error) { + return ( + <MissingFeed + uri={feedUri} + style={style} + hideTopBorder={hideTopBorder} + error={error} + /> + ) + } - return ( - <> - <Pressable - testID={`feed-${feed.displayName}`} - accessibilityRole="button" + return ( + <FeedLoadingPlaceholder style={[ - styles.container, - pal.border, + t.atoms.border_contrast_low, + !(showMinimalPlaceholder || hideTopBorder) && a.border_t, + a.flex_1, style, - {borderTopWidth: hideTopBorder ? 0 : StyleSheet.hairlineWidth}, ]} - 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, - }) - } - } - }} - key={feed.uri}> - <View style={[styles.headerContainer, a.align_center]}> - <View style={[s.mr10]}> - <UserAvatar type="algo" size={36} avatar={feed.avatar} /> - </View> - <View style={[styles.headerTextContainer]}> - <Text emoji style={[pal.text, s.bold]} numberOfLines={1}> - {feed.displayName} - </Text> - <Text style={[pal.textLight]} numberOfLines={1}> - {feed.type === 'feed' ? ( - <Trans>Feed by {sanitizeHandle(feed.creatorHandle, '@')}</Trans> - ) : ( - <Trans>List by {sanitizeHandle(feed.creatorHandle, '@')}</Trans> - )} - </Text> - </View> + showTopBorder={false} + showLowerPlaceholder={!showMinimalPlaceholder} + /> + ) + } - {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> - )} + const inner = ( + <> + <View style={[a.flex_row, a.align_center]}> + <View style={[a.mr_md]}> + <UserAvatar type="algo" size={36} avatar={feed.avatar} /> </View> - - {showDescription && feed.description ? ( - <RichText - style={[t.atoms.text_contrast_high, styles.description]} - 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]}> + <Text + emoji + style={[a.text_sm, a.font_bold, a.leading_snug]} + numberOfLines={1}> + {feed.displayName} </Text> - ) : null} - </Pressable> - - <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" - /> + <Text + style={[a.text_sm, t.atoms.text_contrast_medium, a.leading_snug]} + numberOfLines={1}> + {feed.type === 'feed' ? ( + <Trans>Feed by {sanitizeHandle(feed.creatorHandle, '@')}</Trans> + ) : ( + <Trans>List by {sanitizeHandle(feed.creatorHandle, '@')}</Trans> + )} + </Text> + </View> + </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 + style={[ + a.text_sm, + a.font_bold, + t.atoms.text_contrast_medium, + a.leading_snug, + ]}> + <Trans> + Liked by{' '} + <Plural value={feed.likeCount || 0} one="# user" other="# users" /> + </Trans> + </Text> + ) : null} </> ) -} -const styles = StyleSheet.create({ - container: { - paddingHorizontal: 18, - paddingVertical: 20, - flexDirection: 'column', - flex: 1, - gap: 14, - }, - border: { - borderTopWidth: StyleSheet.hairlineWidth, - }, - headerContainer: { - flexDirection: 'row', - }, - headerTextContainer: { - flexDirection: 'column', - columnGap: 4, - flex: 1, - }, - description: { - flex: 1, - flexWrap: 'wrap', - }, - btn: { - paddingVertical: 6, - }, -}) + if (link) { + return ( + <Link + testID={`feed-${feed.displayName}`} + label={_( + feed.type === 'feed' + ? msg`${feed.displayName}, a feed by ${sanitizeHandle(feed.creatorHandle, '@')}, liked by ${feed.likeCount || 0}` + : msg`${feed.displayName}, a list by ${sanitizeHandle(feed.creatorHandle, '@')}`, + )} + to={{ + screen: feed.type === 'feed' ? 'ProfileFeed' : 'ProfileList', + params: {name: feed.creatorDid, rkey: new AtUri(feed.uri).rkey}, + }} + style={[ + a.flex_1, + a.p_lg, + a.gap_md, + !hideTopBorder && !a.border_t, + t.atoms.border_contrast_low, + style, + ]}> + {inner} + </Link> + ) + } else { + return ( + <View + style={[ + a.flex_1, + a.p_lg, + a.gap_md, + !hideTopBorder && !a.border_t, + t.atoms.border_contrast_low, + style, + ]}> + {inner} + </View> + ) + } +} |