about summary refs log tree commit diff
path: root/src/view/com/feeds/CustomFeed.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/view/com/feeds/CustomFeed.tsx')
-rw-r--r--src/view/com/feeds/CustomFeed.tsx71
1 files changed, 29 insertions, 42 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,
-  },
 })