make sure state is being synced across components

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

@@ -67,30 +67,12 @@ export class AlgoItemModel {
     }
   }
 
+  private rewriteData(data: AppBskyFeedDefs.GeneratorView) {
+    this.data = data
+  }
+
   // public apis
   // =
-  async save() {
-    try {
-      this.toggleSaved = true
-      await this.rootStore.agent.app.bsky.feed.saveFeed({
-        feed: this.data.uri,
-      })
-    } catch (e: any) {
-      this.rootStore.log.error('Failed to save feed', e)
-    }
-  }
-
-  async unsave() {
-    try {
-      this.toggleSaved = false
-      await this.rootStore.agent.app.bsky.feed.unsaveFeed({
-        feed: this.data.uri,
-      })
-    } catch (e: any) {
-      this.rootStore.log.error('Failed to unsanve feed', e)
-    }
-  }
-
   async like() {
     try {
       const res = await this.rootStore.agent.app.bsky.feed.like.create(
@@ -151,7 +133,7 @@ export class AlgoItemModel {
     const res = await this.rootStore.agent.app.bsky.feed.getFeedGenerator({
       feed: this.data.uri,
     })
-    this.data = res.data.view
+    this.rewriteData(res.data.view)
   }
 
   serialize() {

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

@@ -71,6 +71,12 @@ export class SavedFeedsModel {
     )
   }
 
+  get listOfPinnedFeedNames() {
+    return this.pinned.map(
+      f => f.data.displayName ?? f.data.creator.displayName + "'s feed",
+    )
+  }
+
   get savedFeedsWithoutPinned() {
     return this.feeds.filter(
       f => !this.pinned.find(p => p.data.uri === f.data.uri),
@@ -81,10 +87,14 @@ export class SavedFeedsModel {
     if (!this.isPinned(feed)) {
       this.pinned.push(feed)
     } else {
-      this.pinned = this.pinned.filter(f => f.data.uri !== feed.data.uri)
+      this.removePinnedFeed(feed.data.uri)
     }
   }
 
+  removePinnedFeed(uri: string) {
+    this.pinned = this.pinned.filter(f => f.data.uri !== uri)
+  }
+
   reorderPinnedFeeds(temp: AlgoItemModel[]) {
     this.pinned = temp
   }
@@ -144,18 +154,22 @@ export class SavedFeedsModel {
       await this.rootStore.agent.app.bsky.feed.saveFeed({
         feed: algoItem.getUri,
       })
+      algoItem.toggleSaved = true
       this.addFeed(algoItem)
     } catch (e: any) {
       this.rootStore.log.error('Failed to save feed', e)
     }
   }
 
-  async unsave(uri: string) {
+  async unsave(algoItem: AlgoItemModel) {
+    const uri = algoItem.getUri
     try {
       await this.rootStore.agent.app.bsky.feed.unsaveFeed({
         feed: uri,
       })
+      algoItem.toggleSaved = false
       this.removeFeed(uri)
+      this.removePinnedFeed(uri)
     } catch (e: any) {
       this.rootStore.log.error('Failed to unsanve feed', e)
     }

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)}