From c64106c98a0599ee093d5afe01ccb6e4e3c7dc5f 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:51:45 +0800
Subject: [PATCH] refactor(status): rework edit history list

---
 components/common/CommonPaginator.vue         |  6 +++
 components/status/edit/StatusEditHistory.vue  | 53 ++++++++++---------
 .../status/edit/StatusEditHistorySkeleton.vue |  3 ++
 3 files changed, 38 insertions(+), 24 deletions(-)
 create mode 100644 components/status/edit/StatusEditHistorySkeleton.vue

diff --git a/components/common/CommonPaginator.vue b/components/common/CommonPaginator.vue
index fcb10b9a..1a27d177 100644
--- a/components/common/CommonPaginator.vue
+++ b/components/common/CommonPaginator.vue
@@ -22,7 +22,9 @@ const {
 
 defineSlots<{
   default: {
+    items: T[]
     item: T
+    index: number
     active?: boolean
     older?: T
     newer?: T // newer is undefined when index === 0
@@ -61,6 +63,8 @@ const { items, prevItems, update, state, endAnchor, error } = usePaginator(pagin
             :active="active"
             :older="items[index + 1]"
             :newer="items[index - 1]"
+            :index="index"
+            :items="items"
           />
         </DynamicScroller>
       </template>
@@ -71,6 +75,8 @@ const { items, prevItems, update, state, endAnchor, error } = usePaginator(pagin
           :item="item"
           :older="items[index + 1]"
           :newer="items[index - 1]"
+          :index="index"
+          :items="items"
         />
       </template>
     </slot>
diff --git a/components/status/edit/StatusEditHistory.vue b/components/status/edit/StatusEditHistory.vue
index 3935cca7..c5d29343 100644
--- a/components/status/edit/StatusEditHistory.vue
+++ b/components/status/edit/StatusEditHistory.vue
@@ -6,38 +6,43 @@ const { status } = defineProps<{
   status: mastodon.v1.Status
 }>()
 
-const masto = useMasto()
-const { data: statusEdits } = useAsyncData(`status:history:${status.id}`, () => masto.v1.statuses.listHistory(status.id).then(res => res.reverse()))
+const paginator = useMasto().v1.statuses.listHistory(status.id)
 
 const showHistory = (edit: mastodon.v1.StatusEdit) => {
   openEditHistoryDialog(edit)
 }
 const timeAgoOptions = useTimeAgoOptions()
+
+const reverseHistory = (items: mastodon.v1.StatusEdit[]) =>
+  [...items].reverse()
 </script>
 
 <template>
-  <template v-if="statusEdits">
-    <CommonDropdownItem
-      v-for="(edit, idx) in statusEdits"
-      :key="idx"
-      px="0.5"
-      @click="showHistory(edit)"
-    >
-      {{ getDisplayName(edit.account) }}
+  <CommonPaginator :paginator="paginator" key-prop="createdAt" :preprocess="reverseHistory">
+    <template #default="{ items, item, index }">
+      <CommonDropdownItem
+        px="0.5"
+        @click="showHistory(item)"
+      >
+        {{ getDisplayName(item.account) }}
 
-      <template v-if="idx === statusEdits.length - 1">
-        <i18n-t keypath="status_history.created">
-          {{ formatTimeAgo(new Date(edit.createdAt), timeAgoOptions) }}
+        <template v-if="index === items.length - 1">
+          <i18n-t keypath="status_history.created">
+            {{ formatTimeAgo(new Date(item.createdAt), timeAgoOptions) }}
+          </i18n-t>
+        </template>
+        <i18n-t v-else keypath="status_history.edited">
+          {{ formatTimeAgo(new Date(item.createdAt), timeAgoOptions) }}
         </i18n-t>
-      </template>
-      <template v-else>
-        <i18n-t keypath="status_history.edited">
-          {{ formatTimeAgo(new Date(edit.createdAt), timeAgoOptions) }}
-        </i18n-t>
-      </template>
-    </CommonDropdownItem>
-  </template>
-  <template v-else>
-    <div i-ri:loader-2-fill animate-spin text-2xl ma />
-  </template>
+      </CommonDropdownItem>
+    </template>
+    <template #loading>
+      <StatusEditHistorySkeleton />
+      <StatusEditHistorySkeleton op50 />
+      <StatusEditHistorySkeleton op25 />
+    </template>
+    <template #done>
+      <span />
+    </template>
+  </CommonPaginator>
 </template>
diff --git a/components/status/edit/StatusEditHistorySkeleton.vue b/components/status/edit/StatusEditHistorySkeleton.vue
new file mode 100644
index 00000000..96a0bfbb
--- /dev/null
+++ b/components/status/edit/StatusEditHistorySkeleton.vue
@@ -0,0 +1,3 @@
+<template>
+  <div class="skeleton-loading-bg" h-5 w-full rounded my2 />
+</template>