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

refactor: use paginator for explore

zio/stable
三咲智子 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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
components/tag/TagCardPaginator.vue 100644
View File

@ -0,0 +1,22 @@
<script setup lang="ts">
import type { Paginator, mastodon } from 'masto'
const { paginator } = defineProps<{
paginator: Paginator<mastodon.v1.Tag[], mastodon.DefaultPaginationParams>
}>()
</script>
<template>
<CommonPaginator :paginator="paginator" key-prop="name">
<template #default="{ item }">
<TagCard :tag="item" border="b base" />
</template>
<template #loading>
<TagCardSkeleton border="b base" />
<TagCardSkeleton border="b base" />
<TagCardSkeleton border="b base" op50 />
<TagCardSkeleton border="b base" op50 />
<TagCardSkeleton border="b base" op25 />
</template>
</CommonPaginator>
</template>

13
components/timeline/TimelineList.vue
View File

@ -1,13 +0,0 @@
<script setup lang="ts">
import type { mastodon } from 'masto'
defineProps<{
timelines: mastodon.v1.Status[]
}>()
</script>
<template>
<template v-for="status of timelines" :key="status.id">
<StatusCard :status="status" border="t base" />
</template>
</template>

30
pages/[[server]]/explore/tags.vue
View File

@ -4,10 +4,9 @@ import { STORAGE_KEY_HIDE_EXPLORE_TAGS_TIPS } from '~~/constants'
const { t } = useI18n()
const masto = useMasto()
const { data, pending, error } = useLazyAsyncData(
async () => masto.v1.trends.listTags({ limit: 20 }),
{ immediate: true },
)
const paginator = masto.v1.trends.listTags({
limit: 20,
})
const hideTagsTips = useLocalStorage(STORAGE_KEY_HIDE_EXPLORE_TAGS_TIPS, false)
@ -17,28 +16,9 @@ useHeadFixed({
</script>
<template>
<CommonAlert v-if="isHydrated && !hideTagsTips && data && data.length" @close="hideTagsTips = true">
<CommonAlert v-if="!hideTagsTips" @close="hideTagsTips = true">
<p>{{ $t('tooltip.explore_tags_intro') }}</p>
</CommonAlert>
<div v-if="data && data.length">
<TagCard v-for="item of data" :key="item.name" :tag="item" border="b base" />
<div p5 text-center text-secondary-light italic>
{{ $t('common.end_of_list') }}
</div>
</div>
<div v-else-if="pending">
<TagCardSkeleton border="b base" />
<TagCardSkeleton border="b base" />
<TagCardSkeleton border="b base" op50 />
<TagCardSkeleton border="b base" op50 />
<TagCardSkeleton 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('error.explore-list-empty') }}
</div>
<TagCardPaginator v-bind="{ paginator }" />
</template>

32
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">
<CommonPaginator :paginator="paginator" key-prop="account">
<template #default="{ item }">
<AccountBigCard
v-for="suggestion of data"
:key="suggestion.account.id"
:account="suggestion.account"
:account="item.account"
as="router-link"
:to="getAccountRoute(suggestion.account)"
:to="getAccountRoute(item.account)"
border="b base"
/>
<div p5 text-center text-secondary-light italic>
{{ $t('common.end_of_list') }}
</div>
</div>
<div v-else-if="pending">
</template>
<template #loading>
<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>
</template>
</CommonPaginator>
</template>