refactor: paginator

This commit is contained in:
Anthony Fu 2022-11-17 15:35:42 +08:00
parent 6e54d95bbc
commit 0312547629
9 changed files with 88 additions and 56 deletions

View file

@ -10,7 +10,7 @@ defineProps<{
<div flex gap-2>
<div p1>
<NuxtLink :to="`/@${account.acct}`">
<img :src="account.avatar" rounded w-10 h-10>
<img :src="account.avatar" rounded w-10 h-10 bg-gray:10>
</NuxtLink>
</div>
<NuxtLink flex flex-col :to="`/@${account.acct}`">

View file

@ -4,15 +4,18 @@ import type { Account, Paginator } from 'masto'
const { paginator } = defineProps<{
paginator: Paginator<any, Account[]>
}>()
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 />
<CommonPaginator
:paginator="paginator"
border="t border"
>
<template #default="{ item }">
<AccountCard
:account="item"
border="b border" py-1
/>
</template>
<div ref="endAnchor" />
</CommonPaginator>
</template>

View file

@ -1,17 +1,30 @@
<script setup lang="ts">
import type { PaginatorState } from '~/types'
import type { Paginator } from 'masto'
defineProps<{
state: PaginatorState
const { paginator, keyProp = 'id' } = defineProps<{
paginator: Paginator<any, any[]>
keyProp?: string
}>()
const { items, state, endAnchor, error } = usePaginator(paginator)
</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>
<slot
v-for="item of items"
:key="item[keyProp]"
:item="item"
/>
<div ref="endAnchor" />
<div v-if="state === 'loading'" p5 color-gray-5>
Loading...
</div>
<div v-else-if="state === 'done'" p5 color-gray>
End of list
</div>
<div v-else-if="state === 'error'" p5 color-gray>
ERROR: {{ error }}
</div>
</div>
</template>

View file

@ -4,43 +4,37 @@
<template>
<div px6 py2 flex="~ col gap6" text-lg>
<NuxtLink flex gap2 items-center to="/home">
<NuxtLink flex gap2 items-center to="/home" active-class="text-primary">
<div i-ri:home-5-line />
<span>Home</span>
</NuxtLink>
<NuxtLink flex gap2 items-center to="/notifications">
<NuxtLink flex gap2 items-center to="/notifications" active-class="text-primary">
<div i-ri:notification-4-line />
<span>Notifications</span>
</NuxtLink>
<NuxtLink flex gap2 items-center>
<NuxtLink flex gap2 items-center active-class="text-primary">
<div i-ri:hashtag />
<span>Explore</span>
</NuxtLink>
<NuxtLink flex gap2 items-center to="/public/local">
<NuxtLink flex gap2 items-center to="/public/local" active-class="text-primary">
<div i-ri:group-2-line />
<span>Local</span>
</NuxtLink>
<NuxtLink flex gap2 items-center to="/public">
<NuxtLink flex gap2 items-center to="/public" active-class="text-primary">
<div i-ri:earth-line />
<span>Federated</span>
</NuxtLink>
<NuxtLink flex gap2 items-center>
<NuxtLink flex gap2 items-center active-class="text-primary">
<div i-ri:at-line />
<span>Direct Messages</span>
<span>Messages</span>
</NuxtLink>
<NuxtLink flex gap2 items-center to="/favourites">
<NuxtLink flex gap2 items-center to="/favourites" active-class="text-primary">
<div i-ri:heart-3-line />
<span>Favorites</span>
</NuxtLink>
<NuxtLink flex gap2 items-center to="/bookmarks">
<NuxtLink flex gap2 items-center to="/bookmarks" active-class="text-primary">
<div i-ri:bookmark-line />
<span>Bookmarks</span>
</NuxtLink>
</div>
</template>
<style lang="postcss">
.router-link-active {
--at-apply: color-primary;
}
</style>

View file

@ -4,15 +4,18 @@ import type { Notification, Paginator } from 'masto'
const { paginator } = defineProps<{
paginator: Paginator<any, Notification[]>
}>()
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 />
<CommonPaginator
:paginator="paginator"
border="t border"
>
<template #default="{ item }">
<NotificationCard
:notification="item"
border="t border" pt-4
/>
</template>
<div ref="endAnchor" />
</CommonPaginator>
</template>

View file

@ -4,15 +4,18 @@ import type { Paginator, Status } from 'masto'
const { paginator } = defineProps<{
paginator: Paginator<any, Status[]>
}>()
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 />
<CommonPaginator
:paginator="paginator"
border="t border"
>
<template #default="{ item }">
<StatusCard
:status="item"
border="b border" py-3
/>
</template>
<div ref="endAnchor" />
</CommonPaginator>
</template>

View file

@ -2,23 +2,34 @@ import type { Paginator } from 'masto'
import type { PaginatorState } from '~/types'
export function usePaginator<T>(paginator: Paginator<any, T[]>) {
let state = $ref('ready' as PaginatorState)
const items = $ref<T[]>([])
const state = ref<PaginatorState>('idle')
const items = ref<T[]>([])
const endAnchor = ref<HTMLDivElement>()
const bound = reactive(useElementBounding(endAnchor))
const isInScreen = $computed(() => bound.top < window.innerHeight * 2)
const error = ref<unknown | undefined>()
async function loadNext() {
if (state === 'loading' || state === 'done')
if (state.value !== 'idle')
return
state = 'loading'
const result = await paginator.next()
state = result.done ? 'done' : 'ready'
state.value = 'loading'
try {
const result = await paginator.next()
if (result.value?.length)
items.push(...result.value)
if (result.value?.length) {
items.value.push(...result.value)
state.value = 'idle'
}
else {
state.value = 'done'
}
}
catch (e) {
error.value = e
state.value = 'error'
}
await nextTick()
bound.update()
@ -31,11 +42,16 @@ export function usePaginator<T>(paginator: Paginator<any, T[]>) {
watch(
() => isInScreen,
() => {
if (isInScreen && state !== 'loading')
if (isInScreen && state.value === 'idle')
loadNext()
},
{ immediate: true },
)
return { items, state, endAnchor }
return {
items,
state,
error,
endAnchor,
}
}

View file

@ -1,6 +1,6 @@
<script setup lang="ts">
const masto = await useMasto()
const { data: timelines } = await useAsyncData('timelines-public', () => masto.timelines.fetchPublic().then(r => r.value))
const paginator = masto.timelines.getPublicIterable()
</script>
<template>
@ -12,7 +12,7 @@ const { data: timelines } = await useAsyncData('timelines-public', () => masto.t
<div color-gray i-ri:equalizer-fill mr-1 h-6 />
</template>
<slot>
<TimelineList :timelines="timelines" />
<TimelinePaginator :paginator="paginator" />
</slot>
</MainContent>
</template>

View file

@ -16,4 +16,4 @@ export interface UserLogin {
account?: AccountCredentials
}
export type PaginatorState = 'ready' | 'loading' | 'done'
export type PaginatorState = 'idle' | 'loading' | 'done' | 'error'