New navigation model (#1)

* Flatten all routing into a single stack

* Replace router with custom implementation

* Add shell header and titles

* Add tab selector

* Add back/forward history menus on longpress

* Fix: don't modify state during render

* Add refresh() to navigation and reroute navigations to the current location to refresh instead of add to history

* Cache screens during navigation to maintain scroll position and improve load-time for renders

1 files changed, 65 insertions, 0 deletions

diff --git a/src/view/screens/Home.tsx b/src/view/screens/Home.tsx
new file mode 100644
index 000000000..a94ffd2f7
--- /dev/null
+++ b/src/view/screens/Home.tsx
@@ -0,0 +1,65 @@
+import React, {useState, useEffect, useLayoutEffect} from 'react'
+import {Image, StyleSheet, TouchableOpacity, View} from 'react-native'
+import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
+import {Feed} from '../com/feed/Feed'
+import {useStores} from '../../state'
+import {useLoadEffect} from '../lib/navigation'
+import {AVIS} from '../lib/assets'
+import {ScreenParams} from '../routes'
+
+export function Home({params}: ScreenParams) {
+  const [hasSetup, setHasSetup] = useState<boolean>(false)
+  const store = useStores()
+  useLoadEffect(() => {
+    store.nav.setTitle('Home')
+    console.log('Fetching home feed')
+    store.homeFeed.setup().then(() => setHasSetup(true))
+  }, [store.nav, store.homeFeed])
+
+  // TODO
+  // useEffect(() => {
+  //   return navigation.addListener('focus', () => {
+  //     if (hasSetup) {
+  //       console.log('Updating home feed')
+  //       store.homeFeed.update()
+  //     }
+  //   })
+  // }, [navigation, store.homeFeed, hasSetup])
+
+  // TODO
+  // useLayoutEffect(() => {
+  //   navigation.setOptions({
+  //     headerShown: true,
+  //     headerTitle: 'V I B E',
+  //     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 feed={store.homeFeed} />
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  avi: {
+    width: 20,
+    height: 20,
+    borderRadius: 10,
+    resizeMode: 'cover',
+  },
+})