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

* paginate custom feeds

* Fix loading state bug

* DRY code up

package.json

@@ -24,7 +24,7 @@
     "e2e:run": "detox test --configuration ios.sim.debug --take-screenshots all"
   },
   "dependencies": {
-    "@atproto/api": "^0.3.13",
+    "@atproto/api": "^0.4.2",
     "@bam.tech/react-native-image-resizer": "^3.0.4",
     "@braintree/sanitize-url": "^6.0.2",
     "@expo/html-elements": "^0.4.2",

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>

yarn.lock

@@ -29,7 +29,7 @@
     jsonpointer "^5.0.0"
     leven "^3.1.0"
 
-"@atproto/api@*", "@atproto/api@^0.3.13":
+"@atproto/api@*":
   version "0.3.13"
   resolved "https://registry.yarnpkg.com/@atproto/api/-/api-0.3.13.tgz#e5ccaa83bb909e662286cdf74a77a76de6562a47"
   integrity sha512-smDlomgipca16G+jKXAZSMfsAmA5wG8WR3Z1dj29ZShVJlhs6+HHdxX7dWVDYEdSeb2rp/wyHN/tQhxGDAkz/g==
@@ -40,6 +40,17 @@
     tlds "^1.234.0"
     typed-emitter "^2.1.0"
 
+"@atproto/api@^0.4.2":
+  version "0.4.2"
+  resolved "https://registry.yarnpkg.com/@atproto/api/-/api-0.4.2.tgz#7790eb049f72437e7454c8ecc29a5ef4201c1ade"
+  integrity sha512-bwaT+kIJp6wpzlHc1Rus3yi29GKlwvYp4wOWAFmcyYT4qH2ZlE6NfElgi6QwdQD285EhiIKYTv7CAMRp/QO7DQ==
+  dependencies:
+    "@atproto/common-web" "*"
+    "@atproto/uri" "*"
+    "@atproto/xrpc" "*"
+    tlds "^1.234.0"
+    typed-emitter "^2.1.0"
+
 "@atproto/aws@*":
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/@atproto/aws/-/aws-0.0.1.tgz#b26e47ec4a7ddab4a5d41ec8dbc476cfce88139d"