Update usages of FeedCard and ListCard

This commit is contained in:
Eric Bailey
2024-06-25 18:15:44 -05:00
parent f2bc06c79e
commit 2b2df57ce2
6 changed files with 37 additions and 25 deletions
@@ -45,7 +45,7 @@ export const FeedsList = React.forwardRef<SectionRef, ProfilesListProps>(
(isWeb || index !== 0) && a.border_t, (isWeb || index !== 0) && a.border_t,
t.atoms.border_contrast_low, t.atoms.border_contrast_low,
]}> ]}>
<FeedCard.Default type="feed" view={item} /> <FeedCard.Default view={item} />
</View> </View>
) )
} }
@@ -285,7 +285,7 @@ function LandingScreenLoaded({
t.atoms.border_contrast_low, t.atoms.border_contrast_low,
]} ]}
key={feed.uri}> key={feed.uri}>
<FeedCard.Default type="feed" view={feed} /> <FeedCard.Default view={feed} />
</View> </View>
))} ))}
</View> </View>
+1 -1
View File
@@ -163,7 +163,7 @@ export const ProfileFeedgens = React.forwardRef<
a.px_lg, a.px_lg,
a.py_lg, a.py_lg,
]}> ]}>
<FeedCard.Default type="feed" view={item} /> <FeedCard.Default view={item} />
</View> </View>
) )
} }
+32 -20
View File
@@ -41,6 +41,7 @@ import hairlineWidth = StyleSheet.hairlineWidth
import {Divider} from '#/components/Divider' import {Divider} from '#/components/Divider'
import * as FeedCard from '#/components/FeedCard' import * as FeedCard from '#/components/FeedCard'
import {ChevronRight_Stroke2_Corner0_Rounded as ChevronRight} from '#/components/icons/Chevron' import {ChevronRight_Stroke2_Corner0_Rounded as ChevronRight} from '#/components/icons/Chevron'
import * as ListCard from '#/components/ListCard'
type Props = NativeStackScreenProps<CommonNavigatorParams, 'Feeds'> type Props = NativeStackScreenProps<CommonNavigatorParams, 'Feeds'>
@@ -495,7 +496,7 @@ export function FeedsScreen(_props: Props) {
} else if (item.type === 'popularFeed') { } else if (item.type === 'popularFeed') {
return ( return (
<View style={[a.px_lg, a.pt_lg, a.gap_lg]}> <View style={[a.px_lg, a.pt_lg, a.gap_lg]}>
<FeedCard.Default type="feed" view={item.feed} /> <FeedCard.Default view={item.feed} />
<Divider /> <Divider />
</View> </View>
) )
@@ -627,7 +628,7 @@ function FollowingFeed() {
fill={t.palette.white} fill={t.palette.white}
/> />
</View> </View>
<FeedCard.TitleAndByline title={_(msg`Following`)} type="feed" /> <FeedCard.TitleAndByline title={_(msg`Following`)} />
</FeedCard.Header> </FeedCard.Header>
</View> </View>
) )
@@ -639,34 +640,45 @@ function SavedFeed({
savedFeed: SavedFeedItem & {type: 'feed' | 'list'} savedFeed: SavedFeedItem & {type: 'feed' | 'list'}
}) { }) {
const t = useTheme() const t = useTheme()
const {view: feed} = savedFeed
const displayName =
savedFeed.type === 'feed' ? savedFeed.view.displayName : savedFeed.view.name
return ( const commonStyle = [
<FeedCard.Link testID={`saved-feed-${feed.displayName}`} {...savedFeed}> a.flex_1,
a.px_lg,
a.py_md,
a.border_b,
t.atoms.border_contrast_low,
]
return savedFeed.type === 'feed' ? (
<FeedCard.Link
testID={`saved-feed-${savedFeed.view.displayName}`}
{...savedFeed}>
{({hovered, pressed}) => ( {({hovered, pressed}) => (
<View <View
style={[ style={[commonStyle, (hovered || pressed) && t.atoms.bg_contrast_25]}>
a.flex_1,
a.px_lg,
a.py_md,
a.border_b,
t.atoms.border_contrast_low,
(hovered || pressed) && t.atoms.bg_contrast_25,
]}>
<FeedCard.Header> <FeedCard.Header>
<FeedCard.Avatar src={feed.avatar} size={28} /> <FeedCard.Avatar src={savedFeed.view.avatar} size={28} />
<FeedCard.TitleAndByline <FeedCard.TitleAndByline title={savedFeed.view.displayName} />
title={displayName}
type={savedFeed.type}
/>
<ChevronRight size="sm" fill={t.atoms.text_contrast_low.color} /> <ChevronRight size="sm" fill={t.atoms.text_contrast_low.color} />
</FeedCard.Header> </FeedCard.Header>
</View> </View>
)} )}
</FeedCard.Link> </FeedCard.Link>
) : (
<ListCard.Link testID={`saved-feed-${savedFeed.view.name}`} {...savedFeed}>
{({hovered, pressed}) => (
<View
style={[commonStyle, (hovered || pressed) && t.atoms.bg_contrast_25]}>
<ListCard.Header>
<ListCard.Avatar src={savedFeed.view.avatar} size={28} />
<ListCard.TitleAndByline title={savedFeed.view.name} />
<ChevronRight size="sm" fill={t.atoms.text_contrast_low.color} />
</ListCard.Header>
</View>
)}
</ListCard.Link>
) )
} }
+1 -1
View File
@@ -505,7 +505,7 @@ export function Explore() {
a.px_lg, a.px_lg,
a.py_lg, a.py_lg,
]}> ]}>
<FeedCard.Default type="feed" view={item.feed} /> <FeedCard.Default view={item.feed} />
</View> </View>
) )
} }
+1 -1
View File
@@ -306,7 +306,7 @@ let SearchScreenFeedsResults = ({
a.px_lg, a.px_lg,
a.py_lg, a.py_lg,
]}> ]}>
<FeedCard.Default type="feed" view={item} /> <FeedCard.Default view={item} />
</View> </View>
)} )}
keyExtractor={item => item.uri} keyExtractor={item => item.uri}