Improvements to notifications screen [APP-520] (#501)

* Refresh or sync notifications when the tab is navigated to

* Fix to bad textnode render

* Speed up initial session load

* Fix lint

* Restore updateSessionState() on session resumption

1 files changed, 22 insertions, 0 deletions

diff --git a/src/view/screens/Notifications.tsx b/src/view/screens/Notifications.tsx
index 3e34a9fab..d93666aa8 100644
--- a/src/view/screens/Notifications.tsx
+++ b/src/view/screens/Notifications.tsx
@@ -13,6 +13,7 @@ import {InvitedUsers} from '../com/notifications/InvitedUsers'
 import {LoadLatestBtn} from 'view/com/util/load-latest/LoadLatestBtn'
 import {useStores} from 'state/index'
 import {useOnMainScroll} from 'lib/hooks/useOnMainScroll'
+import {useTabFocusEffect} from 'lib/hooks/useTabFocusEffect'
 import {s} from 'lib/styles'
 import {useAnalytics} from 'lib/analytics'
 
@@ -58,6 +59,27 @@ export const NotificationsScreen = withAuthRequired(
         }
       }, [store, screen, onPressLoadLatest]),
     )
+    useTabFocusEffect(
+      'Notifications',
+      React.useCallback(
+        isInside => {
+          // on mobile:
+          // fires with `isInside=true` when the user navigates to the root tab
+          // but not when the user goes back to the screen by pressing back
+          // on web:
+          // essentially equivalent to useFocusEffect because we dont used tabbed
+          // navigation
+          if (isInside) {
+            if (store.me.notifications.unreadCount > 0) {
+              store.me.notifications.refresh()
+            } else {
+              store.me.notifications.syncQueue()
+            }
+          }
+        },
+        [store],
+      ),
+    )
 
     return (
       <View testID="notificationsScreen" style={s.hContentRegion}>