Add cursor-based pagination for environment listings

conda-incubator · Jan 20, 2025 · 65c3853 · 65c3853
1 parent b202f4f
commit 65c3853
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 21 deletions.
diff --git a/src/common/interfaces/ApiResponse.ts b/src/common/interfaces/ApiResponse.ts
@@ -1,8 +1,18 @@
-export interface IApiResponse<T = unknown> {
+interface IApiResponse<T = unknown> {
   data: T;
   message: string | null;
   page: number;
   size: number;
   count: number;
   status: string;
 }
+
+interface ICursorPaginatedApiResponse<T = unknown> {
+  data: T;
+  status: string;
+  message: string | null;
+  cursor: string | null;
+  count: number;
+}
+
+export { IApiResponse, ICursorPaginatedApiResponse };
diff --git a/src/features/environments/components/Environments.tsx b/src/features/environments/components/Environments.tsx
@@ -35,6 +35,7 @@ const BaseEnvironments = ({
   const { palette } = useTheme();
   const version: string = process.env.REACT_APP_VERSION as string;
   const environmentsState = useAppSelector(state => state.environments);
+  // const environmentsState = useAppSelector(state => state.environments);
   const namespacesState = useAppSelector(state => state.namespaces);
 
   const dispatch = useAppDispatch();
@@ -99,8 +100,8 @@ const BaseEnvironments = ({
 
   const getEnvironments = async () => {
     const { data: environmentsData } = await triggerQuery({
-      page: environmentsState.page,
-      size,
+      cursor: environmentsState.cursor,
+      limit: size,
       search: environmentsState.search
     });
 
@@ -115,31 +116,37 @@ const BaseEnvironments = ({
   };
 
   const handleChange = debounce(async (value: string) => {
-    const { data } = await triggerQuery({ page: 1, size, search: value });
+    const { data } = await triggerQuery({
+      cursor: null,
+      limit: size,
+      search: value
+    });
 
     if (data) {
       dispatch(
         environmentsSlice.actions.searched({
           data: data.data,
           count: data.count,
-          search: value
+          search: value,
+          cursor: environmentsState.cursor
         })
       );
     }
   }, 500);
 
   const next = async () => {
     const { data } = await triggerQuery({
-      page: environmentsState.page + 1,
-      size,
+      cursor: environmentsState.cursor,
+      limit: size,
       search: environmentsState.search
     });
 
     if (data) {
       dispatch(
         environmentsSlice.actions.nextFetched({
           data: data.data,
-          count: data.count
+          count: data.count,
+          cursor: environmentsState.cursor
         })
       );
     }
@@ -184,7 +191,7 @@ const BaseEnvironments = ({
         {environmentsState.data && (
           <EnvironmentsList
             next={next}
-            hasMore={size * environmentsState.page < environmentsState.count}
+            hasMore={environmentsState.data.length < environmentsState.count}
             environmentsList={environmentsState.data}
             namespacesList={namespacesState.data}
             search={environmentsState.search}

diff --git a/src/features/environments/environmentsApiSlice.ts b/src/features/environments/environmentsApiSlice.ts
@@ -1,15 +1,23 @@
-import { IApiResponse } from "../../common/interfaces";
+import { ICursorPaginatedApiResponse } from "../../common/interfaces";
 import { Environment } from "../../common/models";
 import { apiSlice } from "../api";
 
 export const environmentsApiSlice = apiSlice.injectEndpoints({
   endpoints: builder => ({
     fetchEnvironments: builder.query<
-      IApiResponse<Environment[]>,
-      { page: number; size: number; search: string }
+      ICursorPaginatedApiResponse<Environment[]>,
+      { limit: number; cursor: string | null; search: string }
     >({
-      query: dto =>
-        `/api/v1/environment/?page=${dto.page}&size=${dto.size}&search=${dto.search}`
+      query: ({ cursor, limit, search }) => {
+        const parameters = [
+          cursor !== null ? `cursor=${cursor}` : "",
+          `limit=${limit}`,
+          `search=${search}`
+        ];
+        const queryParams =
+          parameters.length > 0 ? `?${parameters.join("&")}` : "";
+        return `/api/v1/environment/${queryParams}`;
+      }
     })
   })
 });

diff --git a/src/features/environments/reducer.ts b/src/features/environments/reducer.ts
@@ -2,14 +2,14 @@ import { createSlice, PayloadAction } from "@reduxjs/toolkit";
 import { Environment } from "../../common/models";
 
 export interface IEnvironmentsState {
-  page: number;
+  cursor: string | null;
   data: Environment[];
   count: number;
   search: string;
 }
 
 export const initialState: IEnvironmentsState = {
-  page: 1,
+  cursor: null,
   data: [],
   count: 0,
   search: ""
@@ -33,24 +33,28 @@ export const environmentsSlice = createSlice({
         data: Environment[];
         count: number;
         search: string;
+        cursor: string | null;
       }>
     ) => {
-      return { ...action.payload, page: 1 };
+      return { ...action.payload, cursor: null };
     },
     nextFetched: (
       state: IEnvironmentsState,
-      action: PayloadAction<{ data: Environment[]; count: number }>
+      action: PayloadAction<{
+        data: Environment[];
+        count: number;
+        cursor: string | null;
+      }>
     ) => {
-      const { data, count } = action.payload;
+      const { data, count, cursor } = action.payload;
 
       const newData = state.data?.concat(data);
-      const nextPage = state.page + 1;
 
       return {
         ...state,
         data: newData,
         count: count,
-        page: nextPage
+        cursor: cursor
       };
     }
   }