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 flex gap-2>
<div p1> <div p1>
<NuxtLink :to="`/@${account.acct}`"> <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> </NuxtLink>
</div> </div>
<NuxtLink flex flex-col :to="`/@${account.acct}`"> <NuxtLink flex flex-col :to="`/@${account.acct}`">

View file

@ -4,15 +4,18 @@ import type { Account, Paginator } from 'masto'
const { paginator } = defineProps<{ const { paginator } = defineProps<{
paginator: Paginator<any, Account[]> paginator: Paginator<any, Account[]>
}>() }>()
const { items: accounts, state, endAnchor } = usePaginator(paginator)
</script> </script>
<template> <template>
<CommonPaginator :state="state"> <CommonPaginator
<template v-for="account of accounts" :key="account.id"> :paginator="paginator"
<AccountCard :account="account" border="t border" pt-4 /> border="t border"
>
<template #default="{ item }">
<AccountCard
:account="item"
border="b border" py-1
/>
</template> </template>
<div ref="endAnchor" />
</CommonPaginator> </CommonPaginator>
</template> </template>

View file

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

View file

@ -4,43 +4,37 @@
<template> <template>
<div px6 py2 flex="~ col gap6" text-lg> <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 /> <div i-ri:home-5-line />
<span>Home</span> <span>Home</span>
</NuxtLink> </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 /> <div i-ri:notification-4-line />
<span>Notifications</span> <span>Notifications</span>
</NuxtLink> </NuxtLink>
<NuxtLink flex gap2 items-center> <NuxtLink flex gap2 items-center active-class="text-primary">
<div i-ri:hashtag /> <div i-ri:hashtag />
<span>Explore</span> <span>Explore</span>
</NuxtLink> </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 /> <div i-ri:group-2-line />
<span>Local</span> <span>Local</span>
</NuxtLink> </NuxtLink>
<NuxtLink flex gap2 items-center to="/public"> <NuxtLink flex gap2 items-center to="/public" active-class="text-primary">
<div i-ri:earth-line /> <div i-ri:earth-line />
<span>Federated</span> <span>Federated</span>
</NuxtLink> </NuxtLink>
<NuxtLink flex gap2 items-center> <NuxtLink flex gap2 items-center active-class="text-primary">
<div i-ri:at-line /> <div i-ri:at-line />
<span>Direct Messages</span> <span>Messages</span>
</NuxtLink> </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 /> <div i-ri:heart-3-line />
<span>Favorites</span> <span>Favorites</span>
</NuxtLink> </NuxtLink>
<NuxtLink flex gap2 items-center to="/bookmarks"> <NuxtLink flex gap2 items-center to="/bookmarks" active-class="text-primary">
<div i-ri:bookmark-line /> <div i-ri:bookmark-line />
<span>Bookmarks</span> <span>Bookmarks</span>
</NuxtLink> </NuxtLink>
</div> </div>
</template> </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<{ const { paginator } = defineProps<{
paginator: Paginator<any, Notification[]> paginator: Paginator<any, Notification[]>
}>() }>()
const { items: notifications, state, endAnchor } = usePaginator(paginator)
</script> </script>
<template> <template>
<CommonPaginator :state="state"> <CommonPaginator
<template v-for="notification of notifications" :key="notification.id"> :paginator="paginator"
<NotificationCard :notification="notification" border="t border" pt-4 /> border="t border"
>
<template #default="{ item }">
<NotificationCard
:notification="item"
border="t border" pt-4
/>
</template> </template>
<div ref="endAnchor" />
</CommonPaginator> </CommonPaginator>
</template> </template>

View file

@ -4,15 +4,18 @@ import type { Paginator, Status } from 'masto'
const { paginator } = defineProps<{ const { paginator } = defineProps<{
paginator: Paginator<any, Status[]> paginator: Paginator<any, Status[]>
}>() }>()
const { items: statuses, state, endAnchor } = usePaginator(paginator)
</script> </script>
<template> <template>
<CommonPaginator :state="state"> <CommonPaginator
<template v-for="status of statuses" :key="status.id"> :paginator="paginator"
<StatusCard :status="status" border="t border" pt-4 /> border="t border"
>
<template #default="{ item }">
<StatusCard
:status="item"
border="b border" py-3
/>
</template> </template>
<div ref="endAnchor" />
</CommonPaginator> </CommonPaginator>
</template> </template>

View file

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

View file

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

View file

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