From ffb8270b3c432c57fddd30d0ee168e6dbb3e012b Mon Sep 17 00:00:00 2001
From: silverpill <silverpill@firemail.cc>
Date: Thu, 2 Dec 2021 01:23:01 +0000
Subject: [PATCH] Enable pagination on home timeline

---
 src/api/posts.ts       | 15 +++++++++++++--
 src/views/PostList.vue | 28 ++++++++++++++++++++++++++--
 2 files changed, 39 insertions(+), 4 deletions(-)

diff --git a/src/api/posts.ts b/src/api/posts.ts
index 5c83a25..a1eb500 100644
--- a/src/api/posts.ts
+++ b/src/api/posts.ts
@@ -44,9 +44,20 @@ export interface Post {
   token_tx_id: string | null;
 }
 
-export async function getPosts(authToken: string): Promise<Post[]> {
+export async function getHomeTimeline(
+  authToken: string,
+  maxId?: string,
+): Promise<Post[]> {
   const url = `${BACKEND_URL}/api/v1/timelines/home`
-  const response = await http(url, { authToken })
+  let queryParams
+  if (maxId) {
+    queryParams = { max_id: maxId }
+  }
+  const response = await http(url, {
+    method: "GET",
+    queryParams,
+    authToken,
+  })
   const data = await response.json()
   return data
 }
diff --git a/src/views/PostList.vue b/src/views/PostList.vue
index 8d88258..af7c1dd 100644
--- a/src/views/PostList.vue
+++ b/src/views/PostList.vue
@@ -3,6 +3,13 @@
     <div class="content posts">
       <post-editor @post-created="insertPost"></post-editor>
       <post-or-repost v-for="post in posts" :post="post" :key="post.id"></post-or-repost>
+      <button
+        v-if="isPageFull()"
+        class="btn"
+        @click="loadNextPage()"
+      >
+        Show more posts
+      </button>
     </div>
     <sidebar></sidebar>
   </div>
@@ -11,13 +18,15 @@
 <script lang="ts">
 import { Options, Vue, setup } from "vue-class-component"
 
-import { Post, getPosts } from "@/api/posts"
+import { Post, getHomeTimeline } from "@/api/posts"
 import Avatar from "@/components/Avatar.vue"
 import PostOrRepost from "@/components/PostOrRepost.vue"
 import PostEditor from "@/components/PostEditor.vue"
 import Sidebar from "@/components/Sidebar.vue"
 import { useCurrentUser } from "@/store/user"
 
+const PAGE_SIZE = 20
+
 @Options({
   components: {
     Avatar,
@@ -37,13 +46,28 @@ export default class PostList extends Vue {
 
   async created() {
     const authToken = this.store.ensureAuthToken()
-    this.posts = await getPosts(authToken)
+    this.posts = await getHomeTimeline(authToken)
   }
 
   insertPost(post: Post) {
     this.posts = [post, ...this.posts]
   }
 
+  isPageFull(): boolean {
+    return this.posts.length >= PAGE_SIZE
+  }
+
+  async loadNextPage() {
+    if (this.posts.length > 0) {
+      const authToken = this.store.ensureAuthToken()
+      const posts = await getHomeTimeline(
+        authToken,
+        this.posts[this.posts.length - 1].id,
+      )
+      this.posts.push(...posts)
+    }
+  }
+
 }
 
 </script>