Fixes to reposted-by list

src/state/models/reposted-by-view.ts

@@ -1,31 +1,11 @@
 import {makeAutoObservable, runInAction} from 'mobx'
 import {AtUri} from '../../third-party/uri'
-import {
+import {AppBskyFeedGetRepostedBy as GetRepostedBy} from '@atproto/api'
-  AppBskyFeedGetRepostedBy as GetRepostedBy,
-  AppBskySystemDeclRef,
-} from '@atproto/api'
-type DeclRef = AppBskySystemDeclRef.Main
 import {RootStoreModel} from './root-store'
 
-export class RepostedByViewItemModel implements GetRepostedBy.RepostedBy {
+const PAGE_SIZE = 30
-  // ui state
-  _reactKey: string = ''
 
-  // data
+export type RepostedByItem = GetRepostedBy.RepostedBy
-  did: string = ''
-  handle: string = ''
-  displayName: string = ''
-  avatar?: string
-  declaration: DeclRef = {cid: '', actorType: ''}
-  createdAt?: string
-  indexedAt: string = ''
-
-  constructor(reactKey: string, v: RepostedByItem) {
-    makeAutoObservable(this)
-    this._reactKey = reactKey
-    Object.assign(this, v)
-  }
-}
 
 export class RepostedByViewModel {
   // state
@@ -35,10 +15,13 @@ export class RepostedByViewModel {
   error = ''
   resolvedUri = ''
   params: GetRepostedBy.QueryParams
+  hasMore = true
+  loadMoreCursor?: string
+  private _loadMorePromise: Promise<void> | undefined
 
   // data
   uri: string = ''
-  repostedBy: RepostedByViewItemModel[] = []
+  repostedBy: RepostedByItem[] = []
 
   constructor(
     public rootStore: RootStoreModel,
@@ -70,19 +53,20 @@ export class RepostedByViewModel {
   // public api
   // =
 
-  async setup() {
+  async refresh() {
+    return this.loadMore(true)
+  }
+
+  async loadMore(isRefreshing = false) {
+    if (this._loadMorePromise) {
+      return this._loadMorePromise
+    }
     if (!this.resolvedUri) {
       await this._resolveUri()
     }
-    await this._fetch()
+    this._loadMorePromise = this._loadMore(isRefreshing)
-  }
+    await this._loadMorePromise
-
+    this._loadMorePromise = undefined
-  async refresh() {
-    await this._fetch(true)
-  }
-
-  async loadMore() {
-    // TODO
   }
 
   // state transitions
@@ -121,34 +105,28 @@ export class RepostedByViewModel {
     })
   }
 
-  private async _fetch(isRefreshing = false) {
+  private async _loadMore(isRefreshing = false) {
     this._xLoading(isRefreshing)
     try {
-      const res = await this.rootStore.api.app.bsky.feed.getRepostedBy(
+      const params = Object.assign({}, this.params, {
-        Object.assign({}, this.params, {uri: this.resolvedUri}),
+        uri: this.resolvedUri,
-      )
+        limit: PAGE_SIZE,
-      this._replaceAll(res)
+        before: this.loadMoreCursor,
+      })
+      if (this.isRefreshing) {
+        this.repostedBy = []
+      }
+      const res = await this.rootStore.api.app.bsky.feed.getRepostedBy(params)
+      await this._appendAll(res)
       this._xIdle()
     } catch (e: any) {
       this._xIdle(e)
     }
   }
 
-  private async _refresh() {
+  private _appendAll(res: GetRepostedBy.Response) {
-    this._xLoading(true)
+    this.loadMoreCursor = res.data.cursor
-    // TODO: refetch and update items
+    this.hasMore = !!this.loadMoreCursor
-    this._xIdle()
+    this.repostedBy = this.repostedBy.concat(res.data.repostedBy)
-  }
-
-  private _replaceAll(res: GetRepostedBy.Response) {
-    this.repostedBy.length = 0
-    let counter = 0
-    for (const item of res.data.repostedBy) {
-      this._append(counter++, item)
-    }
-  }
-
-  private _append(keyId: number, item: RepostedByItem) {
-    this.repostedBy.push(new RepostedByViewItemModel(`item-${keyId}`, item))
   }
 }

src/view/com/post-thread/PostRepostedBy.tsx

@@ -3,7 +3,7 @@ import {observer} from 'mobx-react-lite'
 import {ActivityIndicator, FlatList, StyleSheet, View} from 'react-native'
 import {
   RepostedByViewModel,
-  RepostedByViewItemModel,
+  RepostedByItem,
 } from '../../../state/models/reposted-by-view'
 import {UserAvatar} from '../util/UserAvatar'
 import {ErrorMessage} from '../util/error/ErrorMessage'
@@ -18,31 +18,29 @@ export const PostRepostedBy = observer(function PostRepostedBy({
   uri: string
 }) {
   const store = useStores()
-  // Using default import (React.use...) instead of named import (use...) to be able to mock store's data in jest environment
+  const view = React.useMemo(
-  const [view, setView] = React.useState<RepostedByViewModel | undefined>()
+    () => new RepostedByViewModel(store, {uri}),
+    [store, uri],
+  )
 
   useEffect(() => {
-    if (view?.params.uri === uri) {
+    view
-      return // no change needed? or trigger refresh?
+      .loadMore()
-    }
+      .catch(err => store.log.error('Failed to fetch user followers', err))
-    const newView = new RepostedByViewModel(store, {uri})
+  }, [view, store.log])
-    setView(newView)
-    newView
-      .setup()
-      .catch(err => store.log.error('Failed to fetch reposted by', err))
-  }, [uri, view?.params.uri, store])
 
   const onRefresh = () => {
-    view?.refresh()
+    view.refresh()
+  }
+  const onEndReached = () => {
+    view
+      .loadMore()
+      .catch(err =>
+        view?.rootStore.log.error('Failed to load more followers', err),
+      )
   }
 
-  // loading
+  if (!view.hasLoaded) {
-  // =
-  if (
-    !view ||
-    (view.isLoading && !view.isRefreshing) ||
-    view.params.uri !== uri
-  ) {
     return (
       <View>
         <ActivityIndicator />
@@ -66,22 +64,29 @@ export const PostRepostedBy = observer(function PostRepostedBy({
 
   // loaded
   // =
-  const renderItem = ({item}: {item: RepostedByViewItemModel}) => (
+  const renderItem = ({item}: {item: RepostedByItem}) => (
-    <RepostedByItem item={item} />
+    <RepostedByItemCom item={item} />
   )
   return (
-    <View>
+    <FlatList
-      <FlatList
+      data={view.repostedBy}
-        data={view.repostedBy}
+      keyExtractor={item => item.did}
-        keyExtractor={item => item._reactKey}
+      refreshing={view.isRefreshing}
-        renderItem={renderItem}
+      onRefresh={onRefresh}
-        contentContainerStyle={{paddingBottom: 200}}
+      onEndReached={onEndReached}
-      />
+      renderItem={renderItem}
-    </View>
+      initialNumToRender={15}
+      ListFooterComponent={() => (
+        <View style={styles.footer}>
+          {view.isLoading && <ActivityIndicator />}
+        </View>
+      )}
+      extraData={view.isLoading}
+    />
   )
 })
 
-const RepostedByItem = ({item}: {item: RepostedByViewItemModel}) => {
+const RepostedByItemCom = ({item}: {item: RepostedByItem}) => {
   return (
     <Link
       style={styles.outer}
@@ -132,4 +137,8 @@ const styles = StyleSheet.create({
     paddingTop: 10,
     paddingBottom: 10,
   },
+  footer: {
+    height: 200,
+    paddingTop: 20,
+  },
 })