From 94191913caf99099d0dac10b07a0625b5ee30634 Mon Sep 17 00:00:00 2001 From: Pavlo Strunkin Date: Wed, 17 Feb 2021 00:00:39 +0200 Subject: [PATCH 1/2] Switch to client instead of server side pagination https://github.com/Visual-Regression-Tracker/Visual-Regression-Tracker/issues/213 --- src/components/TestRunList/index.tsx | 24 +++++++---------- src/contexts/testRun.context.tsx | 39 +++++++++------------------- src/services/testRun.service.ts | 10 +++---- 3 files changed, 24 insertions(+), 49 deletions(-) diff --git a/src/components/TestRunList/index.tsx b/src/components/TestRunList/index.tsx index aec84995..e1b211b3 100644 --- a/src/components/TestRunList/index.tsx +++ b/src/components/TestRunList/index.tsx @@ -15,7 +15,6 @@ import { ColDef, RowParams, CellParams, - PageChangeParams, } from "@material-ui/data-grid"; import { DataGridCustomToolbar } from "./DataGridCustomToolbar"; @@ -53,25 +52,24 @@ 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 ( @@ -79,10 +77,9 @@ const TestRunList: React.FunctionComponent = () => { { ) ); }} - onPageChange={(param: PageChangeParams) => - getTestRunListCalback(param.page) - } /> ); diff --git a/src/contexts/testRun.context.tsx b/src/contexts/testRun.context.tsx index f7574411..de793066 100644 --- a/src/contexts/testRun.context.tsx +++ b/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; + payload: Array; } 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; loading: boolean; }; @@ -77,12 +74,7 @@ const TestRunDispatchContext = React.createContext( ); 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 { 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) { diff --git a/src/services/testRun.service.ts b/src/services/testRun.service.ts index b73c91ec..1701ae8f 100644 --- a/src/services/testRun.service.ts +++ b/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> { +async function getList(buildId: string): Promise { 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); } From 815288971b28119a6d0eb678107d5827bc7e3e1e Mon Sep 17 00:00:00 2001 From: Pavlo Strunkin Date: Wed, 17 Feb 2021 00:03:56 +0200 Subject: [PATCH 2/2] Switch to client instead of server side pagination https://github.com/Visual-Regression-Tracker/Visual-Regression-Tracker/issues/213 --- src/_test/stub.helper.ts | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/src/_test/stub.helper.ts b/src/_test/stub.helper.ts index 5703b82c..203a98b9 100644 --- a/src/_test/stub.helper.ts +++ b/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) => cy.stub(projectsService, "getAll").resolves(projects), }; const buildsServiceStub = { getDetails: (build: Build) => cy.stub(buildsService, "getDetails").resolves(build), - getList: (builds: Build[]) => + getList: (builds: Array) => 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) => + cy.stub(testRunService, "getList").resolves(testRuns), }; export { projectStub, buildsServiceStub, testRunServiceStub };