Fixes to likes list
parent
a24b29d64b
commit
6dcf9f8d5b
|
@ -1,31 +1,11 @@
|
|||
import {makeAutoObservable, runInAction} from 'mobx'
|
||||
import {AtUri} from '../../third-party/uri'
|
||||
import {
|
||||
AppBskyFeedGetVotes as GetVotes,
|
||||
AppBskyActorRef as ActorRef,
|
||||
} from '@atproto/api'
|
||||
import {AppBskyFeedGetVotes as GetVotes} from '@atproto/api'
|
||||
import {RootStoreModel} from './root-store'
|
||||
|
||||
export class VotesViewItemModel implements GetVotes.Vote {
|
||||
// ui state
|
||||
_reactKey: string = ''
|
||||
const PAGE_SIZE = 30
|
||||
|
||||
// data
|
||||
direction: 'up' | 'down' = 'up'
|
||||
indexedAt: string = ''
|
||||
createdAt: string = ''
|
||||
actor: ActorRef.WithInfo = {
|
||||
did: '',
|
||||
handle: '',
|
||||
declaration: {cid: '', actorType: ''},
|
||||
}
|
||||
|
||||
constructor(reactKey: string, v: GetVotes.Vote) {
|
||||
makeAutoObservable(this)
|
||||
this._reactKey = reactKey
|
||||
Object.assign(this, v)
|
||||
}
|
||||
}
|
||||
export type VoteItem = GetVotes.Vote
|
||||
|
||||
export class VotesViewModel {
|
||||
// state
|
||||
|
@ -35,10 +15,13 @@ export class VotesViewModel {
|
|||
error = ''
|
||||
resolvedUri = ''
|
||||
params: GetVotes.QueryParams
|
||||
hasMore = true
|
||||
loadMoreCursor?: string
|
||||
private _loadMorePromise: Promise<void> | undefined
|
||||
|
||||
// data
|
||||
uri: string = ''
|
||||
votes: VotesViewItemModel[] = []
|
||||
votes: VoteItem[] = []
|
||||
|
||||
constructor(public rootStore: RootStoreModel, params: GetVotes.QueryParams) {
|
||||
makeAutoObservable(
|
||||
|
@ -67,19 +50,20 @@ export class VotesViewModel {
|
|||
// public api
|
||||
// =
|
||||
|
||||
async setup() {
|
||||
async refresh() {
|
||||
return this.loadMore(true)
|
||||
}
|
||||
|
||||
async loadMore(isRefreshing = false) {
|
||||
if (this._loadMorePromise) {
|
||||
return this._loadMorePromise
|
||||
}
|
||||
if (!this.resolvedUri) {
|
||||
await this._resolveUri()
|
||||
}
|
||||
await this._fetch()
|
||||
}
|
||||
|
||||
async refresh() {
|
||||
await this._fetch(true)
|
||||
}
|
||||
|
||||
async loadMore() {
|
||||
// TODO
|
||||
this._loadMorePromise = this._loadMore(isRefreshing)
|
||||
await this._loadMorePromise
|
||||
this._loadMorePromise = undefined
|
||||
}
|
||||
|
||||
// state transitions
|
||||
|
@ -118,28 +102,28 @@ export class VotesViewModel {
|
|||
})
|
||||
}
|
||||
|
||||
private async _fetch(isRefreshing = false) {
|
||||
private async _loadMore(isRefreshing = false) {
|
||||
this._xLoading(isRefreshing)
|
||||
try {
|
||||
const res = await this.rootStore.api.app.bsky.feed.getVotes(
|
||||
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.votes = []
|
||||
}
|
||||
const res = await this.rootStore.api.app.bsky.feed.getVotes(params)
|
||||
this._appendAll(res)
|
||||
this._xIdle()
|
||||
} catch (e: any) {
|
||||
this._xIdle(e)
|
||||
}
|
||||
}
|
||||
|
||||
private _replaceAll(res: GetVotes.Response) {
|
||||
this.votes.length = 0
|
||||
let counter = 0
|
||||
for (const item of res.data.votes) {
|
||||
this._append(counter++, item)
|
||||
}
|
||||
}
|
||||
|
||||
private _append(keyId: number, item: GetVotes.Vote) {
|
||||
this.votes.push(new VotesViewItemModel(`item-${keyId}`, item))
|
||||
private _appendAll(res: GetVotes.Response) {
|
||||
this.loadMoreCursor = res.data.cursor
|
||||
this.hasMore = !!this.loadMoreCursor
|
||||
this.votes = this.votes.concat(res.data.votes)
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,10 +1,7 @@
|
|||
import React, {useEffect} from 'react'
|
||||
import {observer} from 'mobx-react-lite'
|
||||
import {ActivityIndicator, FlatList, StyleSheet, View} from 'react-native'
|
||||
import {
|
||||
VotesViewModel,
|
||||
VotesViewItemModel,
|
||||
} from '../../../state/models/votes-view'
|
||||
import {VotesViewModel, VotesItem} from '../../../state/models/votes-view'
|
||||
import {Link} from '../util/Link'
|
||||
import {Text} from '../util/text/Text'
|
||||
import {ErrorMessage} from '../util/error/ErrorMessage'
|
||||
|
@ -20,30 +17,25 @@ export const PostVotedBy = observer(function PostVotedBy({
|
|||
direction: 'up' | 'down'
|
||||
}) {
|
||||
const store = useStores()
|
||||
const [view, setView] = React.useState<VotesViewModel | undefined>()
|
||||
const view = React.useMemo(
|
||||
() => new VotesViewModel(store, {uri, direction}),
|
||||
[store, uri, direction],
|
||||
)
|
||||
|
||||
useEffect(() => {
|
||||
if (view?.params.uri === uri) {
|
||||
return // no change needed? or trigger refresh?
|
||||
}
|
||||
const newView = new VotesViewModel(store, {uri, direction})
|
||||
setView(newView)
|
||||
newView
|
||||
.setup()
|
||||
.catch(err => store.log.error('Failed to fetch voted by', err))
|
||||
}, [uri, view?.params.uri, store])
|
||||
view.loadMore().catch(err => store.log.error('Failed to fetch votes', err))
|
||||
}, [view, store.log])
|
||||
|
||||
const onRefresh = () => {
|
||||
view?.refresh()
|
||||
view.refresh()
|
||||
}
|
||||
const onEndReached = () => {
|
||||
view
|
||||
.loadMore()
|
||||
.catch(err => view?.rootStore.log.error('Failed to load more votes', err))
|
||||
}
|
||||
|
||||
// loading
|
||||
// =
|
||||
if (
|
||||
!view ||
|
||||
(view.isLoading && !view.isRefreshing) ||
|
||||
view.params.uri !== uri
|
||||
) {
|
||||
if (!view.hasLoaded) {
|
||||
return (
|
||||
<View>
|
||||
<ActivityIndicator />
|
||||
|
@ -67,22 +59,27 @@ export const PostVotedBy = observer(function PostVotedBy({
|
|||
|
||||
// loaded
|
||||
// =
|
||||
const renderItem = ({item}: {item: VotesViewItemModel}) => (
|
||||
<LikedByItem item={item} />
|
||||
)
|
||||
const renderItem = ({item}: {item: VotesItem}) => <LikedByItem item={item} />
|
||||
return (
|
||||
<View>
|
||||
<FlatList
|
||||
data={view.votes}
|
||||
keyExtractor={item => item._reactKey}
|
||||
renderItem={renderItem}
|
||||
contentContainerStyle={{paddingBottom: 200}}
|
||||
/>
|
||||
</View>
|
||||
<FlatList
|
||||
data={view.votes}
|
||||
keyExtractor={item => item.actor.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 LikedByItem = ({item}: {item: VotesViewItemModel}) => {
|
||||
const LikedByItem = ({item}: {item: VotesItem}) => {
|
||||
return (
|
||||
<Link
|
||||
style={styles.outer}
|
||||
|
@ -135,4 +132,8 @@ const styles = StyleSheet.create({
|
|||
paddingTop: 10,
|
||||
paddingBottom: 10,
|
||||
},
|
||||
footer: {
|
||||
height: 200,
|
||||
paddingTop: 20,
|
||||
},
|
||||
})
|
||||
|
|
Loading…
Reference in New Issue