Add state updates after screen changes

src/view/com/feed/Feed.tsx

@@ -27,7 +27,9 @@ export const Feed = observer(function Feed({
   }
   return (
     <View>
-      {feed.isLoading && !feed.isRefreshing && <Text>Loading...</Text>}
+      {feed.isLoading && !feed.isRefreshing && !feed.hasContent && (
+        <Text>Loading...</Text>
+      )}
       {feed.hasError && <Text>{feed.error}</Text>}
       {feed.hasContent && (
         <FlatList

src/view/com/post-thread/PostThread.tsx

@@ -1,6 +1,7 @@
 import React, {useState, useEffect} from 'react'
 import {observer} from 'mobx-react-lite'
 import {ActivityIndicator, FlatList, Text, View} from 'react-native'
+import {useFocusEffect} from '@react-navigation/native'
 import {OnNavigateContent} from '../../routes/types'
 import {
   PostThreadViewModel,
@@ -9,6 +10,8 @@ import {
 import {useStores} from '../../../state'
 import {PostThreadItem} from './PostThreadItem'
 
+const UPDATE_DELAY = 2e3 // wait 2s before refetching the thread for updates
+
 export const PostThread = observer(function PostThread({
   uri,
   onNavigateContent,
@@ -18,6 +21,7 @@ export const PostThread = observer(function PostThread({
 }) {
   const store = useStores()
   const [view, setView] = useState<PostThreadViewModel | undefined>()
+  const [lastUpdate, setLastUpdate] = useState<number>(Date.now())
 
   useEffect(() => {
     if (view?.params.uri === uri) {
@@ -30,6 +34,13 @@ export const PostThread = observer(function PostThread({
     newView.setup().catch(err => console.error('Failed to fetch thread', err))
   }, [uri, view?.params.uri, store])
 
+  useFocusEffect(() => {
+    if (Date.now() - lastUpdate > UPDATE_DELAY) {
+      view?.update()
+      setLastUpdate(Date.now())
+    }
+  })
+
   // loading
   // =
   if (

src/view/screens/stacks/Profile.tsx

@@ -11,19 +11,32 @@ export const Profile = ({
   route,
 }: RootTabsScreenProps<'Profile'>) => {
   const store = useStores()
+  const [hasSetup, setHasSetup] = useState<string>('')
   const [feedView, setFeedView] = useState<FeedViewModel | undefined>()
 
   useEffect(() => {
-    if (feedView?.params.author === route.params.name) {
-      console.log('Profile feed view')
+    const author = route.params.name
+    if (feedView?.params.author === author) {
       return // no change needed? or trigger refresh?
     }
-    console.log('Fetching profile feed view', route.params.name)
-    const newFeedView = new FeedViewModel(store, {author: route.params.name})
+    console.log('Fetching profile feed', author)
+    const newFeedView = new FeedViewModel(store, {author})
     setFeedView(newFeedView)
-    newFeedView.setup().catch(err => console.error('Failed to fetch feed', err))
+    newFeedView
+      .setup()
+      .catch(err => console.error('Failed to fetch feed', err))
+      .then(() => setHasSetup(author))
   }, [route.params.name, feedView?.params.author, store])
 
+  useEffect(() => {
+    return navigation.addListener('focus', () => {
+      if (hasSetup === feedView?.params.author) {
+        console.log('Updating profile feed', hasSetup)
+        feedView?.update()
+      }
+    })
+  }, [navigation, feedView, hasSetup])
+
   const onNavigateContent = (screen: string, props: Record<string, string>) => {
     // @ts-ignore it's up to the callers to supply correct params -prf
     navigation.push(screen, props)

src/view/screens/tabroots/Home.tsx

@@ -1,4 +1,4 @@
-import React, {useEffect, useLayoutEffect} from 'react'
+import React, {useState, useEffect, useLayoutEffect} from 'react'
 import {Image, StyleSheet, TouchableOpacity, View} from 'react-native'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {Shell} from '../../shell'
@@ -8,10 +8,11 @@ import {useStores} from '../../../state'
 import {AVIS} from '../../lib/assets'
 
 export function Home({navigation}: RootTabsScreenProps<'HomeTab'>) {
+  const [hasSetup, setHasSetup] = useState<boolean>(false)
   const store = useStores()
   useEffect(() => {
     console.log('Fetching home feed')
-    store.homeFeed.setup()
+    store.homeFeed.setup().then(() => setHasSetup(true))
   }, [store.homeFeed])
 
   const onNavigateContent = (screen: string, props: Record<string, string>) => {
@@ -19,6 +20,15 @@ export function Home({navigation}: RootTabsScreenProps<'HomeTab'>) {
     navigation.navigate(screen, props)
   }
 
+  useEffect(() => {
+    return navigation.addListener('focus', () => {
+      if (hasSetup) {
+        console.log('Updating home feed')
+        store.homeFeed.update()
+      }
+    })
+  }, [navigation, store.homeFeed, hasSetup])
+
   useLayoutEffect(() => {
     navigation.setOptions({
       headerShown: true,