zio/elk
2
0
Fork 0
Code Releases 2 Packages 1 Activity

refactor: use paginator for explore

Browse source
This commit is contained in:
三咲智子 2023-01-08 16:27:38 +08:00
parent 3d25243166
commit 6308aa5c9a
No known key found for this signature in database
GPG key ID: 69992F2250DFD93E
4 changed files with 43 additions and 68 deletions
Download patch file Download diff file Expand all files Collapse all files

46
pages/[[server]]/explore/users.vue
View file

@ -2,11 +2,7 @@
const { t } = useI18n()
// limit: 20 is the default configuration of the official client
const masto = useMasto()
const { data, pending, error } = useLazyAsyncData(
async () => masto.v2.suggestions.list({ limit: 20 }),
{ immediate: true },
)
const paginator = useMasto().v2.suggestions.list({ limit: 20 })
useHeadFixed({
title: () => `${t('tab.for_you')} | ${t('nav.explore')}`,
@ -14,29 +10,19 @@ useHeadFixed({
</script>
<template>
<div v-if="data && data.length">
<AccountBigCard
v-for="suggestion of data"
:key="suggestion.account.id"
:account="suggestion.account"
as="router-link"
:to="getAccountRoute(suggestion.account)"
border="b base"
/>
<div p5 text-center text-secondary-light italic>
{{ $t('common.end_of_list') }}
</div>
</div>
<div v-else-if="pending">
<AccountBigCardSkeleton border="b base" />
<AccountBigCardSkeleton border="b base" op50 />
<AccountBigCardSkeleton border="b base" op25 />
</div>
<div v-else-if="error" p5 text-center text-red italic>
{{ $t('common.error') }}: {{ error }}
</div>
<div v-else p5 text-center text-secondary italic>
{{ $t('common.not_found') }}
</div>
<CommonPaginator :paginator="paginator" key-prop="account">
<template #default="{ item }">
<AccountBigCard
:account="item.account"
as="router-link"
:to="getAccountRoute(item.account)"
border="b base"
/>
</template>
<template #loading>
<AccountBigCardSkeleton border="b base" />
<AccountBigCardSkeleton border="b base" op50 />
<AccountBigCardSkeleton border="b base" op25 />
</template>
</CommonPaginator>
</template>