Enable pagination at notifications page

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()

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">