Fixes to likes list

src/state/models/votes-view.ts

@@ -1,31 +1,11 @@
 import {makeAutoObservable, runInAction} from 'mobx'
 import {AtUri} from '../../third-party/uri'
-import {
-  AppBskyFeedGetVotes as GetVotes,
-  AppBskyActorRef as ActorRef,
-} from '@atproto/api'
+import {AppBskyFeedGetVotes as GetVotes} from '@atproto/api'
 import {RootStoreModel} from './root-store'
 
-export class VotesViewItemModel implements GetVotes.Vote {
-  // ui state
-  _reactKey: string = ''
+const PAGE_SIZE = 30
 
-  // data
-  direction: 'up' | 'down' = 'up'
-  indexedAt: string = ''
-  createdAt: string = ''
-  actor: ActorRef.WithInfo = {
-    did: '',
-    handle: '',
-    declaration: {cid: '', actorType: ''},
-  }
-
-  constructor(reactKey: string, v: GetVotes.Vote) {
-    makeAutoObservable(this)
-    this._reactKey = reactKey
-    Object.assign(this, v)
-  }
-}
+export type VoteItem = GetVotes.Vote
 
 export class VotesViewModel {
   // state
@@ -35,10 +15,13 @@ export class VotesViewModel {
   error = ''
   resolvedUri = ''
   params: GetVotes.QueryParams
+  hasMore = true
+  loadMoreCursor?: string
+  private _loadMorePromise: Promise<void> | undefined
 
   // data
   uri: string = ''
-  votes: VotesViewItemModel[] = []
+  votes: VoteItem[] = []
 
   constructor(public rootStore: RootStoreModel, params: GetVotes.QueryParams) {
     makeAutoObservable(
@@ -67,19 +50,20 @@ export class VotesViewModel {
   // 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()
-  }
-
-  async refresh() {
-    await this._fetch(true)
-  }
-
-  async loadMore() {
-    // TODO
+    this._loadMorePromise = this._loadMore(isRefreshing)
+    await this._loadMorePromise
+    this._loadMorePromise = undefined
   }
 
   // state transitions
@@ -118,28 +102,28 @@ export class VotesViewModel {
     })
   }
 
-  private async _fetch(isRefreshing = false) {
+  private async _loadMore(isRefreshing = false) {
     this._xLoading(isRefreshing)
     try {
-      const res = await this.rootStore.api.app.bsky.feed.getVotes(
-        Object.assign({}, this.params, {uri: this.resolvedUri}),
-      )
-      this._replaceAll(res)
+      const params = Object.assign({}, this.params, {
+        uri: this.resolvedUri,
+        limit: PAGE_SIZE,
+        before: this.loadMoreCursor,
+      })
+      if (this.isRefreshing) {
+        this.votes = []
+      }
+      const res = await this.rootStore.api.app.bsky.feed.getVotes(params)
+      this._appendAll(res)
       this._xIdle()
     } catch (e: any) {
       this._xIdle(e)
     }
   }
 
-  private _replaceAll(res: GetVotes.Response) {
-    this.votes.length = 0
-    let counter = 0
-    for (const item of res.data.votes) {
-      this._append(counter++, item)
-    }
-  }
-
-  private _append(keyId: number, item: GetVotes.Vote) {
-    this.votes.push(new VotesViewItemModel(`item-${keyId}`, item))
+  private _appendAll(res: GetVotes.Response) {
+    this.loadMoreCursor = res.data.cursor
+    this.hasMore = !!this.loadMoreCursor
+    this.votes = this.votes.concat(res.data.votes)
   }
 }