Enable pagination on profile directory page

src/api/users.ts

@@ -1,5 +1,5 @@
 import { BACKEND_URL } from "@/constants"
-import { http } from "./common"
+import { PAGE_SIZE, http } from "./common"
 
 interface ProfileField {
   name: string;
@@ -103,9 +103,13 @@ export async function getProfile(
   return data
 }
 
-export async function getProfiles(authToken: string): Promise<Profile[]> {
+export async function getProfiles(
+  authToken: string,
+  offset?: number,
+): Promise<Profile[]> {
   const url = `${BACKEND_URL}/api/v1/directory`
-  const response = await http(url, { authToken })
+  const queryParams = { offset, limit: PAGE_SIZE }
+  const response = await http(url, { queryParams, authToken })
   const data = await response.json()
   return data
 }

src/views/ProfileDirectory.vue

@@ -9,6 +9,13 @@
       >
         <profile-card :profile="profile"></profile-card>
       </router-link>
+      <button
+        v-if="isPageFull()"
+        class="btn"
+        @click="loadNextPage()"
+      >
+        Show more posts
+      </button>
     </div>
     <sidebar></sidebar>
   </div>
@@ -17,6 +24,7 @@
 <script lang="ts">
 import { Options, Vue, setup } from "vue-class-component"
 
+import { PAGE_SIZE } from "@/api/common"
 import { Profile, getProfiles } from "@/api/users"
 import ProfileCard from "@/components/ProfileCard.vue"
 import Sidebar from "@/components/Sidebar.vue"
@@ -36,10 +44,26 @@ export default class ProfileDirectory extends Vue {
   })
 
   profiles: Profile[] = []
+  initialProfileCount: number | null = null
 
   async created() {
     const authToken = this.store.ensureAuthToken()
     this.profiles = await getProfiles(authToken)
+    this.initialProfileCount = this.profiles.length
+  }
+
+  isPageFull(): boolean {
+    if (this.initialProfileCount === null) {
+      return false
+    }
+    return this.initialProfileCount >= PAGE_SIZE
+  }
+
+  async loadNextPage() {
+    const authToken = this.store.ensureAuthToken()
+    const offset = this.profiles.length
+    const profiles = await getProfiles(authToken, offset)
+    this.profiles.push(...profiles)
   }
 
 }