From cf22ca25bf9d257c93bdffa7f1358c4f1c436d16 Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Tue, 15 Nov 2022 21:00:28 +0800
Subject: [PATCH] feat: timeline paginator

---
 components/account/AccountHeader.vue          |  2 +-
 .../timeline/TimelinePaginator.client.vue     | 57 +++++++++++++++++++
 pages/@[user]/index.vue                       |  4 +-
 pages/index.vue                               |  4 +-
 pages/public.vue                              |  4 +-
 5 files changed, 64 insertions(+), 7 deletions(-)
 create mode 100644 components/timeline/TimelinePaginator.client.vue

diff --git a/components/account/AccountHeader.vue b/components/account/AccountHeader.vue
index bc55f82a..49cdf0e0 100644
--- a/components/account/AccountHeader.vue
+++ b/components/account/AccountHeader.vue
@@ -13,7 +13,7 @@ const createdAt = $computed(() => {
 
 <template>
   <div flex flex-col>
-    <div>
+    <div border="b border">
       <img h-50 w-full object-cover :src="account.header">
     </div>
     <div p3 style="margin-top:-3.5rem;" flex flex-col gap-6>
diff --git a/components/timeline/TimelinePaginator.client.vue b/components/timeline/TimelinePaginator.client.vue
new file mode 100644
index 00000000..4e1512dc
--- /dev/null
+++ b/components/timeline/TimelinePaginator.client.vue
@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import type { Paginator, Status } from 'masto'
+
+const { paginator } = defineProps<{
+  paginator: Paginator<any, Status[]>
+}>()
+
+let isLoading = $ref(false)
+let isDone = $ref(false)
+const statuses = $ref<Status[]>([])
+
+const endAnchor = ref<HTMLDivElement>()
+const bound = reactive(useElementBounding(endAnchor))
+const isInScreen = $computed(() => bound.top < window.innerHeight * 2)
+
+async function loadNext() {
+  if (isLoading || isDone)
+    return
+
+  // console.log('REQUEST')
+  isLoading = true
+  const result = await paginator.next()
+  if (result.done)
+    isDone = true
+  if (result.value?.length)
+    statuses.push(...result.value)
+  isLoading = false
+  await nextTick()
+  bound.update()
+}
+
+useIntervalFn(() => {
+  bound.update()
+}, 1000)
+
+watch(
+  () => isInScreen,
+  () => {
+    if (isInScreen && !isLoading)
+      loadNext()
+  },
+  { immediate: true },
+)
+</script>
+
+<template>
+  <template v-for="status of statuses" :key="status.id">
+    <StatusCard :status="status" border="t border" pt-4 />
+  </template>
+  <div ref="endAnchor" />
+  <div v-if="isLoading">
+    Loading...
+  </div>
+  <div v-if="isDone">
+    End of list
+  </div>
+</template>
diff --git a/pages/@[user]/index.vue b/pages/@[user]/index.vue
index 67a1d4dd..dbde0b47 100644
--- a/pages/@[user]/index.vue
+++ b/pages/@[user]/index.vue
@@ -7,12 +7,12 @@ const params = useRoute().params
 const user = $computed(() => params.user as string)
 const masto = await useMasto()
 const { data: account } = await useAsyncData(`${user}:info`, () => masto.accounts.lookup({ acct: user }))
-const { data: status } = await useAsyncData(`${user}:status`, () => masto.accounts.fetchStatuses(account.value!.id!))
+const paginator = masto.accounts.getStatusesIterable(account.value!.id!, {})
 </script>
 
 <template>
   <div>
     <AccountHeader :account="account" />
   </div>
-  <TimelineList :timelines="status?.value" />
+  <TimelinePaginator :paginator="paginator" />
 </template>
diff --git a/pages/index.vue b/pages/index.vue
index 30e92df6..e29c477e 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -6,9 +6,9 @@ if (!token.value)
   router.replace('/public')
 
 const masto = await useMasto()
-const { data: timelines } = await useAsyncData('timelines-home', () => masto.timelines.fetchHome().then(r => r.value))
+const paginator = masto.timelines.getHomeIterable()
 </script>
 
 <template>
-  <TimelineList :timelines="timelines" />
+  <TimelinePaginator :paginator="paginator" />
 </template>
diff --git a/pages/public.vue b/pages/public.vue
index 6a4a324f..fe071209 100644
--- a/pages/public.vue
+++ b/pages/public.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 const masto = await useMasto()
-const { data: timelines } = await useAsyncData('timelines-public', () => masto.timelines.fetchPublic().then(r => r.value))
+const paginator = masto.timelines.getPublicIterable()
 </script>
 
 <template>
-  <TimelineList :timelines="timelines" />
+  <TimelinePaginator :paginator="paginator" />
 </template>