refactor: use paginator for explore
三咲智子
parent
3d25243166
commit
6308aa5c9a
|
|
@ -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>
|
||||||
|
|
@ -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>
|
|
||||||
|
|
@ -4,10 +4,9 @@ import { STORAGE_KEY_HIDE_EXPLORE_TAGS_TIPS } from '~~/constants'
|
||||||
const { t } = useI18n()
|
const { t } = useI18n()
|
||||||
|
|
||||||
const masto = useMasto()
|
const masto = useMasto()
|
||||||
const { data, pending, error } = useLazyAsyncData(
|
const paginator = masto.v1.trends.listTags({
|
||||||
async () => masto.v1.trends.listTags({ limit: 20 }),
|
limit: 20,
|
||||||
{ immediate: true },
|
})
|
||||||
)
|
|
||||||
|
|
||||||
const hideTagsTips = useLocalStorage(STORAGE_KEY_HIDE_EXPLORE_TAGS_TIPS, false)
|
const hideTagsTips = useLocalStorage(STORAGE_KEY_HIDE_EXPLORE_TAGS_TIPS, false)
|
||||||
|
|
||||||
|
|
@ -17,28 +16,9 @@ useHeadFixed({
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<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>
|
<p>{{ $t('tooltip.explore_tags_intro') }}</p>
|
||||||
</CommonAlert>
|
</CommonAlert>
|
||||||
|
|
||||||
<div v-if="data && data.length">
|
<TagCardPaginator v-bind="{ paginator }" />
|
||||||
<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>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -2,11 +2,7 @@
|
||||||
const { t } = useI18n()
|
const { t } = useI18n()
|
||||||
|
|
||||||
// limit: 20 is the default configuration of the official client
|
// limit: 20 is the default configuration of the official client
|
||||||
const masto = useMasto()
|
const paginator = useMasto().v2.suggestions.list({ limit: 20 })
|
||||||
const { data, pending, error } = useLazyAsyncData(
|
|
||||||
async () => masto.v2.suggestions.list({ limit: 20 }),
|
|
||||||
{ immediate: true },
|
|
||||||
)
|
|
||||||
|
|
||||||
useHeadFixed({
|
useHeadFixed({
|
||||||
title: () => `${t('tab.for_you')} | ${t('nav.explore')}`,
|
title: () => `${t('tab.for_you')} | ${t('nav.explore')}`,
|
||||||
|
|
@ -14,29 +10,19 @@ useHeadFixed({
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div v-if="data && data.length">
|
<CommonPaginator :paginator="paginator" key-prop="account">
|
||||||
<AccountBigCard
|
<template #default="{ item }">
|
||||||
v-for="suggestion of data"
|
<AccountBigCard
|
||||||
:key="suggestion.account.id"
|
:account="item.account"
|
||||||
:account="suggestion.account"
|
as="router-link"
|
||||||
as="router-link"
|
:to="getAccountRoute(item.account)"
|
||||||
:to="getAccountRoute(suggestion.account)"
|
border="b base"
|
||||||
border="b base"
|
/>
|
||||||
/>
|
</template>
|
||||||
|
<template #loading>
|
||||||
<div p5 text-center text-secondary-light italic>
|
<AccountBigCardSkeleton border="b base" />
|
||||||
{{ $t('common.end_of_list') }}
|
<AccountBigCardSkeleton border="b base" op50 />
|
||||||
</div>
|
<AccountBigCardSkeleton border="b base" op25 />
|
||||||
</div>
|
</template>
|
||||||
<div v-else-if="pending">
|
</CommonPaginator>
|
||||||
<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>
|
</template>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue