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, 58 insertions, 0 deletions

diff --git a/src/view/screens/Profile.tsx b/src/view/screens/Profile.tsx
new file mode 100644
index 000000000..84ff63f5a
--- /dev/null
+++ b/src/view/screens/Profile.tsx
@@ -0,0 +1,58 @@
+import React, {useState, useEffect} from 'react'
+import {View, StyleSheet} from 'react-native'
+import {FeedViewModel} from '../../state/models/feed-view'
+import {useStores} from '../../state'
+import {ProfileHeader} from '../com/profile/ProfileHeader'
+import {Feed} from '../com/feed/Feed'
+import {ScreenParams} from '../routes'
+import {useLoadEffect} from '../lib/navigation'
+
+export const Profile = ({params}: ScreenParams) => {
+  const store = useStores()
+  const [hasSetup, setHasSetup] = useState<string>('')
+  const [feedView, setFeedView] = useState<FeedViewModel | undefined>()
+
+  useLoadEffect(() => {
+    const author = params.name
+    if (feedView?.params.author === author) {
+      return // no change needed? or trigger refresh?
+    }
+    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))
+      .then(() => {
+        setHasSetup(author)
+        store.nav.setTitle(author)
+      })
+  }, [params.name, feedView?.params.author, store])
+
+  // TODO
+  // useEffect(() => {
+  //   return navigation.addListener('focus', () => {
+  //     if (hasSetup === feedView?.params.author) {
+  //       console.log('Updating profile feed', hasSetup)
+  //       feedView?.update()
+  //     }
+  //   })
+  // }, [navigation, feedView, hasSetup])
+
+  return (
+    <View style={styles.container}>
+      <ProfileHeader user={params.name} />
+      <View style={styles.feed}>{feedView && <Feed feed={feedView} />}</View>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'column',
+    height: '100%',
+  },
+  feed: {
+    flex: 1,
+  },
+})