Implement working screen-state management and remove extraneous loads

src/view/screens/Notifications.tsx

@@ -1,65 +1,32 @@
-import React, {useState, useEffect, useLayoutEffect} from 'react'
-import {Image, StyleSheet, TouchableOpacity, View} from 'react-native'
-import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
+import React, {useState, useEffect} from 'react'
+import {View} from 'react-native'
 import {Feed} from '../com/notifications/Feed'
 import {useStores} from '../../state'
-import {AVIS} from '../lib/assets'
+import {NotificationsViewModel} from '../../state/models/notifications-view'
 import {ScreenParams} from '../routes'
-import {useLoadEffect} from '../lib/navigation'
 
-export const Notifications = ({params}: ScreenParams) => {
+export const Notifications = ({visible}: ScreenParams) => {
   const [hasSetup, setHasSetup] = useState<boolean>(false)
+  const [notesView, setNotesView] = useState<
+    NotificationsViewModel | undefined
+  >()
   const store = useStores()
-  useLoadEffect(() => {
-    store.nav.setTitle('Notifications')
-    console.log('Fetching notifications feed')
-    store.notesFeed.setup().then(() => setHasSetup(true))
-  }, [store.notesFeed])
 
-  // TODO
-  // useEffect(() => {
-  //   return navigation.addListener('focus', () => {
-  //     if (hasSetup) {
-  //       console.log('Updating notifications feed')
-  //       store.notesFeed.update()
-  //     }
-  //   })
-  // }, [navigation, store.notesFeed, hasSetup])
+  useEffect(() => {
+    if (!visible) {
+      return
+    }
+    if (hasSetup) {
+      console.log('Updating notifications feed')
+      notesView?.update()
+    } else {
+      store.nav.setTitle('Notifications')
+      console.log('Fetching notifications feed')
+      const newNotesView = new NotificationsViewModel(store, {})
+      setNotesView(newNotesView)
+      newNotesView.setup().then(() => setHasSetup(true))
+    }
+  }, [visible, store])
 
-  // TODO
-  // useLayoutEffect(() => {
-  //   navigation.setOptions({
-  //     headerShown: true,
-  //     headerTitle: 'Notifications',
-  //     headerLeft: () => (
-  //       <TouchableOpacity
-  //         onPress={() => navigation.push('Profile', {name: 'alice.com'})}>
-  //         <Image source={AVIS['alice.com']} style={styles.avi} />
-  //       </TouchableOpacity>
-  //     ),
-  //     headerRight: () => (
-  //       <TouchableOpacity
-  //         onPress={() => {
-  //           navigation.push('Composer', {})
-  //         }}>
-  //         <FontAwesomeIcon icon="plus" style={{color: '#006bf7'}} />
-  //       </TouchableOpacity>
-  //     ),
-  //   })
-  // }, [navigation])
-
-  return (
-    <View>
-      <Feed view={store.notesFeed} />
-    </View>
-  )
+  return <View>{notesView && <Feed view={notesView} />}</View>
 }
-
-const styles = StyleSheet.create({
-  avi: {
-    width: 20,
-    height: 20,
-    borderRadius: 10,
-    resizeMode: 'cover',
-  },
-})