From 6308aa5c9a67cecb48dad3aa35b17ff988fa0068 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90?= <sxzz@sxzz.moe>
Date: Sun, 8 Jan 2023 16:27:38 +0800
Subject: [PATCH] refactor: use paginator for explore

---
 components/tag/TagCardPaginator.vue  | 22 +++++++++++++
 components/timeline/TimelineList.vue | 13 --------
 pages/[[server]]/explore/tags.vue    | 30 +++---------------
 pages/[[server]]/explore/users.vue   | 46 ++++++++++------------------
 4 files changed, 43 insertions(+), 68 deletions(-)
 create mode 100644 components/tag/TagCardPaginator.vue
 delete mode 100644 components/timeline/TimelineList.vue

diff --git a/components/tag/TagCardPaginator.vue b/components/tag/TagCardPaginator.vue
new file mode 100644
index 00000000..498ff92a
--- /dev/null
+++ b/components/tag/TagCardPaginator.vue
@@ -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>
diff --git a/components/timeline/TimelineList.vue b/components/timeline/TimelineList.vue
deleted file mode 100644
index 36b36473..00000000
--- a/components/timeline/TimelineList.vue
+++ /dev/null
@@ -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>
diff --git a/pages/[[server]]/explore/tags.vue b/pages/[[server]]/explore/tags.vue
index e687e3be..f69447f5 100644
--- a/pages/[[server]]/explore/tags.vue
+++ b/pages/[[server]]/explore/tags.vue
@@ -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>
diff --git a/pages/[[server]]/explore/users.vue b/pages/[[server]]/explore/users.vue
index 8d0ed9c6..218d5964 100644
--- a/pages/[[server]]/explore/users.vue
+++ b/pages/[[server]]/explore/users.vue
@@ -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>