allow for pinning saved feeds

src/state/models/feeds/algo/algo-item.ts

@@ -153,4 +153,8 @@ export class AlgoItemModel {
     })
     this.data = res.data.view
   }
+
+  serialize() {
+    return JSON.stringify(this.data)
+  }
 }

src/state/models/feeds/algo/saved.ts

@@ -4,6 +4,7 @@ import {RootStoreModel} from '../../root-store'
 import {bundleAsync} from 'lib/async/bundle'
 import {cleanError} from 'lib/strings/errors'
 import {AlgoItemModel} from './algo-item'
+import {hasProp, isObj} from 'lib/type-guards'
 
 const PAGE_SIZE = 30
 
@@ -18,6 +19,7 @@ export class SavedFeedsModel {
 
   // data
   feeds: AlgoItemModel[] = []
+  pinned: AlgoItemModel[] = []
 
   constructor(public rootStore: RootStoreModel) {
     makeAutoObservable(
@@ -29,6 +31,24 @@ export class SavedFeedsModel {
     )
   }
 
+  serialize() {
+    return {
+      pinned: this.pinned.map(f => f.serialize()),
+    }
+  }
+
+  hydrate(v: unknown) {
+    if (isObj(v)) {
+      if (hasProp(v, 'pinned')) {
+        const pinnedSerialized = (v as any).pinned as string[]
+        const pinnedDeserialized = pinnedSerialized.map(
+          (s: string) => new AlgoItemModel(this.rootStore, JSON.parse(s)),
+        )
+        this.pinned = pinnedDeserialized
+      }
+    }
+  }
+
   get hasContent() {
     return this.feeds.length > 0
   }
@@ -51,6 +71,28 @@ export class SavedFeedsModel {
     )
   }
 
+  get savedFeedsWithoutPinned() {
+    return this.feeds.filter(
+      f => !this.pinned.find(p => p.data.uri === f.data.uri),
+    )
+  }
+
+  togglePinnedFeed(feed: AlgoItemModel) {
+    if (!this.isPinned(feed)) {
+      this.pinned.push(feed)
+    } else {
+      this.pinned = this.pinned.filter(f => f.data.uri !== feed.data.uri)
+    }
+  }
+
+  reorderPinnedFeeds(temp: AlgoItemModel[]) {
+    this.pinned = temp
+  }
+
+  isPinned(feed: AlgoItemModel) {
+    return this.pinned.find(f => f.data.uri === feed.data.uri) ? true : false
+  }
+
   // public api
   // =
 

src/state/models/me.ts

@@ -69,6 +69,7 @@ export class MeModel {
       displayName: this.displayName,
       description: this.description,
       avatar: this.avatar,
+      savedFeeds: this.savedFeeds.serialize(),
     }
   }
 
