✨ Refresh following feed when resuming

likecoin · Aug 11, 2020 · 72ddd0c · 72ddd0c
1 parent f4e0623
commit 72ddd0c
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 1 deletion.
diff --git a/.env b/.env
@@ -52,3 +52,6 @@ USER_PII_SALT=
 
 MAX_GLOBAL_SUPERLIKE_FEED_ITEM=25
 MAX_FOLLOWING_SUPERLIKE_PAGE=10
+
+# In seconds
+READING_FEED_RESUME_REFRESH_DEBOUNCE=300
diff --git a/app/models/reader-store/reader-store.ts b/app/models/reader-store/reader-store.ts
@@ -85,6 +85,12 @@ export const ReaderStoreModel = types
         parseInt(self.getConfig("MAX_FOLLOWING_SUPERLIKE_PAGE"))
       )
     },
+    getShouldRefreshFollowingFeed() {
+      return (
+        Date.now() - self.followedListLastFetchedDate.getTime() >=
+        parseInt(self.getConfig("READING_FEED_RESUME_REFRESH_DEBOUNCE")) * 1000
+      )
+    },
   }))
   .actions(self => ({
     reset() {

diff --git a/app/screens/reader-screen/reader-screen.tsx b/app/screens/reader-screen/reader-screen.tsx
@@ -1,5 +1,5 @@
 import * as React from "react"
-import { View, NativeSyntheticEvent } from "react-native"
+import { AppState, AppStateStatus, NativeSyntheticEvent, View } from "react-native"
 import { inject, observer } from "mobx-react"
 import ViewPager, {
   ViewPagerOnPageSelectedEventData,
@@ -37,6 +37,8 @@ class ReaderScreenBase extends React.Component<Props> {
 
   viewPager = React.createRef<ViewPager>()
 
+  appState = AppState.currentState
+
   state = {
     activePageIndex: 0,
   }
@@ -51,13 +53,33 @@ class ReaderScreenBase extends React.Component<Props> {
   componentDidMount() {
     if (this.props.currentUser.isSuperLiker) {
       this.props.readerStore.fetchFollowedSuperLikedFeed()
+      AppState.addEventListener("change", this.handleAppStateChange)
     } else {
       this.legacyList.current.props.onRefresh()
     }
     this.props.readerStore.fetchCreatorList()
     this.props.readerStore.fetchBookmarkList()
   }
 
+  componentWillUnmount() {
+    AppState.removeEventListener("change", this.handleAppStateChange)
+  }
+
+  private handleAppStateChange = (nextAppState: AppStateStatus) => {
+    if (
+      this.appState.match(/inactive|background/) &&
+      nextAppState === "active" &&
+      this.props.readerStore.getShouldRefreshFollowingFeed()
+    ) {
+      if (this.props.currentUser.isSuperLiker) {
+        this.props.readerStore.fetchFollowedSuperLikedFeed()
+      } else {
+        this.legacyList.current.props.onRefresh()
+      }
+    }
+    this.appState = nextAppState
+  }
+
   private getSectionTitle = (dayTs: string) => {
     const mm = moment(parseInt(dayTs, 10))
     const today = moment().startOf("day")

diff --git a/app/services/app-config/app-config.ts b/app/services/app-config/app-config.ts
@@ -27,6 +27,7 @@ import {
   USER_PII_SALT,
   MAX_GLOBAL_SUPERLIKE_FEED_ITEM,
   MAX_FOLLOWING_SUPERLIKE_PAGE,
+  READING_FEED_RESUME_REFRESH_DEBOUNCE,
 } from "react-native-dotenv"
 import FastImage from 'react-native-fast-image'
 
@@ -58,6 +59,7 @@ export interface AppConfigParams {
   USER_PII_SALT: string
   MAX_GLOBAL_SUPERLIKE_FEED_ITEM: string
   MAX_FOLLOWING_SUPERLIKE_PAGE: string
+  READING_FEED_RESUME_REFRESH_DEBOUNCE: string
 }
 
 export type AppConfigParamKey = keyof AppConfigParams
@@ -102,6 +104,7 @@ export class AppConfig {
       USER_PII_SALT,
       MAX_GLOBAL_SUPERLIKE_FEED_ITEM,
       MAX_FOLLOWING_SUPERLIKE_PAGE,
+      READING_FEED_RESUME_REFRESH_DEBOUNCE,
     }
     this.remoteConfig = RemoteConfigModule()
   }