create algo-item model and redefine data models

src/view/com/algos/AlgoItem.tsx

@@ -1,41 +1,62 @@
 import React from 'react'
 import {StyleProp, StyleSheet, View, ViewStyle} from 'react-native'
 import {Text} from '../util/text/Text'
-import {AppBskyFeedDefs} from '@atproto/api'
 import {usePalette} from 'lib/hooks/usePalette'
 import {s} from 'lib/styles'
 import {UserAvatar} from '../util/UserAvatar'
+import {Button} from '../util/forms/Button'
+import {observer} from 'mobx-react-lite'
+import {AlgoItemModel} from 'state/models/feeds/algo/algo-item'
 
-const AlgoItem = ({
-  item,
-  style,
-}: {
-  item: AppBskyFeedDefs.GeneratorView
-  style?: StyleProp<ViewStyle>
-}) => {
-  const pal = usePalette('default')
-  return (
-    <View style={[styles.container, style]} key={item.uri}>
-      <View style={[styles.headerContainer]}>
-        <View style={[s.mr20]}>
-          <UserAvatar size={56} avatar={item.avatar} />
+const AlgoItem = observer(
+  ({item, style}: {item: AlgoItemModel; style?: StyleProp<ViewStyle>}) => {
+    const pal = usePalette('default')
+    return (
+      <View style={[styles.container, style]} key={item.data.uri}>
+        <View style={[styles.headerContainer]}>
+          <View style={[s.mr10]}>
+            <UserAvatar size={36} avatar={item.data.avatar} />
+          </View>
+          <View style={[styles.headerTextContainer]}>
+            <Text style={[pal.text, s.bold]}>
+              {item.data.displayName ?? 'Feed name'}
+            </Text>
+            <Text style={[pal.textLight, styles.description]}>
+              {item.data.description ??
+                'THIS IS A FEED DESCRIPTION, IT WILL TELL YOU WHAT THE FEED IS ABOUT. THIS IS A COOL FEED ABOUT COOL PEOPLE.'}
+            </Text>
+          </View>
         </View>
-        <View style={[styles.headerTextContainer]}>
-          <Text style={[pal.text, s.bold]}>
-            {item.displayName ?? 'Feed name'}
-          </Text>
-          <Text style={[pal.textLight, styles.description]}>
-            {item.description ??
-              'THIS IS A FEED DESCRIPTION, IT WILL TELL YOU WHAT THE FEED IS ABOUT. THIS IS A COOL FEED ABOUT COOL PEOPLE.'}
-          </Text>
+
+        {/* TODO: this feed is like by *3* people UserAvatars and others */}
+        <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>
+
+            <Text style={[pal.text, pal.textLight]}>Liked by 3 others</Text>
+          </View>
+          <View>
+            <Button
+              type="inverted"
+              onPress={() => {
+                if (item.data.viewer?.saved) {
+                  item.unsave()
+                } else {
+                  item.save()
+                }
+              }}
+              label={item.data.viewer?.saved ? 'Unsave' : 'Save'}
+            />
+          </View>
         </View>
       </View>
-
-      {/* TODO: this feed is like by *3* people UserAvatars and others */}
-    </View>
-  )
-}
-
+    )
+  },
+)
 export default AlgoItem
 
 const styles = StyleSheet.create({
@@ -43,10 +64,10 @@ const styles = StyleSheet.create({
     paddingHorizontal: 18,
     paddingVertical: 20,
     flexDirection: 'column',
-    columnGap: 36,
     flex: 1,
     borderTopWidth: 1,
     borderTopColor: '#E5E5E5',
+    gap: 18,
   },
   headerContainer: {
     flexDirection: 'row',
@@ -60,4 +81,18 @@ const styles = StyleSheet.create({
     flex: 1,
     flexWrap: 'wrap',
   },
+  bottomContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  likedByContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 2,
+  },
+  likedByAvatars: {
+    flexDirection: 'row',
+    gap: -12,
+  },
 })

src/view/com/util/post-embeds/index.tsx

@@ -26,6 +26,7 @@ import {getYoutubeVideoId} from 'lib/strings/url-helpers'
 import QuoteEmbed from './QuoteEmbed'
 import {AutoSizedImage} from '../images/AutoSizedImage'
 import AlgoItem from 'view/com/algos/AlgoItem'
+import {AlgoItemModel} from 'state/models/feeds/algo/algo-item'
 
 type Embed =
   | AppBskyEmbedRecord.View
@@ -171,7 +172,7 @@ export function PostEmbeds({
   ) {
     return (
       <AlgoItem
-        item={embed.record}
+        item={new AlgoItemModel(store, embed.record)}
         style={[pal.view, pal.border, styles.extOuter]}
       />
     )

src/view/screens/Profile.tsx

@@ -21,8 +21,8 @@ import {FAB} from '../com/util/fab/FAB'
 import {s, colors} from 'lib/styles'
 import {useAnalytics} from 'lib/analytics'
 import {ComposeIcon2} from 'lib/icons'
-import {AppBskyFeedDefs} from '@atproto/api'
 import AlgoItem from 'view/com/algos/AlgoItem'
+import {AlgoItemModel} from 'state/models/feeds/algo/algo-item'
 
 type Props = NativeStackScreenProps<CommonNavigatorParams, 'Profile'>
 export const ProfileScreen = withAuthRequired(
@@ -154,10 +154,8 @@ export const ProfileScreen = withAuthRequired(
           )
         } else if (item instanceof PostsFeedSliceModel) {
           return <FeedSlice slice={item} ignoreMuteFor={uiState.profile.did} />
-        } else if (item.creator) {
-          // TODO: this is a hack to see if it is a custom feed. fix it to something more robust
-          const typedItem = item as AppBskyFeedDefs.GeneratorView
-          return <AlgoItem item={typedItem} />
+        } else if (item instanceof AlgoItemModel) {
+          return <AlgoItem item={item} />
         }
         return <View />
       },