From b956df34791b329bdc3e96f6ce3c65c7f261dd7c Mon Sep 17 00:00:00 2001
From: silverpill <silverpill@firemail.cc>
Date: Fri, 14 Jan 2022 19:15:34 +0000
Subject: [PATCH] Enable pagination at notifications page

---
 src/api/notifications.ts       |  5 ++++-
 src/views/NotificationList.vue | 20 +++++++++++++++++++-
 2 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/src/api/notifications.ts b/src/api/notifications.ts
index 8a098b8..0bc1b97 100644
--- a/src/api/notifications.ts
+++ b/src/api/notifications.ts
@@ -1,6 +1,6 @@
 import { BACKEND_URL } from "@/constants"
 
-import { http } from "./common"
+import { PAGE_SIZE, http } from "./common"
 import { Post } from "./posts"
 import { Profile } from "./users"
 
@@ -14,10 +14,13 @@ export interface Notification {
 
 export async function getNotifications(
   authToken: string,
+  maxId?: string,
 ): Promise<Notification[]> {
   const url = `${BACKEND_URL}/api/v1/notifications`
+  const queryParams = { max_id: maxId, limit: PAGE_SIZE }
   const response = await http(url, {
     method: "GET",
+    queryParams,
     authToken,
   })
   const data = await response.json()
diff --git a/src/views/NotificationList.vue b/src/views/NotificationList.vue
index 38d7cbf..3fc8494 100644
--- a/src/views/NotificationList.vue
+++ b/src/views/NotificationList.vue
@@ -61,6 +61,13 @@
           <div class="timestamp">{{ formatDate(notification.created_at) }}</div>
         </router-link>
       </div>
+      <button
+        v-if="isPageFull()"
+        class="btn"
+        @click="loadNextPage()"
+      >
+        Show more notifications
+      </button>
     </div>
     <sidebar></sidebar>
   </div>
@@ -69,6 +76,7 @@
 <script setup lang="ts">
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import { ref, onMounted } from "vue"
+import { PAGE_SIZE } from "@/api/common"
 import { updateNotificationMarker } from "@/api/markers"
 import { getNotifications } from "@/api/notifications"
 import Avatar from "@/components/Avatar.vue"
@@ -79,11 +87,11 @@ import { useNotifications } from "@/store/notifications"
 import { useCurrentUser } from "@/store/user"
 import { formatDate } from "@/utils/format"
 
+const { ensureAuthToken } = useCurrentUser()
 const { getActorAddress } = useInstanceInfo()
 const { notifications } = useNotifications()
 
 onMounted(async () => {
-  const { ensureAuthToken } = useCurrentUser()
   // Update notification timeline marker
   const firstNotification = notifications.value[0]
   if (firstNotification) {
@@ -102,6 +110,16 @@ function getSenderName(notification: Notification): string {
 function onPostDeleted(notificationIndex: number) {
   notifications.value.splice(notificationIndex, 1)
 }
+
+function isPageFull(): boolean {
+  return notifications.value.length >= PAGE_SIZE
+}
+
+async function loadNextPage() {
+  const maxId = notifications.value[notifications.value.length - 1].id
+  const newItems = await getNotifications(ensureAuthToken(), maxId)
+  notifications.value.push(...newItems)
+}
 </script>
 
 <style scoped lang="scss">