feature: Add events pagination

Author: vchurbanov

src/shared/lib/io/use-events-requests.ts

@@ -1,10 +1,16 @@
 import {storeToRefs} from "pinia";
 import {useEventsStore, useProfileStore} from "../../stores";
-import type { EventId, EventType, ServerEvent } from '../../types';
+import type { EventId, EventType, EventTypeCount, EventsPreviewMeta, ServerEvent } from '../../types';
 import { REST_API_URL } from "./constants";
 
 type TUseEventsRequests = () => {
   getAll: () => Promise<ServerEvent<unknown>[]>,
+  getPreviewPageByType: (
+    type: EventType,
+    limit: number,
+    cursor?: string | null
+  ) => Promise<{ data: ServerEvent<unknown>[]; meta: EventsPreviewMeta | null }>,
+  getTypeCounts: () => Promise<EventTypeCount[]>,
   getSingle: (id: EventId) => Promise<ServerEvent<EventType> | null>,
   deleteAll: () => Promise<void | Response>,
   deleteList: (uuids: EventId[]) => Promise<void | Response>,
@@ -22,6 +28,25 @@ export const useEventsRequests: TUseEventsRequests = () => {
   const headers = {"X-Auth-Token": token.value }
   const getEventRestUrl = (param: string): string => `${REST_API_URL}/api/event/${param}${project.value ? `?project=${project.value}` : ''}`
   const getEventsPreviewRestUrl = (): string => `${REST_API_URL}/api/events/preview${project.value ? `?project=${project.value}` : ''}`
+  const getEventsPreviewByTypeRestUrl = (
+    type: EventType,
+    limit: number,
+    cursor?: string | null
+  ): string => {
+    const params = new URLSearchParams({
+      type,
+      limit: String(limit),
+      ...(project.value ? { project: project.value } : {}),
+    })
+
+    if (cursor) {
+      params.set('cursor', cursor)
+    }
+
+    return `${REST_API_URL}/api/events/preview?${params.toString()}`
+  }
+  const getEventsTypeCountsRestUrl = (): string =>
+    `${REST_API_URL}/api/events/type-counts${project.value ? `?project=${project.value}` : ''}`
 
   const getAll = () => fetch(getEventsPreviewRestUrl(), { headers })
     .then((response) => response.json())
@@ -41,6 +66,45 @@ export const useEventsRequests: TUseEventsRequests = () => {
     })
     .then((events: ServerEvent<unknown>[]) => events)
 
+  const getPreviewPageByType = (type: EventType, limit: number, cursor?: string | null) =>
+    fetch(getEventsPreviewByTypeRestUrl(type, limit, cursor), { headers })
+      .then((response) => response.json())
+      .then((response) => {
+        if (response?.data) {
+          return {
+            data: response.data as ServerEvent<unknown>[],
+            meta: (response.meta ?? null) as EventsPreviewMeta | null,
+          }
+        }
+
+        if (response?.code === 403) {
+          console.error('Forbidden')
+          return { data: [], meta: null }
+        }
+
+        console.error('Fetch Error')
+
+        return { data: [], meta: null }
+      })
+
+  const getTypeCounts = () => fetch(getEventsTypeCountsRestUrl(), { headers })
+    .then((response) => response.json())
+    .then((response) => {
+      if (response?.data) {
+        return response.data as EventTypeCount[]
+      }
+
+      if (response?.code === 403) {
+        console.error('Forbidden')
+        return [];
+      }
+
+      console.error('Fetch Error')
+
+      return [];
+    })
+    .then((counts: EventTypeCount[]) => counts)
+
   const getSingle = (id: EventId) => fetch(getEventRestUrl(id), {headers})
     .then((response) => response.json())
     .then((response) => {
@@ -91,6 +155,8 @@ export const useEventsRequests: TUseEventsRequests = () => {
 
   return {
     getAll,
+    getPreviewPageByType,
+    getTypeCounts,
     getSingle,
     deleteAll,
     deleteList,

src/shared/lib/use-api-transport/use-api-transport.ts

@@ -26,6 +26,8 @@ export const useApiTransport = () => {
   const connectionStore = useConnectionStore()
   const {
     getAll,
+    getPreviewPageByType,
+    getTypeCounts,
     getSingle,
     deleteAll,
     deleteList,
@@ -137,6 +139,8 @@ export const useApiTransport = () => {
 
   return {
     getEventsAll: getAll,
+    getEventsPreviewByTypePage: getPreviewPageByType,
+    getEventsTypeCounts: getTypeCounts,
     getEvent: getSingle,
     deleteEvent,
     deleteEventsAll,

src/shared/lib/use-events/use-events-api.ts

@@ -1,14 +1,18 @@
 import { storeToRefs } from "pinia";
 import type { Ref } from 'vue';
 import { useEventsStore } from "../../stores";
-import type { EventId, EventType, ServerEvent } from '../../types';
+import { EventTypes, type EventId, type EventType, type EventsPreviewMeta, type ServerEvent } from '../../types';
 import { useApiTransport } from '../use-api-transport'
 
 
 export type TUseEventsApi = {
   items: Ref<ServerEvent<unknown>[]>
   getItem: (id: EventId) => Promise<ServerEvent<EventType> | null>
   getAll: () => void
+  loadMoreByType: (
+    type: EventType,
+    cursor?: string | null
+  ) => Promise<{ meta: EventsPreviewMeta | null; data: ServerEvent<unknown>[] }>
   removeAll: () => void
   removeByType: (type: EventType) => void
   removeById: (id: EventId) => void
@@ -26,10 +30,13 @@ export const useEventsApi = (): TUseEventsApi => {
     deleteEventsAll,
     deleteEventsList,
     deleteEventsByType,
-    getEventsAll,
+    getEventsPreviewByTypePage,
+    getEventsTypeCounts,
     getEvent,
   } = useApiTransport();
 
+  const LOADING_PAGE_SIZE = 25;
+
   const removeList = async (uuids: EventId[]) => {
     const res = await deleteEventsList(uuids)
 
@@ -79,22 +86,63 @@ export const useEventsApi = (): TUseEventsApi => {
   }
 
   const getAll = () => {
-    getEventsAll().then((eventsList: ServerEvent<unknown>[]) => {
-      if (eventsList.length) {
-        eventsStore.initializeEvents(eventsList);
-      } else {
-        // NOTE: clear cached events hardly
-        eventsStore.removeAll();
-      }
-    }).catch((e) => {
-      console.error(e);
+    eventsStore.initializeEvents([]);
+    eventsStore.resetPreviewPagination();
+
+    getEventsTypeCounts()
+      .then((typeCounts) => {
+        eventsStore.setEventCounts(typeCounts);
+      })
+      .catch((e) => {
+        console.error(e);
+        eventsStore.resetEventCounts();
+      });
+
+    Object.values(EventTypes).forEach((eventType) => {
+      getEventsPreviewByTypePage(eventType, LOADING_PAGE_SIZE)
+        .then(({ data, meta }) => {
+          if (data.length) {
+            eventsStore.mergeEvents(data, { updateCounts: false });
+          }
+          eventsStore.setPreviewPagination(eventType, meta);
+        })
+        .catch((e) => {
+          console.error(e);
+        })
     })
   }
 
+  const loadMoreByType = async (eventType: EventType, cursor?: string | null) => {
+    const pagination = eventsStore.previewPagination[eventType as EventTypes];
+    if (!pagination?.hasMore) {
+      return { meta: null, data: [] };
+    }
+
+    const requestCursor = cursor ?? pagination.cursor;
+    const { data, meta } = await getEventsPreviewByTypePage(
+      eventType,
+      LOADING_PAGE_SIZE,
+      requestCursor,
+    );
+
+    if (data.length) {
+      eventsStore.mergeEvents(data, { updateCounts: false });
+
+      if (eventsStore.cachedIds[eventType]?.length) {
+        eventsStore.appendCachedIds(eventType, data.map(({ uuid }) => uuid));
+      }
+    }
+
+    eventsStore.setPreviewPagination(eventType, meta);
+
+    return { meta, data };
+  }
+
   return {
     items: events as unknown as Ref<ServerEvent<unknown>[]>,
     getItem: getEvent,
     getAll,
+    loadMoreByType,
     removeAll,
     removeByType,
     removeById,