Reduce home polling to the currently active page; also reuse some code

src/view/screens/Home.tsx

@@ -36,6 +36,12 @@ export const HomeScreen = withAuthRequired((_opts: Props) => {
   const store = useStores()
   const [selectedPage, setSelectedPage] = React.useState(0)
 
+  const algoFeed = React.useMemo(() => {
+    const feed = new FeedModel(store, 'goodstuff', {})
+    feed.setup()
+    return feed
+  }, [store])
+
   useFocusEffect(
     React.useCallback(() => {
       store.shell.setIsDrawerSwipeDisabled(selectedPage > 0)
@@ -62,10 +68,12 @@ export const HomeScreen = withAuthRequired((_opts: Props) => {
       onPageSelected={onPageSelected}
       renderTabBar={renderTabBar}
       tabBarPosition="bottom">
-      <AlgoView key="1" />
+      <FeedPage key="1" isPageFocused={selectedPage === 0} feed={algoFeed} />
-      <View key="2">
+      <FeedPage
-        <FollowingView />
+        key="2"
-      </View>
+        isPageFocused={selectedPage === 1}
+        feed={store.me.mainFeed}
+      />
     </Pager>
   )
 })
@@ -110,7 +118,8 @@ const FloatingTabBar = observer((props: TabBarProps) => {
   )
 })
 
-const AlgoView = observer(() => {
+const FeedPage = observer(
+  ({isPageFocused, feed}: {feed: FeedModel; isPageFocused: boolean}) => {
     const store = useStores()
     const onMainScroll = useOnMainScroll(store)
     const {screen, track} = useAnalytics()
@@ -118,30 +127,29 @@ const AlgoView = observer(() => {
     const {appState} = useAppState({
       onForeground: () => doPoll(true),
     })
-  const isFocused = useIsFocused()
+    const isScreenFocused = useIsFocused()
     const winDim = useWindowDimensions()
     const containerStyle = React.useMemo(
       () => ({height: winDim.height - TAB_BAR_HEIGHT}),
       [winDim],
     )
-  const algoFeed = React.useMemo(() => {
-    const feed = new FeedModel(store, 'goodstuff', {})
-    feed.setup()
-    return feed
-  }, [store])
 
     const doPoll = React.useCallback(
       (knownActive = false) => {
-      if ((!knownActive && appState !== 'active') || !isFocused) {
+        if (
+          (!knownActive && appState !== 'active') ||
+          !isScreenFocused ||
+          !isPageFocused
+        ) {
           return
         }
-      if (algoFeed.isLoading) {
+        if (feed.isLoading) {
           return
         }
         store.log.debug('HomeScreen: Polling for new posts')
-      algoFeed.checkForLatest()
+        feed.checkForLatest()
       },
-    [appState, isFocused, store, algoFeed],
+      [appState, isScreenFocused, isPageFocused, store, feed],
     )
 
     const scrollToTop = React.useCallback(() => {
@@ -151,13 +159,13 @@ const AlgoView = observer(() => {
     useFocusEffect(
       React.useCallback(() => {
         const softResetSub = store.onScreenSoftReset(scrollToTop)
-      const feedCleanup = algoFeed.registerListeners()
+        const feedCleanup = feed.registerListeners()
         const pollInterval = setInterval(doPoll, 15e3)
 
         screen('Feed')
         store.log.debug('HomeScreen: Updating feed')
-      if (algoFeed.hasContent) {
+        if (feed.hasContent) {
-        algoFeed.update()
+          feed.update()
         }
 
         return () => {
@@ -165,7 +173,7 @@ const AlgoView = observer(() => {
           softResetSub.remove()
           feedCleanup()
         }
-    }, [store, doPoll, scrollToTop, screen, algoFeed]),
+      }, [store, doPoll, scrollToTop, screen, feed]),
     )
 
     const onPressCompose = React.useCallback(() => {
@@ -174,13 +182,13 @@ const AlgoView = observer(() => {
     }, [store, track])
 
     const onPressTryAgain = React.useCallback(() => {
-    algoFeed.refresh()
+      feed.refresh()
-  }, [algoFeed])
+    }, [feed])
 
     const onPressLoadLatest = React.useCallback(() => {
-    algoFeed.refresh()
+      feed.refresh()
       scrollToTop()
-  }, [algoFeed, scrollToTop])
+    }, [feed, scrollToTop])
 
     return (
       <View style={containerStyle}>
@@ -188,14 +196,14 @@ const AlgoView = observer(() => {
         <Feed
           testID="homeFeed"
           key="default"
-        feed={algoFeed}
+          feed={feed}
           scrollElRef={scrollElRef}
           style={s.hContentRegion}
           showPostFollowBtn
           onPressTryAgain={onPressTryAgain}
           onScroll={onMainScroll}
         />
-      {algoFeed.hasNewLatest && !algoFeed.isRefreshing && (
+        {feed.hasNewLatest && !feed.isRefreshing && (
           <LoadLatestBtn onPress={onPressLoadLatest} />
         )}
         <FAB
@@ -205,100 +213,9 @@ const AlgoView = observer(() => {
         />
       </View>
     )
-})
-
-const FollowingView = observer(() => {
-  const store = useStores()
-  const onMainScroll = useOnMainScroll(store)
-  const {screen, track} = useAnalytics()
-  const scrollElRef = React.useRef<FlatList>(null)
-  const {appState} = useAppState({
-    onForeground: () => doPoll(true),
-  })
-  const isFocused = useIsFocused()
-  const winDim = useWindowDimensions()
-  const containerStyle = React.useMemo(
-    () => ({height: winDim.height - TAB_BAR_HEIGHT}),
-    [winDim],
-  )
-
-  const doPoll = React.useCallback(
-    (knownActive = false) => {
-      if ((!knownActive && appState !== 'active') || !isFocused) {
-        return
-      }
-      if (store.me.mainFeed.isLoading) {
-        return
-      }
-      store.log.debug('HomeScreen: Polling for new posts')
-      store.me.mainFeed.checkForLatest()
   },
-    [appState, isFocused, store],
 )
 
-  const scrollToTop = React.useCallback(() => {
-    scrollElRef.current?.scrollToOffset({offset: 0})
-  }, [scrollElRef])
-
-  useFocusEffect(
-    React.useCallback(() => {
-      const softResetSub = store.onScreenSoftReset(scrollToTop)
-      const feedCleanup = store.me.mainFeed.registerListeners()
-      const pollInterval = setInterval(doPoll, 15e3)
-
-      screen('Feed')
-      store.log.debug('HomeScreen: Updating feed')
-      if (store.me.mainFeed.hasContent) {
-        store.me.mainFeed.update()
-      }
-
-      return () => {
-        clearInterval(pollInterval)
-        softResetSub.remove()
-        feedCleanup()
-      }
-    }, [store, doPoll, scrollToTop, screen]),
-  )
-
-  const onPressCompose = React.useCallback(() => {
-    track('HomeScreen:PressCompose')
-    store.shell.openComposer({})
-  }, [store, track])
-
-  const onPressTryAgain = React.useCallback(() => {
-    store.me.mainFeed.refresh()
-  }, [store])
-
-  const onPressLoadLatest = React.useCallback(() => {
-    store.me.mainFeed.refresh()
-    scrollToTop()
-  }, [store, scrollToTop])
-
-  return (
-    <View style={containerStyle}>
-      {store.shell.isOnboarding && <WelcomeBanner />}
-      <Feed
-        testID="homeFeed"
-        key="default"
-        feed={store.me.mainFeed}
-        scrollElRef={scrollElRef}
-        style={s.hContentRegion}
-        showPostFollowBtn
-        onPressTryAgain={onPressTryAgain}
-        onScroll={onMainScroll}
-      />
-      {store.me.mainFeed.hasNewLatest && !store.me.mainFeed.isRefreshing && (
-        <LoadLatestBtn onPress={onPressLoadLatest} />
-      )}
-      <FAB
-        testID="composeFAB"
-        onPress={onPressCompose}
-        icon={<ComposeIcon2 strokeWidth={1.5} size={29} style={s.white} />}
-      />
-    </View>
-  )
-})
-
 const styles = StyleSheet.create({
   tabBar: {
     position: 'absolute',