Tune up the custom feed card rendering

zio/stable
Paul Frazee 2023-05-17 14:24:27 -05:00
parent 3d09008bfd
commit a4c6dd6b1e
4 changed files with 44 additions and 54 deletions

View File

@ -16,21 +16,21 @@ import {CustomFeedModel} from 'state/models/feeds/custom-feed'
import {useFocusEffect, useNavigation} from '@react-navigation/native'
import {NavigationProp} from 'lib/routes/types'
import {useStores} from 'state/index'
import {HeartIconSolid} from 'lib/icons'
import {HeartIcon, HeartIconSolid} from 'lib/icons'
import {pluralize} from 'lib/strings/helpers'
import {AtUri} from '@atproto/api'
import {isWeb} from 'platform/detection'
const CustomFeed = observer(
export const CustomFeed = observer(
({
item,
style,
showBottom = true,
showLikes = false,
reloadOnFocus = false,
}: {
item: CustomFeedModel
style?: StyleProp<ViewStyle>
showBottom?: boolean
showLikes?: boolean
reloadOnFocus?: boolean
}) => {
const store = useStores()
@ -67,52 +67,43 @@ const CustomFeed = observer(
<Text style={[pal.text, s.bold]}>
{item.data.displayName ?? 'Feed name'}
</Text>
<Text style={[pal.textLight, styles.description]} numberOfLines={5}>
{item.data.description ??
"Explore our Feed for the latest updates and insights! Dive into a world of intriguing articles, trending news, and exciting stories that cover a wide range of topics. From technology breakthroughs to lifestyle tips, there's something here for everyone. Stay informed and get inspired with us. Join the conversation now!"}
</Text>
<Text style={[pal.textLight]}>by @{item.data.creator.handle}</Text>
</View>
<View>
<Button
type={item.isSaved ? 'default' : 'inverted'}
onPress={() => {
if (item.data.viewer?.saved) {
store.me.savedFeeds.unsave(item)
} else {
store.me.savedFeeds.save(item)
}
}}
label={item.data.viewer?.saved ? 'Unsave' : 'Save'}
/>
</View>
</View>
{showBottom ? (
{item.data.description ? (
<Text style={[pal.textLight, styles.description]} numberOfLines={3}>
{item.data.description}
</Text>
) : null}
{showLikes ? (
<View style={styles.bottomContainer}>
<View style={styles.likedByContainer}>
{/* <View style={styles.likedByAvatars}>
<UserAvatar size={24} avatar={item.data.avatar} />
<UserAvatar size={24} avatar={item.data.avatar} />
<UserAvatar size={24} avatar={item.data.avatar} />
</View> */}
<HeartIconSolid size={16} style={[s.mr2, {color: colors.red3}]} />
<Text style={[pal.text, pal.textLight]}>
{item.data.likeCount && item.data.likeCount > 0
? `Liked by ${item.data.likeCount} ${pluralize(
item.data.likeCount,
'other',
)}`
: 'Be the first to like this'}
<Text type="sm-medium" style={[pal.text, pal.textLight]}>
Liked by {item.data.likeCount || 0}{' '}
{pluralize(item.data.likeCount || 0, 'user')}
</Text>
</View>
<View>
<Button
type={item.isSaved ? 'default' : 'inverted'}
onPress={() => {
if (item.data.viewer?.saved) {
store.me.savedFeeds.unsave(item)
} else {
store.me.savedFeeds.save(item)
}
}}
label={item.data.viewer?.saved ? 'Unsave' : 'Save'}
/>
</View>
</View>
) : null}
</TouchableOpacity>
)
},
)
export default CustomFeed
const styles = StyleSheet.create({
container: {
@ -122,7 +113,7 @@ const styles = StyleSheet.create({
flex: 1,
borderTopWidth: 1,
borderTopColor: '#E5E5E5',
gap: 18,
gap: 14,
},
headerContainer: {
flexDirection: 'row',
@ -146,8 +137,4 @@ const styles = StyleSheet.create({
alignItems: 'center',
gap: 2,
},
likedByAvatars: {
flexDirection: 'row',
gap: -12,
},
})

View File

@ -5,7 +5,7 @@ import {colors} from 'lib/styles'
import {observer} from 'mobx-react-lite'
import {CustomFeedModel} from 'state/models/feeds/custom-feed'
import {SavedFeedsModel} from 'state/models/ui/saved-feeds'
import CustomFeed from './CustomFeed'
import {CustomFeed} from './CustomFeed'
export const SavedFeedItem = observer(
({
@ -19,12 +19,7 @@ export const SavedFeedItem = observer(
return (
<View style={styles.itemContainer}>
<CustomFeed
key={item.data.uri}
item={item}
showBottom={false}
style={styles.item}
/>
<CustomFeed key={item.data.uri} item={item} style={styles.item} />
<TouchableOpacity
accessibilityRole="button"
onPress={() => {

View File

@ -25,7 +25,7 @@ import {ExternalLinkEmbed} from './ExternalLinkEmbed'
import {getYoutubeVideoId} from 'lib/strings/url-helpers'
import QuoteEmbed from './QuoteEmbed'
import {AutoSizedImage} from '../images/AutoSizedImage'
import CustomFeed from 'view/com/feeds/CustomFeed'
import {CustomFeed} from 'view/com/feeds/CustomFeed'
import {CustomFeedModel} from 'state/models/feeds/custom-feed'
type Embed =
@ -173,8 +173,9 @@ export function PostEmbeds({
return (
<CustomFeed
item={new CustomFeedModel(store, embed.record)}
style={[pal.view, pal.border, styles.extOuter]}
reloadOnFocus={true}
style={[pal.view, pal.border, styles.customFeedOuter]}
reloadOnFocus
showLikes
/>
)
}
@ -198,6 +199,13 @@ const styles = StyleSheet.create({
borderRadius: 8,
marginTop: 4,
},
customFeedOuter: {
borderWidth: 1,
borderRadius: 8,
marginTop: 4,
paddingHorizontal: 12,
paddingVertical: 12,
},
alt: {
backgroundColor: 'rgba(0, 0, 0, 0.75)',
borderRadius: 6,

View File

@ -25,7 +25,7 @@ import {FAB} from '../com/util/fab/FAB'
import {s, colors} from 'lib/styles'
import {useAnalytics} from 'lib/analytics'
import {ComposeIcon2} from 'lib/icons'
import CustomFeed from 'view/com/feeds/CustomFeed'
import {CustomFeed} from 'view/com/feeds/CustomFeed'
import {CustomFeedModel} from 'state/models/feeds/custom-feed'
import {useSetTitle} from 'lib/hooks/useSetTitle'
import {combinedDisplayName} from 'lib/strings/display-names'
@ -189,7 +189,7 @@ export const ProfileScreen = withAuthRequired(
<FeedSlice slice={item} ignoreMuteFor={uiState.profile.did} />
)
} else if (item instanceof CustomFeedModel) {
return <CustomFeed item={item} />
return <CustomFeed item={item} showLikes />
}
}
return <View />