Skip to content

Commit f07ed35

Browse files
pashidlospashidlos
authored
Debounce socket events emit (#145)
Visual-Regression-Tracker/Visual-Regression-Tracker#212
1 parent f011ba7 commit f07ed35

File tree

8 files changed

+80
-108
lines changed

8 files changed

+80
-108
lines changed

‎src/components/ApproveRejectButtons.tsx‎

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,22 +2,17 @@ import { Grid, Tooltip, Chip, Button } from "@material-ui/core";
22
import { useSnackbar } from "notistack";
33
import { useHotkeys } from "react-hotkeys-hook";
44
import React from "react";
5-
import { updateTestRun, useTestRunDispatch } from "../contexts";
65
import { testRunService } from "../services";
76
import { TestRun } from "../types";
87

98
export const ApproveRejectButtons: React.FunctionComponent<{
109
testRun: TestRun;
1110
}> = ({ testRun }) => {
12-
const testRunDispatch = useTestRunDispatch();
1311
const { enqueueSnackbar } = useSnackbar();
1412

1513
const approve = () => {
1614
testRunService
1715
.approve(testRun.id, testRun.merge)
18-
.then((testRun) => {
19-
updateTestRun(testRunDispatch, testRun);
20-
})
2116
.then(() =>
2217
enqueueSnackbar("Approved", {
2318
variant: "success",
@@ -33,9 +28,6 @@ export const ApproveRejectButtons: React.FunctionComponent<{
3328
const reject = () => {
3429
testRunService
3530
.reject(testRun.id)
36-
.then((testRun) => {
37-
updateTestRun(testRunDispatch, testRun);
38-
})
3931
.then(() =>
4032
enqueueSnackbar("Rejected", {
4133
variant: "success",

‎src/components/BuildList/index.tsx‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -23,8 +23,6 @@ import {
2323
useBuildDispatch,
2424
deleteBuild,
2525
selectBuild,
26-
modifyBuild,
27-
stopBuild,
2826
getBuildList,
2927
useProjectState,
3028
} from "../../contexts";
@@ -36,6 +34,7 @@ import { TextValidator } from "react-material-ui-form-validator";
3634
import { Pagination } from "@material-ui/lab";
3735
import { Build } from "../../types";
3836
import { BaseModal } from "../BaseModal";
37+
import { buildsService } from "../../services";
3938

4039
const useStyles = makeStyles((theme: Theme) =>
4140
createStyles({
@@ -195,7 +194,8 @@ const BuildList: FunctionComponent = () => {
195194
{menuBuild.isRunning && (
196195
<MenuItem
197196
onClick={() => {
198-
stopBuild(buildDispatch, menuBuild.id)
197+
buildsService
198+
.update(menuBuild.id, { isRunning: false })
199199
.then((b) =>
200200
enqueueSnackbar(`${menuBuild.id} finished`, {
201201
variant: "success",
@@ -247,9 +247,10 @@ const BuildList: FunctionComponent = () => {
247247
</React.Fragment>
248248
}
249249
onSubmit={() => {
250-
modifyBuild(buildDispatch, menuBuild.id, {
251-
ciBuildId: newCiBuildId,
252-
})
250+
buildsService
251+
.update(menuBuild.id, {
252+
ciBuildId: newCiBuildId,
253+
})
253254
.then((b) => {
254255
toggleEditDialogOpen();
255256
})

‎src/components/TestDetailsModal.tsx‎

Lines changed: 2 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ import { Close, Add, Delete, Save, WarningRounded } from "@material-ui/icons";
2727
import { TestRunDetails } from "./TestRunDetails";
2828
import useImage from "use-image";
2929
import { routes } from "../constants";
30-
import { useTestRunDispatch, updateTestRun, selectTestRun } from "../contexts";
30+
import { useTestRunDispatch, selectTestRun } from "../contexts";
3131
import { DrawArea } from "./DrawArea";
3232
import { CommentsPopper } from "./CommentsPopper";
3333
import { useSnackbar } from "notistack";
@@ -256,18 +256,6 @@ const TestDetailsModal: React.FunctionComponent<{
256256
enqueueSnackbar("Ignore areas are updated", {
257257
variant: "success",
258258
});
259-
260-
// recalculate diff
261-
testRunService
262-
.recalculateDiff(testRun.id)
263-
.then((testRun) =>
264-
updateTestRun(testRunDispatch, testRun)
265-
)
266-
.then(() =>
267-
enqueueSnackbar("Diff recalculated", {
268-
variant: "success",
269-
})
270-
);
271259
})
272260
.catch((err) =>
273261
enqueueSnackbar(err, {
@@ -299,9 +287,7 @@ const TestDetailsModal: React.FunctionComponent<{
299287
onSave={(comment) =>
300288
Promise.all([
301289
// update in test run
302-
testRunService
303-
.setComment(testRun.id, comment)
304-
.then((testRun) => updateTestRun(testRunDispatch, testRun)),
290+
testRunService.setComment(testRun.id, comment),
305291
// update in variation
306292
testVariationService.setComment(
307293
testRun.testVariationId,

‎src/components/TestRunList/BulkDeleteButton.tsx‎

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,15 @@
11
import React from "react";
22
import { Typography, IconButton } from "@material-ui/core";
33
import { BaseComponentProps } from "@material-ui/data-grid";
4-
import { deleteTestRun, useTestRunDispatch } from "../../contexts";
54
import { BaseModal } from "../BaseModal";
65
import { useSnackbar } from "notistack";
76
import { Delete } from "@material-ui/icons";
7+
import { testRunService } from "../../services";
88

99
export const BulkDeleteButton: React.FunctionComponent<BaseComponentProps> = (
1010
props: BaseComponentProps
1111
) => {
1212
const { enqueueSnackbar } = useSnackbar();
13-
const testRunDispatch = useTestRunDispatch();
1413
const [deleteDialogOpen, setDeleteDialogOpen] = React.useState(false);
1514
const rows: Record<React.ReactText, boolean> = props.state.selection;
1615
const count = Object.keys(rows).length;
@@ -33,14 +32,19 @@ export const BulkDeleteButton: React.FunctionComponent<BaseComponentProps> = (
3332
<Typography>{`Are you sure you want to delete ${count} items?`}</Typography>
3433
}
3534
onSubmit={() => {
35+
enqueueSnackbar(
36+
"Wait for the confirmation message until BULK delete TestRuns is completed.",
37+
{
38+
variant: "info",
39+
}
40+
);
41+
toggleDeleteDialogOpen();
42+
3643
Promise.all(
37-
Object.keys(rows).map((id: string) =>
38-
deleteTestRun(testRunDispatch, id)
39-
)
44+
Object.keys(rows).map((id: string) => testRunService.remove(id))
4045
)
4146
.then(() => {
42-
toggleDeleteDialogOpen();
43-
enqueueSnackbar(`${count} items deleted`, {
47+
enqueueSnackbar(`${count} TestRuns deleted`, {
4448
variant: "success",
4549
});
4650
})

‎src/contexts/build.context.tsx‎

Lines changed: 11 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ interface IAddAction {
2929

3030
interface IUpdateAction {
3131
type: "update";
32-
payload: Build;
32+
payload: Array<Build>;
3333
}
3434

3535
type IAction =
@@ -74,7 +74,7 @@ function buildReducer(state: State, action: IAction): State {
7474
if (action.payload === null) {
7575
return {
7676
...state,
77-
selectedBuild: null
77+
selectedBuild: null,
7878
};
7979
} else {
8080
return {
@@ -113,14 +113,14 @@ function buildReducer(state: State, action: IAction): State {
113113
return {
114114
...state,
115115
selectedBuild:
116-
state.selectedBuild?.id === action.payload.id
117-
? action.payload
118-
: state.selectedBuild,
119-
buildList: state.buildList.map((p) => {
120-
if (p.id === action.payload.id) {
121-
return action.payload;
116+
action.payload.find((i) => i.id === state.selectedBuild?.id) ??
117+
state.selectedBuild,
118+
buildList: state.buildList.map((b) => {
119+
const item = action.payload.find((i) => i.id === b.id);
120+
if (item) {
121+
return item;
122122
}
123-
return p;
123+
return b;
124124
}),
125125
};
126126
default:
@@ -173,17 +173,6 @@ async function deleteBuild(dispatch: Dispatch, id: string) {
173173
});
174174
}
175175

176-
async function stopBuild(dispatch: Dispatch, id: string) {
177-
return buildsService.update(id, { "isRunning": false }).then((build) => {
178-
dispatch({ type: "update", payload: build });
179-
return build;
180-
});
181-
}
182-
183-
async function modifyBuild(dispatch: Dispatch, id: string, body: object) {
184-
return buildsService.update(id, body);
185-
}
186-
187176
async function selectBuild(dispatch: Dispatch, id: string | null) {
188177
if (id === null) {
189178
dispatch({ type: "select", payload: null });
@@ -198,8 +187,8 @@ async function addBuild(dispatch: Dispatch, build: Build) {
198187
dispatch({ type: "add", payload: build });
199188
}
200189

201-
async function updateBuild(dispatch: Dispatch, build: Build) {
202-
dispatch({ type: "update", payload: build });
190+
async function updateBuild(dispatch: Dispatch, builds: Array<Build>) {
191+
dispatch({ type: "update", payload: builds });
203192
}
204193

205194
export {
@@ -211,6 +200,4 @@ export {
211200
selectBuild,
212201
addBuild,
213202
updateBuild,
214-
modifyBuild,
215-
stopBuild,
216203
};

‎src/contexts/socket.context.tsx‎

Lines changed: 26 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import {
1111
useTestRunDispatch,
1212
addTestRun,
1313
updateTestRun,
14+
deleteTestRun,
1415
} from "./testRun.context";
1516
import { API_URL } from "../_config/env.config";
1617

@@ -67,30 +68,40 @@ function SocketProvider({ children }: SocketProviderProps) {
6768
addBuild(buildDispatch, build);
6869
});
6970

70-
state.socket.on("build_finished", function (build: Build) {
71-
updateBuild(buildDispatch, build);
71+
state.socket.on("build_updated", function (builds: Array<Build>) {
72+
updateBuild(buildDispatch, builds);
7273
});
7374

74-
state.socket.on("build_updated", function (build: Build) {
75-
updateBuild(buildDispatch, build);
76-
});
77-
78-
state.socket.on("testRun_created", function (testRun: TestRun) {
79-
if (testRun.buildId === selectedBuild?.id) {
80-
addTestRun(testRunDispatch, testRun);
75+
state.socket.on("testRun_created", function (testRuns: Array<TestRun>) {
76+
if (!selectedBuild) {
77+
return;
8178
}
79+
addTestRun(
80+
testRunDispatch,
81+
testRuns.filter((tr) => tr.buildId === selectedBuild.id)
82+
);
8283
});
8384

84-
state.socket.on("testRun_updated", function (testRun: TestRun) {
85-
if (testRun.buildId === selectedBuild?.id) {
86-
updateTestRun(testRunDispatch, testRun);
85+
state.socket.on("testRun_updated", function (testRuns: Array<TestRun>) {
86+
if (!selectedBuild) {
87+
return;
8788
}
89+
updateTestRun(
90+
testRunDispatch,
91+
testRuns.filter((tr) => tr.buildId === selectedBuild.id)
92+
);
8893
});
8994

90-
state.socket.on("testRun_deleted", function (testRun: TestRun) {
91-
if (testRun.buildId === selectedBuild?.id) {
92-
testRunDispatch({ type: "delete", payload: testRun.id });
95+
state.socket.on("testRun_deleted", function (testRuns: Array<TestRun>) {
96+
if (!selectedBuild) {
97+
return;
9398
}
99+
deleteTestRun(
100+
testRunDispatch,
101+
testRuns
102+
.filter((tr) => tr.buildId === selectedBuild.id)
103+
.map((testRun) => testRun.id)
104+
);
94105
});
95106
}
96107
}, [state.socket, selectedBuild, buildDispatch, testRunDispatch]);

‎src/contexts/testRun.context.tsx‎

Lines changed: 23 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -24,17 +24,17 @@ interface IIndexAction {
2424

2525
interface IDeleteAction {
2626
type: "delete";
27-
payload: string;
27+
payload: Array<string>;
2828
}
2929

3030
interface IAddAction {
3131
type: "add";
32-
payload: TestRun;
32+
payload: Array<TestRun>;
3333
}
3434

3535
interface IUpdateAction {
3636
type: "update";
37-
payload: TestRun;
37+
payload: Array<TestRun>;
3838
}
3939

4040
interface IApproveAction {
@@ -107,19 +107,26 @@ function testRunReducer(state: State, action: IAction): State {
107107
case "delete":
108108
return {
109109
...state,
110-
testRuns: state.testRuns.filter((p) => p.id !== action.payload),
110+
testRuns: state.testRuns.filter((p) => !action.payload.includes(p.id)),
111111
};
112112
case "add":
113113
return {
114114
...state,
115-
testRuns: [...state.testRuns, action.payload],
115+
testRuns: [
116+
...state.testRuns,
117+
...action.payload.filter(
118+
// remove duplicates
119+
(i) => !state.testRuns.find((tr) => tr.id === i.id)
120+
),
121+
],
116122
};
117123
case "update":
118124
return {
119125
...state,
120126
testRuns: state.testRuns.map((t) => {
121-
if (t.id === action.payload.id) {
122-
return action.payload;
127+
const item = action.payload.find((i) => i.id === t.id);
128+
if (item) {
129+
return item;
123130
}
124131
return t;
125132
}),
@@ -172,36 +179,33 @@ async function getTestRunList(
172179
});
173180
}
174181

175-
async function deleteTestRun(dispatch: Dispatch, id: string) {
176-
return testRunService.remove(id).then((testRun) => {
177-
dispatch({ type: "delete", payload: id });
178-
return testRun;
179-
});
182+
async function deleteTestRun(dispatch: Dispatch, ids: Array<string>) {
183+
dispatch({ type: "delete", payload: ids });
180184
}
181185

182-
async function selectTestRun(dispatch: Dispatch, id: string | undefined) {
186+
async function selectTestRun(dispatch: Dispatch, id?: string) {
183187
dispatch({ type: "select", payload: id });
184188
}
185189

186-
async function setTestRunIndex(dispatch: Dispatch, index: string | undefined) {
190+
async function setTestRunIndex(dispatch: Dispatch, index?: string) {
187191
dispatch({ type: "index", payload: index });
188192
}
189193

190-
async function addTestRun(dispatch: Dispatch, testRun: TestRun) {
191-
dispatch({ type: "add", payload: testRun });
194+
async function addTestRun(dispatch: Dispatch, testRuns: Array<TestRun>) {
195+
dispatch({ type: "add", payload: testRuns });
192196
}
193197

194-
async function updateTestRun(dispatch: Dispatch, testRun: TestRun) {
195-
dispatch({ type: "update", payload: testRun });
198+
async function updateTestRun(dispatch: Dispatch, testRuns: Array<TestRun>) {
199+
dispatch({ type: "update", payload: testRuns });
196200
}
197201

198202
export {
199203
TestRunProvider,
200204
useTestRunState,
201205
useTestRunDispatch,
202206
getTestRunList,
203-
deleteTestRun,
204207
selectTestRun,
205208
addTestRun,
209+
deleteTestRun,
206210
updateTestRun,
207211
};

0 commit comments

Comments
 (0)