Tune up the custom feed card rendering
parent
3d09008bfd
commit
a4c6dd6b1e
|
@ -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,
|
||||
},
|
||||
})
|
||||
|
|
|
@ -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={() => {
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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 />
|
||||
|
|
Loading…
Reference in New Issue