From 7820d9f511f2368064c39a4e057177f52420b1e8 Mon Sep 17 00:00:00 2001 From: Rob Allsopp Date: Sat, 11 Nov 2023 13:12:15 -0700 Subject: [PATCH] upgrade react router --- package-lock.json | 213 ++++-------------- package.json | 3 +- src/AppRouter.js | 159 +++++++------ .../BatchTranscriptionCartSummary.js | 22 +- src/CreateBatchDialog.js | 12 +- src/SideNav.js | 26 +-- src/account/AccountPage.js | 6 +- src/account/BatchJobActionMenu.js | 20 +- src/account/DeleteAccountDialog.js | 6 +- src/editor/VTTMenuLogin.js | 10 +- src/splash/splash.component.js | 6 +- 11 files changed, 181 insertions(+), 302 deletions(-) diff --git a/package-lock.json b/package-lock.json index 8094b9c..c85dfe3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -23,7 +23,6 @@ "date-fns": "^2.22.1", "file-saver": "^2.0.5", "graphql": "^15.3.0", - "history": "^4.10.1", "html-webpack-plugin": "^5.5.0", "lodash": "^4.17.19", "prop-types": "^15.7.2", @@ -31,7 +30,7 @@ "react-dom": "^16.13.1", "react-flip-move": "^3.0.4", "react-infinite-scroll-component": "^6.1.0", - "react-router-dom": "^5.2.0", + "react-router-dom": "^6.18.0", "regenerator-runtime": "^0.13.9", "simple-icons": "^1.11.0", "uuid": "^8.3.0", @@ -786,6 +785,14 @@ "react-dom": "^16.8.0 || ^17.0.0" } }, + "node_modules/@remix-run/router": { + "version": "1.11.0", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.11.0.tgz", + "integrity": "sha512-BHdhcWgeiudl91HvVa2wxqZjSHbheSgIiDvxrF1VjFzBzpTtuDPkOdOi3Iqvc08kXtFkLjhbS+ML9aM8mJS+wQ==", + "engines": { + "node": ">=14.0.0" + } + }, "node_modules/@sentry/browser": { "version": "6.19.6", "resolved": "https://registry.npmjs.org/@sentry/browser/-/browser-6.19.6.tgz", @@ -4263,19 +4270,6 @@ "he": "bin/he" } }, - "node_modules/history": { - "version": "4.10.1", - "resolved": "https://registry.npmjs.org/history/-/history-4.10.1.tgz", - "integrity": "sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==", - "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/hoist-non-react-statics": { "version": "3.3.2", "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz", @@ -5765,19 +5759,6 @@ "node": ">=4" } }, - "node_modules/mini-create-react-context": { - "version": "0.4.1", - "resolved": "https://registry.npmjs.org/mini-create-react-context/-/mini-create-react-context-0.4.1.tgz", - "integrity": "sha512-YWCYEmd5CQeHGSAKrYvXgmzzkrvssZcuuQDDeqkT+PziKGMgE+0MCCtcKbROzocGBG1meBLl2FotlRwf4gAzbQ==", - "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/minimalistic-assert": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz", @@ -6535,19 +6516,6 @@ "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz", "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==" }, - "node_modules/path-to-regexp": { - "version": "1.8.0", - "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.8.0.tgz", - "integrity": "sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==", - "dependencies": { - "isarray": "0.0.1" - } - }, - "node_modules/path-to-regexp/node_modules/isarray": { - "version": "0.0.1", - "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz", - "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=" - }, "node_modules/pathval": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/pathval/-/pathval-1.1.1.tgz", @@ -6912,47 +6880,35 @@ "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==" }, "node_modules/react-router": { - "version": "5.3.1", - "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.3.1.tgz", - "integrity": "sha512-v+zwjqb7bakqgF+wMVKlAPTca/cEmPOvQ9zt7gpSNyPXau1+0qvuYZ5BWzzNDP1y6s15zDwgb9rPN63+SIniRQ==", - "dependencies": { - "@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" + "version": "6.18.0", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.18.0.tgz", + "integrity": "sha512-vk2y7Dsy8wI02eRRaRmOs9g2o+aE72YCx5q9VasT1N9v+lrdB79tIqrjMfByHiY5+6aYkH2rUa5X839nwWGPDg==", + "dependencies": { + "@remix-run/router": "1.11.0" + }, + "engines": { + "node": ">=14.0.0" }, "peerDependencies": { - "react": ">=15" + "react": ">=16.8" } }, "node_modules/react-router-dom": { - "version": "5.3.1", - "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.3.1.tgz", - "integrity": "sha512-f0pj/gMAbv9e8gahTmCEY20oFhxhrmHwYeIwH5EO5xu0qme+wXtsdB8YfUOAZzUz4VaXmb58m3ceiLtjMhqYmQ==", + "version": "6.18.0", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.18.0.tgz", + "integrity": "sha512-Ubrue4+Ercc/BoDkFQfc6og5zRQ4A8YxSO3Knsne+eRbZ+IepAsK249XBH/XaFuOYOYr3L3r13CXTLvYt5JDjw==", "dependencies": { - "@babel/runtime": "^7.12.13", - "history": "^4.9.0", - "loose-envify": "^1.3.1", - "prop-types": "^15.6.2", - "react-router": "5.3.1", - "tiny-invariant": "^1.0.2", - "tiny-warning": "^1.0.0" + "@remix-run/router": "1.11.0", + "react-router": "6.18.0" + }, + "engines": { + "node": ">=14.0.0" }, "peerDependencies": { - "react": ">=15" + "react": ">=16.8", + "react-dom": ">=16.8" } }, - "node_modules/react-router/node_modules/react-is": { - "version": "16.13.1", - "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", - "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" - }, "node_modules/react-transition-group": { "version": "4.4.2", "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.2.tgz", @@ -7163,11 +7119,6 @@ "node": ">=4" } }, - "node_modules/resolve-pathname": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-3.0.0.tgz", - "integrity": "sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng==" - }, "node_modules/responselike": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/responselike/-/responselike-2.0.0.tgz", @@ -8181,11 +8132,6 @@ "integrity": "sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA==", "dev": true }, - "node_modules/tiny-invariant": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.2.0.tgz", - "integrity": "sha512-1Uhn/aqw5C6RI4KejVeTg6mIS7IqxnLJ8Mv2tV5rTc0qWobay7pDUz6Wi392Cnc8ak1H0F2cjoRzb2/AW4+Fvg==" - }, "node_modules/tiny-warning": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz", @@ -8413,11 +8359,6 @@ "integrity": "sha512-l8lCEmLcLYZh4nbunNZvQCJc5pv7+RCwa8q/LdUx8u7lsWvPDKmpodJAJNwkAhJC//dFY48KuIEmjtd4RViDrA==", "dev": true }, - "node_modules/value-equal": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/value-equal/-/value-equal-1.0.1.tgz", - "integrity": "sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw==" - }, "node_modules/vary": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz", @@ -9644,6 +9585,11 @@ "react-is": "^16.8.0 || ^17.0.0" } }, + "@remix-run/router": { + "version": "1.11.0", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.11.0.tgz", + "integrity": "sha512-BHdhcWgeiudl91HvVa2wxqZjSHbheSgIiDvxrF1VjFzBzpTtuDPkOdOi3Iqvc08kXtFkLjhbS+ML9aM8mJS+wQ==" + }, "@sentry/browser": { "version": "6.19.6", "resolved": "https://registry.npmjs.org/@sentry/browser/-/browser-6.19.6.tgz", @@ -12361,19 +12307,6 @@ "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz", "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==" }, - "history": { - "version": "4.10.1", - "resolved": "https://registry.npmjs.org/history/-/history-4.10.1.tgz", - "integrity": "sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==", - "requires": { - "@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" - } - }, "hoist-non-react-statics": { "version": "3.3.2", "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz", @@ -13473,15 +13406,6 @@ "integrity": "sha512-j5EctnkH7amfV/q5Hgmoal1g2QHFJRraOtmx0JpIqkxhBhI/lJSl1nMpQ45hVarwNETOoWEimndZ4QK0RHxuxQ==", "dev": true }, - "mini-create-react-context": { - "version": "0.4.1", - "resolved": "https://registry.npmjs.org/mini-create-react-context/-/mini-create-react-context-0.4.1.tgz", - "integrity": "sha512-YWCYEmd5CQeHGSAKrYvXgmzzkrvssZcuuQDDeqkT+PziKGMgE+0MCCtcKbROzocGBG1meBLl2FotlRwf4gAzbQ==", - "requires": { - "@babel/runtime": "^7.12.1", - "tiny-warning": "^1.0.3" - } - }, "minimalistic-assert": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz", @@ -14034,21 +13958,6 @@ "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz", "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==" }, - "path-to-regexp": { - "version": "1.8.0", - "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.8.0.tgz", - "integrity": "sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==", - "requires": { - "isarray": "0.0.1" - }, - "dependencies": { - "isarray": { - "version": "0.0.1", - "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz", - "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=" - } - } - }, "pathval": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/pathval/-/pathval-1.1.1.tgz", @@ -14331,41 +14240,20 @@ "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==" }, "react-router": { - "version": "5.3.1", - "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.3.1.tgz", - "integrity": "sha512-v+zwjqb7bakqgF+wMVKlAPTca/cEmPOvQ9zt7gpSNyPXau1+0qvuYZ5BWzzNDP1y6s15zDwgb9rPN63+SIniRQ==", - "requires": { - "@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" - }, - "dependencies": { - "react-is": { - "version": "16.13.1", - "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", - "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" - } + "version": "6.18.0", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.18.0.tgz", + "integrity": "sha512-vk2y7Dsy8wI02eRRaRmOs9g2o+aE72YCx5q9VasT1N9v+lrdB79tIqrjMfByHiY5+6aYkH2rUa5X839nwWGPDg==", + "requires": { + "@remix-run/router": "1.11.0" } }, "react-router-dom": { - "version": "5.3.1", - "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.3.1.tgz", - "integrity": "sha512-f0pj/gMAbv9e8gahTmCEY20oFhxhrmHwYeIwH5EO5xu0qme+wXtsdB8YfUOAZzUz4VaXmb58m3ceiLtjMhqYmQ==", + "version": "6.18.0", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.18.0.tgz", + "integrity": "sha512-Ubrue4+Ercc/BoDkFQfc6og5zRQ4A8YxSO3Knsne+eRbZ+IepAsK249XBH/XaFuOYOYr3L3r13CXTLvYt5JDjw==", "requires": { - "@babel/runtime": "^7.12.13", - "history": "^4.9.0", - "loose-envify": "^1.3.1", - "prop-types": "^15.6.2", - "react-router": "5.3.1", - "tiny-invariant": "^1.0.2", - "tiny-warning": "^1.0.0" + "@remix-run/router": "1.11.0", + "react-router": "6.18.0" } }, "react-transition-group": { @@ -14532,11 +14420,6 @@ "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==", "dev": true }, - "resolve-pathname": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-3.0.0.tgz", - "integrity": "sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng==" - }, "responselike": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/responselike/-/responselike-2.0.0.tgz", @@ -15338,11 +15221,6 @@ "integrity": "sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA==", "dev": true }, - "tiny-invariant": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.2.0.tgz", - "integrity": "sha512-1Uhn/aqw5C6RI4KejVeTg6mIS7IqxnLJ8Mv2tV5rTc0qWobay7pDUz6Wi392Cnc8ak1H0F2cjoRzb2/AW4+Fvg==" - }, "tiny-warning": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz", @@ -15509,11 +15387,6 @@ "integrity": "sha512-l8lCEmLcLYZh4nbunNZvQCJc5pv7+RCwa8q/LdUx8u7lsWvPDKmpodJAJNwkAhJC//dFY48KuIEmjtd4RViDrA==", "dev": true }, - "value-equal": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/value-equal/-/value-equal-1.0.1.tgz", - "integrity": "sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw==" - }, "vary": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz", diff --git a/package.json b/package.json index 51cdd89..645dcfa 100644 --- a/package.json +++ b/package.json @@ -29,7 +29,6 @@ "date-fns": "^2.22.1", "file-saver": "^2.0.5", "graphql": "^15.3.0", - "history": "^4.10.1", "html-webpack-plugin": "^5.5.0", "lodash": "^4.17.19", "prop-types": "^15.7.2", @@ -37,7 +36,7 @@ "react-dom": "^16.13.1", "react-flip-move": "^3.0.4", "react-infinite-scroll-component": "^6.1.0", - "react-router-dom": "^5.2.0", + "react-router-dom": "^6.18.0", "regenerator-runtime": "^0.13.9", "simple-icons": "^1.11.0", "uuid": "^8.3.0", diff --git a/src/AppRouter.js b/src/AppRouter.js index 06d4359..221a2e0 100644 --- a/src/AppRouter.js +++ b/src/AppRouter.js @@ -1,7 +1,5 @@ import React, {Suspense} from 'react' -import {Router, Route, Switch} from 'react-router-dom' -import {createBrowserHistory} from 'history' -import {GAProduct} from './config' +import {createBrowserRouter, RouterProvider} from 'react-router-dom' import {AuthDialogProvider} from './AuthDialog' import CheckAuth from './CheckAuth' import {UserProvider} from './common/UserContext' @@ -18,80 +16,99 @@ const Editor = React.lazy(() => import('./editor')) const PrivacyPage = React.lazy(() => import('./privacy')) const Splash = React.lazy(() => import('./splash')) -const history = createBrowserHistory() - -history.listen(() => { - window.gtag('config', GAProduct, { - page_title: window.location.pathname, - page_location: window.location.href, - }) -}) +const router = createBrowserRouter([ + { + path: '/', + element: ( + }> + + + ), + }, + { + path: '/editor', + element: ( + + + + + }> + + + + + ), + }, + { + path: '/batches/:batchId/edit', + element: ( + + + + + + }> + + + + + + ), + }, + { + path: '/batches/:batchId/status', + element: ( + + + + + + }> + + + + + + ), + }, + { + path: '/account', + element: ( + + + + + + }> + + + + + + ), + }, + { + path: '/privacy', + element: ( + + + + + }> + + + + + ), + }, +]) export default function AppRouter() { return ( - - - - }> - - - - - - - - }> - - - - - - - - - - }> - - - - - - - - - - - }> - - - - - - - - - - - }> - - - - - - - - - - }> - - - - - - + } /> diff --git a/src/BatchTranscriptionCheckout/BatchTranscriptionCartSummary.js b/src/BatchTranscriptionCheckout/BatchTranscriptionCartSummary.js index be07a49..dadfa8d 100644 --- a/src/BatchTranscriptionCheckout/BatchTranscriptionCartSummary.js +++ b/src/BatchTranscriptionCheckout/BatchTranscriptionCartSummary.js @@ -1,7 +1,7 @@ import React from 'react' import PropTypes from 'prop-types' import {useMutation, gql} from '@apollo/client' -import {useHistory} from 'react-router-dom' +import {useNavigate} from 'react-router-dom' import {Box, Dialog, DialogActions, DialogContent, DialogTitle, Grid, Tooltip, Typography} from '@material-ui/core' import CancelIcon from '@material-ui/icons/DeleteForever' import {BatchTranscribe} from '../common/icons' @@ -22,13 +22,13 @@ BatchTranscriptionCartSummary.propTypes = { export default function BatchTranscriptionCartSummary({batch}) { const toast = useToast() - const history = useHistory() + const navigate = useNavigate() const {uploadState} = useUpload() - const batchUploadState = React.useMemo(() => uploadState.batches[batch.id] || {uploading: false, uploads: []}, [ - uploadState.batches, - batch.id, - ]) + const batchUploadState = React.useMemo( + () => uploadState.batches[batch.id] || {uploading: false, uploads: []}, + [uploadState.batches, batch.id] + ) const [creditDialogOpen, setCreditDialogOpen] = React.useState(false) const [confirmDialogOpen, setConfirmDialogOpen] = React.useState(false) @@ -77,7 +77,7 @@ export default function BatchTranscriptionCartSummary({batch}) { setCreditDialogOpen(false) } - const handleCreditDialogExited = justPaid => { + const handleCreditDialogExited = (justPaid) => { if (justPaid) handleConfirmDialogOpen() } @@ -87,7 +87,7 @@ export default function BatchTranscriptionCartSummary({batch}) { if (!data.canIAffordBatch) return setCreditDialogOpen(true) setConfirmDialogOpen(true) }) - .catch(err => { + .catch((err) => { toast.error('There was a problem confirming the cost of this batch. Please try again.') handleError(err) }) @@ -100,9 +100,9 @@ export default function BatchTranscriptionCartSummary({batch}) { const handleCancelBatch = async () => { cancelBatch({variables: {batchId: batch.id}}) .then(() => { - history.push('/editor') + navigate('/editor') }) - .catch(err => { + .catch((err) => { toast.error('There was a problem cancelling this batch. Please try again.') handleError(err) }) @@ -113,7 +113,7 @@ export default function BatchTranscriptionCartSummary({batch}) { .then(() => { history.replace(`/batches/${batch.id}/status`) }) - .catch(err => { + .catch((err) => { toast.error('There was a problem starting this batch. Please try again.') handleError(err) }) diff --git a/src/CreateBatchDialog.js b/src/CreateBatchDialog.js index 64c2305..d358e1f 100644 --- a/src/CreateBatchDialog.js +++ b/src/CreateBatchDialog.js @@ -9,7 +9,7 @@ import TextField from '@material-ui/core/TextField' import {TranscriptionCost} from './config' import {gql, useMutation} from '@apollo/client' import {useAuthDialog} from './AuthDialog' -import {useHistory} from 'react-router-dom' +import {useNavigate} from 'react-router-dom' import {appendBatch, BatchJobHistoryTable_batchJobsFragment} from './account/BatchJobHistoryTable.graphql' const Title = styled(DialogTitle)({ @@ -26,7 +26,7 @@ CreateBatchDialog.propTypes = { export default function CreateBatchDialog({open, onClose}) { const [batchName, setBatchName] = React.useState('') - const history = useHistory() + const navigate = useNavigate() const {openLoginDialog} = useAuthDialog() const [createBatch, {loading: creatingBatch}] = useMutation( @@ -48,7 +48,7 @@ export default function CreateBatchDialog({open, onClose}) { } ) - const handleChangeBatchName = e => { + const handleChangeBatchName = (e) => { setBatchName(e.target.value) } @@ -57,14 +57,14 @@ export default function CreateBatchDialog({open, onClose}) { createBatch({variables: {batchName}}) .then(({data}) => { setBatchName('') - history.push(`/batches/${data.createBatch.batch.id}/edit`) + navigate(`/batches/${data.createBatch.batch.id}/edit`) }) .catch(() => { openLoginDialog( `Automatic caption extraction costs $${TranscriptionCost.toFixed( 2 )} per minute of video and requires an account. Please login or sign up below.` - ).then(justLoggedIn => { + ).then((justLoggedIn) => { if (justLoggedIn) handleCreateBatch() }) }) @@ -75,7 +75,7 @@ export default function CreateBatchDialog({open, onClose}) { onClose() } - const useMobileLayout = useMediaQuery(theme => theme.breakpoints.down('sm')) + const useMobileLayout = useMediaQuery((theme) => theme.breakpoints.down('sm')) return ( ({ +const useStyles = makeStyles((theme) => ({ drawer: { width: SIDE_NAV_WIDTH, flexShrink: 0, @@ -56,7 +56,6 @@ const useStyles = makeStyles(theme => ({ SideNav.propTypes = {} export default function SideNav() { - const history = useHistory() const classes = useStyles() const {sideNavOpen, sideNavEvents, setSideNavOpen} = useSideNav() const {openLoginDialog, openSignupDialog} = useAuthDialog() @@ -65,17 +64,14 @@ export default function SideNav() { const [openCreateBatchDialog, setOpenCreateBatchDialog] = React.useState(false) const handleClickEditor = () => { - history.push('/editor') setSideNavOpen(false) } const handleClickAccount = () => { - history.push('/account') setSideNavOpen(false) } const handleClickPrivacy = () => { - history.push('/privacy') setSideNavOpen(false) } @@ -115,12 +111,12 @@ export default function SideNav() { }), }} SlideProps={{ - onEnter: e => sideNavEvents.emit('enter', e), - onEntering: e => sideNavEvents.emit('entering', e), - onEntered: e => sideNavEvents.emit('entered', e), - onExit: e => sideNavEvents.emit('exit', e), - onExiting: e => sideNavEvents.emit('exiting', e), - onExited: e => sideNavEvents.emit('exited', e), + onEnter: (e) => sideNavEvents.emit('enter', e), + onEntering: (e) => sideNavEvents.emit('entering', e), + onEntered: (e) => sideNavEvents.emit('entered', e), + onExit: (e) => sideNavEvents.emit('exit', e), + onExiting: (e) => sideNavEvents.emit('exiting', e), + onExited: (e) => sideNavEvents.emit('exited', e), }}>
@@ -131,7 +127,7 @@ export default function SideNav() {
- + @@ -176,7 +172,7 @@ export default function SideNav() { )} {Boolean(userLoading || user) && ( - + @@ -185,7 +181,7 @@ export default function SideNav() { )} - + diff --git a/src/account/AccountPage.js b/src/account/AccountPage.js index feedd47..4404cd5 100644 --- a/src/account/AccountPage.js +++ b/src/account/AccountPage.js @@ -1,5 +1,5 @@ import React from 'react' -import {useHistory} from 'react-router-dom' +import {useNavigate} from 'react-router-dom' import PropTypes from 'prop-types' import {Box, Button, Grid, Hidden, Typography} from '@material-ui/core' import {useAuthDialog} from '../AuthDialog' @@ -30,11 +30,11 @@ AccountPage.propTypes = { export default function AccountPage({user, transcriptionRate, translationRate}) { const [deleteAccountDialogOpen, setDeleteAccountDialogOpen] = React.useState(false) const {logout} = useAuthDialog() - const history = useHistory() + const navigate = useNavigate() const handleLogout = () => { logout() - history.push('/editor') + navigate('/editor') } const handleDeleteAccount = async () => { diff --git a/src/account/BatchJobActionMenu.js b/src/account/BatchJobActionMenu.js index 6f45b75..7d5ecc2 100644 --- a/src/account/BatchJobActionMenu.js +++ b/src/account/BatchJobActionMenu.js @@ -1,6 +1,6 @@ import React from 'react' import PropTypes from 'prop-types' -import {useHistory} from 'react-router-dom' +import {Link} from 'react-router-dom' import {saveAs} from 'file-saver' import {IconButton, Menu, MenuItem, Tooltip} from '@material-ui/core' import MoreIcon from '@material-ui/icons/MoreVert' @@ -32,8 +32,6 @@ export default function BatchJobActionMenu({batchJob}) { const classes = useStyles() const [optionsMenuAnchorEl, setOptionsMenuAnchorEl] = React.useState(null) - const history = useHistory() - const handleDownload = async (downloadPath) => { setOptionsMenuAnchorEl(null) @@ -50,14 +48,6 @@ export default function BatchJobActionMenu({batchJob}) { }) } - const handleGoToCart = () => { - history.push(`/batches/${batchJob.id}/edit`) - } - - const handleGoToStatus = () => { - history.push(`/batches/${batchJob.id}/status`) - } - const onCloseOptionsMenu = () => { setOptionsMenuAnchorEl(null) } @@ -75,9 +65,13 @@ export default function BatchJobActionMenu({batchJob}) { {batchJob.startedAt ? ( - Check Status + + Check Status + ) : ( - Edit batch + + Edit batch + )} handleDownload(batchJob.downloadLink)}> Download Captions diff --git a/src/account/DeleteAccountDialog.js b/src/account/DeleteAccountDialog.js index d56d9f7..20bd89e 100644 --- a/src/account/DeleteAccountDialog.js +++ b/src/account/DeleteAccountDialog.js @@ -4,7 +4,7 @@ import {Dialog, DialogActions, DialogContent, DialogTitle} from '@material-ui/co import {Button} from '../common' import {gql, useApolloClient} from '@apollo/client' import {useAuthDialog} from '../AuthDialog' -import {useHistory} from 'react-router-dom' +import {useNavigate} from 'react-router-dom' DeleteAccountDialog.propTypes = { open: PropTypes.bool.isRequired, @@ -14,7 +14,7 @@ DeleteAccountDialog.propTypes = { export default function DeleteAccountDialog({open, onClose}) { const apolloClient = useApolloClient() const {logout} = useAuthDialog() - const history = useHistory() + const navigate = useNavigate() const handleDeleteAccount = async () => { await apolloClient.mutate({ @@ -28,7 +28,7 @@ export default function DeleteAccountDialog({open, onClose}) { }) logout() onClose() - history.push('/editor') + navigate('/editor') } return ( diff --git a/src/editor/VTTMenuLogin.js b/src/editor/VTTMenuLogin.js index b1d996e..0a25556 100644 --- a/src/editor/VTTMenuLogin.js +++ b/src/editor/VTTMenuLogin.js @@ -1,6 +1,6 @@ import React from 'react' import {gql, useQuery} from '@apollo/client' -import {useHistory} from 'react-router-dom' +import {useNavigate} from 'react-router-dom' import {MenuItem} from '@material-ui/core' import AccountIcon from '@material-ui/icons/AccountCircle' import SignUpIcon from '@material-ui/icons/PersonAdd' @@ -17,7 +17,7 @@ const useStyles = makeStyles({ export default function VTTMenuLogin() { const classes = useStyles() const {openLoginDialog, openSignupDialog} = useAuthDialog() - const history = useHistory() + const navigate = useNavigate() const {loading, data} = useQuery(gql` query getUser { @@ -40,11 +40,11 @@ export default function VTTMenuLogin() { if (data || loading) { return ( - history.push('/account')}> + navigate('/account')}> Account - history.push('/privacy')}> + navigate('/privacy')}> Privacy @@ -62,7 +62,7 @@ export default function VTTMenuLogin() { Sign Up - history.push('/privacy')}> + navigate('/privacy')}> Privacy diff --git a/src/splash/splash.component.js b/src/splash/splash.component.js index 317ff82..97fda3d 100644 --- a/src/splash/splash.component.js +++ b/src/splash/splash.component.js @@ -1,5 +1,5 @@ import React from 'react' -import {useHistory} from 'react-router-dom' +import {Link} from 'react-router-dom' import {Box, Grid, Typography} from '@material-ui/core' import {makeStyles} from '@material-ui/styles' import muiBlueGreys from '@material-ui/core/colors/blueGrey' @@ -47,7 +47,6 @@ const useStyles = makeStyles({ export default function Splash() { const classes = useStyles() - const history = useHistory() const [openCreateBatchDialog, setOpenCreateBatchDialog] = React.useState(false) @@ -82,8 +81,9 @@ export default function Splash() { size="large" variant="contained" color="secondary" + component={Link} endIcon={} - onClick={() => history.push('/editor')}> + to="/editor"> Create Captions