Switch to client instead of server side pagination (#144)

Visual-Regression-Tracker/Visual-Regression-Tracker#213

Author: pashidlos

src/_test/stub.helper.ts

@@ -3,14 +3,14 @@ import { buildsService, projectsService, testRunService } from "../services";
 import { Build, Project, TestRun } from "../types";
 
 const projectStub = {
-  getAll: (projects: Project[]) =>
+  getAll: (projects: Array<Project>) =>
     cy.stub(projectsService, "getAll").resolves(projects),
 };
 
 const buildsServiceStub = {
   getDetails: (build: Build) =>
     cy.stub(buildsService, "getDetails").resolves(build),
-  getList: (builds: Build[]) =>
+  getList: (builds: Array<Build>) =>
     cy.stub(buildsService, "getList").resolves({
       data: builds,
       total: 100,
@@ -20,10 +20,8 @@ const buildsServiceStub = {
 };
 
 const testRunServiceStub = {
-  getList: (testRuns: TestRun[]) =>
-    cy
-      .stub(testRunService, "getList")
-      .resolves({ data: testRuns, total: 100, skip: 0, take: 10 }),
+  getList: (testRuns: Array<TestRun>) =>
+    cy.stub(testRunService, "getList").resolves(testRuns),
 };
 
 export { projectStub, buildsServiceStub, testRunServiceStub };

src/components/TestRunList/index.tsx

@@ -15,7 +15,6 @@ import {
   ColDef,
   RowParams,
   CellParams,
-  PageChangeParams,
 } from "@material-ui/data-grid";
 import { DataGridCustomToolbar } from "./DataGridCustomToolbar";
 
@@ -53,36 +52,34 @@ const columns: ColDef[] = [
 
 const TestRunList: React.FunctionComponent = () => {
   const { enqueueSnackbar } = useSnackbar();
-  const { testRuns, loading, total, take } = useTestRunState();
+  const { testRuns, loading } = useTestRunState();
   const { selectedBuildId } = useBuildState();
   const testRunDispatch = useTestRunDispatch();
   const history = useHistory();
 
   const getTestRunListCalback = React.useCallback(
-    (page: number) =>
+    () =>
       selectedBuildId &&
-      getTestRunList(testRunDispatch, selectedBuildId, page).catch(
-        (err: string) =>
-          enqueueSnackbar(err, {
-            variant: "error",
-          })
+      getTestRunList(testRunDispatch, selectedBuildId).catch((err: string) =>
+        enqueueSnackbar(err, {
+          variant: "error",
+        })
       ),
     [testRunDispatch, enqueueSnackbar, selectedBuildId]
   );
 
   React.useEffect(() => {
-    getTestRunListCalback(1);
+    getTestRunListCalback();
   }, [getTestRunListCalback]);
 
   return (
     <React.Fragment>
       <DataGrid
         rows={testRuns}
         columns={columns}
-        pageSize={take}
-        rowCount={total}
+        pageSize={10}
+        rowsPerPageOptions={[10, 20, 30]}
         loading={loading}
-        paginationMode={"server"}
         showToolbar={true}
         components={{
           Toolbar: DataGridCustomToolbar,
@@ -99,9 +96,6 @@ const TestRunList: React.FunctionComponent = () => {
             )
           );
         }}
-        onPageChange={(param: PageChangeParams) =>
-          getTestRunListCalback(param.page)
-        }
       />
     </React.Fragment>
   );

src/contexts/testRun.context.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { PaginatedData, TestRun } from "../types";
+import { TestRun } from "../types";
 import { testRunService } from "../services";
 
 interface IRequestAction {
@@ -9,17 +9,17 @@ interface IRequestAction {
 
 interface IGetAction {
   type: "get";
-  payload: PaginatedData<TestRun>;
+  payload: Array<TestRun>;
 }
 
 interface ISelectAction {
   type: "select";
-  payload: string | undefined;
+  payload?: string;
 }
 
 interface IIndexAction {
   type: "index";
-  payload: string | undefined;
+  payload?: string;
 }
 
 interface IDeleteAction {
@@ -60,12 +60,9 @@ type IAction =
 
 type Dispatch = (action: IAction) => void;
 type State = {
-  selectedTestRunId: string | undefined;
-  selectedTestRunIndex: number | undefined;
-  testRuns: TestRun[];
-  total: number;
-  take: number;
-  skip: number;
+  selectedTestRunId?: string;
+  selectedTestRunIndex?: number;
+  testRuns: Array<TestRun>;
   loading: boolean;
 };
 
@@ -77,12 +74,7 @@ const TestRunDispatchContext = React.createContext<Dispatch | undefined>(
 );
 
 const initialState: State = {
-  selectedTestRunId: undefined,
-  selectedTestRunIndex: undefined,
   testRuns: [],
-  take: 10,
-  skip: 0,
-  total: 0,
   loading: false,
 };
 
@@ -107,13 +99,9 @@ function testRunReducer(state: State, action: IAction): State {
         loading: true,
       };
     case "get":
-      const { data, take, skip, total } = action.payload;
       return {
         ...state,
-        testRuns: data,
-        take,
-        skip,
-        total,
+        testRuns: action.payload,
         loading: false,
       };
     case "delete":
@@ -175,16 +163,13 @@ function useTestRunDispatch() {
 
 async function getTestRunList(
   dispatch: Dispatch,
-  buildId: string,
-  page: number
+  buildId: string
 ): Promise<void> {
   dispatch({ type: "request" });
 
-  return testRunService
-    .getList(buildId, initialState.take, initialState.take * (page - 1))
-    .then((response) => {
-      dispatch({ type: "get", payload: response });
-    });
+  return testRunService.getList(buildId).then((response) => {
+    dispatch({ type: "get", payload: response });
+  });
 }
 
 async function deleteTestRun(dispatch: Dispatch, id: string) {

src/services/testRun.service.ts

@@ -1,22 +1,18 @@
-import { PaginatedData, TestRun } from "../types";
+import { TestRun } from "../types";
 import { handleResponse, authHeader } from "../_helpers/service.helpers";
 import { API_URL } from "../_config/env.config";
 import { IgnoreArea } from "../types/ignoreArea";
 
 const ENDPOINT_URL = "/test-runs";
 
-async function getList(
-  buildId: string,
-  take: number,
-  skip: number
-): Promise<PaginatedData<TestRun>> {
+async function getList(buildId: string): Promise<TestRun[]> {
   const requestOptions = {
     method: "GET",
     headers: authHeader(),
   };
 
   return fetch(
-    `${API_URL}${ENDPOINT_URL}?buildId=${buildId}&take=${take}&skip=${skip}`,
+    `${API_URL}${ENDPOINT_URL}?buildId=${buildId}`,
     requestOptions
   ).then(handleResponse);
 }