diff --git a/package-lock.json b/package-lock.json index c8d8fe26..0bed57f3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "vrt-frontend", - "version": "0.0.3", + "version": "1.2.0", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -1944,6 +1944,12 @@ "@types/react": "*" } }, + "@types/socket.io-client": { + "version": "1.4.33", + "resolved": "https://registry.npmjs.org/@types/socket.io-client/-/socket.io-client-1.4.33.tgz", + "integrity": "sha512-m4LnxkljsI9fMsjwpW5QhRpMixo2BeeLpFmg0AE+sS4H1pzAd/cs/ftTiL60FLZgfFa8PFRPx5KsHu8O0bADKQ==", + "dev": true + }, "@types/stack-utils": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-1.0.1.tgz", @@ -2363,6 +2369,11 @@ } } }, + "after": { + "version": "0.8.2", + "resolved": "https://registry.npmjs.org/after/-/after-0.8.2.tgz", + "integrity": "sha1-/ts5T58OAqqXaOcCvaI7UF+ufh8=" + }, "aggregate-error": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/aggregate-error/-/aggregate-error-3.0.1.tgz", @@ -2535,6 +2546,11 @@ "es-abstract": "^1.17.0-next.1" } }, + "arraybuffer.slice": { + "version": "0.0.7", + "resolved": "https://registry.npmjs.org/arraybuffer.slice/-/arraybuffer.slice-0.0.7.tgz", + "integrity": "sha512-wGUIVQXuehL5TCqQun8OW81jGzAWycqzFF8lFp+GOM5BXLYj3bKNsYC4daB7n6XjCqxQA/qgTJ+8ANR3acjrog==" + }, "arrify": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/arrify/-/arrify-1.0.1.tgz", @@ -3051,6 +3067,11 @@ "resolved": "https://registry.npmjs.org/babylon/-/babylon-6.18.0.tgz", "integrity": "sha512-q/UEjfGJ2Cm3oKV71DJz9d25TPnq5rhBVL2Q4fA5wcC3jcrdn7+SssEybFIxwAvvP+YCsCYNKughoF33GxgycQ==" }, + "backo2": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/backo2/-/backo2-1.0.2.tgz", + "integrity": "sha1-MasayLEpNjRj41s+u2n038+6eUc=" + }, "balanced-match": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz", @@ -3111,6 +3132,11 @@ } } }, + "base64-arraybuffer": { + "version": "0.1.5", + "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-0.1.5.tgz", + "integrity": "sha1-c5JncZI7Whl0etZmqlzUv5xunOg=" + }, "base64-js": { "version": "1.3.1", "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.3.1.tgz", @@ -3129,6 +3155,14 @@ "tweetnacl": "^0.14.3" } }, + "better-assert": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/better-assert/-/better-assert-1.0.2.tgz", + "integrity": "sha1-QIZrnhueC1W0gYlDEeaPr/rrxSI=", + "requires": { + "callsite": "1.0.0" + } + }, "big.js": { "version": "5.2.2", "resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz", @@ -3148,6 +3182,11 @@ "file-uri-to-path": "1.0.0" } }, + "blob": { + "version": "0.0.5", + "resolved": "https://registry.npmjs.org/blob/-/blob-0.0.5.tgz", + "integrity": "sha512-gaqbzQPqOoamawKg0LGVd7SzLgXS+JH61oWprSLH+P+abTczqJbhTR8CmJ2u9/bUYNmHTGJx/UEmn6doAvvuig==" + }, "bluebird": { "version": "3.7.2", "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz", @@ -3470,6 +3509,11 @@ "caller-callsite": "^2.0.0" } }, + "callsite": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/callsite/-/callsite-1.0.0.tgz", + "integrity": "sha1-KAOY5dZkvXQDi28JBRU+borxvCA=" + }, "callsites": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/callsites/-/callsites-2.0.0.tgz", @@ -3811,11 +3855,21 @@ "resolved": "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz", "integrity": "sha1-3dgA2gxmEnOTzKWVDqloo6rxJTs=" }, + "component-bind": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/component-bind/-/component-bind-1.0.0.tgz", + "integrity": "sha1-AMYIq33Nk4l8AAllGx06jh5zu9E=" + }, "component-emitter": { "version": "1.3.0", "resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-1.3.0.tgz", "integrity": "sha512-Rd3se6QB+sO1TwqZjscQrurpEPIfO0/yYnSin6Q/rD3mOutHvUrCAhJub3r90uNb+SESBuE0QYoB90YdfatsRg==" }, + "component-inherit": { + "version": "0.0.3", + "resolved": "https://registry.npmjs.org/component-inherit/-/component-inherit-0.0.3.tgz", + "integrity": "sha1-ZF/ErfWLcrZJ1crmUTVhnbJv8UM=" + }, "compose-function": { "version": "3.0.3", "resolved": "https://registry.npmjs.org/compose-function/-/compose-function-3.0.3.tgz", @@ -4863,6 +4917,46 @@ "once": "^1.4.0" } }, + "engine.io-client": { + "version": "3.4.3", + "resolved": "https://registry.npmjs.org/engine.io-client/-/engine.io-client-3.4.3.tgz", + "integrity": "sha512-0NGY+9hioejTEJCaSJZfWZLk4FPI9dN+1H1C4+wj2iuFba47UgZbJzfWs4aNFajnX/qAaYKbe2lLTfEEWzCmcw==", + "requires": { + "component-emitter": "~1.3.0", + "component-inherit": "0.0.3", + "debug": "~4.1.0", + "engine.io-parser": "~2.2.0", + "has-cors": "1.1.0", + "indexof": "0.0.1", + "parseqs": "0.0.5", + "parseuri": "0.0.5", + "ws": "~6.1.0", + "xmlhttprequest-ssl": "~1.5.4", + "yeast": "0.1.2" + }, + "dependencies": { + "ws": { + "version": "6.1.4", + "resolved": "https://registry.npmjs.org/ws/-/ws-6.1.4.tgz", + "integrity": "sha512-eqZfL+NE/YQc1/ZynhojeV8q+H050oR8AZ2uIev7RU10svA9ZnJUddHcOUZTJLinZ9yEfdA2kSATS2qZK5fhJA==", + "requires": { + "async-limiter": "~1.0.0" + } + } + } + }, + "engine.io-parser": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/engine.io-parser/-/engine.io-parser-2.2.0.tgz", + "integrity": "sha512-6I3qD9iUxotsC5HEMuuGsKA0cXerGz+4uGcXQEkfBidgKf0amsjrrtwcbwK/nzpZBxclXlV7gGl9dgWvu4LF6w==", + "requires": { + "after": "0.8.2", + "arraybuffer.slice": "~0.0.7", + "base64-arraybuffer": "0.1.5", + "blob": "0.0.5", + "has-binary2": "~1.0.2" + } + }, "enhanced-resolve": { "version": "4.1.1", "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-4.1.1.tgz", @@ -5414,9 +5508,9 @@ "integrity": "sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc=" }, "eventemitter3": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.0.tgz", - "integrity": "sha512-qerSRB0p+UDEssxTtm6EDKcE7W4OaoisfIMl4CngyEhjpYglocpNg6UEqCvemdGhosAsg4sO2dXJOdyBifPGCg==" + "version": "4.0.4", + "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.4.tgz", + "integrity": "sha512-rlaVLnVxtxvoyLsQQFBx53YmXHDxRIzzTLbdfxqi4yocpSjAxXwkU0cScM5JgSKMqEhrZpnvQ2D9gjylR0AimQ==" }, "events": { "version": "3.1.0", @@ -6318,6 +6412,26 @@ } } }, + "has-binary2": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/has-binary2/-/has-binary2-1.0.3.tgz", + "integrity": "sha512-G1LWKhDSvhGeAQ8mPVQlqNcOB2sJdwATtZKl2pDKKHfpf/rYj24lkinxf69blJbnsvtqqNU+L3SL50vzZhXOnw==", + "requires": { + "isarray": "2.0.1" + }, + "dependencies": { + "isarray": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.1.tgz", + "integrity": "sha1-o32U7ZzaLVmGXJ92/llu4fM4dB4=" + } + } + }, + "has-cors": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/has-cors/-/has-cors-1.1.0.tgz", + "integrity": "sha1-XkdHk/fqmEPRu5nCPu9J/xJv/zk=" + }, "has-flag": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", @@ -6584,9 +6698,9 @@ "integrity": "sha1-ksnBN0w1CF912zWexWzCV8u5P6Q=" }, "http-proxy": { - "version": "1.18.0", - "resolved": "https://registry.npmjs.org/http-proxy/-/http-proxy-1.18.0.tgz", - "integrity": "sha512-84I2iJM/n1d4Hdgc6y2+qY5mDaz2PUVjlg9znE9byl+q0uC3DeByqBGReQu5tpLK0TAqTIXScRUV+dg7+bUPpQ==", + "version": "1.18.1", + "resolved": "https://registry.npmjs.org/http-proxy/-/http-proxy-1.18.1.tgz", + "integrity": "sha512-7mz/721AbnJwIVbnaSv1Cz3Am0ZLT/UBwkC92VlxhXv/k/BBQfM2fXElQNC27BVGr0uwUpplYPQM9LnaBMR5NQ==", "requires": { "eventemitter3": "^4.0.0", "follow-redirects": "^1.0.0", @@ -6717,6 +6831,11 @@ "resolved": "https://registry.npmjs.org/indexes-of/-/indexes-of-1.0.1.tgz", "integrity": "sha1-8w9xbI4r00bHtn0985FVZqfAVgc=" }, + "indexof": { + "version": "0.0.1", + "resolved": "https://registry.npmjs.org/indexof/-/indexof-0.0.1.tgz", + "integrity": "sha1-gtwzbSMrkGIXnQWrMpOmYFn9Q10=" + }, "infer-owner": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/infer-owner/-/infer-owner-1.0.4.tgz", @@ -9330,6 +9449,11 @@ "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=" }, + "object-component": { + "version": "0.0.3", + "resolved": "https://registry.npmjs.org/object-component/-/object-component-0.0.3.tgz", + "integrity": "sha1-8MaapQ78lbhmwYb0AKM3acsvEpE=" + }, "object-copy": { "version": "0.1.0", "resolved": "https://registry.npmjs.org/object-copy/-/object-copy-0.1.0.tgz", @@ -9716,6 +9840,22 @@ "resolved": "https://registry.npmjs.org/parse5/-/parse5-4.0.0.tgz", "integrity": "sha512-VrZ7eOd3T1Fk4XWNXMgiGBK/z0MG48BWG2uQNU4I72fkQuKUTZpl+u9k+CxEG0twMVzSmXEEz12z5Fnw1jIQFA==" }, + "parseqs": { + "version": "0.0.5", + "resolved": "https://registry.npmjs.org/parseqs/-/parseqs-0.0.5.tgz", + "integrity": "sha1-1SCKNzjkZ2bikbouoXNoSSGouJ0=", + "requires": { + "better-assert": "~1.0.0" + } + }, + "parseuri": { + "version": "0.0.5", + "resolved": "https://registry.npmjs.org/parseuri/-/parseuri-0.0.5.tgz", + "integrity": "sha1-gCBKUNTbt3m/3G6+J3jZDkvOMgo=", + "requires": { + "better-assert": "~1.0.0" + } + }, "parseurl": { "version": "1.3.3", "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz", @@ -12542,6 +12682,69 @@ "kind-of": "^3.2.0" } }, + "socket.io-client": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/socket.io-client/-/socket.io-client-2.3.0.tgz", + "integrity": "sha512-cEQQf24gET3rfhxZ2jJ5xzAOo/xhZwK+mOqtGRg5IowZsMgwvHwnf/mCRapAAkadhM26y+iydgwsXGObBB5ZdA==", + "requires": { + "backo2": "1.0.2", + "base64-arraybuffer": "0.1.5", + "component-bind": "1.0.0", + "component-emitter": "1.2.1", + "debug": "~4.1.0", + "engine.io-client": "~3.4.0", + "has-binary2": "~1.0.2", + "has-cors": "1.1.0", + "indexof": "0.0.1", + "object-component": "0.0.3", + "parseqs": "0.0.5", + "parseuri": "0.0.5", + "socket.io-parser": "~3.3.0", + "to-array": "0.1.4" + }, + "dependencies": { + "component-emitter": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-1.2.1.tgz", + "integrity": "sha1-E3kY1teCg/ffemt8WmPhQOaUJeY=" + } + } + }, + "socket.io-parser": { + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-3.3.0.tgz", + "integrity": "sha512-hczmV6bDgdaEbVqhAeVMM/jfUfzuEZHsQg6eOmLgJht6G3mPKMxYm75w2+qhAQZ+4X+1+ATZ+QFKeOZD5riHng==", + "requires": { + "component-emitter": "1.2.1", + "debug": "~3.1.0", + "isarray": "2.0.1" + }, + "dependencies": { + "component-emitter": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-1.2.1.tgz", + "integrity": "sha1-E3kY1teCg/ffemt8WmPhQOaUJeY=" + }, + "debug": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz", + "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==", + "requires": { + "ms": "2.0.0" + } + }, + "isarray": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.1.tgz", + "integrity": "sha1-o32U7ZzaLVmGXJ92/llu4fM4dB4=" + }, + "ms": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", + "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=" + } + } + }, "sockjs": { "version": "0.3.19", "resolved": "https://registry.npmjs.org/sockjs/-/sockjs-0.3.19.tgz", @@ -13375,6 +13578,11 @@ "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.4.tgz", "integrity": "sha1-I2QN17QtAEM5ERQIIOXPRA5SHdE=" }, + "to-array": { + "version": "0.1.4", + "resolved": "https://registry.npmjs.org/to-array/-/to-array-0.1.4.tgz", + "integrity": "sha1-F+bBH3PdTz10zaek/zI46a2b+JA=" + }, "to-arraybuffer": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/to-arraybuffer/-/to-arraybuffer-1.0.1.tgz", @@ -15696,6 +15904,11 @@ "resolved": "https://registry.npmjs.org/xmlchars/-/xmlchars-2.2.0.tgz", "integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==" }, + "xmlhttprequest-ssl": { + "version": "1.5.5", + "resolved": "https://registry.npmjs.org/xmlhttprequest-ssl/-/xmlhttprequest-ssl-1.5.5.tgz", + "integrity": "sha1-wodrBhaKrcQOV9l+gRkayPQ5iz4=" + }, "xregexp": { "version": "4.3.0", "resolved": "https://registry.npmjs.org/xregexp/-/xregexp-4.3.0.tgz", @@ -15812,6 +16025,11 @@ "camelcase": "^5.0.0", "decamelize": "^1.2.0" } + }, + "yeast": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/yeast/-/yeast-0.1.2.tgz", + "integrity": "sha1-AI4G2AlDIMNy28L47XagymyKxBk=" } } } diff --git a/package.json b/package.json index 28a4dd82..aa7ba3c1 100644 --- a/package.json +++ b/package.json @@ -15,6 +15,7 @@ "react-konva": "^16.13.0-0", "react-router-dom": "^5.1.2", "react-scripts": "3.4.1", + "socket.io-client": "^2.3.0", "typescript": "^3.8.3", "use-image": "^1.0.5" }, @@ -44,6 +45,7 @@ "@types/qs": "^6.9.2", "@types/react": "^16.9.34", "@types/react-dom": "^16.9.6", - "@types/react-router-dom": "^5.1.4" + "@types/react-router-dom": "^5.1.4", + "@types/socket.io-client": "^1.4.33" } } diff --git a/src/App.jsx b/src/App.jsx index 86429ec4..00482241 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,10 +1,14 @@ import React from "react"; import "./App.css"; import Header from "./components/Header"; -import { AuthProvider } from "./contexts/auth.context"; -import { ProjectProvider } from "./contexts/project.context"; +import { + AuthProvider, + ProjectProvider, + BuildProvider, + TestRunProvider, +} from "./contexts"; import Router from "./Router"; -import { BuildProvider } from "./contexts/build.context"; +import { SocketProvider } from "./contexts/socket.context"; function App() { return ( @@ -12,8 +16,12 @@ function App() { -
- + + +
+ + + diff --git a/src/components/BuildList.tsx b/src/components/BuildList.tsx index 0586a0b5..2cdd8ecd 100644 --- a/src/components/BuildList.tsx +++ b/src/components/BuildList.tsx @@ -19,7 +19,7 @@ import { useBuildDispatch, deleteBuild, selectBuild, -} from "../contexts/build.context"; +} from "../contexts"; import { BuildStatusChip } from "./BuildStatusChip"; const useStyles = makeStyles((theme: Theme) => diff --git a/src/components/Header.tsx b/src/components/Header.tsx index bdd0c4c7..2873a80d 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -13,7 +13,7 @@ import { useAuthState, useAuthDispatch, logout, -} from "../contexts/auth.context"; +} from "../contexts"; import { routes } from "../constants"; const Header: FunctionComponent = () => { diff --git a/src/components/LoginForm.tsx b/src/components/LoginForm.tsx index bc21263d..b1c41a85 100644 --- a/src/components/LoginForm.tsx +++ b/src/components/LoginForm.tsx @@ -9,7 +9,7 @@ import { CardActions, Typography, } from "@material-ui/core"; -import { useAuthDispatch, login } from "../contexts/auth.context"; +import { useAuthDispatch, login } from "../contexts"; import { routes } from "../constants"; const LoginForm = () => { diff --git a/src/components/PrivateRoute.tsx b/src/components/PrivateRoute.tsx index f2e36b92..383b3d46 100644 --- a/src/components/PrivateRoute.tsx +++ b/src/components/PrivateRoute.tsx @@ -1,6 +1,6 @@ import React from "react"; import { Redirect, Route, RouteProps } from "react-router-dom"; -import { useAuthState } from "../contexts/auth.context"; +import { useAuthState } from "../contexts"; import { routes } from "../constants"; const PrivateRoute: React.SFC = ({ diff --git a/src/components/ProjectSelect.tsx b/src/components/ProjectSelect.tsx index cd12bd9f..107a7640 100644 --- a/src/components/ProjectSelect.tsx +++ b/src/components/ProjectSelect.tsx @@ -1,6 +1,6 @@ import React, { FunctionComponent } from "react"; import { MenuItem, Select } from "@material-ui/core"; -import { useProjectState } from "../contexts/project.context"; +import { useProjectState } from "../contexts"; import { useHistory } from "react-router-dom"; const ProjectSelect: FunctionComponent<{ diff --git a/src/components/RegisterForm.tsx b/src/components/RegisterForm.tsx index b02317fe..50830347 100644 --- a/src/components/RegisterForm.tsx +++ b/src/components/RegisterForm.tsx @@ -7,7 +7,7 @@ import { CardContent, CardActions, } from "@material-ui/core"; -import { useAuthDispatch, login } from "../contexts/auth.context"; +import { useAuthDispatch, login } from "../contexts"; import { usersService } from "../services"; const RegisterForm = () => { diff --git a/src/components/TestDetailsModal.tsx b/src/components/TestDetailsModal.tsx index fe759a82..2dd8287a 100644 --- a/src/components/TestDetailsModal.tsx +++ b/src/components/TestDetailsModal.tsx @@ -37,7 +37,11 @@ import { TestRunDetails } from "./TestRunDetails"; import useImage from "use-image"; import { routes } from "../constants"; import { NoImagePlaceholder } from "./NoImageAvailable"; -import { useBuildDispatch, updateBuild } from "../contexts/build.context"; +import { + useTestRunDispatch, + updateTestRun, + selectTestRun, +} from "../contexts"; const useStyles = makeStyles((theme) => ({ imageContainer: { @@ -62,11 +66,10 @@ const defaultStagePos = { const TestDetailsModal: React.FunctionComponent<{ testRun: TestRun; - updateTestRun: (testRun: TestRun) => void; -}> = ({ testRun, updateTestRun }) => { +}> = ({ testRun }) => { const classes = useStyles(); const history = useHistory(); - const buildDispatch = useBuildDispatch(); + const testRunDispatch = useTestRunDispatch(); const stageWidth = (window.innerWidth / 2) * 0.9; const stageHeigth = window.innerHeight; @@ -110,6 +113,7 @@ const TestDetailsModal: React.FunctionComponent<{ history.push({ search: `buildId=${testRun.buildId}`, }); + selectTestRun(testRunDispatch, undefined); }; const isIgnoreAreasSaved = () => { @@ -173,8 +177,7 @@ const TestDetailsModal: React.FunctionComponent<{ color="inherit" onClick={() => testRunService.approve(testRun.id).then((testRun) => { - updateTestRun(testRun); - updateBuild(buildDispatch, testRun); + updateTestRun(testRunDispatch, testRun); }) } > @@ -184,8 +187,7 @@ const TestDetailsModal: React.FunctionComponent<{ color="secondary" onClick={() => testRunService.reject(testRun.id).then((testRun) => { - updateTestRun(testRun); - updateBuild(buildDispatch, testRun); + updateTestRun(testRunDispatch, testRun); }) } > @@ -253,7 +255,9 @@ const TestDetailsModal: React.FunctionComponent<{ // recalculate diff testRunService .recalculateDiff(testRun.id) - .then((testRun) => updateTestRun(testRun)) + .then((testRun) => + updateTestRun(testRunDispatch, testRun) + ) ); // update in variation @@ -362,14 +366,13 @@ const TestDetailsModal: React.FunctionComponent<{ {testRun.diffName ? ( - -
+ +
{}; -}> = ({ items, selectedId, handleRemove }) => { +}> = ({ items }) => { + const { selectedTestRunId } = useTestRunState(); + const testRunDispatch = useTestRunDispatch(); const history = useHistory(); const [anchorEl, setAnchorEl] = React.useState(null); const [selectedTestRun, setSelectedTestRun] = React.useState< @@ -58,10 +64,15 @@ const TestRunList: React.FunctionComponent<{ {items.map((test) => ( - + { history.push(buildTestRunLocation(test)); + selectTestRun(testRunDispatch, test.id) }} > {test.name} @@ -107,7 +118,7 @@ const TestRunList: React.FunctionComponent<{ { - handleRemove(selectedTestRun.id); + deleteTestRun(testRunDispatch, selectedTestRun.id); handleClose(); }} > diff --git a/src/contexts/build.context.tsx b/src/contexts/build.context.tsx index f87b6f94..b10943d4 100644 --- a/src/contexts/build.context.tsx +++ b/src/contexts/build.context.tsx @@ -1,8 +1,6 @@ import React from "react"; -import { Build, TestRun } from "../types"; +import { Build } from "../types"; import { buildsService } from "../services"; -import { TestStatus } from "../types/testStatus"; -import { BuildStatus } from "../types/buildStatus"; interface IRequestAction { type: "request"; @@ -24,23 +22,17 @@ interface IDeleteAction { payload: string; } -interface IUpdateAction { - type: "update"; - payload: TestRun; -} - -interface IStatsAction { - type: "stats"; - payload: string; +interface IAddAction { + type: "add"; + payload: Build; } type IAction = | IRequestAction | IGetAction | IDeleteAction - | ISelectAction - | IStatsAction - | IUpdateAction; + | IAddAction + | ISelectAction; type Dispatch = (action: IAction) => void; type State = { @@ -67,65 +59,6 @@ function buildReducer(state: State, action: IAction): State { ...state, selectedBuildId: action.payload, }; - case "stats": - return { - ...state, - buildList: state.buildList.map((build) => { - if (build.id === action.payload) { - // reset stats - build.status = BuildStatus.passed; - build.passedCount = 0; - build.unresolvedCount = 0; - build.failedCount = 0; - - // calculate stats - build.testRuns.forEach((testRun) => { - switch (testRun.status) { - case TestStatus.approved: - case TestStatus.ok: { - build.passedCount += 1; - break; - } - case TestStatus.unresolved: - case TestStatus.new: { - build.unresolvedCount += 1; - break; - } - case TestStatus.failed: { - build.failedCount += 1; - break; - } - } - }); - - if (build.failedCount > 0) { - build.status = BuildStatus.failed; - } - if (build.unresolvedCount > 0) { - build.status = BuildStatus.unresolved; - } - } - return build; - }), - }; - case "update": - return { - ...state, - buildList: state.buildList.map((build) => { - if (build.id === action.payload.buildId) { - return { - ...build, - testRuns: build.testRuns.map((testRun) => { - if (testRun.id === action.payload.id) { - return action.payload; - } - return testRun; - }), - }; - } - return build; - }), - }; case "get": return { ...state, @@ -136,6 +69,11 @@ function buildReducer(state: State, action: IAction): State { ...state, buildList: state.buildList.filter((p) => p.id !== action.payload), }; + case "add": + return { + ...state, + buildList: [action.payload, ...state.buildList], + }; default: return state; } @@ -176,7 +114,6 @@ async function getBuildList(dispatch: Dispatch, id: string) { .getList(id) .then((items) => { dispatch({ type: "get", payload: items }); - items.forEach((build) => dispatch({ type: "stats", payload: build.id })); }) .catch((error) => { console.log(error.toString()); @@ -202,9 +139,8 @@ async function selectBuild(dispatch: Dispatch, id: string) { dispatch({ type: "select", payload: id }); } -async function updateBuild(dispatch: Dispatch, testRun: TestRun) { - dispatch({ type: "update", payload: testRun }); - dispatch({ type: "stats", payload: testRun.buildId }); +async function addBuild(dispatch: Dispatch, build: Build) { + dispatch({ type: "add", payload: build }); } export { @@ -214,5 +150,5 @@ export { getBuildList, deleteBuild, selectBuild, - updateBuild, + addBuild, }; diff --git a/src/contexts/index.ts b/src/contexts/index.ts new file mode 100644 index 00000000..2d3e691a --- /dev/null +++ b/src/contexts/index.ts @@ -0,0 +1,4 @@ +export * from './auth.context' +export * from './build.context' +export * from './project.context' +export * from './testRun.context' \ No newline at end of file diff --git a/src/contexts/socket.context.tsx b/src/contexts/socket.context.tsx new file mode 100644 index 00000000..d32c54a7 --- /dev/null +++ b/src/contexts/socket.context.tsx @@ -0,0 +1,104 @@ +import * as React from "react"; +import socketIOClient from "socket.io-client"; +import { useBuildState, useBuildDispatch, addBuild } from "./build.context"; +import { Build, TestRun } from "../types"; +import { useTestRunDispatch, addTestRun } from "./testRun.context"; + +interface IConnectAction { + type: "connect"; + payload: SocketIOClient.Socket; +} + +interface IClearAction { + type: "clear"; +} + +type IAction = IConnectAction | IClearAction; + +type Dispatch = (action: IAction) => void; +type State = { socket: SocketIOClient.Socket | undefined }; + +type SocketProviderProps = { children: React.ReactNode }; + +const SocketStateContext = React.createContext(undefined); +const SocketDispatchContext = React.createContext( + undefined +); + +const initialState: State = { + socket: undefined, +}; + +function socketReducer(state: State, action: IAction): State { + switch (action.type) { + case "connect": { + return { socket: action.payload }; + } + default: + return state; + } +} + +function SocketProvider({ children }: SocketProviderProps) { + const [state, dispatch] = React.useReducer(socketReducer, initialState); + const { selectedBuildId } = useBuildState(); + const testRunDispatch = useTestRunDispatch(); + const buildDispatch = useBuildDispatch(); + + React.useEffect(() => { + connect(dispatch); + }, []); + + React.useEffect(() => { + if (state.socket) { + state.socket.removeAllListeners(); + + state.socket.on("build_created", function (build: Build) { + addBuild(buildDispatch, build); + }); + + state.socket.on(`testRun_created`, function (testRun: TestRun) { + if (testRun.buildId === selectedBuildId) { + addTestRun(testRunDispatch, testRun); + } + }); + } + }, [state.socket, selectedBuildId, buildDispatch, testRunDispatch]); + + return ( + + + {children} + + + ); +} + +function useSocketState() { + const context = React.useContext(SocketStateContext); + if (context === undefined) { + throw new Error("must be used within a SocketProvider"); + } + return context; +} + +function useSocketDispatch() { + const context = React.useContext(SocketDispatchContext); + if (context === undefined) { + throw new Error("must be used within a SocketProvider"); + } + return context; +} + +function connect(dispatch: Dispatch) { + const apiUrl = process.env.REACT_APP_API_URL; + if (apiUrl) { + const socket = socketIOClient(apiUrl); + dispatch({ type: "connect", payload: socket }); + console.log("Socket connected"); + } else { + console.log("API url is not provided: " + apiUrl); + } +} + +export { SocketProvider, useSocketState, useSocketDispatch, connect }; diff --git a/src/contexts/testRun.context.tsx b/src/contexts/testRun.context.tsx new file mode 100644 index 00000000..68915c9f --- /dev/null +++ b/src/contexts/testRun.context.tsx @@ -0,0 +1,211 @@ +import React from "react"; +import { TestRun } from "../types"; +import { testRunService } from "../services"; + +interface IRequestAction { + type: "request"; + payload?: undefined; +} + +interface IGetAction { + type: "get"; + payload: TestRun[]; +} + +interface ISelectAction { + type: "select"; + payload: string | undefined; +} + +interface IIndexAction { + type: "index"; + payload: string | undefined; +} + +interface IDeleteAction { + type: "delete"; + payload: string; +} + +interface IAddAction { + type: "add"; + payload: TestRun; +} + +interface IUpdateAction { + type: "update"; + payload: TestRun; +} + +interface IApproveAction { + type: "approve"; + payload: TestRun; +} + +interface IRejectAction { + type: "reject"; + payload: TestRun; +} + +type IAction = + | IRequestAction + | IIndexAction + | IGetAction + | IDeleteAction + | IAddAction + | IUpdateAction + | IApproveAction + | IRejectAction + | ISelectAction; + +type Dispatch = (action: IAction) => void; +type State = { + selectedTestRunId: string | undefined; + selectedTestRunIndex: number | undefined; + testRuns: TestRun[]; +}; + +type TestRunProviderProps = { children: React.ReactNode }; + +const TestRunStateContext = React.createContext(undefined); +const TestRunDispatchContext = React.createContext( + undefined +); + +const initialState: State = { + selectedTestRunId: undefined, + selectedTestRunIndex: undefined, + testRuns: [], +}; + +function testRunReducer(state: State, action: IAction): State { + switch (action.type) { + case "select": + return { + ...state, + selectedTestRunId: action.payload, + }; + case "index": + return { + ...state, + selectedTestRunIndex: state.testRuns.findIndex( + (t) => t.id === action.payload + ), + }; + case "get": + return { + ...state, + testRuns: action.payload, + }; + case "delete": + return { + ...state, + testRuns: state.testRuns.filter((p) => p.id !== action.payload), + }; + case "add": + return { + ...state, + testRuns: [...state.testRuns, action.payload], + }; + case "update": + return { + ...state, + testRuns: state.testRuns.map((t) => { + if (t.id === action.payload.id) { + return action.payload; + } + return t; + }), + }; + default: + return state; + } +} + +function TestRunProvider({ children }: TestRunProviderProps) { + const [state, dispatch] = React.useReducer(testRunReducer, initialState); + + React.useEffect(() => { + setTestRunIndex(dispatch, state.selectedTestRunId); + }, [state.selectedTestRunId, state.testRuns]); + + return ( + + + {children} + + + ); +} + +function useTestRunState() { + const context = React.useContext(TestRunStateContext); + if (context === undefined) { + throw new Error("must be used within a TestRunProvider"); + } + return context; +} + +function useTestRunDispatch() { + const context = React.useContext(TestRunDispatchContext); + if (context === undefined) { + throw new Error("must be used within a TestRunProvider"); + } + return context; +} + +async function getTestRunList(dispatch: Dispatch, buildId: string) { + dispatch({ type: "request" }); + + testRunService + .getList(buildId) + .then((items) => { + dispatch({ type: "get", payload: items }); + }) + .catch((error) => { + console.log(error.toString()); + }); +} + +async function deleteTestRun(dispatch: Dispatch, id: string) { + dispatch({ type: "request" }); + + testRunService + .remove(id) + .then((isDeleted) => { + if (isDeleted) { + dispatch({ type: "delete", payload: id }); + } + }) + .catch((error) => { + console.log(error.toString()); + }); +} + +async function selectTestRun(dispatch: Dispatch, id: string | undefined) { + dispatch({ type: "select", payload: id }); +} + +async function setTestRunIndex(dispatch: Dispatch, index: string | undefined) { + dispatch({ type: "index", payload: index }); +} + +async function addTestRun(dispatch: Dispatch, testRun: TestRun) { + dispatch({ type: "delete", payload: testRun.id }); + dispatch({ type: "add", payload: testRun }); +} + +async function updateTestRun(dispatch: Dispatch, testRun: TestRun) { + dispatch({ type: "update", payload: testRun }); +} + +export { + TestRunProvider, + useTestRunState, + useTestRunDispatch, + getTestRunList, + deleteTestRun, + selectTestRun, + addTestRun, + updateTestRun, +}; diff --git a/src/pages/LoginPage.tsx b/src/pages/LoginPage.tsx index 4c41d9e0..7b993e83 100644 --- a/src/pages/LoginPage.tsx +++ b/src/pages/LoginPage.tsx @@ -2,7 +2,7 @@ import React, { useEffect } from "react"; import { Grid } from "@material-ui/core"; import LoginForm from "../components/LoginForm"; import { useHistory, useLocation } from "react-router-dom"; -import { useAuthState } from "../contexts/auth.context"; +import { useAuthState } from "../contexts"; import { routes } from "../constants"; const LoginPage = () => { diff --git a/src/pages/ProfilePage.tsx b/src/pages/ProfilePage.tsx index 459a95ae..02868f50 100644 --- a/src/pages/ProfilePage.tsx +++ b/src/pages/ProfilePage.tsx @@ -12,7 +12,7 @@ import { useAuthState, useAuthDispatch, update, -} from "../contexts/auth.context"; +} from "../contexts"; import { usersService } from "../services"; const ProfilePage = () => { diff --git a/src/pages/ProjectListPage.tsx b/src/pages/ProjectListPage.tsx index 958607b5..bdaa83e8 100644 --- a/src/pages/ProjectListPage.tsx +++ b/src/pages/ProjectListPage.tsx @@ -23,7 +23,7 @@ import { getProjectList, deleteProject, createProject, -} from "../contexts/project.context"; +} from "../contexts"; import { Link } from "react-router-dom"; import { Delete, Add } from "@material-ui/icons"; import { routes } from "../constants"; diff --git a/src/pages/ProjectPage.tsx b/src/pages/ProjectPage.tsx index 15af777d..6635c49a 100644 --- a/src/pages/ProjectPage.tsx +++ b/src/pages/ProjectPage.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useState } from "react"; +import React, { useEffect } from "react"; import { Grid, Dialog, @@ -9,7 +9,6 @@ import { } from "@material-ui/core"; import { useParams, useLocation, useHistory } from "react-router-dom"; import { TestRun } from "../types"; -import { testRunService } from "../services"; import BuildList from "../components/BuildList"; import ProjectSelect from "../components/ProjectSelect"; import qs from "qs"; @@ -23,7 +22,11 @@ import { useBuildDispatch, getBuildList, selectBuild, -} from "../contexts/build.context"; + useTestRunState, + useTestRunDispatch, + selectTestRun, + getTestRunList, +} from "../contexts"; const getQueryParams = (guery: string) => { const queryParams = qs.parse(guery, { ignoreQueryPrefix: true }); @@ -66,9 +69,12 @@ const ProjectPage = () => { const history = useHistory(); const { buildList, selectedBuildId } = useBuildState(); const buildDispatch = useBuildDispatch(); - const [testRuns, setTestRuns] = useState([]); - const [selectedTestdId, setSelectedTestId] = useState(); - const [selectedTestRunIndex, setSelectedTestRunIndex] = useState(); + const { + testRuns, + selectedTestRunId, + selectedTestRunIndex, + } = useTestRunState(); + const testRunDispatch = useTestRunDispatch(); // filter const [query, setQuery] = React.useState(""); @@ -79,6 +85,18 @@ const ProjectPage = () => { const [testStatus, setTestStatus] = React.useState(""); const [filteredTestRuns, setFilteredTestRuns] = React.useState([]); + useEffect(() => { + if (projectId) { + getBuildList(buildDispatch, projectId); + } + }, [projectId, buildDispatch]); + + useEffect(() => { + if (selectedBuildId) { + getTestRunList(testRunDispatch, selectedBuildId); + } + }, [selectedBuildId, testRunDispatch]); + useEffect(() => { const queryParams = getQueryParams(location.search); if (!selectedBuildId) { @@ -88,34 +106,14 @@ const ProjectPage = () => { selectBuild(buildDispatch, buildList[0].id); } } - // eslint-disable-next-line - }, []); + }, [buildDispatch, buildList, location.search, selectedBuildId]); useEffect(() => { const queryParams = getQueryParams(location.search); - if (queryParams.testId) { - setSelectedTestId(queryParams.testId); - const index = testRuns.findIndex((t) => t.id === queryParams.testId); - setSelectedTestRunIndex(index); - } else { - setSelectedTestId(undefined); - setSelectedTestRunIndex(undefined); + if (!selectedTestRunId && queryParams.testId) { + selectTestRun(testRunDispatch, queryParams.testId); } - }, [location.search, testRuns]); - - useEffect(() => { - if (projectId) { - getBuildList(buildDispatch, projectId); - } - }, [projectId, buildDispatch]); - - useEffect(() => { - if (selectedBuildId) { - testRunService.getList(selectedBuildId).then((testRuns) => { - setTestRuns(testRuns); - }); - } - }, [selectedBuildId]); + }, [location.search, testRuns, selectedTestRunId, testRunDispatch]); useEffect(() => { setFilteredTestRuns( @@ -131,16 +129,6 @@ const ProjectPage = () => { ); }, [query, os, device, browser, viewport, testStatus, testRuns]); - const updateTestRun = (testRun: TestRun) => { - const updated = testRuns.map((t) => { - if (t.id === testRun.id) { - return testRun; - } - return t; - }); - setTestRuns(updated); - }; - return ( @@ -170,24 +158,11 @@ const ProjectPage = () => { - - testRunService.remove(id).then((isRemoved) => { - if (isRemoved) { - setTestRuns(testRuns.filter((item) => item.id !== id)); - } - }) - } - /> + {selectedTestRunIndex !== undefined && testRuns[selectedTestRunIndex] && ( - + {selectedTestRunIndex + 1 < testRuns.length && ( { onClick={() => { const next = testRuns[selectedTestRunIndex + 1]; history.push(buildTestRunLocation(next)); + selectTestRun(testRunDispatch, next.id); }} > @@ -213,6 +189,7 @@ const ProjectPage = () => { onClick={() => { const prev = testRuns[selectedTestRunIndex - 1]; history.push(buildTestRunLocation(prev)); + selectTestRun(testRunDispatch, prev.id); }} > diff --git a/src/pages/RegisterPage.tsx b/src/pages/RegisterPage.tsx index aac7be0d..ee0e4cb8 100644 --- a/src/pages/RegisterPage.tsx +++ b/src/pages/RegisterPage.tsx @@ -2,7 +2,7 @@ import React, { useEffect } from "react"; import { Grid } from "@material-ui/core"; import RegisterForm from "../components/RegisterForm"; import { useHistory } from "react-router-dom"; -import { useAuthState } from "../contexts/auth.context"; +import { useAuthState } from "../contexts"; import { routes } from "../constants"; const RegisterPage = () => { diff --git a/src/pages/TestVariationDetailsPage.tsx b/src/pages/TestVariationDetailsPage.tsx index 76aab31c..b4641fb0 100644 --- a/src/pages/TestVariationDetailsPage.tsx +++ b/src/pages/TestVariationDetailsPage.tsx @@ -1,5 +1,5 @@ import React from "react"; -import { useParams, Link } from "react-router-dom"; +import { useParams, useHistory } from "react-router-dom"; import { TestVariation } from "../types"; import { testVariationService, staticService } from "../services"; import { @@ -14,7 +14,12 @@ import { } from "@material-ui/core"; import { buildTestRunUrl } from "../_helpers/route.helpers"; import { TestVariationDetails } from "../components/TestVariationDetails"; -import { selectBuild, useBuildDispatch } from "../contexts/build.context"; +import { + selectBuild, + useBuildDispatch, + useTestRunDispatch, + selectTestRun, +} from "../contexts"; const useStyles = makeStyles({ media: { @@ -25,7 +30,9 @@ const useStyles = makeStyles({ const TestVariationDetailsPage: React.FunctionComponent = () => { const classes = useStyles(); + const history = useHistory(); const buildDispatch = useBuildDispatch(); + const testRunDispatch = useTestRunDispatch(); const { testVariationId } = useParams(); const [testVariation, setTestVariation] = React.useState(); @@ -52,17 +59,20 @@ const TestVariationDetailsPage: React.FunctionComponent = () => {