Update feed component to use flatlist for lazy-loading scrolling; update feed-view model to match loading needs
parent
8131158c0e
commit
19c694bc60
|
@ -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))
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
)
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in New Issue