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
This commit is contained in:
parent
d1470bad66
commit
97f52b6a03
57 changed files with 1382 additions and 1159 deletions
58
src/view/screens/Profile.tsx
Normal file
58
src/view/screens/Profile.tsx
Normal file
|
@ -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,
|
||||
},
|
||||
})
|
Loading…
Add table
Add a link
Reference in a new issue