[APP-720] Paginate custom feeds (#1030)

* paginate custom feeds

* Fix loading state bug

* DRY code up

src/state/models/discovery/feeds.ts

@@ -5,12 +5,15 @@ import {bundleAsync} from 'lib/async/bundle'
 import {cleanError} from 'lib/strings/errors'
 import {CustomFeedModel} from '../feeds/custom-feed'
 
+const DEFAULT_LIMIT = 50
+
 export class FeedsDiscoveryModel {
   // state
   isLoading = false
   isRefreshing = false
   hasLoaded = false
   error = ''
+  loadMoreCursor: string | undefined = undefined
 
   // data
   feeds: CustomFeedModel[] = []
@@ -26,6 +29,9 @@ export class FeedsDiscoveryModel {
   }
 
   get hasMore() {
+    if (this.loadMoreCursor) {
+      return true
+    }
     return false
   }
 
@@ -48,9 +54,9 @@ export class FeedsDiscoveryModel {
     this._xLoading()
     try {
       const res =
-        await this.rootStore.agent.app.bsky.unspecced.getPopularFeedGenerators(
-          {},
-        )
+        await this.rootStore.agent.app.bsky.unspecced.getPopularFeedGenerators({
+          limit: DEFAULT_LIMIT,
+        })
       this._replaceAll(res)
       this._xIdle()
     } catch (e: any) {
@@ -58,6 +64,24 @@ export class FeedsDiscoveryModel {
     }
   })
 
+  loadMore = bundleAsync(async () => {
+    if (!this.hasMore) {
+      return
+    }
+    this._xLoading()
+    try {
+      const res =
+        await this.rootStore.agent.app.bsky.unspecced.getPopularFeedGenerators({
+          limit: DEFAULT_LIMIT,
+          cursor: this.loadMoreCursor,
+        })
+      this._append(res)
+    } catch (e: any) {
+      this._xIdle(e)
+    }
+    this._xIdle()
+  })
+
   clear() {
     this.isLoading = false
     this.isRefreshing = false
@@ -89,9 +113,18 @@ export class FeedsDiscoveryModel {
   // =
 
   _replaceAll(res: AppBskyUnspeccedGetPopularFeedGenerators.Response) {
+    // 1. set feeds data to empty array
     this.feeds = []
+    // 2. call this._append()
+    this._append(res)
+  }
+
+  _append(res: AppBskyUnspeccedGetPopularFeedGenerators.Response) {
+    // 1. push data into feeds array
     for (const f of res.data.feeds) {
       this.feeds.push(new CustomFeedModel(this.rootStore, f))
     }
+    // 2. set loadMoreCursor
+    this.loadMoreCursor = res.data.cursor
   }
 }

src/view/screens/DiscoverFeeds.tsx

@@ -85,6 +85,7 @@ export const DiscoverFeedsScreen = withAuthRequired(
           renderItem={renderItem}
           initialNumToRender={10}
           ListEmptyComponent={renderListEmptyComponent}
+          onEndReached={() => feeds.loadMore()}
           extraData={feeds.isLoading}
         />
       </CenteredView>