mirror of https://github.com/elk-zone/elk.git
refactor: use paginator for explore
This commit is contained in:
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 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>
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in New Issue