diff --git a/frontend/entrypoint.sh b/frontend/entrypoint.sh index b0ad8df5..20b7f4f5 100755 --- a/frontend/entrypoint.sh +++ b/frontend/entrypoint.sh @@ -1,7 +1,7 @@ #!/bin/sh # Copy node_modules if it doesn't exist -if [ ! -f "/usr/src/frontend/node_modules" ]; then +if [ ! -d "/usr/src/frontend/node_modules" ]; then echo "Looks like the first run of this container. Node modules were not detected on the attached volume, copying them into the attached volume." cp -R /tmp/node_modules /usr/src/frontend/node_modules fi diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 870302a3..8194d398 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -10,7 +10,6 @@ "license": "ISC", "dependencies": { "@babel/plugin-proposal-class-properties": "^7.16.7", - "@date-io/date-fns": "^2.15.0", "@emotion/react": "^11.7.1", "@emotion/styled": "^11.6.0", "@mui/base": "^5.0.0-alpha.77", @@ -40,7 +39,7 @@ "react-i18next": "^11.16.2", "react-image": "^4.0.3", "react-qr-code": "^2.0.3", - "react-router-dom": "^5.2.0", + "react-router-dom": "^6.10.0", "react-smooth-image": "^1.1.0", "react-world-flags": "^1.4.0", "reconnecting-websocket": "^4.4.0", @@ -3733,6 +3732,14 @@ "react-dom": "^16.8.0 || >=17.0.0 || >=18.0.0" } }, + "node_modules/@remix-run/router": { + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.5.0.tgz", + "integrity": "sha512-bkUDCp8o1MvFO+qxkODcbhSqRa6P2GXgrGZVpt0dCXNW2HCSCqYI0ZoAqEOSAjRWmmlKcYgFvN4B4S+zo/f8kg==", + "engines": { + "node": ">=14" + } + }, "node_modules/@sinonjs/commons": { "version": "1.8.6", "resolved": "https://registry.npmjs.org/@sinonjs/commons/-/commons-1.8.6.tgz", @@ -7695,19 +7702,6 @@ "url": "https://github.com/sponsors/ljharb" } }, - "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", @@ -8275,11 +8269,6 @@ "node": ">=8" } }, - "node_modules/isarray": { - "version": "0.0.1", - "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz", - "integrity": "sha512-D2S+3GLxWH+uhrNEcoh/fnmYeP8E8/zHl644d/jdA0g2uyXvy3sb0qxotE+ne0LtccHknQzWwZEzhak7oJ0COQ==" - }, "node_modules/isexe": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz", @@ -13236,14 +13225,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-type": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz", @@ -13640,46 +13621,35 @@ } }, "node_modules/react-router": { - "version": "5.3.4", - "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.3.4.tgz", - "integrity": "sha512-Ys9K+ppnJah3QuaRiLxk+jDWOR1MekYQrlytiXxC1RyfbdsZkS5pvKAzCCr031xHixZwpnsYNT5xysdFHQaYsA==", + "version": "6.10.0", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.10.0.tgz", + "integrity": "sha512-Nrg0BWpQqrC3ZFFkyewrflCud9dio9ME3ojHCF/WLsprJVzkq3q3UeEhMCAW1dobjeGbWgjNn/PVF6m46ANxXQ==", "dependencies": { - "@babel/runtime": "^7.12.13", - "history": "^4.9.0", - "hoist-non-react-statics": "^3.1.0", - "loose-envify": "^1.3.1", - "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" + "@remix-run/router": "1.5.0" + }, + "engines": { + "node": ">=14" }, "peerDependencies": { - "react": ">=15" + "react": ">=16.8" } }, "node_modules/react-router-dom": { - "version": "5.3.4", - "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.3.4.tgz", - "integrity": "sha512-m4EqFMHv/Ih4kpcBCONHbkT68KoAeHN4p3lAGoNryfHi0dMy0kCzEZakiKRsvg5wHZ/JLrLW8o8KomWiz/qbYQ==", + "version": "6.10.0", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.10.0.tgz", + "integrity": "sha512-E5dfxRPuXKJqzwSe/qGcqdwa18QiWC6f3H3cWXM24qj4N0/beCIf/CWTipop2xm7mR0RCS99NnaqPNjHtrAzCg==", "dependencies": { - "@babel/runtime": "^7.12.13", - "history": "^4.9.0", - "loose-envify": "^1.3.1", - "prop-types": "^15.6.2", - "react-router": "5.3.4", - "tiny-invariant": "^1.0.2", - "tiny-warning": "^1.0.0" + "@remix-run/router": "1.5.0", + "react-router": "6.10.0" + }, + "engines": { + "node": ">=14" }, "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-smooth-image": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/react-smooth-image/-/react-smooth-image-1.1.0.tgz", @@ -13909,11 +13879,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/resolve.exports": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/resolve.exports/-/resolve.exports-1.1.1.tgz", @@ -14588,16 +14553,6 @@ "globrex": "^0.1.2" } }, - "node_modules/tiny-invariant": { - "version": "1.3.1", - "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.1.tgz", - "integrity": "sha512-AD5ih2NlSssTCwsMznbvwMZpJ1cbhkGd2uueNxzv2jDlEeZdU04JQfRnggJQ8DrcVBGjAsCKwFBbDlVNtEMlzw==" - }, - "node_modules/tiny-warning": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz", - "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==" - }, "node_modules/tmpl": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.5.tgz", @@ -14984,11 +14939,6 @@ "node": ">= 8" } }, - "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/void-elements": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-3.1.0.tgz", @@ -17986,6 +17936,11 @@ "@react-spring/types": "~9.4.5" } }, + "@remix-run/router": { + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.5.0.tgz", + "integrity": "sha512-bkUDCp8o1MvFO+qxkODcbhSqRa6P2GXgrGZVpt0dCXNW2HCSCqYI0ZoAqEOSAjRWmmlKcYgFvN4B4S+zo/f8kg==" + }, "@sinonjs/commons": { "version": "1.8.6", "resolved": "https://registry.npmjs.org/@sinonjs/commons/-/commons-1.8.6.tgz", @@ -20991,19 +20946,6 @@ "has-symbols": "^1.0.2" } }, - "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", @@ -21392,11 +21334,6 @@ "is-docker": "^2.0.0" } }, - "isarray": { - "version": "0.0.1", - "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz", - "integrity": "sha512-D2S+3GLxWH+uhrNEcoh/fnmYeP8E8/zHl644d/jdA0g2uyXvy3sb0qxotE+ne0LtccHknQzWwZEzhak7oJ0COQ==" - }, "isexe": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz", @@ -24926,14 +24863,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" - } - }, "path-type": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz", @@ -25213,40 +25142,20 @@ } }, "react-router": { - "version": "5.3.4", - "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.3.4.tgz", - "integrity": "sha512-Ys9K+ppnJah3QuaRiLxk+jDWOR1MekYQrlytiXxC1RyfbdsZkS5pvKAzCCr031xHixZwpnsYNT5xysdFHQaYsA==", + "version": "6.10.0", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.10.0.tgz", + "integrity": "sha512-Nrg0BWpQqrC3ZFFkyewrflCud9dio9ME3ojHCF/WLsprJVzkq3q3UeEhMCAW1dobjeGbWgjNn/PVF6m46ANxXQ==", "requires": { - "@babel/runtime": "^7.12.13", - "history": "^4.9.0", - "hoist-non-react-statics": "^3.1.0", - "loose-envify": "^1.3.1", - "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==" - } + "@remix-run/router": "1.5.0" } }, "react-router-dom": { - "version": "5.3.4", - "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.3.4.tgz", - "integrity": "sha512-m4EqFMHv/Ih4kpcBCONHbkT68KoAeHN4p3lAGoNryfHi0dMy0kCzEZakiKRsvg5wHZ/JLrLW8o8KomWiz/qbYQ==", + "version": "6.10.0", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.10.0.tgz", + "integrity": "sha512-E5dfxRPuXKJqzwSe/qGcqdwa18QiWC6f3H3cWXM24qj4N0/beCIf/CWTipop2xm7mR0RCS99NnaqPNjHtrAzCg==", "requires": { - "@babel/runtime": "^7.12.13", - "history": "^4.9.0", - "loose-envify": "^1.3.1", - "prop-types": "^15.6.2", - "react-router": "5.3.4", - "tiny-invariant": "^1.0.2", - "tiny-warning": "^1.0.0" + "@remix-run/router": "1.5.0", + "react-router": "6.10.0" } }, "react-smooth-image": { @@ -25424,11 +25333,6 @@ "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz", "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==" }, - "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==" - }, "resolve.exports": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/resolve.exports/-/resolve.exports-1.1.1.tgz", @@ -25913,16 +25817,6 @@ "globrex": "^0.1.2" } }, - "tiny-invariant": { - "version": "1.3.1", - "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.1.tgz", - "integrity": "sha512-AD5ih2NlSssTCwsMznbvwMZpJ1cbhkGd2uueNxzv2jDlEeZdU04JQfRnggJQ8DrcVBGjAsCKwFBbDlVNtEMlzw==" - }, - "tiny-warning": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz", - "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==" - }, "tmpl": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.5.tgz", @@ -26202,11 +26096,6 @@ } } }, - "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==" - }, "void-elements": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-3.1.0.tgz", diff --git a/frontend/package.json b/frontend/package.json index f099f14a..c5391f27 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -77,7 +77,7 @@ "react-i18next": "^11.16.2", "react-image": "^4.0.3", "react-qr-code": "^2.0.3", - "react-router-dom": "^5.2.0", + "react-router-dom": "^6.10.0", "react-smooth-image": "^1.1.0", "react-world-flags": "^1.4.0", "reconnecting-websocket": "^4.4.0", diff --git a/frontend/src/basic/BookPage/index.tsx b/frontend/src/basic/BookPage/index.tsx index b83482fe..0ad94cff 100644 --- a/frontend/src/basic/BookPage/index.tsx +++ b/frontend/src/basic/BookPage/index.tsx @@ -1,7 +1,7 @@ import React, { useContext, useEffect, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { Button, Grid, ButtonGroup, Dialog, Box } from '@mui/material'; -import { useHistory } from 'react-router-dom'; +import { useNavigate } from 'react-router-dom'; import DepthChart from '../../components/Charts/DepthChart'; import { NoRobotDialog } from '../../components/Dialogs'; @@ -26,7 +26,7 @@ const BookPage = (): JSX.Element => { setOrder, } = useContext(AppContext); const { t } = useTranslation(); - const history = useHistory(); + const navigate = useNavigate(); const [view, setView] = useState<'list' | 'depth'>('list'); const [openMaker, setOpenMaker] = useState(false); const [openNoRobot, setOpenNoRobot] = useState(false); @@ -47,7 +47,7 @@ const BookPage = (): JSX.Element => { const onOrderClicked = function (id: number) { if (robot.avatarLoaded) { - history.push('/order/' + id); + navigate('/order/' + id); setPage('order'); setCurrentOrder(id); onViewOrder(); @@ -97,7 +97,7 @@ const BookPage = (): JSX.Element => { clearOrder(); setCurrentOrder(id); setPage('order'); - history.push('/order/' + id); + navigate('/order/' + id); }} /> diff --git a/frontend/src/basic/Main.tsx b/frontend/src/basic/Main.tsx index 97e27914..95e98548 100644 --- a/frontend/src/basic/Main.tsx +++ b/frontend/src/basic/Main.tsx @@ -1,5 +1,5 @@ import React, { useContext } from 'react'; -import { HashRouter, BrowserRouter, Switch, Route } from 'react-router-dom'; +import { MemoryRouter, BrowserRouter, Routes, Route } from 'react-router-dom'; import { Box, Slide, Typography } from '@mui/material'; import RobotPage from './RobotPage'; @@ -16,6 +16,8 @@ import { useTranslation } from 'react-i18next'; import Notifications from '../components/Notifications'; import { AppContextProps, AppContext } from '../contexts/AppContext'; +const Router = window.NativeRobosats === undefined ? BrowserRouter : MemoryRouter; + const Main = (): JSX.Element => { const { t } = useTranslation(); const { @@ -33,11 +35,8 @@ const Main = (): JSX.Element => { navbarHeight, } = useContext(AppContext); - const Router = window.NativeRobosats === undefined ? BrowserRouter : HashRouter; - const basename = window.NativeRobosats === undefined ? '' : window.location.pathname; - return ( - + { transform: `translate(-50%, -50%) translate(0, -${navbarHeight / 2}em`, }} > - + + {['/robot/:refCode?', '/', ''].map((path, index) => { + return ( + +
+ +
+ + } + key={index} + /> + ); + })} + ( + path={'/offers'} + element={
- +
- )} + } /> - - -
- -
- - - - - -
- -
- - + +
+ +
+ + } + /> ( + element={
- +
- )} + } /> - - -
- -
- - - + +
+ +
+ + } + /> +
diff --git a/frontend/src/basic/MakerPage/index.tsx b/frontend/src/basic/MakerPage/index.tsx index 74ecd9bf..1360209c 100644 --- a/frontend/src/basic/MakerPage/index.tsx +++ b/frontend/src/basic/MakerPage/index.tsx @@ -1,6 +1,6 @@ import React, { useContext, useMemo, useState } from 'react'; import { useTranslation } from 'react-i18next'; -import { useHistory } from 'react-router-dom'; +import { useNavigate } from 'react-router-dom'; import { Grid, Paper, Collapse, Typography } from '@mui/material'; import { filterOrders } from '../../utils'; @@ -26,7 +26,7 @@ const MakerPage = (): JSX.Element => { setDelay, } = useContext(AppContext); const { t } = useTranslation(); - const history = useHistory(); + const navigate = useNavigate(); const maxHeight = (windowSize.height - navbarHeight) * 0.85 - 3; const [showMatches, setShowMatches] = useState(false); @@ -57,7 +57,7 @@ const MakerPage = (): JSX.Element => { const onOrderClicked = function (id: number) { if (robot.avatarLoaded) { - history.push('/order/' + id); + navigate('/order/' + id); setPage('order'); setCurrentOrder(id); onViewOrder(); @@ -105,7 +105,7 @@ const MakerPage = (): JSX.Element => { clearOrder(); setCurrentOrder(id); setPage('order'); - history.push('/order/' + id); + navigate('/order/' + id); }} hasRobot={robot.avatarLoaded} disableRequest={matches.length > 0 && !showMatches} diff --git a/frontend/src/basic/NavBar/NavBar.tsx b/frontend/src/basic/NavBar/NavBar.tsx index bfe13f51..75e0eee6 100644 --- a/frontend/src/basic/NavBar/NavBar.tsx +++ b/frontend/src/basic/NavBar/NavBar.tsx @@ -1,6 +1,6 @@ import React, { useContext, useEffect } from 'react'; import { useTranslation } from 'react-i18next'; -import { useHistory } from 'react-router-dom'; +import { useNavigate } from 'react-router-dom'; import { Tabs, Tab, Paper, useTheme } from '@mui/material'; import MoreTooltip from './MoreTooltip'; @@ -38,7 +38,7 @@ const NavBar = ({ width, height }: NavBarProps): JSX.Element => { const theme = useTheme(); const { t } = useTranslation(); - const history = useHistory(); + const navigate = useNavigate(); const smallBar = width < 50; const tabSx = smallBar @@ -68,7 +68,7 @@ const NavBar = ({ width, height }: NavBarProps): JSX.Element => { setPage(newPage); const param = newPage === 'order' ? currentOrder ?? '' : ''; setTimeout( - () => history.push(`/${newPage}/${param}`), + () => navigate(`/${newPage}/${param}`), theme.transitions.duration.leavingScreen * 3, ); } diff --git a/frontend/src/basic/OrderPage/index.tsx b/frontend/src/basic/OrderPage/index.tsx index 2f9d5805..827fe64d 100644 --- a/frontend/src/basic/OrderPage/index.tsx +++ b/frontend/src/basic/OrderPage/index.tsx @@ -1,7 +1,7 @@ import React, { useContext, useEffect, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { Tab, Tabs, Paper, CircularProgress, Grid, Typography, Box } from '@mui/material'; -import { useHistory } from 'react-router-dom'; +import { useNavigate, useParams } from 'react-router-dom'; import TradeBox from '../../components/TradeBox'; import OrderDetails from '../../components/OrderDetails'; @@ -9,11 +9,7 @@ import OrderDetails from '../../components/OrderDetails'; import { apiClient } from '../../services/api'; import { AppContext, AppContextProps } from '../../contexts/AppContext'; -interface OrderPageProps { - locationOrderId: number; -} - -const OrderPage = ({ locationOrderId }: OrderPageProps): JSX.Element => { +const OrderPage = (): JSX.Element => { const { windowSize, info, @@ -29,14 +25,15 @@ const OrderPage = ({ locationOrderId }: OrderPageProps): JSX.Element => { navbarHeight, } = useContext(AppContext); const { t } = useTranslation(); - const history = useHistory(); + const navigate = useNavigate(); + const params = useParams(); const doublePageWidth: number = 50; const maxHeight: number = (windowSize.height - navbarHeight) * 0.85 - 3; const [tab, setTab] = useState<'order' | 'contract'>('contract'); - useEffect(() => setCurrentOrder(locationOrderId), []); + useEffect(() => setCurrentOrder(Number(params.orderId)), []); const renewOrder = function () { if (order != undefined) { @@ -60,7 +57,7 @@ const OrderPage = ({ locationOrderId }: OrderPageProps): JSX.Element => { if (data.bad_request) { setBadOrder(data.bad_request); } else if (data.id) { - history.push('/order/' + data.id); + navigate('/order/' + data.id); setCurrentOrder(data.id); } }); @@ -68,7 +65,7 @@ const OrderPage = ({ locationOrderId }: OrderPageProps): JSX.Element => { }; const startAgain = function () { - history.push('/robot'); + navigate('/robot'); setPage('robot'); }; return ( diff --git a/frontend/src/basic/RobotPage/Onboarding.tsx b/frontend/src/basic/RobotPage/Onboarding.tsx index 626ee5f6..ad62bd60 100644 --- a/frontend/src/basic/RobotPage/Onboarding.tsx +++ b/frontend/src/basic/RobotPage/Onboarding.tsx @@ -1,6 +1,6 @@ import React, { useState } from 'react'; import { useTranslation } from 'react-i18next'; -import { useHistory } from 'react-router-dom'; +import { useNavigate } from 'react-router-dom'; import { Alert, Box, @@ -48,7 +48,7 @@ const Onboarding = ({ baseUrl, }: OnboardingProps): JSX.Element => { const { t } = useTranslation(); - const history = useHistory(); + const navigate = useNavigate(); const [step, setStep] = useState<'1' | '2' | '3'>('1'); const [generatedToken, setGeneratedToken] = useState(false); @@ -63,7 +63,7 @@ const Onboarding = ({ const changePage = function (newPage: Page) { setPage(newPage); - history.push(`/${newPage}`); + navigate(`/${newPage}`); }; return ( diff --git a/frontend/src/basic/RobotPage/RobotProfile.tsx b/frontend/src/basic/RobotPage/RobotProfile.tsx index 83fb5c2f..a32892bf 100644 --- a/frontend/src/basic/RobotPage/RobotProfile.tsx +++ b/frontend/src/basic/RobotPage/RobotProfile.tsx @@ -1,6 +1,6 @@ import React, { useState, useContext, useEffect } from 'react'; import { useTranslation } from 'react-i18next'; -import { useHistory } from 'react-router-dom'; +import { useNavigate } from 'react-router-dom'; import { Button, Grid, @@ -56,7 +56,7 @@ const RobotProfile = ({ useContext(AppContext); const { t } = useTranslation(); const theme = useTheme(); - const history = useHistory(); + const navigate = useNavigate(); const [loading, setLoading] = useState(true); @@ -157,7 +157,7 @@ const RobotProfile = ({