diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/view/com/feeds/CustomFeed.tsx | 71 | ||||
| -rw-r--r-- | src/view/com/feeds/SavedFeedItem.tsx | 9 | ||||
| -rw-r--r-- | src/view/com/util/post-embeds/index.tsx | 14 | ||||
| -rw-r--r-- | src/view/screens/Profile.tsx | 4 |
4 files changed, 44 insertions, 54 deletions
diff --git a/src/view/com/feeds/CustomFeed.tsx b/src/view/com/feeds/CustomFeed.tsx index 2137081f3..edadada9c 100644 --- a/src/view/com/feeds/CustomFeed.tsx +++ b/src/view/com/feeds/CustomFeed.tsx @@ -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, - }, }) diff --git a/src/view/com/feeds/SavedFeedItem.tsx b/src/view/com/feeds/SavedFeedItem.tsx index b93cebe1e..9ebededc4 100644 --- a/src/view/com/feeds/SavedFeedItem.tsx +++ b/src/view/com/feeds/SavedFeedItem.tsx @@ -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={() => { diff --git a/src/view/com/util/post-embeds/index.tsx b/src/view/com/util/post-embeds/index.tsx index 1f8e48810..ed2f8feba 100644 --- a/src/view/com/util/post-embeds/index.tsx +++ b/src/view/com/util/post-embeds/index.tsx @@ -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, diff --git a/src/view/screens/Profile.tsx b/src/view/screens/Profile.tsx index a80e36237..9224a5967 100644 --- a/src/view/screens/Profile.tsx +++ b/src/view/screens/Profile.tsx @@ -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 /> |