Add state updates after screen changes

zio/stable
Paul Frazee 2022-07-25 14:21:48 -05:00
parent 7f04ac172e
commit 3794eca88e
7 changed files with 171 additions and 52 deletions

View File

@ -1,6 +1,5 @@
import {makeAutoObservable, runInAction} from 'mobx' import {makeAutoObservable, runInAction} from 'mobx'
import {bsky} from '@adxp/mock-api' import {bsky} from '@adxp/mock-api'
import _omit from 'lodash.omit'
import {RootStoreModel} from './root-store' import {RootStoreModel} from './root-store'
import * as apilib from '../lib/api' import * as apilib from '../lib/api'
@ -39,9 +38,22 @@ export class FeedViewItemModel implements bsky.FeedView.FeedItem {
) { ) {
makeAutoObservable(this, {rootStore: false}) makeAutoObservable(this, {rootStore: false})
this._reactKey = reactKey this._reactKey = reactKey
Object.assign(this, _omit(v, 'myState')) this.copy(v)
}
copy(v: bsky.FeedView.FeedItem) {
this.uri = v.uri
this.author = v.author
this.repostedBy = v.repostedBy
this.record = v.record
this.embed = v.embed
this.replyCount = v.replyCount
this.repostCount = v.repostCount
this.likeCount = v.likeCount
this.indexedAt = v.indexedAt
if (v.myState) { if (v.myState) {
Object.assign(this.myState, v.myState) this.myState.hasLiked = v.myState.hasLiked
this.myState.hasReposted = v.myState.hasReposted
} }
} }
@ -85,7 +97,9 @@ export class FeedViewModel implements bsky.FeedView.Response {
hasLoaded = false hasLoaded = false
error = '' error = ''
params: bsky.FeedView.Params params: bsky.FeedView.Params
_loadPromise: Promise<void> | undefined
_loadMorePromise: Promise<void> | undefined _loadMorePromise: Promise<void> | undefined
_updatePromise: Promise<void> | undefined
// data // data
feed: FeedViewItemModel[] = [] feed: FeedViewItemModel[] = []
@ -97,6 +111,7 @@ export class FeedViewModel implements bsky.FeedView.Response {
rootStore: false, rootStore: false,
params: false, params: false,
_loadMorePromise: false, _loadMorePromise: false,
_updatePromise: false,
}, },
{autoBind: true}, {autoBind: true},
) )
@ -125,33 +140,52 @@ export class FeedViewModel implements bsky.FeedView.Response {
// public api // public api
// = // =
async setup() { /**
if (this._loadMorePromise) { * Load for first render
return this._loadMorePromise */
} async setup(isRefreshing = false) {
if (this.hasContent) { if (this._loadPromise) {
await this._refresh() return this._loadPromise
} else {
await this._initialLoad()
} }
await this._pendingWork()
this._loadPromise = this._initialLoad(isRefreshing)
await this._loadPromise
this._loadPromise = undefined
} }
/**
* Reset and load
*/
async refresh() { async refresh() {
if (this._loadMorePromise) { return this.setup(true)
return this._loadMorePromise
}
await this._refresh()
} }
/**
* Load more posts to the end of the feed
*/
async loadMore() { async loadMore() {
if (this._loadMorePromise) { if (this._loadMorePromise) {
return this._loadMorePromise return this._loadMorePromise
} }
await this._pendingWork()
this._loadMorePromise = this._loadMore() this._loadMorePromise = this._loadMore()
await this._loadMorePromise await this._loadMorePromise
this._loadMorePromise = undefined this._loadMorePromise = undefined
} }
/**
* Update content in-place
*/
async update() {
if (this._updatePromise) {
return this._updatePromise
}
await this._pendingWork()
this._updatePromise = this._update()
await this._updatePromise
this._updatePromise = undefined
}
// state transitions // state transitions
// = // =
@ -171,9 +205,21 @@ export class FeedViewModel implements bsky.FeedView.Response {
// loader functions // loader functions
// = // =
private async _initialLoad() { private async _pendingWork() {
this._xLoading() if (this._loadPromise) {
await new Promise(r => setTimeout(r, 1e3)) // DEBUG await this._loadPromise
}
if (this._loadMorePromise) {
await this._loadMorePromise
}
if (this._updatePromise) {
await this._updatePromise
}
}
private async _initialLoad(isRefreshing = false) {
this._xLoading(isRefreshing)
await new Promise(r => setTimeout(r, 250)) // DEBUG
try { try {
const res = (await this.rootStore.api.mainPds.view( const res = (await this.rootStore.api.mainPds.view(
'blueskyweb.xyz:FeedView', 'blueskyweb.xyz:FeedView',
@ -188,7 +234,7 @@ export class FeedViewModel implements bsky.FeedView.Response {
private async _loadMore() { private async _loadMore() {
this._xLoading() this._xLoading()
await new Promise(r => setTimeout(r, 1e3)) // DEBUG await new Promise(r => setTimeout(r, 250)) // DEBUG
try { try {
const params = Object.assign({}, this.params, { const params = Object.assign({}, this.params, {
before: this.loadMoreCursor, before: this.loadMoreCursor,
@ -204,19 +250,37 @@ export class FeedViewModel implements bsky.FeedView.Response {
} }
} }
private async _refresh() { private async _update() {
this._xLoading(true) this._xLoading()
// TODO: refetch and update items await new Promise(r => setTimeout(r, 250)) // DEBUG
await new Promise(r => setTimeout(r, 1e3)) // DEBUG let numToFetch = this.feed.length
this._xIdle() let cursor = undefined
try {
do {
const res = (await this.rootStore.api.mainPds.view(
'blueskyweb.xyz:FeedView',
{
before: cursor,
limit: Math.min(numToFetch, 100),
},
)) as bsky.FeedView.Response
if (res.feed.length === 0) {
break // sanity check
}
this._updateAll(res)
numToFetch -= res.feed.length
cursor = this.feed[res.feed.length - 1].indexedAt
console.log(numToFetch, cursor, res.feed.length)
} while (numToFetch > 0)
this._xIdle()
} catch (e: any) {
this._xIdle(`Failed to update feed: ${e.toString()}`)
}
} }
private _replaceAll(res: bsky.FeedView.Response) { private _replaceAll(res: bsky.FeedView.Response) {
this.feed.length = 0 this.feed.length = 0
let counter = 0 this._appendAll(res)
for (const item of res.feed) {
this._append(counter++, item)
}
} }
private _appendAll(res: bsky.FeedView.Response) { private _appendAll(res: bsky.FeedView.Response) {
@ -230,4 +294,18 @@ export class FeedViewModel implements bsky.FeedView.Response {
// TODO: validate .record // TODO: validate .record
this.feed.push(new FeedViewItemModel(this.rootStore, `item-${keyId}`, item)) this.feed.push(new FeedViewItemModel(this.rootStore, `item-${keyId}`, item))
} }
private _updateAll(res: bsky.FeedView.Response) {
for (const item of res.feed) {
const existingItem = this.feed.find(
// this find function has a key subtley- the indexedAt comparison
// the reason for this is reposts: they set the URI of the original post, not of the repost record
// the indexedAt time will be for the repost however, so we use that to help us
item2 => item.uri === item2.uri && item.indexedAt === item2.indexedAt,
)
if (existingItem) {
existingItem.copy(item)
}
}
}
} }

View File

@ -163,19 +163,35 @@ export class PostThreadViewModel {
// public api // public api
// = // =
/**
* Load for first render
*/
async setup() { async setup() {
if (!this.resolvedUri) { if (!this.resolvedUri) {
await this._resolveUri() await this._resolveUri()
} }
if (this.hasContent) { if (this.hasContent) {
await this._refresh() await this.update()
} else { } else {
await this._initialLoad() await this._load()
} }
} }
/**
* Reset and load
*/
async refresh() { async refresh() {
await this._refresh() await this._load(true)
}
/**
* Update content in-place
*/
async update() {
// NOTE: it currently seems that a full load-and-replace works fine for this
// if the UI loses its place or has jarring re-arrangements, replace this
// with a more in-place update
this._load()
} }
// state transitions // state transitions
@ -207,8 +223,8 @@ export class PostThreadViewModel {
}) })
} }
private async _initialLoad() { private async _load(isRefreshing = false) {
this._xLoading() this._xLoading(isRefreshing)
try { try {
const res = (await this.rootStore.api.mainPds.view( const res = (await this.rootStore.api.mainPds.view(
'blueskyweb.xyz:PostThreadView', 'blueskyweb.xyz:PostThreadView',
@ -221,13 +237,6 @@ export class PostThreadViewModel {
} }
} }
private async _refresh() {
this._xLoading(true)
// TODO: refetch and update items
await new Promise(r => setTimeout(r, 250)) // DEBUG
this._xIdle()
}
private _replaceAll(res: bsky.PostThreadView.Response) { private _replaceAll(res: bsky.PostThreadView.Response) {
// TODO: validate .record // TODO: validate .record
const keyGen = reactKeyGenerator() const keyGen = reactKeyGenerator()

View File

@ -27,7 +27,9 @@ export const Feed = observer(function Feed({
} }
return ( return (
<View> <View>
{feed.isLoading && !feed.isRefreshing && <Text>Loading...</Text>} {feed.isLoading && !feed.isRefreshing && !feed.hasContent && (
<Text>Loading...</Text>
)}
{feed.hasError && <Text>{feed.error}</Text>} {feed.hasError && <Text>{feed.error}</Text>}
{feed.hasContent && ( {feed.hasContent && (
<FlatList <FlatList

View File

@ -1,6 +1,7 @@
import React, {useState, useEffect} from 'react' import React, {useState, useEffect} from 'react'
import {observer} from 'mobx-react-lite' import {observer} from 'mobx-react-lite'
import {ActivityIndicator, FlatList, Text, View} from 'react-native' import {ActivityIndicator, FlatList, Text, View} from 'react-native'
import {useFocusEffect} from '@react-navigation/native'
import {OnNavigateContent} from '../../routes/types' import {OnNavigateContent} from '../../routes/types'
import { import {
PostThreadViewModel, PostThreadViewModel,
@ -9,6 +10,8 @@ import {
import {useStores} from '../../../state' import {useStores} from '../../../state'
import {PostThreadItem} from './PostThreadItem' import {PostThreadItem} from './PostThreadItem'
const UPDATE_DELAY = 2e3 // wait 2s before refetching the thread for updates
export const PostThread = observer(function PostThread({ export const PostThread = observer(function PostThread({
uri, uri,
onNavigateContent, onNavigateContent,
@ -18,6 +21,7 @@ export const PostThread = observer(function PostThread({
}) { }) {
const store = useStores() const store = useStores()
const [view, setView] = useState<PostThreadViewModel | undefined>() const [view, setView] = useState<PostThreadViewModel | undefined>()
const [lastUpdate, setLastUpdate] = useState<number>(Date.now())
useEffect(() => { useEffect(() => {
if (view?.params.uri === uri) { if (view?.params.uri === uri) {
@ -30,6 +34,13 @@ export const PostThread = observer(function PostThread({
newView.setup().catch(err => console.error('Failed to fetch thread', err)) newView.setup().catch(err => console.error('Failed to fetch thread', err))
}, [uri, view?.params.uri, store]) }, [uri, view?.params.uri, store])
useFocusEffect(() => {
if (Date.now() - lastUpdate > UPDATE_DELAY) {
view?.update()
setLastUpdate(Date.now())
}
})
// loading // loading
// = // =
if ( if (

View File

@ -11,19 +11,32 @@ export const Profile = ({
route, route,
}: RootTabsScreenProps<'Profile'>) => { }: RootTabsScreenProps<'Profile'>) => {
const store = useStores() const store = useStores()
const [hasSetup, setHasSetup] = useState<string>('')
const [feedView, setFeedView] = useState<FeedViewModel | undefined>() const [feedView, setFeedView] = useState<FeedViewModel | undefined>()
useEffect(() => { useEffect(() => {
if (feedView?.params.author === route.params.name) { const author = route.params.name
console.log('Profile feed view') if (feedView?.params.author === author) {
return // no change needed? or trigger refresh? return // no change needed? or trigger refresh?
} }
console.log('Fetching profile feed view', route.params.name) console.log('Fetching profile feed', author)
const newFeedView = new FeedViewModel(store, {author: route.params.name}) const newFeedView = new FeedViewModel(store, {author})
setFeedView(newFeedView) setFeedView(newFeedView)
newFeedView.setup().catch(err => console.error('Failed to fetch feed', err)) newFeedView
.setup()
.catch(err => console.error('Failed to fetch feed', err))
.then(() => setHasSetup(author))
}, [route.params.name, feedView?.params.author, store]) }, [route.params.name, feedView?.params.author, store])
useEffect(() => {
return navigation.addListener('focus', () => {
if (hasSetup === feedView?.params.author) {
console.log('Updating profile feed', hasSetup)
feedView?.update()
}
})
}, [navigation, feedView, hasSetup])
const onNavigateContent = (screen: string, props: Record<string, string>) => { const onNavigateContent = (screen: string, props: Record<string, string>) => {
// @ts-ignore it's up to the callers to supply correct params -prf // @ts-ignore it's up to the callers to supply correct params -prf
navigation.push(screen, props) navigation.push(screen, props)

View File

@ -1,4 +1,4 @@
import React, {useEffect, useLayoutEffect} from 'react' import React, {useState, useEffect, useLayoutEffect} from 'react'
import {Image, StyleSheet, TouchableOpacity, View} from 'react-native' import {Image, StyleSheet, TouchableOpacity, View} from 'react-native'
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
import {Shell} from '../../shell' import {Shell} from '../../shell'
@ -8,10 +8,11 @@ import {useStores} from '../../../state'
import {AVIS} from '../../lib/assets' import {AVIS} from '../../lib/assets'
export function Home({navigation}: RootTabsScreenProps<'HomeTab'>) { export function Home({navigation}: RootTabsScreenProps<'HomeTab'>) {
const [hasSetup, setHasSetup] = useState<boolean>(false)
const store = useStores() const store = useStores()
useEffect(() => { useEffect(() => {
console.log('Fetching home feed') console.log('Fetching home feed')
store.homeFeed.setup() store.homeFeed.setup().then(() => setHasSetup(true))
}, [store.homeFeed]) }, [store.homeFeed])
const onNavigateContent = (screen: string, props: Record<string, string>) => { const onNavigateContent = (screen: string, props: Record<string, string>) => {
@ -19,6 +20,15 @@ export function Home({navigation}: RootTabsScreenProps<'HomeTab'>) {
navigation.navigate(screen, props) navigation.navigate(screen, props)
} }
useEffect(() => {
return navigation.addListener('focus', () => {
if (hasSetup) {
console.log('Updating home feed')
store.homeFeed.update()
}
})
}, [navigation, store.homeFeed, hasSetup])
useLayoutEffect(() => { useLayoutEffect(() => {
navigation.setOptions({ navigation.setOptions({
headerShown: true, headerShown: true,

View File

@ -1,17 +1,13 @@
Paul's todo list Paul's todo list
- Feed view - Feed view
- Refresh
- Share btn - Share btn
- Thread view - Thread view
- Refresh
- Share btn - Share btn
- Profile view - Profile view
- Refresh
- Follow / Unfollow - Follow / Unfollow
- Badges - Badges
- Composer - Composer
- Refresh original view after reply
- Check on navigation stack during a bunch of replies - Check on navigation stack during a bunch of replies
- Search view - Search view
- * - *