diff options
| -rw-r--r-- | src/state/models/reposted-by-view.ts | 88 | ||||
| -rw-r--r-- | src/view/com/post-thread/PostRepostedBy.tsx | 71 |
2 files changed, 73 insertions, 86 deletions
diff --git a/src/state/models/reposted-by-view.ts b/src/state/models/reposted-by-view.ts index 1ded30976..1de6b7c58 100644 --- a/src/state/models/reposted-by-view.ts +++ b/src/state/models/reposted-by-view.ts @@ -1,31 +1,11 @@ import {makeAutoObservable, runInAction} from 'mobx' import {AtUri} from '../../third-party/uri' -import { - AppBskyFeedGetRepostedBy as GetRepostedBy, - AppBskySystemDeclRef, -} from '@atproto/api' -type DeclRef = AppBskySystemDeclRef.Main +import {AppBskyFeedGetRepostedBy as GetRepostedBy} from '@atproto/api' import {RootStoreModel} from './root-store' -export class RepostedByViewItemModel implements GetRepostedBy.RepostedBy { - // ui state - _reactKey: string = '' +const PAGE_SIZE = 30 - // data - did: string = '' - handle: string = '' - displayName: string = '' - avatar?: string - declaration: DeclRef = {cid: '', actorType: ''} - createdAt?: string - indexedAt: string = '' - - constructor(reactKey: string, v: RepostedByItem) { - makeAutoObservable(this) - this._reactKey = reactKey - Object.assign(this, v) - } -} +export type RepostedByItem = GetRepostedBy.RepostedBy export class RepostedByViewModel { // state @@ -35,10 +15,13 @@ export class RepostedByViewModel { error = '' resolvedUri = '' params: GetRepostedBy.QueryParams + hasMore = true + loadMoreCursor?: string + private _loadMorePromise: Promise<void> | undefined // data uri: string = '' - repostedBy: RepostedByViewItemModel[] = [] + repostedBy: RepostedByItem[] = [] constructor( public rootStore: RootStoreModel, @@ -70,19 +53,20 @@ export class RepostedByViewModel { // public api // = - async setup() { - if (!this.resolvedUri) { - await this._resolveUri() - } - await this._fetch() - } - async refresh() { - await this._fetch(true) + return this.loadMore(true) } - async loadMore() { - // TODO + async loadMore(isRefreshing = false) { + if (this._loadMorePromise) { + return this._loadMorePromise + } + if (!this.resolvedUri) { + await this._resolveUri() + } + this._loadMorePromise = this._loadMore(isRefreshing) + await this._loadMorePromise + this._loadMorePromise = undefined } // state transitions @@ -121,34 +105,28 @@ export class RepostedByViewModel { }) } - private async _fetch(isRefreshing = false) { + private async _loadMore(isRefreshing = false) { this._xLoading(isRefreshing) try { - const res = await this.rootStore.api.app.bsky.feed.getRepostedBy( - Object.assign({}, this.params, {uri: this.resolvedUri}), - ) - this._replaceAll(res) + const params = Object.assign({}, this.params, { + uri: this.resolvedUri, + limit: PAGE_SIZE, + before: this.loadMoreCursor, + }) + if (this.isRefreshing) { + this.repostedBy = [] + } + const res = await this.rootStore.api.app.bsky.feed.getRepostedBy(params) + await this._appendAll(res) this._xIdle() } catch (e: any) { this._xIdle(e) } } - private async _refresh() { - this._xLoading(true) - // TODO: refetch and update items - this._xIdle() - } - - private _replaceAll(res: GetRepostedBy.Response) { - this.repostedBy.length = 0 - let counter = 0 - for (const item of res.data.repostedBy) { - this._append(counter++, item) - } - } - - private _append(keyId: number, item: RepostedByItem) { - this.repostedBy.push(new RepostedByViewItemModel(`item-${keyId}`, item)) + private _appendAll(res: GetRepostedBy.Response) { + this.loadMoreCursor = res.data.cursor + this.hasMore = !!this.loadMoreCursor + this.repostedBy = this.repostedBy.concat(res.data.repostedBy) } } diff --git a/src/view/com/post-thread/PostRepostedBy.tsx b/src/view/com/post-thread/PostRepostedBy.tsx index 37ff3ed68..31c60bbdd 100644 --- a/src/view/com/post-thread/PostRepostedBy.tsx +++ b/src/view/com/post-thread/PostRepostedBy.tsx @@ -3,7 +3,7 @@ import {observer} from 'mobx-react-lite' import {ActivityIndicator, FlatList, StyleSheet, View} from 'react-native' import { RepostedByViewModel, - RepostedByViewItemModel, + RepostedByItem, } from '../../../state/models/reposted-by-view' import {UserAvatar} from '../util/UserAvatar' import {ErrorMessage} from '../util/error/ErrorMessage' @@ -18,31 +18,29 @@ export const PostRepostedBy = observer(function PostRepostedBy({ uri: string }) { const store = useStores() - // Using default import (React.use...) instead of named import (use...) to be able to mock store's data in jest environment - const [view, setView] = React.useState<RepostedByViewModel | undefined>() + const view = React.useMemo( + () => new RepostedByViewModel(store, {uri}), + [store, uri], + ) useEffect(() => { - if (view?.params.uri === uri) { - return // no change needed? or trigger refresh? - } - const newView = new RepostedByViewModel(store, {uri}) - setView(newView) - newView - .setup() - .catch(err => store.log.error('Failed to fetch reposted by', err)) - }, [uri, view?.params.uri, store]) + view + .loadMore() + .catch(err => store.log.error('Failed to fetch user followers', err)) + }, [view, store.log]) const onRefresh = () => { - view?.refresh() + view.refresh() + } + const onEndReached = () => { + view + .loadMore() + .catch(err => + view?.rootStore.log.error('Failed to load more followers', err), + ) } - // loading - // = - if ( - !view || - (view.isLoading && !view.isRefreshing) || - view.params.uri !== uri - ) { + if (!view.hasLoaded) { return ( <View> <ActivityIndicator /> @@ -66,22 +64,29 @@ export const PostRepostedBy = observer(function PostRepostedBy({ // loaded // = - const renderItem = ({item}: {item: RepostedByViewItemModel}) => ( - <RepostedByItem item={item} /> + const renderItem = ({item}: {item: RepostedByItem}) => ( + <RepostedByItemCom item={item} /> ) return ( - <View> - <FlatList - data={view.repostedBy} - keyExtractor={item => item._reactKey} - renderItem={renderItem} - contentContainerStyle={{paddingBottom: 200}} - /> - </View> + <FlatList + data={view.repostedBy} + keyExtractor={item => item.did} + refreshing={view.isRefreshing} + onRefresh={onRefresh} + onEndReached={onEndReached} + renderItem={renderItem} + initialNumToRender={15} + ListFooterComponent={() => ( + <View style={styles.footer}> + {view.isLoading && <ActivityIndicator />} + </View> + )} + extraData={view.isLoading} + /> ) }) -const RepostedByItem = ({item}: {item: RepostedByViewItemModel}) => { +const RepostedByItemCom = ({item}: {item: RepostedByItem}) => { return ( <Link style={styles.outer} @@ -132,4 +137,8 @@ const styles = StyleSheet.create({ paddingTop: 10, paddingBottom: 10, }, + footer: { + height: 200, + paddingTop: 20, + }, }) |