Reorganize custom-feed state models and add the missing _reactKey attribute

src/state/models/feeds/custom-feed.ts

@@ -2,14 +2,16 @@ import {AppBskyFeedDefs, AtUri} from '@atproto/api'
 import {makeAutoObservable} from 'mobx'
 import {RootStoreModel} from 'state/models/root-store'
 
-export class AlgoItemModel {
+export class CustomFeedModel {
   // data
+  _reactKey: string
   data: AppBskyFeedDefs.GeneratorView
 
   constructor(
     public rootStore: RootStoreModel,
     view: AppBskyFeedDefs.GeneratorView,
   ) {
+    this._reactKey = view.uri
     this.data = view
     makeAutoObservable(
       this,
@@ -23,7 +25,6 @@ export class AlgoItemModel {
   // local actions
   // =
   set toggleSaved(value: boolean) {
-    console.log('toggleSaved', this.data.viewer)
     if (this.data.viewer) {
       this.data.viewer.saved = value
     }

src/state/models/lists/actor-feeds.ts

@@ -1,9 +1,9 @@
 import {makeAutoObservable} from 'mobx'
 import {AppBskyFeedGetActorFeeds as GetActorFeeds} from '@atproto/api'
-import {RootStoreModel} from '../../root-store'
+import {RootStoreModel} from '../root-store'
 import {bundleAsync} from 'lib/async/bundle'
 import {cleanError} from 'lib/strings/errors'
-import {AlgoItemModel} from './algo-item'
+import {CustomFeedModel} from '../feeds/custom-feed'
 
 const PAGE_SIZE = 30
 
@@ -17,7 +17,7 @@ export class ActorFeedsModel {
   loadMoreCursor?: string
 
   // data
-  feeds: AlgoItemModel[] = []
+  feeds: CustomFeedModel[] = []
 
   constructor(
     public rootStore: RootStoreModel,
@@ -72,7 +72,6 @@ export class ActorFeedsModel {
         limit: PAGE_SIZE,
         cursor: replace ? undefined : this.loadMoreCursor,
       })
-      console.log('res', res.data.feeds)
       if (replace) {
         this._replaceAll(res)
       } else {
@@ -115,7 +114,7 @@ export class ActorFeedsModel {
     this.loadMoreCursor = res.data.cursor
     this.hasMore = !!this.loadMoreCursor
     for (const f of res.data.feeds) {
-      this.feeds.push(new AlgoItemModel(this.rootStore, f))
+      this.feeds.push(new CustomFeedModel(this.rootStore, f))
     }
   }
 }

src/state/models/me.ts

@@ -8,7 +8,7 @@ import {PostsFeedModel} from './feeds/posts'
 import {NotificationsFeedModel} from './feeds/notifications'
 import {MyFollowsCache} from './cache/my-follows'
 import {isObj, hasProp} from 'lib/type-guards'
-import {SavedFeedsModel} from './feeds/algo/saved'
+import {SavedFeedsModel} from './ui/saved-feeds'
 
 const PROFILE_UPDATE_INTERVAL = 10 * 60 * 1e3 // 10min
 const NOTIFS_UPDATE_INTERVAL = 30 * 1e3 // 30sec

src/state/models/ui/profile.ts

@@ -3,7 +3,7 @@ import {AppBskyFeedDefs} from '@atproto/api'
 import {RootStoreModel} from '../root-store'
 import {ProfileModel} from '../content/profile'
 import {PostsFeedModel} from '../feeds/posts'
-import {ActorFeedsModel} from '../feeds/algo/actor'
+import {ActorFeedsModel} from '../lists/actor-feeds'
 import {ListsListModel} from '../lists/lists-list'
 
 export enum Sections {

src/state/models/ui/saved-feeds.ts

@@ -1,9 +1,9 @@
 import {makeAutoObservable, runInAction} from 'mobx'
 import {AppBskyFeedGetSavedFeeds as GetSavedFeeds} from '@atproto/api'
-import {RootStoreModel} from '../../root-store'
+import {RootStoreModel} from '../root-store'
 import {bundleAsync} from 'lib/async/bundle'
 import {cleanError} from 'lib/strings/errors'
-import {AlgoItemModel} from './algo-item'
+import {CustomFeedModel} from '../feeds/custom-feed'
 import {hasProp, isObj} from 'lib/type-guards'
 
 const PAGE_SIZE = 30
@@ -18,8 +18,8 @@ export class SavedFeedsModel {
   loadMoreCursor?: string
 
   // data
-  feeds: AlgoItemModel[] = []
+  feeds: CustomFeedModel[] = []
-  pinned: AlgoItemModel[] = []
+  pinned: CustomFeedModel[] = []
 
   constructor(public rootStore: RootStoreModel) {
     makeAutoObservable(
@@ -42,7 +42,7 @@ export class SavedFeedsModel {
       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)),
+          (s: string) => new CustomFeedModel(this.rootStore, JSON.parse(s)),
         )
         this.pinned = pinnedDeserialized
       }
@@ -83,7 +83,7 @@ export class SavedFeedsModel {
     )
   }
 
-  togglePinnedFeed(feed: AlgoItemModel) {
+  togglePinnedFeed(feed: CustomFeedModel) {
     if (!this.isPinned(feed)) {
       this.pinned.push(feed)
     } else {
@@ -95,15 +95,15 @@ export class SavedFeedsModel {
     this.pinned = this.pinned.filter(f => f.data.uri !== uri)
   }
 
-  reorderPinnedFeeds(temp: AlgoItemModel[]) {
+  reorderPinnedFeeds(temp: CustomFeedModel[]) {
     this.pinned = temp
   }
 
-  isPinned(feed: AlgoItemModel) {
+  isPinned(feed: CustomFeedModel) {
     return this.pinned.find(f => f.data.uri === feed.data.uri) ? true : false
   }
 
-  movePinnedItem(item: AlgoItemModel, direction: 'up' | 'down') {
+  movePinnedItem(item: CustomFeedModel, direction: 'up' | 'down') {
     if (this.pinned.length < 2) {
       throw new Error('Array must have at least 2 items')
     }
@@ -182,11 +182,11 @@ export class SavedFeedsModel {
     this.feeds = this.feeds.filter(f => f.data.uri !== uri)
   }
 
-  addFeed(algoItem: AlgoItemModel) {
+  addFeed(algoItem: CustomFeedModel) {
-    this.feeds.push(new AlgoItemModel(this.rootStore, algoItem.data))
+    this.feeds.push(new CustomFeedModel(this.rootStore, algoItem.data))
   }
 
-  async save(algoItem: AlgoItemModel) {
+  async save(algoItem: CustomFeedModel) {
     try {
       await this.rootStore.agent.app.bsky.feed.saveFeed({
         feed: algoItem.getUri,
@@ -198,7 +198,7 @@ export class SavedFeedsModel {
     }
   }
 
-  async unsave(algoItem: AlgoItemModel) {
+  async unsave(algoItem: CustomFeedModel) {
     const uri = algoItem.getUri
     try {
       await this.rootStore.agent.app.bsky.feed.unsaveFeed({
@@ -243,7 +243,7 @@ export class SavedFeedsModel {
     this.loadMoreCursor = res.data.cursor
     this.hasMore = !!this.loadMoreCursor
     for (const f of res.data.feeds) {
-      this.feeds.push(new AlgoItemModel(this.rootStore, f))
+      this.feeds.push(new CustomFeedModel(this.rootStore, f))
     }
   }
 }

src/view/com/algos/AlgoItem.tsx

@@ -12,7 +12,7 @@ import {colors, 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'
+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'
@@ -28,7 +28,7 @@ const AlgoItem = observer(
     showBottom = true,
     reloadOnFocus = false,
   }: {
-    item: AlgoItemModel
+    item: CustomFeedModel
     style?: StyleProp<ViewStyle>
     showBottom?: boolean
     reloadOnFocus?: boolean

src/view/com/algos/SavedFeedItem.tsx

@@ -3,12 +3,18 @@ import {View, TouchableOpacity, StyleSheet} from 'react-native'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {colors} from 'lib/styles'
 import {observer} from 'mobx-react-lite'
-import {AlgoItemModel} from 'state/models/feeds/algo/algo-item'
+import {CustomFeedModel} from 'state/models/feeds/custom-feed'
-import {SavedFeedsModel} from 'state/models/feeds/algo/saved'
+import {SavedFeedsModel} from 'state/models/ui/saved-feeds'
 import AlgoItem from './AlgoItem'
 
 export const SavedFeedItem = observer(
-  ({item, savedFeeds}: {item: AlgoItemModel; savedFeeds: SavedFeedsModel}) => {
+  ({
+    item,
+    savedFeeds,
+  }: {
+    item: CustomFeedModel
+    savedFeeds: SavedFeedsModel
+  }) => {
     const isPinned = savedFeeds.isPinned(item)
 
     return (

src/view/com/algos/useCustomFeed.ts

@@ -1,10 +1,10 @@
 import {useEffect, useState} from 'react'
 import {useStores} from 'state/index'
-import {AlgoItemModel} from 'state/models/feeds/algo/algo-item'
+import {CustomFeedModel} from 'state/models/feeds/custom-feed'
 
 export function useCustomFeed(uri: string) {
   const store = useStores()
-  const [item, setItem] = useState<AlgoItemModel>()
+  const [item, setItem] = useState<CustomFeedModel>()
   useEffect(() => {
     async function fetchView() {
       const res = await store.agent.app.bsky.feed.getFeedGenerator({
@@ -16,7 +16,7 @@ export function useCustomFeed(uri: string) {
     async function buildFeedItem() {
       const view = await fetchView()
       if (view) {
-        const temp = new AlgoItemModel(store, view)
+        const temp = new CustomFeedModel(store, view)
         setItem(temp)
       }
     }

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

@@ -26,7 +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'
+import {CustomFeedModel} from 'state/models/feeds/custom-feed'
 
 type Embed =
   | AppBskyEmbedRecord.View
@@ -172,7 +172,7 @@ export function PostEmbeds({
   ) {
     return (
       <AlgoItem
-        item={new AlgoItemModel(store, embed.record)}
+        item={new CustomFeedModel(store, embed.record)}
         style={[pal.view, pal.border, styles.extOuter]}
         reloadOnFocus={true}
       />

src/view/screens/PinnedFeeds.tsx

@@ -26,7 +26,7 @@ import DraggableFlatList, {
 } from 'react-native-draggable-flatlist'
 import {SavedFeedItem} from 'view/com/algos/SavedFeedItem'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
-import {AlgoItemModel} from 'state/models/feeds/algo/algo-item'
+import {CustomFeedModel} from 'state/models/feeds/custom-feed'
 
 type Props = NativeStackScreenProps<CommonNavigatorParams, 'PinnedFeeds'>
 
@@ -101,7 +101,7 @@ export const PinnedFeeds = withAuthRequired(
 )
 
 const PinnedItem = observer(
-  ({item, drag}: {item: AlgoItemModel; drag: () => void}) => {
+  ({item, drag}: {item: CustomFeedModel; drag: () => void}) => {
     const pal = usePalette('default')
     const rootStore = useStores()
     const savedFeeds = useMemo(() => rootStore.me.savedFeeds, [rootStore])

src/view/screens/Profile.tsx

@@ -26,7 +26,7 @@ import {s, colors} from 'lib/styles'
 import {useAnalytics} from 'lib/analytics'
 import {ComposeIcon2} from 'lib/icons'
 import AlgoItem from 'view/com/algos/AlgoItem'
-import {AlgoItemModel} from 'state/models/feeds/algo/algo-item'
+import {CustomFeedModel} from 'state/models/feeds/custom-feed'
 import {useSetTitle} from 'lib/hooks/useSetTitle'
 import {combinedDisplayName} from 'lib/strings/display-names'
 
@@ -188,7 +188,7 @@ export const ProfileScreen = withAuthRequired(
             return (
               <FeedSlice slice={item} ignoreMuteFor={uiState.profile.did} />
             )
-          } else if (item instanceof AlgoItemModel) {
+          } else if (item instanceof CustomFeedModel) {
             return <AlgoItem item={item} />
           }
         }

src/view/screens/SavedFeeds.tsx

@@ -21,7 +21,7 @@ import {CenteredView} from 'view/com/util/Views'
 import {Text} from 'view/com/util/text/Text'
 import {isDesktopWeb, isWeb} from 'platform/detection'
 import {s} from 'lib/styles'
-import {SavedFeedsModel} from 'state/models/feeds/algo/saved'
+import {SavedFeedsModel} from 'state/models/ui/saved-feeds'
 import {Link} from 'view/com/util/Link'
 import {UserAvatar} from 'view/com/util/UserAvatar'
 import {SavedFeedItem} from 'view/com/algos/SavedFeedItem'