@@ -90,6 +91,9 @@ export class MeModel {
       if (hasProp(v, 'avatar') && typeof v.avatar === 'string') {
         avatar = v.avatar
       }
+      if (hasProp(v, 'savedFeeds') && isObj(v.savedFeeds)) {
+        this.savedFeeds.hydrate(v.savedFeeds)
+      }
       if (did && handle) {
         this.did = did
         this.handle = handle

src/view/com/algos/AlgoItem.tsx

@@ -19,7 +19,17 @@ import {useStores} from 'state/index'
 import {HeartIconSolid} from 'lib/icons'
 
 const AlgoItem = observer(
-  ({item, style}: {item: AlgoItemModel; style?: StyleProp<ViewStyle>}) => {
+  ({
+    item,
+    style,
+    showBottom = true,
+    onLongPress,
+  }: {
+    item: AlgoItemModel
+    style?: StyleProp<ViewStyle>
+    showBottom?: boolean
+    onLongPress?: () => void
+  }) => {
     const store = useStores()
     const pal = usePalette('default')
     const navigation = useNavigation<NavigationProp>()
@@ -34,10 +44,11 @@ const AlgoItem = observer(
             rkey: item.data.uri,
           })
         }}
+        onLongPress={onLongPress}
         key={item.data.uri}>
         <View style={[styles.headerContainer]}>
           <View style={[s.mr10]}>
-            <UserAvatar size={36} avatar={item.data.avatar} s />
+            <UserAvatar size={36} avatar={item.data.avatar} />
           </View>
           <View style={[styles.headerTextContainer]}>
             <Text style={[pal.text, s.bold]}>
@@ -49,6 +60,7 @@ const AlgoItem = observer(
           </View>
         </View>
 
+        {showBottom ? (
           <View style={styles.bottomContainer}>
             <View style={styles.likedByContainer}>
               {/* <View style={styles.likedByAvatars}>
@@ -80,6 +92,7 @@ const AlgoItem = observer(
               />
             </View>
           </View>
+        ) : null}
       </TouchableOpacity>
     )
   },

src/view/index.ts

@@ -75,6 +75,7 @@ import {faX} from '@fortawesome/free-solid-svg-icons/faX'
 import {faXmark} from '@fortawesome/free-solid-svg-icons/faXmark'
 import {faPlay} from '@fortawesome/free-solid-svg-icons/faPlay'
 import {faPause} from '@fortawesome/free-solid-svg-icons/faPause'
+import {faThumbtack} from '@fortawesome/free-solid-svg-icons/faThumbtack'
 
 export function setup() {
   library.add(
@@ -149,6 +150,7 @@ export function setup() {
     faUserXmark,
     faTicket,
     faTrashCan,
+    faThumbtack,
     faX,
     faXmark,
     faPlay,

src/view/screens/CustomFeed.tsx

@@ -19,7 +19,7 @@ import {Text} from 'view/com/util/text/Text'
 
 type Props = NativeStackScreenProps<CommonNavigatorParams, 'CustomFeed'>
 export const CustomFeed = withAuthRequired(
-  observer(({route, navigation}: Props) => {
+  observer(({route}: Props) => {
     const rootStore = useStores()
     const {rkey, name} = route.params
     const currentFeed = useCustomFeed(rkey)

src/view/screens/SavedFeeds.tsx

@@ -3,8 +3,9 @@ import {
   RefreshControl,
   StyleSheet,
   View,
-  FlatList,
   ActivityIndicator,
+  FlatList,
+  TouchableOpacity,
 } from 'react-native'
 import {useFocusEffect} from '@react-navigation/native'
 import {NativeStackScreenProps} from '@react-navigation/native-stack'
@@ -13,28 +14,28 @@ import {usePalette} from 'lib/hooks/usePalette'
 import {CommonNavigatorParams} from 'lib/routes/types'
 import {observer} from 'mobx-react-lite'
 import {useStores} from 'state/index'
-import {SavedFeedsModel} from 'state/models/feeds/algo/saved'
 import AlgoItem from 'view/com/algos/AlgoItem'
 import {withAuthRequired} from 'view/com/auth/withAuthRequired'
 import {ViewHeader} from 'view/com/util/ViewHeader'
 import {CenteredView} from 'view/com/util/Views'
 import {Text} from 'view/com/util/text/Text'
 import {isDesktopWeb} from 'platform/detection'
-import {s} from 'lib/styles'
+import {colors, s} from 'lib/styles'
+import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
+import {AlgoItemModel} from 'state/models/feeds/algo/algo-item'
+import {SavedFeedsModel} from 'state/models/feeds/algo/saved'
 
 type Props = NativeStackScreenProps<CommonNavigatorParams, 'SavedFeeds'>
 
 export const SavedFeeds = withAuthRequired(
   observer(({}: Props) => {
+    // hooks for global items
     const pal = usePalette('default')
     const rootStore = useStores()
     const {screen} = useAnalytics()
 
-    const savedFeeds = useMemo(
+    // hooks for local
-      () => new SavedFeedsModel(rootStore),
+    const savedFeeds = useMemo(() => rootStore.me.savedFeeds, [rootStore])
-      [rootStore],
-    )
-
     useFocusEffect(
       useCallback(() => {
         screen('SavedFeeds')
@@ -42,31 +43,8 @@ export const SavedFeeds = withAuthRequired(
         savedFeeds.refresh()
       }, [screen, rootStore, savedFeeds]),
     )
-
+    const _ListEmptyComponent = () => {
       return (
-      <CenteredView style={[s.flex1]}>
-        <ViewHeader title="Custom Algorithms" showOnDesktop />
-        <FlatList
-          style={[!isDesktopWeb && s.flex1]}
-          data={savedFeeds.feeds}
-          keyExtractor={item => item.data.uri}
-          refreshControl={
-            <RefreshControl
-              refreshing={savedFeeds.isRefreshing}
-              onRefresh={() => savedFeeds.refresh()}
-              tintColor={pal.colors.text}
-              titleColor={pal.colors.text}
-            />
-          }
-          onEndReached={() => savedFeeds.loadMore()}
-          renderItem={({item}) => <AlgoItem key={item.data.uri} item={item} />}
-          initialNumToRender={15}
-          ListFooterComponent={() => (
-            <View style={styles.footer}>
-              {savedFeeds.isLoading && <ActivityIndicator />}
-            </View>
-          )}
-          ListEmptyComponent={() => (
         <View
           style={[
             pal.border,
@@ -79,7 +57,38 @@ export const SavedFeeds = withAuthRequired(
             button when a custom feed or algorithm shows up.
           </Text>
         </View>
+      )
+    }
+    const _ListFooterComponent = () => {
+      return (
+        <View style={styles.footer}>
+          {savedFeeds.isLoading && <ActivityIndicator />}
+        </View>
+      )
+    }
+
+    return (
+      <CenteredView style={[s.flex1]}>
+        <ViewHeader title="Saved Feeds" showOnDesktop />
+        <FlatList
+          style={[!isDesktopWeb && s.flex1]}
+          data={savedFeeds.feeds}
+          keyExtractor={item => item.data.uri}
+          refreshing={savedFeeds.isRefreshing}
+          refreshControl={
+            <RefreshControl
+              refreshing={savedFeeds.isRefreshing}
+              onRefresh={() => savedFeeds.refresh()}
+              tintColor={pal.colors.text}
+              titleColor={pal.colors.text}
+            />
+          }
+          renderItem={({item}) => (
+            <SavedFeedItem item={item} savedFeeds={savedFeeds} />
           )}
+          initialNumToRender={10}
+          ListFooterComponent={_ListFooterComponent}
+          ListEmptyComponent={_ListEmptyComponent}
           extraData={savedFeeds.isLoading}
           // @ts-ignore our .web version only -prf
           desktopFixedHeight
@@ -89,6 +98,36 @@ export const SavedFeeds = withAuthRequired(
   }),
 )
 
+const SavedFeedItem = observer(
+  ({item, savedFeeds}: {item: AlgoItemModel; savedFeeds: SavedFeedsModel}) => {
+    const isPinned = savedFeeds.isPinned(item)
+
+    return (
+      <View style={styles.itemContainer}>
+        <AlgoItem
+          key={item.data.uri}
+          item={item}
+          showBottom={false}
+          style={styles.item}
+        />
+        <TouchableOpacity
+          accessibilityRole="button"
+          onPress={() => {
+            savedFeeds.togglePinnedFeed(item)
+            console.log('pinned', savedFeeds.pinned)
+            console.log('isPinned', savedFeeds.isPinned(item))
+          }}>
+          <FontAwesomeIcon
+            icon="thumb-tack"
+            size={20}
+            color={isPinned ? colors.blue3 : colors.gray3}
+          />
+        </TouchableOpacity>
+      </View>
+    )
+  },
+)
+
 const styles = StyleSheet.create({
   footer: {
     paddingVertical: 20,
@@ -100,4 +139,12 @@ const styles = StyleSheet.create({
     marginHorizontal: 24,
     marginTop: 10,
   },
+  itemContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginRight: 18,
+  },
+  item: {
+    borderTopWidth: 0,
+  },
 })