teutat3s/elk
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

feat: common paginator component (#9)

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

18
components/account/AccountPaginator.client.vue
View file

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

17
components/common/CommonPaginator.vue Normal file
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>

18
components/notification/NotificationPaginator.client.vue
View file

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

18
components/timeline/TimelinePaginator.client.vue
View file

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

18
composables/paginator.ts
View file

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

2
types/index.ts
View file

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