Update feed component to use flatlist for lazy-loading scrolling; update feed-view model to match loading needs

zio/stable
Paul Frazee 2022-07-20 11:07:39 -05:00
parent 8131158c0e
commit 19c694bc60
3 changed files with 126 additions and 29 deletions

View File

@ -25,15 +25,22 @@ export class FeedViewItemModel implements bsky.FeedView.FeedItem {
}
export class FeedViewModel implements bsky.FeedView.Response {
state = 'idle'
isLoading = false
isRefreshing = false
hasLoaded = false
error = ''
params: bsky.FeedView.Params
feed: FeedViewItemModel[] = []
_loadMorePromise: Promise<void> | undefined
constructor(public rootStore: RootStoreModel, params: bsky.FeedView.Params) {
makeAutoObservable(
this,
{rootStore: false, params: false},
{
rootStore: false,
params: false,
_loadMorePromise: false,
},
{autoBind: true},
)
this.params = params
@ -47,52 +54,126 @@ export class FeedViewModel implements bsky.FeedView.Response {
return this.error !== ''
}
get isLoading() {
return this.state === 'loading'
}
get isEmpty() {
return !this.hasContent && !this.hasError && !this.isLoading
return this.hasLoaded && !this.hasContent
}
async fetch() {
get loadMoreCursor() {
if (this.hasContent) {
await this.updateContent()
return this.feed[this.feed.length - 1].indexedAt
}
return undefined
}
// public api
// =
async setup() {
if (this._loadMorePromise) {
return this._loadMorePromise
}
if (this.hasContent) {
await this._refresh()
} else {
await this.initialLoad()
await this._initialLoad()
}
}
async initialLoad() {
this.state = 'loading'
async refresh() {
if (this._loadMorePromise) {
return this._loadMorePromise
}
await this._refresh()
}
async loadMore() {
if (this._loadMorePromise) {
return this._loadMorePromise
}
this._loadMorePromise = this._loadMore()
await this._loadMorePromise
this._loadMorePromise = undefined
}
// state transitions
// =
private _xLoading(isRefreshing = false) {
this.isLoading = true
this.isRefreshing = isRefreshing
this.error = ''
}
private _xIdle(err: string = '') {
this.isLoading = false
this.isRefreshing = false
this.hasLoaded = true
this.error = err
}
// loader functions
// =
private async _initialLoad() {
console.log('_initialLoad()')
this._xLoading()
await new Promise(r => setTimeout(r, 1e3)) // DEBUG
try {
const res = (await this.rootStore.api.mainPds.view(
'blueskyweb.xyz:FeedView',
this.params,
)) as bsky.FeedView.Response
this._replaceAll(res)
runInAction(() => {
this.state = 'idle'
})
this._xIdle()
} catch (e: any) {
runInAction(() => {
this.state = 'error'
this.error = `Failed to load feed: ${e.toString()}`
})
this._xIdle(`Failed to load feed: ${e.toString()}`)
}
}
async updateContent() {
private async _loadMore() {
console.log('_loadMore()')
this._xLoading()
await new Promise(r => setTimeout(r, 1e3)) // DEBUG
try {
const params = Object.assign({}, this.params, {
before: this.loadMoreCursor,
})
const res = (await this.rootStore.api.mainPds.view(
'blueskyweb.xyz:FeedView',
params,
)) as bsky.FeedView.Response
this._appendAll(res)
this._xIdle()
} catch (e: any) {
this._xIdle(`Failed to load feed: ${e.toString()}`)
}
}
private async _refresh() {
console.log('_refresh()')
this._xLoading(true)
// TODO: refetch and update items
await new Promise(r => setTimeout(r, 1e3)) // DEBUG
this._xIdle()
}
private _replaceAll(res: bsky.FeedView.Response) {
this.feed.length = 0
let counter = 0
for (const item of res.feed) {
// TODO: validate .record
this.feed.push(new FeedViewItemModel(`item-${counter++}`, item))
this._append(counter++, item)
}
}
private _appendAll(res: bsky.FeedView.Response) {
let counter = this.feed.length
for (const item of res.feed) {
this._append(counter++, item)
}
}
private _append(keyId: number, item: bsky.FeedView.FeedItem) {
// TODO: validate .record
this.feed.push(new FeedViewItemModel(`item-${keyId}`, item))
}
}

View File

@ -1,16 +1,32 @@
import React from 'react'
import {observer} from 'mobx-react-lite'
import {Text, View} from 'react-native'
import {FeedViewModel} from '../../state/models/feed-view'
import {observer, Observer} from 'mobx-react-lite'
import {Text, View, FlatList} from 'react-native'
import {FeedViewModel, FeedViewItemModel} from '../../state/models/feed-view'
import {FeedItem} from './FeedItem'
export const Feed = observer(function Feed({feed}: {feed: FeedViewModel}) {
const renderItem = ({item}: {item: FeedViewItemModel}) => (
<Observer>{() => <FeedItem item={item} />}</Observer>
)
const onRefresh = () => {
feed.refresh().catch(err => console.error('Failed to refresh', err))
}
const onEndReached = () => {
feed.loadMore().catch(err => console.error('Failed to load more', err))
}
return (
<View>
{feed.isLoading && <Text>Loading...</Text>}
{feed.isLoading && !feed.isRefreshing && <Text>Loading...</Text>}
{feed.hasError && <Text>{feed.error}</Text>}
{feed.hasContent &&
feed.feed.map(item => <FeedItem key={item.key} item={item} />)}
{feed.hasContent && (
<FlatList
data={feed.feed}
renderItem={renderItem}
refreshing={feed.isRefreshing}
onRefresh={onRefresh}
onEndReached={onEndReached}
/>
)}
{feed.isEmpty && <Text>This feed is empty!</Text>}
</View>
)

View File

@ -9,7 +9,7 @@ export function Home(/*{navigation}: RootTabsScreenProps<'Home'>*/) {
const store = useStores()
useEffect(() => {
console.log('Fetching home feed')
store.homeFeed.fetch()
store.homeFeed.setup()
}, [store.homeFeed])
return (
<Shell>