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

src/view/com/notifications/Feed.tsx

@@ -1,7 +1,6 @@
 import React from 'react'
 import {observer} from 'mobx-react-lite'
 import {Text, View, FlatList} from 'react-native'
-import {OnNavigateContent} from '../../routes/types'
 import {
   NotificationsViewModel,
   NotificationsViewItemModel,
@@ -10,17 +9,15 @@ import {FeedItem} from './FeedItem'
 
 export const Feed = observer(function Feed({
   view,
-  onNavigateContent,
 }: {
   view: NotificationsViewModel
-  onNavigateContent: OnNavigateContent
 }) {
   // TODO optimize renderItem or FeedItem, we're getting this notice from RN: -prf
   //   VirtualizedList: You have a large list that is slow to update - make sure your
   //   renderItem function renders components that follow React performance best practices
   //   like PureComponent, shouldComponentUpdate, etc
   const renderItem = ({item}: {item: NotificationsViewItemModel}) => (
-    <FeedItem item={item} onNavigateContent={onNavigateContent} />
+    <FeedItem item={item} />
   )
   const onRefresh = () => {
     view.refresh().catch(err => console.error('Failed to refresh', err))

src/view/com/notifications/FeedItem.tsx

@@ -3,44 +3,34 @@ import {observer} from 'mobx-react-lite'
 import {Image, StyleSheet, Text, TouchableOpacity, View} from 'react-native'
 import {AdxUri} from '@adxp/mock-api'
 import {FontAwesomeIcon, Props} from '@fortawesome/react-native-fontawesome'
-import {OnNavigateContent} from '../../routes/types'
 import {NotificationsViewItemModel} from '../../../state/models/notifications-view'
 import {s} from '../../lib/styles'
 import {ago} from '../../lib/strings'
 import {AVIS} from '../../lib/assets'
 import {PostText} from '../post/PostText'
 import {Post} from '../post/Post'
+import {useStores} from '../../../state'
 
 export const FeedItem = observer(function FeedItem({
   item,
-  onNavigateContent,
 }: {
   item: NotificationsViewItemModel
-  onNavigateContent: OnNavigateContent
 }) {
+  const store = useStores()
+
   const onPressOuter = () => {
     if (item.isLike || item.isRepost) {
       const urip = new AdxUri(item.subjectUri)
-      onNavigateContent('PostThread', {
-        name: urip.host,
-        recordKey: urip.recordKey,
-      })
+      store.nav.navigate(`/profile/${urip.host}/post/${urip.recordKey}`)
     } else if (item.isFollow) {
-      onNavigateContent('Profile', {
-        name: item.author.name,
-      })
+      store.nav.navigate(`/profile/${item.author.name}`)
     } else if (item.isReply) {
       const urip = new AdxUri(item.uri)
-      onNavigateContent('PostThread', {
-        name: urip.host,
-        recordKey: urip.recordKey,
-      })
+      store.nav.navigate(`/profile/${urip.host}/post/${urip.recordKey}`)
     }
   }
   const onPressAuthor = () => {
-    onNavigateContent('Profile', {
-      name: item.author.name,
-    })
+    store.nav.navigate(`/profile/${item.author.name}`)
   }
 
   let action = ''
@@ -92,7 +82,7 @@ export const FeedItem = observer(function FeedItem({
       </View>
       {item.isReply ? (
         <View style={s.pt5}>
-          <Post uri={item.uri} onNavigateContent={onNavigateContent} />
+          <Post uri={item.uri} />
         </View>
       ) : (
         <></>