diff --git a/assets/package-lock.json b/assets/package-lock.json index e271190e9..227cfceca 100644 --- a/assets/package-lock.json +++ b/assets/package-lock.json @@ -12,13 +12,13 @@ "lodash": "^4.17.21", "moment": "^2.30.1", "moment-timezone": "^0.5.46", - "qrcode.react": "^4.0.1", + "qrcode.react": "^1.0.1", "raven-js": "^3.27.2", - "react": "^18.3.1", - "react-dom": "^18.3.1", - "react-dropzone": "^14.2.9", - "react-router-dom": "^6.27.0", - "react-table": "^7.8.0", + "react": "^17.0.2", + "react-dom": "^17.0.2", + "react-dropzone": "^11.3.4", + "react-router-dom": "^5.2.0", + "react-table": "^7.7.0", "react-transition-group": "^4.4.5", "regenerator-runtime": "^0.13.7", "weak-key": "^1.0.3" @@ -38,7 +38,9 @@ "@sentry/webpack-plugin": "^2.22.6", "@svgr/webpack": "^5.5.0", "@types/lodash": "^4.17.12", - "@types/react": "^18.3.11", + "@types/react": "^17.0.14", + "@types/react-dom": "^17.0.9", + "@types/react-router-dom": "^5.1.8", "@types/webpack-env": "^1.18.4", "babel-loader": "^8.2.2", "concurrently": "^8.2.2", @@ -3657,14 +3659,6 @@ "node": ">=10" } }, - "node_modules/@remix-run/router": { - "version": "1.20.0", - "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.20.0.tgz", - "integrity": "sha512-mUnk8rPJBI9loFDZ+YzPGdeniYK+FTmRD1TMCz7ev2SNIozyKKpnGgsxO34u6Z4z/t0ITuu7voi/AshfsGsgFg==", - "engines": { - "node": ">=14.0.0" - } - }, "node_modules/@sentry/babel-plugin-component-annotate": { "version": "2.22.6", "resolved": "https://registry.npmjs.org/@sentry/babel-plugin-component-annotate/-/babel-plugin-component-annotate-2.22.6.tgz", @@ -4384,6 +4378,11 @@ "@types/node": "*" } }, + "node_modules/@types/history": { + "version": "4.7.9", + "dev": true, + "license": "MIT" + }, "node_modules/@types/istanbul-lib-coverage": { "version": "2.0.6", "dev": true, @@ -4440,15 +4439,47 @@ "license": "MIT" }, "node_modules/@types/react": { - "version": "18.3.11", - "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.11.tgz", - "integrity": "sha512-r6QZ069rFTjrEYgFdOck1gK7FLVsgJE7tTz0pQBczlBNUhBNk0MQH4UbnFSwjpQLMkLzgqvBBa+qGpLje16eTQ==", + "version": "17.0.38", "dev": true, + "license": "MIT", "dependencies": { "@types/prop-types": "*", + "@types/scheduler": "*", "csstype": "^3.0.2" } }, + "node_modules/@types/react-dom": { + "version": "17.0.11", + "dev": true, + "license": "MIT", + "dependencies": { + "@types/react": "*" + } + }, + "node_modules/@types/react-router": { + "version": "5.1.17", + "dev": true, + "license": "MIT", + "dependencies": { + "@types/history": "*", + "@types/react": "*" + } + }, + "node_modules/@types/react-router-dom": { + "version": "5.3.2", + "dev": true, + "license": "MIT", + "dependencies": { + "@types/history": "*", + "@types/react": "*", + "@types/react-router": "*" + } + }, + "node_modules/@types/scheduler": { + "version": "0.16.2", + "dev": true, + "license": "MIT" + }, "node_modules/@types/semver": { "version": "7.5.8", "dev": true, @@ -8410,16 +8441,19 @@ } }, "node_modules/file-selector": { - "version": "0.6.0", - "resolved": "https://registry.npmjs.org/file-selector/-/file-selector-0.6.0.tgz", - "integrity": "sha512-QlZ5yJC0VxHxQQsQhXvBaC7VRJ2uaxTf+Tfpu4Z/OcVQJVpZO+DGU0rkoVW5ce2SccxugvpBJoMvUs59iILYdw==", + "version": "0.2.4", + "license": "MIT", "dependencies": { - "tslib": "^2.4.0" + "tslib": "^2.0.3" }, "engines": { - "node": ">= 12" + "node": ">= 10" } }, + "node_modules/file-selector/node_modules/tslib": { + "version": "2.3.1", + "license": "0BSD" + }, "node_modules/file-uri-to-path": { "version": "1.0.0", "dev": true, @@ -9006,6 +9040,18 @@ "node": ">= 0.4" } }, + "node_modules/history": { + "version": "4.10.1", + "license": "MIT", + "dependencies": { + "@babel/runtime": "^7.1.2", + "loose-envify": "^1.2.0", + "resolve-pathname": "^3.0.0", + "tiny-invariant": "^1.0.2", + "tiny-warning": "^1.0.0", + "value-equal": "^1.0.1" + } + }, "node_modules/hmac-drbg": { "version": "1.0.1", "dev": true, @@ -9016,6 +9062,13 @@ "minimalistic-crypto-utils": "^1.0.1" } }, + "node_modules/hoist-non-react-statics": { + "version": "3.3.2", + "license": "BSD-3-Clause", + "dependencies": { + "react-is": "^16.7.0" + } + }, "node_modules/html-escaper": { "version": "2.0.2", "dev": true, @@ -9673,6 +9726,10 @@ "node": ">=4" } }, + "node_modules/isarray": { + "version": "0.0.1", + "license": "MIT" + }, "node_modules/isexe": { "version": "2.0.0", "dev": true, @@ -11706,6 +11763,18 @@ "node": ">=6" } }, + "node_modules/mini-create-react-context": { + "version": "0.4.1", + "license": "MIT", + "dependencies": { + "@babel/runtime": "^7.12.1", + "tiny-warning": "^1.0.3" + }, + "peerDependencies": { + "prop-types": "^15.0.0", + "react": "^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0" + } + }, "node_modules/mini-css-extract-plugin": { "version": "1.6.2", "dev": true, @@ -12537,6 +12606,14 @@ "node": ">=16 || 14 >=14.17" } }, + "node_modules/path-to-regexp": { + "version": "1.9.0", + "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.9.0.tgz", + "integrity": "sha512-xIp7/apCFJuUHdDLWe8O1HIkb0kQrOMb/0u6FXQjemHn/ii5LrIzU6bdECnsiTF/GjZkMEKg1xdiZwNqDYlZ6g==", + "dependencies": { + "isarray": "0.0.1" + } + }, "node_modules/path-type": { "version": "4.0.0", "dev": true, @@ -13342,13 +13419,20 @@ "teleport": ">=0.2.0" } }, + "node_modules/qr.js": { + "version": "0.0.0", + "license": "MIT" + }, "node_modules/qrcode.react": { - "version": "4.0.1", - "resolved": "https://registry.npmjs.org/qrcode.react/-/qrcode.react-4.0.1.tgz", - "integrity": "sha512-Lpj0tPBn561WiQ3QQWXbkx8xTtB8BZkJeMZWLJIL8iaPBCoWzW1IpCeU3gY5MDqsb0+efCvEGkl9O0naP64crA==", + "version": "1.0.1", "license": "ISC", + "dependencies": { + "loose-envify": "^1.4.0", + "prop-types": "^15.6.0", + "qr.js": "0.0.0" + }, "peerDependencies": { - "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + "react": "^15.5.3 || ^16.0.0 || ^17.0.0" } }, "node_modules/querystring": { @@ -13406,42 +13490,41 @@ "license": "BSD-2-Clause" }, "node_modules/react": { - "version": "18.3.1", - "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz", - "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==", + "version": "17.0.2", + "license": "MIT", "dependencies": { - "loose-envify": "^1.1.0" + "loose-envify": "^1.1.0", + "object-assign": "^4.1.1" }, "engines": { "node": ">=0.10.0" } }, "node_modules/react-dom": { - "version": "18.3.1", - "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz", - "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==", + "version": "17.0.2", + "license": "MIT", "dependencies": { "loose-envify": "^1.1.0", - "scheduler": "^0.23.2" + "object-assign": "^4.1.1", + "scheduler": "^0.20.2" }, "peerDependencies": { - "react": "^18.3.1" + "react": "17.0.2" } }, "node_modules/react-dropzone": { - "version": "14.2.9", - "resolved": "https://registry.npmjs.org/react-dropzone/-/react-dropzone-14.2.9.tgz", - "integrity": "sha512-jRZsMC7h48WONsOLHcmhyn3cRWJoIPQjPApvt/sJVfnYaB3Qltn025AoRTTJaj4WdmmgmLl6tUQg1s0wOhpodQ==", + "version": "11.4.2", + "license": "MIT", "dependencies": { - "attr-accept": "^2.2.2", - "file-selector": "^0.6.0", - "prop-types": "^15.8.1" + "attr-accept": "^2.2.1", + "file-selector": "^0.2.2", + "prop-types": "^15.7.2" }, "engines": { - "node": ">= 10.13" + "node": ">= 10" }, "peerDependencies": { - "react": ">= 16.8 || 18.0.0" + "react": ">= 16.8" } }, "node_modules/react-is": { @@ -13449,45 +13532,49 @@ "license": "MIT" }, "node_modules/react-router": { - "version": "6.27.0", - "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.27.0.tgz", - "integrity": "sha512-YA+HGZXz4jaAkVoYBE98VQl+nVzI+cVI2Oj/06F5ZM+0u3TgedN9Y9kmMRo2mnkSK2nCpNQn0DVob4HCsY/WLw==", + "version": "5.2.1", + "license": "MIT", "dependencies": { - "@remix-run/router": "1.20.0" - }, - "engines": { - "node": ">=14.0.0" + "@babel/runtime": "^7.12.13", + "history": "^4.9.0", + "hoist-non-react-statics": "^3.1.0", + "loose-envify": "^1.3.1", + "mini-create-react-context": "^0.4.0", + "path-to-regexp": "^1.7.0", + "prop-types": "^15.6.2", + "react-is": "^16.6.0", + "tiny-invariant": "^1.0.2", + "tiny-warning": "^1.0.0" }, "peerDependencies": { - "react": ">=16.8" + "react": ">=15" } }, "node_modules/react-router-dom": { - "version": "6.27.0", - "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.27.0.tgz", - "integrity": "sha512-+bvtFWMC0DgAFrfKXKG9Fc+BcXWRUO1aJIihbB79xaeq0v5UzfvnM5houGUm1Y461WVRcgAQ+Clh5rdb1eCx4g==", + "version": "5.3.0", + "license": "MIT", "dependencies": { - "@remix-run/router": "1.20.0", - "react-router": "6.27.0" - }, - "engines": { - "node": ">=14.0.0" + "@babel/runtime": "^7.12.13", + "history": "^4.9.0", + "loose-envify": "^1.3.1", + "prop-types": "^15.6.2", + "react-router": "5.2.1", + "tiny-invariant": "^1.0.2", + "tiny-warning": "^1.0.0" }, "peerDependencies": { - "react": ">=16.8", - "react-dom": ">=16.8" + "react": ">=15" } }, "node_modules/react-table": { - "version": "7.8.0", - "resolved": "https://registry.npmjs.org/react-table/-/react-table-7.8.0.tgz", - "integrity": "sha512-hNaz4ygkZO4bESeFfnfOft73iBUj8K5oKi1EcSHPAibEydfsX2MyU6Z8KCr3mv3C9Kqqh71U+DhZkFvibbnPbA==", + "version": "7.7.0", + "license": "MIT", "funding": { "type": "github", "url": "https://github.com/sponsors/tannerlinsley" }, "peerDependencies": { - "react": "^16.8.3 || ^17.0.0-0 || ^18.0.0" + "react": "^16.8.3 || ^17.0.0-0" } }, "node_modules/react-transition-group": { @@ -13735,6 +13822,10 @@ "node": ">=8" } }, + "node_modules/resolve-pathname": { + "version": "3.0.0", + "license": "MIT" + }, "node_modules/resolve-url": { "version": "0.2.1", "dev": true, @@ -13826,6 +13917,11 @@ "tslib": "^2.1.0" } }, + "node_modules/rxjs/node_modules/tslib": { + "version": "2.6.2", + "dev": true, + "license": "0BSD" + }, "node_modules/safe-array-concat": { "version": "1.1.2", "dev": true, @@ -13971,11 +14067,11 @@ "license": "ISC" }, "node_modules/scheduler": { - "version": "0.23.2", - "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz", - "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==", + "version": "0.20.2", + "license": "MIT", "dependencies": { - "loose-envify": "^1.1.0" + "loose-envify": "^1.1.0", + "object-assign": "^4.1.1" } }, "node_modules/schema-utils": { @@ -15350,6 +15446,14 @@ "dev": true, "license": "MIT" }, + "node_modules/tiny-invariant": { + "version": "1.2.0", + "license": "MIT" + }, + "node_modules/tiny-warning": { + "version": "1.0.3", + "license": "MIT" + }, "node_modules/tmpl": { "version": "1.0.5", "dev": true, @@ -15590,11 +15694,6 @@ "node": ">=8" } }, - "node_modules/tslib": { - "version": "2.8.0", - "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.0.tgz", - "integrity": "sha512-jWVzBLplnCmoaTr13V9dYbiQ99wvZRd0vNWaDRg+aVYRcjDF3nDksxFDE/+fkXnKhpnUUkmx5pK/v8mCtLVqZA==" - }, "node_modules/tty-browserify": { "version": "0.0.0", "dev": true, @@ -16024,6 +16123,10 @@ "node": ">=10.12.0" } }, + "node_modules/value-equal": { + "version": "1.0.1", + "license": "MIT" + }, "node_modules/vm-browserify": { "version": "1.1.2", "dev": true, diff --git a/assets/package.json b/assets/package.json index 707fbfc2b..4a1bd95f8 100644 --- a/assets/package.json +++ b/assets/package.json @@ -24,13 +24,13 @@ "lodash": "^4.17.21", "moment": "^2.30.1", "moment-timezone": "^0.5.46", - "qrcode.react": "^4.0.1", + "qrcode.react": "^1.0.1", "raven-js": "^3.27.2", - "react": "^18.3.1", - "react-dom": "^18.3.1", - "react-dropzone": "^14.2.9", - "react-router-dom": "^6.27.0", - "react-table": "^7.8.0", + "react": "^17.0.2", + "react-dom": "^17.0.2", + "react-dropzone": "^11.3.4", + "react-router-dom": "^5.2.0", + "react-table": "^7.7.0", "react-transition-group": "^4.4.5", "regenerator-runtime": "^0.13.7", "weak-key": "^1.0.3" @@ -50,7 +50,9 @@ "@sentry/webpack-plugin": "^2.22.6", "@svgr/webpack": "^5.5.0", "@types/lodash": "^4.17.12", - "@types/react": "^18.3.11", + "@types/react": "^17.0.14", + "@types/react-dom": "^17.0.9", + "@types/react-router-dom": "^5.1.8", "@types/webpack-env": "^1.18.4", "babel-loader": "^8.2.2", "concurrently": "^8.2.2", diff --git a/assets/src/apps/admin.tsx b/assets/src/apps/admin.tsx index 2385ef163..159c1aec3 100644 --- a/assets/src/apps/admin.tsx +++ b/assets/src/apps/admin.tsx @@ -1,12 +1,12 @@ require("../../css/admin.scss"); import React, { ComponentType } from "react"; -import { createRoot } from "react-dom/client"; +import ReactDOM from "react-dom"; import { BrowserRouter as Router, NavLink, Route, - Routes, + Switch, } from "react-router-dom"; import weakKey from "weak-key"; @@ -51,7 +51,7 @@ const App = (): JSX.Element => { {routes.map((group) => (
{group.map(([path, label]) => ( - + {label} ))} @@ -59,17 +59,17 @@ const App = (): JSX.Element => { ))}
- + {routes.map((group) => group.map(([path, , Component]) => ( - }> + + + )), )} - + ); }; -const container = document.getElementById("app"); -const root = createRoot(container!); -root.render(); +ReactDOM.render(, document.getElementById("app")); diff --git a/assets/src/apps/gl_eink_single.tsx b/assets/src/apps/gl_eink_single.tsx index 9d8d23b3b..ee20e4635 100644 --- a/assets/src/apps/gl_eink_single.tsx +++ b/assets/src/apps/gl_eink_single.tsx @@ -4,8 +4,8 @@ initSentry("gl_eink_single"); require("../../css/gl_eink_single.scss"); import React from "react"; -import { createRoot } from "react-dom/client"; -import { BrowserRouter as Router, Route, Routes } from "react-router-dom"; +import ReactDOM from "react-dom"; +import { BrowserRouter as Router, Route, Switch } from "react-router-dom"; import ScreenContainer, { ScreenLayout, @@ -20,26 +20,19 @@ import { const App = (): JSX.Element => { return ( - - } - /> - - } - /> - - } - /> - + + + + + + + + + + + ); }; -const container = document.getElementById("app"); -const root = createRoot(container!); -root.render(); +ReactDOM.render(, document.getElementById("app")); diff --git a/assets/src/apps/solari.tsx b/assets/src/apps/solari.tsx index 43e0790f7..08a327888 100644 --- a/assets/src/apps/solari.tsx +++ b/assets/src/apps/solari.tsx @@ -7,8 +7,8 @@ initFullstory(); require("../../css/solari.scss"); import React, { useEffect } from "react"; -import { createRoot } from "react-dom/client"; -import { BrowserRouter as Router, Route, Routes } from "react-router-dom"; +import ReactDOM from "react-dom"; +import { BrowserRouter as Router, Route, Switch } from "react-router-dom"; import ScreenContainer, { ScreenLayout, @@ -25,22 +25,17 @@ const App = (): JSX.Element => { return ( - - } - /> - - } - /> - - } - /> - + + + + + + + + + + + ); }; @@ -62,6 +57,4 @@ const handleWatchdogMessage = (ev: MessageEvent) => { } }; -const container = document.getElementById("app"); -const root = createRoot(container!); -root.render(); +ReactDOM.render(, document.getElementById("app")); diff --git a/assets/src/apps/v2/bus_eink.tsx b/assets/src/apps/v2/bus_eink.tsx index 6443bff69..8c5f8e30c 100644 --- a/assets/src/apps/v2/bus_eink.tsx +++ b/assets/src/apps/v2/bus_eink.tsx @@ -7,8 +7,8 @@ initFullstory(); require("../../../css/bus_eink_v2.scss"); import React from "react"; -import { createRoot } from "react-dom/client"; -import { BrowserRouter as Router, Route, Routes } from "react-router-dom"; +import ReactDOM from "react-dom"; +import { BrowserRouter as Router, Route, Switch } from "react-router-dom"; import ScreenPage from "Components/v2/screen_page"; import { MappingContext } from "Components/v2/widget"; @@ -93,52 +93,41 @@ const responseMapper: ResponseMapper = (apiResponse) => { const App = (): JSX.Element => { return ( - + + + + + + + + + + + + + + + + - } - /> - - - - - - - } - /> - - - - - } - /> - - - - - - - } - /> - + exact + path={[ + "/v2/screen/:id/simulation", + "/v2/screen/pending/:id/simulation", + ]} + > + + + + + + + ); }; -const container = document.getElementById("app"); -const root = createRoot(container!); -root.render(); +ReactDOM.render(, document.getElementById("app")); diff --git a/assets/src/apps/v2/bus_shelter.tsx b/assets/src/apps/v2/bus_shelter.tsx index 6113afc4f..f3ee9f739 100644 --- a/assets/src/apps/v2/bus_shelter.tsx +++ b/assets/src/apps/v2/bus_shelter.tsx @@ -7,8 +7,8 @@ initFullstory(); require("../../../css/bus_shelter_v2.scss"); import React from "react"; -import { createRoot } from "react-dom/client"; -import { BrowserRouter as Router, Route, Routes } from "react-router-dom"; +import ReactDOM from "react-dom"; +import { BrowserRouter as Router, Route, Switch } from "react-router-dom"; import ScreenPage from "Components/v2/screen_page"; import { ResponseMapper, @@ -122,47 +122,40 @@ const getAudioConfig = (): AudioConfig | null => { const App = (): JSX.Element => { return ( - + + + + + + + + + + + + + + + - } - /> - - - - - - - - - - - } - /> - - - - - - - } - /> - + exact + path={[ + "/v2/screen/:id/simulation", + "/v2/screen/pending/:id/simulation", + ]} + > + + + + + + + ); }; -const container = document.getElementById("app"); -const root = createRoot(container!); -root.render(); +ReactDOM.render(, document.getElementById("app")); diff --git a/assets/src/apps/v2/busway.tsx b/assets/src/apps/v2/busway.tsx index 08f516a85..19c56e991 100644 --- a/assets/src/apps/v2/busway.tsx +++ b/assets/src/apps/v2/busway.tsx @@ -7,8 +7,8 @@ initFullstory(); require("../../../css/busway_v2.scss"); import React from "react"; -import { createRoot } from "react-dom/client"; -import { BrowserRouter as Router, Route, Routes } from "react-router-dom"; +import ReactDOM from "react-dom"; +import { BrowserRouter as Router, Route, Switch } from "react-router-dom"; import ScreenPage from "Components/v2/screen_page"; import { BlinkConfig, @@ -80,45 +80,38 @@ const blinkConfig: BlinkConfig = { const App = (): JSX.Element => { return ( - + + + + + + + + + + + + + - } - /> - - - - - - - - - } - /> - - - - - - - } - /> - + exact + path={[ + "/v2/screen/:id/simulation", + "/v2/screen/pending/:id/simulation", + ]} + > + + + + + + + ); }; -const container = document.getElementById("app"); -const root = createRoot(container!); -root.render(); +ReactDOM.render(, document.getElementById("app")); diff --git a/assets/src/apps/v2/dup.tsx b/assets/src/apps/v2/dup.tsx index 1ca08ad27..bda667488 100644 --- a/assets/src/apps/v2/dup.tsx +++ b/assets/src/apps/v2/dup.tsx @@ -7,8 +7,8 @@ initFullstory(); require("../../../css/dup_v2.scss"); import React from "react"; -import { createRoot } from "react-dom/client"; -import { BrowserRouter as Router, Route, Routes } from "react-router-dom"; +import ReactDOM from "react-dom"; +import { BrowserRouter as Router, Route, Switch } from "react-router-dom"; import ScreenPage from "Components/v2/screen_page"; import { MappingContext } from "Components/v2/widget"; @@ -131,45 +131,38 @@ const App = (): JSX.Element => { return ( - + + + + + + + + + + + + + - } - /> - - - - - - - - - } - /> - - - - - - - } - /> - + exact + path={[ + "/v2/screen/:id/simulation", + "/v2/screen/pending/:id/simulation", + ]} + > + + + + + + + ); }; -const container = document.getElementById("app"); -const root = createRoot(container!); -root.render(); +ReactDOM.render(, document.getElementById("app")); diff --git a/assets/src/apps/v2/elevator.tsx b/assets/src/apps/v2/elevator.tsx index 3d47496fc..cea5a1e47 100644 --- a/assets/src/apps/v2/elevator.tsx +++ b/assets/src/apps/v2/elevator.tsx @@ -7,8 +7,8 @@ initFullstory(); require("../../../css/elevator_v2.scss"); import React from "react"; -import { createRoot } from "react-dom/client"; -import { BrowserRouter as Router, Route, Routes } from "react-router-dom"; +import ReactDOM from "react-dom"; +import { BrowserRouter as Router, Route, Switch } from "react-router-dom"; import NormalScreen from "Components/v2/elevator/normal_screen"; import EvergreenContent from "Components/v2/evergreen_content"; import ScreenPage from "Components/v2/screen_page"; @@ -30,33 +30,29 @@ const TYPE_TO_COMPONENT = { const App = (): JSX.Element => { return ( - + + + + + + + + + } - /> - - - - - } - /> - - - - } - /> - + exact + path={[ + "/v2/screen/:id/simulation", + "/v2/screen/pending/:id/simulation", + ]} + > + + + + + ); }; -const container = document.getElementById("app"); -const root = createRoot(container!); -root.render(); +ReactDOM.render(, document.getElementById("app")); diff --git a/assets/src/apps/v2/gl_eink.tsx b/assets/src/apps/v2/gl_eink.tsx index 4516322df..643bc850c 100644 --- a/assets/src/apps/v2/gl_eink.tsx +++ b/assets/src/apps/v2/gl_eink.tsx @@ -7,8 +7,8 @@ initFullstory(); require("../../../css/gl_eink_v2.scss"); import React from "react"; -import { createRoot } from "react-dom/client"; -import { BrowserRouter as Router, Route, Routes } from "react-router-dom"; +import ReactDOM from "react-dom"; +import { BrowserRouter as Router, Route, Switch } from "react-router-dom"; import ScreenPage from "Components/v2/screen_page"; import { MappingContext } from "Components/v2/widget"; @@ -98,52 +98,41 @@ const responseMapper: ResponseMapper = (apiResponse) => { const App = (): JSX.Element => { return ( - + + + + + + + + + + + + + + + + - } - /> - - - - - - - } - /> - - - - - } - /> - - - - - - - } - /> - + exact + path={[ + "/v2/screen/:id/simulation", + "/v2/screen/pending/:id/simulation", + ]} + > + + + + + + + ); }; -const container = document.getElementById("app"); -const root = createRoot(container!); -root.render(); +ReactDOM.render(, document.getElementById("app")); diff --git a/assets/src/apps/v2/pre_fare.tsx b/assets/src/apps/v2/pre_fare.tsx index 20c7eca79..eff2567e0 100644 --- a/assets/src/apps/v2/pre_fare.tsx +++ b/assets/src/apps/v2/pre_fare.tsx @@ -7,8 +7,8 @@ initFullstory(); require("../../../css/pre_fare_v2.scss"); import React from "react"; -import { createRoot } from "react-dom/client"; -import { BrowserRouter as Router, Route, Routes } from "react-router-dom"; +import ReactDOM from "react-dom"; +import { BrowserRouter as Router, Route, Switch } from "react-router-dom"; import ScreenPage from "Components/v2/screen_page"; import { ResponseMapper, @@ -116,47 +116,40 @@ const blinkConfig: BlinkConfig = { const App = (): JSX.Element => { return ( - + + + + + + + + + + + + + + + - } - /> - - - - - - - - - - - } - /> - - - - - - - } - /> - + exact + path={[ + "/v2/screen/:id/simulation", + "/v2/screen/pending/:id/simulation", + ]} + > + + + + + + + ); }; -const container = document.getElementById("app"); -const root = createRoot(container!); -root.render(); +ReactDOM.render(, document.getElementById("app")); diff --git a/assets/src/apps/v2/solari_large.tsx b/assets/src/apps/v2/solari_large.tsx index 916996c58..43605c774 100644 --- a/assets/src/apps/v2/solari_large.tsx +++ b/assets/src/apps/v2/solari_large.tsx @@ -4,8 +4,8 @@ initSentry("solari_large"); require("../../../css/solari_large_v2.scss"); import React from "react"; -import { createRoot } from "react-dom/client"; -import { BrowserRouter as Router, Route, Routes } from "react-router-dom"; +import ReactDOM from "react-dom"; +import { BrowserRouter as Router, Route, Switch } from "react-router-dom"; import ScreenPage from "Components/v2/screen_page"; import { MappingContext } from "Components/v2/widget"; @@ -27,25 +27,18 @@ const TYPE_TO_COMPONENT = { const App = (): JSX.Element => { return ( - - } - /> - - - - - } - /> - + + + + + + + + + + ); }; -const container = document.getElementById("app"); -const root = createRoot(container!); -root.render(); +ReactDOM.render(, document.getElementById("app")); diff --git a/assets/src/components/admin/admin_cells.tsx b/assets/src/components/admin/admin_cells.tsx index 7d86990df..92d88424d 100644 --- a/assets/src/components/admin/admin_cells.tsx +++ b/assets/src/components/admin/admin_cells.tsx @@ -120,6 +120,7 @@ const EditableSelect = ({ disabled={!editable} > {options.map((opt) => ( + // @ts-expect-error diff --git a/assets/src/components/admin/admin_filters.tsx b/assets/src/components/admin/admin_filters.tsx index 2da9d6b29..ebdad4fce 100644 --- a/assets/src/components/admin/admin_filters.tsx +++ b/assets/src/components/admin/admin_filters.tsx @@ -36,6 +36,7 @@ const SelectColumnFilter = ({ > {options.map((option, i) => ( + // @ts-expect-error diff --git a/assets/src/components/admin/admin_image_manager.tsx b/assets/src/components/admin/admin_image_manager.tsx index ca6eaf35c..a65f2c762 100644 --- a/assets/src/components/admin/admin_image_manager.tsx +++ b/assets/src/components/admin/admin_image_manager.tsx @@ -107,8 +107,7 @@ const ImageUpload = (): JSX.Element => { }; const onDrop = useCallback( - (acceptedFiles) => { - const [acceptedFile] = acceptedFiles; + ([acceptedFile]) => { if (acceptedFile) { const fileWithPreview = Object.assign(acceptedFile, { preview: URL.createObjectURL(acceptedFile), @@ -123,11 +122,7 @@ const ImageUpload = (): JSX.Element => { const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop, - accept: { - "image/png": [".png"], - "image/gif": [".gif"], - "image/svg+xml": [".svg", ".xml"], - }, + accept: ["image/png", "image/gif", "image/svg+xml"], multiple: false, maxSize: 20000000, }); diff --git a/assets/src/components/admin/inspector.tsx b/assets/src/components/admin/inspector.tsx index 26070403d..d21aacb7a 100644 --- a/assets/src/components/admin/inspector.tsx +++ b/assets/src/components/admin/inspector.tsx @@ -6,7 +6,7 @@ import React, { useRef, useState, } from "react"; -import { useNavigate, useLocation } from "react-router-dom"; +import { useHistory, useLocation } from "react-router-dom"; import AdminForm from "./admin_form"; @@ -145,13 +145,13 @@ const ScreenSelector: ComponentType<{ isVariantEnabled, setIsVariantEnabled, }) => { - const navigate = useNavigate(); + const history = useHistory(); const { pathname, search } = useLocation(); const navigateToScreen = (id) => { const params = new URLSearchParams(search); params.set("id", id); - navigate({ pathname, search: params.toString() }); + history.push({ pathname, search: params.toString() }); }; const screensByType: Record = Object.entries( diff --git a/assets/src/components/eink/digital_bridge.tsx b/assets/src/components/eink/digital_bridge.tsx index ef781096b..dd7ea75b1 100644 --- a/assets/src/components/eink/digital_bridge.tsx +++ b/assets/src/components/eink/digital_bridge.tsx @@ -1,4 +1,4 @@ -import { QRCodeSVG } from "qrcode.react"; +import QRCode from "qrcode.react"; import React from "react"; import { imagePath } from "Util/util"; @@ -20,7 +20,7 @@ const DigitalBridge = ({ stopId }): JSX.Element => {
- { +class DebugErrorBoundary extends React.Component { public static getDerivedStateFromError(_error: Error) { return { hasError: true }; } diff --git a/assets/src/components/v2/dup/viewport.tsx b/assets/src/components/v2/dup/viewport.tsx index dcc7438f7..8163fbdb2 100644 --- a/assets/src/components/v2/dup/viewport.tsx +++ b/assets/src/components/v2/dup/viewport.tsx @@ -1,4 +1,4 @@ -import React, { PropsWithChildren } from "react"; +import React from "react"; import { getRotationIndex } from "Util/outfront"; @@ -8,7 +8,7 @@ import { getRotationIndex } from "Util/outfront"; * If the param is missing, this will show the full * screen content (5760px x 1080px). */ -const Viewport = ({ children }: PropsWithChildren) => { +const Viewport: React.ComponentType = ({ children }) => { let viewportClassName = "dup-screen-viewport"; let shifterClassName = "dup-shifter"; switch (getRotationIndex()) { diff --git a/assets/src/components/v2/pre_fare/viewport.tsx b/assets/src/components/v2/pre_fare/viewport.tsx index 9d374b15e..b07cf7195 100644 --- a/assets/src/components/v2/pre_fare/viewport.tsx +++ b/assets/src/components/v2/pre_fare/viewport.tsx @@ -1,4 +1,4 @@ -import React, { PropsWithChildren } from "react"; +import React from "react"; import { getScreenSide } from "Util/util"; @@ -8,7 +8,7 @@ import { getScreenSide } from "Util/util"; * If the param is missing, this will show the full * screen content (2160px x 1920px). */ -const Viewport = ({ children }: PropsWithChildren) => { +const Viewport: React.ComponentType = ({ children }) => { let viewportClassName = "pre-fare-screen-viewport"; let shifterClassName = "pre-fare-shifter"; switch (getScreenSide()) { diff --git a/assets/src/components/v2/widget_tree_error_boundary.tsx b/assets/src/components/v2/widget_tree_error_boundary.tsx index e614451fb..dd6f0d633 100644 --- a/assets/src/components/v2/widget_tree_error_boundary.tsx +++ b/assets/src/components/v2/widget_tree_error_boundary.tsx @@ -1,5 +1,5 @@ -import React, { ErrorInfo, PropsWithChildren, useContext } from "react"; -import { useLocation, useNavigate, useParams } from "react-router-dom"; +import React, { ErrorInfo, useContext } from "react"; +import { RouteComponentProps, withRouter } from "react-router-dom"; import getCsrfToken from "Util/csrf"; import { getDataset } from "Util/dataset"; import { isRealScreen } from "Util/util"; @@ -11,14 +11,13 @@ import Widget, { WidgetData } from "Components/v2/widget"; import * as SentryLogger from "Util/sentry"; // The component uses the `match` prop supplied by withRouter for error logging. -interface Props extends PropsWithChildren { +interface Props extends RouteComponentProps { // Whether to show the fallback component when an error is caught. // If false, the component will render nothing on error. // Defaults to true. showFallbackOnError?: boolean; // Supplied by withLastFetchContext lastFetch: number | null; - match?: { params?: { id?: string } }; } interface State { @@ -76,7 +75,7 @@ class WidgetTreeErrorBoundary extends React.Component { }, credentials: "include", body: JSON.stringify({ - id: this.props.match?.params?.id, + id: this.props.match.params.id, stacktrace: errorInfo.componentStack, errorMessage: error.message, }), @@ -164,19 +163,4 @@ const WrappedWithLastFetch: React.ComponentType> = ( return ; }; -// https://reactrouter.com/en/main/start/faq#what-happened-to-withrouter-i-need-it -function withRouter( - Component: React.FunctionComponent, -) { - function ComponentWithRouterProp(props: ComponentProps) { - const location = useLocation(); - const navigate = useNavigate(); - const params = useParams(); - - return ; - } - - return ComponentWithRouterProp; -} - export default withRouter(WrappedWithLastFetch); diff --git a/assets/src/util/admin.tsx b/assets/src/util/admin.tsx index cfa785796..63d5c6bfd 100644 --- a/assets/src/util/admin.tsx +++ b/assets/src/util/admin.tsx @@ -21,7 +21,7 @@ export type Screen = { const gatherSelectOptions = (rows, columnId) => { const options = rows.map((row) => row.values[columnId]); - const uniqueOptions = new Set(options); + const uniqueOptions = new Set(options); return Array.from(uniqueOptions); };