TestRuns. Add pagination

src/_test/stub.helper.ts

@@ -21,7 +21,9 @@ const buildsServiceStub = {
 
 const testRunServiceStub = {
   getList: (testRuns: TestRun[]) =>
-    cy.stub(testRunService, "getList").resolves(testRuns),
+    cy
+      .stub(testRunService, "getList")
+      .resolves({ data: testRuns, total: 100, skip: 0, take: 10 }),
 };
 
 export { projectStub, buildsServiceStub, testRunServiceStub };

src/contexts/testRun.context.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { TestRun } from "../types";
+import { PaginatedData, TestRun } from "../types";
 import { testRunService } from "../services";
 
 interface IRequestAction {
@@ -9,7 +9,7 @@ interface IRequestAction {
 
 interface IGetAction {
   type: "get";
-  payload: TestRun[];
+  payload: PaginatedData<TestRun>;
 }
 
 interface ISelectAction {
@@ -63,6 +63,9 @@ type State = {
   selectedTestRunId: string | undefined;
   selectedTestRunIndex: number | undefined;
   testRuns: TestRun[];
+  total: number;
+  take: number;
+  skip: number;
   loading: boolean;
 };
 
@@ -77,6 +80,9 @@ const initialState: State = {
   selectedTestRunId: undefined,
   selectedTestRunIndex: undefined,
   testRuns: [],
+  take: 10,
+  skip: 0,
+  total: 0,
   loading: false,
 };
 
@@ -101,9 +107,13 @@ function testRunReducer(state: State, action: IAction): State {
         loading: true,
       };
     case "get":
+      const { data, take, skip, total } = action.payload;
       return {
         ...state,
-        testRuns: action.payload,
+        testRuns: data,
+        take,
+        skip,
+        total,
         loading: false,
       };
     case "delete":
@@ -163,12 +173,18 @@ function useTestRunDispatch() {
   return context;
 }
 
-async function getTestRunList(dispatch: Dispatch, buildId: string) {
+async function getTestRunList(
+  dispatch: Dispatch,
+  buildId: string,
+  page: number
+): Promise<void> {
   dispatch({ type: "request" });
 
-  return testRunService.getList(buildId).then((items) => {
-    dispatch({ type: "get", payload: items });
-  });
+  return testRunService
+    .getList(buildId, initialState.take, initialState.take * (page - 1))
+    .then((response) => {
+      dispatch({ type: "get", payload: response });
+    });
 }
 
 async function deleteTestRun(dispatch: Dispatch, id: string) {

src/pages/ProjectPage.tsx

@@ -58,7 +58,12 @@ const ProjectPage = () => {
   const buildDispatch = useBuildDispatch();
   const { selectedProjectId } = useProjectState();
   const projectDispatch = useProjectDispatch();
-  const { testRuns, selectedTestRunIndex } = useTestRunState();
+  const {
+    testRuns,
+    selectedTestRunIndex,
+    total: testRunTotal,
+    take: testRunTake,
+  } = useTestRunState();
   const testRunDispatch = useTestRunDispatch();
 
   // filter
@@ -81,16 +86,6 @@ const ProjectPage = () => {
     }
   }, [projectId, projectDispatch]);
 
-  useEffect(() => {
-    if (selectedBuildId) {
-      getTestRunList(testRunDispatch, selectedBuildId).catch((err) =>
-        enqueueSnackbar(err, {
-          variant: "error",
-        })
-      );
-    }
-  }, [selectedBuildId, testRunDispatch, enqueueSnackbar]);
-
   useEffect(() => {
     if (queryParams.buildId) {
       selectBuild(buildDispatch, queryParams.buildId);
@@ -117,6 +112,18 @@ const ProjectPage = () => {
     );
   }, [query, os, device, browser, viewport, testStatus, testRuns]);
 
+  const getTestRunListCalback: any = React.useCallback(
+    (page: number) =>
+      selectedBuildId &&
+      getTestRunList(testRunDispatch, selectedBuildId, page).catch(
+        (err: string) =>
+          enqueueSnackbar(err, {
+            variant: "error",
+          })
+      ),
+    [testRunDispatch, enqueueSnackbar, selectedBuildId]
+  );
+
   const getBuildListCalback: any = React.useCallback(
     (page: number) =>
       selectedProjectId &&
@@ -129,6 +136,10 @@ const ProjectPage = () => {
     [buildDispatch, enqueueSnackbar, selectedProjectId]
   );
 
+  React.useEffect(() => {
+    getTestRunListCalback(1);
+  }, [getTestRunListCalback]);
+
   React.useEffect(() => {
     getBuildListCalback(1);
   }, [getBuildListCalback]);
@@ -162,9 +173,19 @@ const ProjectPage = () => {
           viewportState={[viewport, setViewport]}
           testStatusState={[testStatus, setTestStatus]}
         />
-        <Box height="75%">
+        <Box height="70%" my={0.5}>
           <TestRunList items={filteredTestRuns} />
         </Box>
+        <Grid container justify="center">
+          <Grid item>
+            <Pagination
+              size="small"
+              defaultPage={1}
+              count={Math.ceil(testRunTotal / testRunTake)}
+              onChange={(event, page) => getTestRunListCalback(page)}
+            />
+          </Grid>
+        </Grid>
 
         {selectedTestRunIndex !== undefined && testRuns[selectedTestRunIndex] && (
           <Dialog open={true} fullScreen className={classes.modal}>

src/services/testRun.service.ts

@@ -1,18 +1,22 @@
-import { TestRun } from "../types";
+import { PaginatedData, 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): Promise<TestRun[]> {
+async function getList(
+  buildId: string,
+  take: number,
+  skip: number
+): Promise<PaginatedData<TestRun>> {
   const requestOptions = {
     method: "GET",
     headers: authHeader(),
   };
 
   return fetch(
-    `${API_URL}${ENDPOINT_URL}?buildId=${buildId}`,
+    `${API_URL}${ENDPOINT_URL}?buildId=${buildId}&take=${take}&skip=${skip}`,
     requestOptions
   ).then(handleResponse);
 }