feat: common paginator component (#9)

This commit is contained in:
patak 2022-11-16 17:11:08 +01:00 committed by GitHub
parent 7969b53747
commit e61f909f31
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 49 additions and 42 deletions

View file

@ -5,18 +5,14 @@ const { paginator } = defineProps<{
paginator: Paginator<any, Account[]>
}>()
const { items: accounts, isLoading, isDone, endAnchor } = usePaginator(paginator)
const { items: accounts, state, endAnchor } = usePaginator(paginator)
</script>
<template>
<CommonPaginator :state="state">
<template v-for="account of accounts" :key="account.id">
<AccountCard :account="account" border="t border" pt-4 />
</template>
<div ref="endAnchor" />
<div v-if="isLoading">
Loading...
</div>
<div v-if="isDone">
End of list
</div>
</CommonPaginator>
</template>

View file

@ -0,0 +1,17 @@
<script setup lang="ts">
import type { PaginatorState } from '~/types'
defineProps<{
state: PaginatorState
}>()
</script>
<template>
<slot />
<div v-if="state === 'loading'" p5 color-gray-5>
Loading...
</div>
<div v-if="state === 'done'" p5 color-gray>
End of list
</div>
</template>

View file

@ -5,18 +5,14 @@ const { paginator } = defineProps<{
paginator: Paginator<any, Notification[]>
}>()
const { items: notifications, isLoading, isDone, endAnchor } = usePaginator(paginator)
const { items: notifications, state, endAnchor } = usePaginator(paginator)
</script>
<template>
<CommonPaginator :state="state">
<template v-for="notification of notifications" :key="notification.id">
<NotificationCard :notification="notification" border="t border" pt-4 />
</template>
<div ref="endAnchor" />
<div v-if="isLoading">
Loading...
</div>
<div v-if="isDone">
End of list
</div>
</CommonPaginator>
</template>

View file

@ -5,18 +5,14 @@ const { paginator } = defineProps<{
paginator: Paginator<any, Status[]>
}>()
const { items: statuses, isLoading, isDone, endAnchor } = usePaginator(paginator)
const { items: statuses, state, endAnchor } = usePaginator(paginator)
</script>
<template>
<CommonPaginator :state="state">
<template v-for="status of statuses" :key="status.id">
<StatusCard :status="status" border="t border" pt-4 />
</template>
<div ref="endAnchor" />
<div v-if="isLoading">
Loading...
</div>
<div v-if="isDone">
End of list
</div>
</CommonPaginator>
</template>

View file

@ -1,8 +1,8 @@
import type { Paginator } from 'masto'
import type { PaginatorState } from '~/types'
export function usePaginator<T>(paginator: Paginator<any, T[]>) {
let isLoading = $ref(false)
let isDone = $ref(false)
let state = $ref('ready' as PaginatorState)
const items = $ref<T[]>([])
const endAnchor = ref<HTMLDivElement>()
@ -10,16 +10,16 @@ export function usePaginator<T>(paginator: Paginator<any, T[]>) {
const isInScreen = $computed(() => bound.top < window.innerHeight * 2)
async function loadNext() {
if (isLoading || isDone)
if (state === 'loading' || state === 'done')
return
isLoading = true
state = 'loading'
const result = await paginator.next()
if (result.done)
isDone = true
state = result.done ? 'done' : 'ready'
if (result.value?.length)
items.push(...result.value)
isLoading = false
await nextTick()
bound.update()
}
@ -31,11 +31,11 @@ export function usePaginator<T>(paginator: Paginator<any, T[]>) {
watch(
() => isInScreen,
() => {
if (isInScreen && !isLoading)
if (isInScreen && state !== 'loading')
loadNext()
},
{ immediate: true },
)
return { items, isLoading, isDone, endAnchor }
return { items, state, endAnchor }
}

View file

@ -15,3 +15,5 @@ export interface UserLogin {
token: string
account?: AccountCredentials
}
export type PaginatorState = 'ready' | 'loading' | 'done'