make sure state is being synced across components

src/view/com/algos/AlgoItem.tsx

@@ -13,7 +13,7 @@ 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'
-import {useNavigation} from '@react-navigation/native'
+import {useFocusEffect, useNavigation} from '@react-navigation/native'
 import {NavigationProp} from 'lib/routes/types'
 import {useStores} from 'state/index'
 import {HeartIconSolid} from 'lib/icons'
@@ -34,6 +34,11 @@ const AlgoItem = observer(
     const pal = usePalette('default')
     const navigation = useNavigation<NavigationProp>()
 
+    // TODO: this is pretty hacky, but it works for now
+    useFocusEffect(() => {
+      item.reload()
+    })
+
     return (
       <TouchableOpacity
         accessibilityRole="button"
@@ -78,14 +83,12 @@ const AlgoItem = observer(
             </View>
             <View>
               <Button
-                type="inverted"
+                type={item.isSaved ? 'default' : 'inverted'}
                 onPress={() => {
                   if (item.data.viewer?.saved) {
-                    item.unsave()
-                    store.me.savedFeeds.removeFeed(item.data.uri)
+                    store.me.savedFeeds.unsave(item)
                   } else {
-                    item.save()
-                    store.me.savedFeeds.addFeed(item)
+                    store.me.savedFeeds.save(item)
                   }
                 }}
                 label={item.data.viewer?.saved ? 'Unsave' : 'Save'}

src/view/com/pager/FeedsTabBarMobile.tsx

@@ -33,8 +33,12 @@ export const FeedsTabBar = observer(
     }, [store])
 
     const items = useMemo(
-      () => ['Following', "What's hot", ...store.me.savedFeeds.listOfFeedNames],
-      [store.me.savedFeeds.listOfFeedNames],
+      () => [
+        'Following',
+        "What's hot",
+        ...store.me.savedFeeds.listOfPinnedFeedNames,
+      ],
+      [store.me.savedFeeds.listOfPinnedFeedNames],
     )
 
     return (

src/view/screens/CustomFeed.tsx

@@ -64,11 +64,9 @@ export const CustomFeed = withAuthRequired(
                 style={[styles.saveButton]}
                 onPress={() => {
                   if (currentFeed?.data.viewer?.saved) {
-                    currentFeed?.unsave()
-                    rootStore.me.savedFeeds.removeFeed(currentFeed!.data.uri)
+                    rootStore.me.savedFeeds.unsave(currentFeed!)
                   } else {
-                    currentFeed!.save()
-                    rootStore.me.savedFeeds.addFeed(currentFeed!)
+                    rootStore.me.savedFeeds.save(currentFeed!)
                   }
                 }}
                 label={currentFeed?.data.viewer?.saved ? 'Unsave' : 'Save'}

src/view/screens/Home.tsx

@@ -112,7 +112,7 @@ export const HomeScreen = withAuthRequired(
           feed={algoFeed}
           renderEmptyState={renderWhatsHotEmptyState}
         />
-        {store.me.savedFeeds.feeds.map((f, index) => {
+        {store.me.savedFeeds.pinned.map((f, index) => {
           return (
             <FeedPage
               key={String(2 + index + 1)}