From a90b4c439b35068197e7cfdc1a6a219cd5ed821d Mon Sep 17 00:00:00 2001 From: Vojtech Simetka Date: Mon, 17 Jan 2022 14:47:26 +0100 Subject: [PATCH] chore(deps): update react router from v5 to v6 (#280) * chore(deps): update react router from v5 to v6 * fix: correctly choose navigate target if there is no history --- package-lock.json | 189 ++++---------------- package.json | 4 +- src/components/ExpandableListItemLink.tsx | 6 +- src/components/HistoryHeader.tsx | 6 +- src/components/SideBarItem.tsx | 2 +- src/components/SideBarStatus.tsx | 2 +- src/pages/feeds/CreateNewFeed.tsx | 8 +- src/pages/feeds/FeedSubpage.tsx | 16 +- src/pages/feeds/UpdateFeed.tsx | 17 +- src/pages/feeds/index.tsx | 8 +- src/pages/files/Download.tsx | 6 +- src/pages/files/FileNavigation.tsx | 6 +- src/pages/files/Share.tsx | 24 ++- src/pages/files/Upload.tsx | 10 +- src/pages/files/UploadArea.tsx | 6 +- src/pages/stamps/CreatePostageStampPage.tsx | 6 +- src/pages/stamps/index.tsx | 6 +- src/routes.tsx | 34 ++-- 18 files changed, 110 insertions(+), 246 deletions(-) diff --git a/package-lock.json b/package-lock.json index a13f600..29b02be 100644 --- a/package-lock.json +++ b/package-lock.json @@ -31,8 +31,8 @@ "react-dom": ">= 17.0.2", "react-feather": "2.0.9", "react-identicons": "1.2.5", - "react-router": "5.2.0", - "react-router-dom": "5.2.0", + "react-router": "6.2.1", + "react-router-dom": "6.2.1", "react-syntax-highlighter": "15.4.4", "semver": "7.3.5", "serve-handler": "6.1.3" @@ -11867,16 +11867,11 @@ } }, "node_modules/history": { - "version": "4.10.1", - "resolved": "https://registry.npmjs.org/history/-/history-4.10.1.tgz", - "integrity": "sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==", + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/history/-/history-5.2.0.tgz", + "integrity": "sha512-uPSF6lAJb3nSePJ43hN3eKj1dTWpN9gMod0ZssbFTIsen+WehTmEadgL+kg78xLJFdRfrrC//SavDzmRVdE+Ig==", "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" + "@babel/runtime": "^7.7.6" } }, "node_modules/hmac-drbg": { @@ -13220,11 +13215,6 @@ "node": ">=8" } }, - "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/isexe": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz", @@ -16287,19 +16277,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/mini-css-extract-plugin": { "version": "0.11.3", "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-0.11.3.tgz", @@ -17523,14 +17500,6 @@ "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==", "dev": true }, - "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", @@ -21899,47 +21868,29 @@ } }, "node_modules/react-router": { - "version": "5.2.0", - "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.2.0.tgz", - "integrity": "sha512-smz1DUuFHRKdcJC0jobGo8cVbhO3x50tCL4icacOlcwDOEQPq4TMqwx3sY1TP+DvtTgz4nm3thuo7A+BK2U0Dw==", + "version": "6.2.1", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.2.1.tgz", + "integrity": "sha512-2fG0udBtxou9lXtK97eJeET2ki5//UWfQSl1rlJ7quwe6jrktK9FCCc8dQb5QY6jAv3jua8bBQRhhDOM/kVRsg==", "dependencies": { - "@babel/runtime": "^7.1.2", - "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" + "history": "^5.2.0" }, "peerDependencies": { - "react": ">=15" + "react": ">=16.8" } }, "node_modules/react-router-dom": { - "version": "5.2.0", - "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.2.0.tgz", - "integrity": "sha512-gxAmfylo2QUjcwxI63RhQ5G85Qqt4voZpUXSEqCwykV0baaOTQDR1f0PmY8AELqIyVc0NEZUj0Gov5lNGcXgsA==", + "version": "6.2.1", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.2.1.tgz", + "integrity": "sha512-I6Zax+/TH/cZMDpj3/4Fl2eaNdcvoxxHoH1tYOREsQ22OKDYofGebrNm6CTPUcvLvZm63NL/vzCYdjf9CUhqmA==", "dependencies": { - "@babel/runtime": "^7.1.2", - "history": "^4.9.0", - "loose-envify": "^1.3.1", - "prop-types": "^15.6.2", - "react-router": "5.2.0", - "tiny-invariant": "^1.0.2", - "tiny-warning": "^1.0.0" + "history": "^5.2.0", + "react-router": "6.2.1" }, "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-scripts": { "version": "4.0.3", "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-4.0.3.tgz", @@ -22636,11 +22587,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-url": { "version": "0.2.1", "resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz", @@ -25523,11 +25469,6 @@ "integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=", "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", @@ -26326,11 +26267,6 @@ "spdx-expression-parse": "^3.0.0" } }, - "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", @@ -37639,16 +37575,11 @@ "integrity": "sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A==" }, "history": { - "version": "4.10.1", - "resolved": "https://registry.npmjs.org/history/-/history-4.10.1.tgz", - "integrity": "sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==", + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/history/-/history-5.2.0.tgz", + "integrity": "sha512-uPSF6lAJb3nSePJ43hN3eKj1dTWpN9gMod0ZssbFTIsen+WehTmEadgL+kg78xLJFdRfrrC//SavDzmRVdE+Ig==", "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" + "@babel/runtime": "^7.7.6" } }, "hmac-drbg": { @@ -38664,11 +38595,6 @@ "is-docker": "^2.0.0" } }, - "isarray": { - "version": "0.0.1", - "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz", - "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=" - }, "isexe": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz", @@ -41131,15 +41057,6 @@ "integrity": "sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==", "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" - } - }, "mini-css-extract-plugin": { "version": "0.11.3", "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-0.11.3.tgz", @@ -42109,14 +42026,6 @@ "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==", "dev": true }, - "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", @@ -45497,41 +45406,20 @@ "dev": true }, "react-router": { - "version": "5.2.0", - "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.2.0.tgz", - "integrity": "sha512-smz1DUuFHRKdcJC0jobGo8cVbhO3x50tCL4icacOlcwDOEQPq4TMqwx3sY1TP+DvtTgz4nm3thuo7A+BK2U0Dw==", + "version": "6.2.1", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.2.1.tgz", + "integrity": "sha512-2fG0udBtxou9lXtK97eJeET2ki5//UWfQSl1rlJ7quwe6jrktK9FCCc8dQb5QY6jAv3jua8bBQRhhDOM/kVRsg==", "requires": { - "@babel/runtime": "^7.1.2", - "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==" - } + "history": "^5.2.0" } }, "react-router-dom": { - "version": "5.2.0", - "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.2.0.tgz", - "integrity": "sha512-gxAmfylo2QUjcwxI63RhQ5G85Qqt4voZpUXSEqCwykV0baaOTQDR1f0PmY8AELqIyVc0NEZUj0Gov5lNGcXgsA==", + "version": "6.2.1", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.2.1.tgz", + "integrity": "sha512-I6Zax+/TH/cZMDpj3/4Fl2eaNdcvoxxHoH1tYOREsQ22OKDYofGebrNm6CTPUcvLvZm63NL/vzCYdjf9CUhqmA==", "requires": { - "@babel/runtime": "^7.1.2", - "history": "^4.9.0", - "loose-envify": "^1.3.1", - "prop-types": "^15.6.2", - "react-router": "5.2.0", - "tiny-invariant": "^1.0.2", - "tiny-warning": "^1.0.0" + "history": "^5.2.0", + "react-router": "6.2.1" } }, "react-scripts": { @@ -46074,11 +45962,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==" - }, "resolve-url": { "version": "0.2.1", "resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz", @@ -48406,11 +48289,6 @@ "integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=", "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", @@ -49034,11 +48912,6 @@ "spdx-expression-parse": "^3.0.0" } }, - "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 a340689..234e277 100644 --- a/package.json +++ b/package.json @@ -48,8 +48,8 @@ "react-dom": ">= 17.0.2", "react-feather": "2.0.9", "react-identicons": "1.2.5", - "react-router": "5.2.0", - "react-router-dom": "5.2.0", + "react-router": "6.2.1", + "react-router-dom": "6.2.1", "react-syntax-highlighter": "15.4.4", "semver": "7.3.5", "serve-handler": "6.1.3" diff --git a/src/components/ExpandableListItemLink.tsx b/src/components/ExpandableListItemLink.tsx index 5c46679..957f498 100644 --- a/src/components/ExpandableListItemLink.tsx +++ b/src/components/ExpandableListItemLink.tsx @@ -3,7 +3,7 @@ import { createStyles, makeStyles, Theme } from '@material-ui/core/styles' import { ArrowForward, OpenInNewSharp } from '@material-ui/icons' import { ReactElement, useState } from 'react' import CopyToClipboard from 'react-copy-to-clipboard' -import { useHistory } from 'react-router' +import { useNavigate } from 'react-router' const useStyles = makeStyles((theme: Theme) => createStyles({ @@ -61,7 +61,7 @@ export default function ExpandableListItemLink({ }: Props): ReactElement | null { const classes = useStyles() const [copied, setCopied] = useState(false) - const history = useHistory() + const navigate = useNavigate() const tooltipClickHandler = () => setCopied(true) const tooltipCloseHandler = () => setCopied(false) @@ -72,7 +72,7 @@ export default function ExpandableListItemLink({ if (navigationType === 'NEW_WINDOW') { window.open(link || value) } else { - history.push(link || value) + navigate(link || value) } } diff --git a/src/components/HistoryHeader.tsx b/src/components/HistoryHeader.tsx index 0f32c49..333a7fc 100644 --- a/src/components/HistoryHeader.tsx +++ b/src/components/HistoryHeader.tsx @@ -1,7 +1,7 @@ import { Box, createStyles, Grid, makeStyles, Typography } from '@material-ui/core' import { ArrowBack } from '@material-ui/icons' import { ReactElement } from 'react' -import { useHistory } from 'react-router-dom' +import { useNavigate } from 'react-router-dom' interface Props { children: string @@ -20,10 +20,10 @@ const useStyles = makeStyles(() => export function HistoryHeader({ children }: Props): ReactElement { const classes = useStyles() - const history = useHistory() + const navigate = useNavigate() function goBack() { - history.goBack() + navigate(-1) } return ( diff --git a/src/components/SideBarItem.tsx b/src/components/SideBarItem.tsx index 3148dca..0c57082 100644 --- a/src/components/SideBarItem.tsx +++ b/src/components/SideBarItem.tsx @@ -50,7 +50,7 @@ interface Props { export default function SideBarItem({ iconStart, iconEnd, path, label }: Props): ReactElement { const classes = useStyles() const location = useLocation() - const isSelected = Boolean(matchPath(location.pathname, { path, exact: true })) + const isSelected = Boolean(path && matchPath(location.pathname, path)) return ( diff --git a/src/components/SideBarStatus.tsx b/src/components/SideBarStatus.tsx index c15b4ed..46728b5 100644 --- a/src/components/SideBarStatus.tsx +++ b/src/components/SideBarStatus.tsx @@ -56,7 +56,7 @@ export default function SideBarItem({ path }: Props): ReactElement { const { status, isLoading } = useContext(Context) const classes = useStyles() const location = useLocation() - const isSelected = Boolean(matchPath(location.pathname, { path, exact: true })) + const isSelected = Boolean(path && matchPath(location.pathname, path)) return ( ): ReactElement { +export function FeedSubpage(): ReactElement { const { identities } = useContext(IdentityContext) + const { uuid } = useParams() const { beeApi } = useContext(SettingsContext) const { status } = useContext(BeeContext) - const history = useHistory() + const navigate = useNavigate() const [available, setAvailable] = useState(false) - const uuid = props.match.params.uuid const identity = identities.find(x => x.uuid === uuid) useEffect(() => { @@ -44,13 +40,13 @@ export function FeedSubpage(props: RouteComponentProps): ReactEleme }, [beeApi, uuid, identity]) if (!identity || !status.all) { - history.replace(ROUTES.FEEDS) + navigate(ROUTES.FEEDS, { replace: true }) return <> } function onClose() { - history.push(ROUTES.FEEDS) + navigate(ROUTES.FEEDS) } return ( diff --git a/src/pages/feeds/UpdateFeed.tsx b/src/pages/feeds/UpdateFeed.tsx index dbd79e4..fa5ecd1 100644 --- a/src/pages/feeds/UpdateFeed.tsx +++ b/src/pages/feeds/UpdateFeed.tsx @@ -2,7 +2,7 @@ import { Box, Grid, Typography } from '@material-ui/core' import { useSnackbar } from 'notistack' import { ReactElement, useContext, useEffect, useState } from 'react' import { Bookmark, X } from 'react-feather' -import { RouteComponentProps, useHistory } from 'react-router' +import { useParams, useNavigate } from 'react-router' import ExpandableListItemActions from '../../components/ExpandableListItemActions' import { HistoryHeader } from '../../components/HistoryHeader' import { SwarmButton } from '../../components/SwarmButton' @@ -16,15 +16,12 @@ import { ROUTES } from '../../routes' import { persistIdentity, updateFeed } from '../../utils/identity' import { FeedPasswordDialog } from './FeedPasswordDialog' -interface MatchParams { - hash: string -} - -export default function UpdateFeed(props: RouteComponentProps): ReactElement { +export default function UpdateFeed(): ReactElement { const { identities, setIdentities } = useContext(IdentityContext) const { beeApi, beeDebugApi } = useContext(SettingsContext) const { stamps, refresh } = useContext(StampContext) const { status } = useContext(BeeContext) + const { hash } = useParams() const [selectedStamp, setSelectedStamp] = useState(null) const [selectedIdentity, setSelectedIdentity] = useState(null) @@ -32,7 +29,7 @@ export default function UpdateFeed(props: RouteComponentProps): Rea const { enqueueSnackbar } = useSnackbar() const [showPasswordPrompt, setShowPasswordPrompt] = useState(false) - const history = useHistory() + const navigate = useNavigate() useEffect(() => { refresh() @@ -50,7 +47,7 @@ export default function UpdateFeed(props: RouteComponentProps): Rea } function onCancel() { - history.goBack() + navigate(-1) } function onBeginUpdatingFeed() { @@ -76,10 +73,10 @@ export default function UpdateFeed(props: RouteComponentProps): Rea } try { - await updateFeed(beeApi, identity, props.match.params.hash, selectedStamp, password as string) + await updateFeed(beeApi, identity, hash!, selectedStamp, password as string) // eslint-disable-line persistIdentity(identities, identity) setIdentities([...identities]) - history.push(ROUTES.FEEDS_PAGE.replace(':uuid', identity.uuid)) + navigate(ROUTES.FEEDS_PAGE.replace(':uuid', identity.uuid)) } catch (error: unknown) { setLoading(false) diff --git a/src/pages/feeds/index.tsx b/src/pages/feeds/index.tsx index bc3c8bb..f2f9759 100644 --- a/src/pages/feeds/index.tsx +++ b/src/pages/feeds/index.tsx @@ -1,7 +1,7 @@ import { Box, Typography } from '@material-ui/core' import { ReactElement, useContext, useState } from 'react' import { Download, Info, PlusSquare, Trash } from 'react-feather' -import { useHistory } from 'react-router' +import { useNavigate } from 'react-router' import ExpandableList from '../../components/ExpandableList' import ExpandableListItem from '../../components/ExpandableListItem' import ExpandableListItemActions from '../../components/ExpandableListItemActions' @@ -20,7 +20,7 @@ export default function Feeds(): ReactElement { const { identities, setIdentities } = useContext(IdentityContext) const { status } = useContext(BeeContext) - const history = useHistory() + const navigate = useNavigate() const [selectedIdentity, setSelectedIdentity] = useState(null) const [showImport, setShowImport] = useState(false) @@ -28,11 +28,11 @@ export default function Feeds(): ReactElement { const [showDelete, setShowDelete] = useState(false) function createNewFeed() { - return history.push(ROUTES.FEEDS_NEW) + return navigate(ROUTES.FEEDS_NEW) } function viewFeed(uuid: string) { - history.push(ROUTES.FEEDS_PAGE.replace(':uuid', uuid)) + navigate(ROUTES.FEEDS_PAGE.replace(':uuid', uuid)) } function onDialogClose() { diff --git a/src/pages/files/Download.tsx b/src/pages/files/Download.tsx index 6f6cfa0..0ae913b 100644 --- a/src/pages/files/Download.tsx +++ b/src/pages/files/Download.tsx @@ -2,7 +2,7 @@ import { Utils } from '@ethersphere/bee-js' import { ManifestJs } from '@ethersphere/manifest-js' import { useSnackbar } from 'notistack' import { ReactElement, useContext, useState } from 'react' -import { useHistory } from 'react-router-dom' +import { useNavigate } from 'react-router-dom' import ExpandableListItemInput from '../../components/ExpandableListItemInput' import { History } from '../../components/History' import { Context, defaultUploadOrigin } from '../../providers/File' @@ -20,7 +20,7 @@ export function Download(): ReactElement { const { setUploadOrigin } = useContext(Context) const { enqueueSnackbar } = useSnackbar() - const history = useHistory() + const navigate = useNavigate() const validateChange = (value: string) => { if (Utils.isHexString(value, 64) || Utils.isHexString(value, 128) || !value.trim().length) { @@ -54,7 +54,7 @@ export function Download(): ReactElement { const indexDocument = await manifestJs.getIndexDocumentPath(identifier) putHistory(HISTORY_KEYS.DOWNLOAD_HISTORY, identifier, determineHistoryName(identifier, indexDocument)) setUploadOrigin(defaultUploadOrigin) - history.push(ROUTES.HASH.replace(':hash', identifier)) + navigate(ROUTES.HASH.replace(':hash', identifier)) } catch (error: unknown) { let message = typeof error === 'object' && error !== null && Reflect.get(error, 'message') diff --git a/src/pages/files/FileNavigation.tsx b/src/pages/files/FileNavigation.tsx index e7fe755..9187f3a 100644 --- a/src/pages/files/FileNavigation.tsx +++ b/src/pages/files/FileNavigation.tsx @@ -1,6 +1,6 @@ import { createStyles, makeStyles, Tab, Tabs, Theme } from '@material-ui/core' import { ReactElement } from 'react' -import { useHistory } from 'react-router-dom' +import { useNavigate } from 'react-router-dom' import { ROUTES } from '../../routes' interface Props { @@ -24,10 +24,10 @@ const useStyles = makeStyles((theme: Theme) => export function FileNavigation({ active }: Props): ReactElement { const classes = useStyles() - const history = useHistory() + const navigate = useNavigate() function onChange(event: React.ChangeEvent>, newValue: number) { - history.push(newValue === 1 ? ROUTES.DOWNLOAD : ROUTES.UPLOAD) + navigate(newValue === 1 ? ROUTES.DOWNLOAD : ROUTES.UPLOAD) } return ( diff --git a/src/pages/files/Share.tsx b/src/pages/files/Share.tsx index 5f77429..dd88894 100644 --- a/src/pages/files/Share.tsx +++ b/src/pages/files/Share.tsx @@ -4,7 +4,7 @@ import { saveAs } from 'file-saver' import JSZip from 'jszip' import { useSnackbar } from 'notistack' import { ReactElement, useContext, useEffect, useState } from 'react' -import { RouteComponentProps, useHistory } from 'react-router-dom' +import { useParams, useNavigate } from 'react-router-dom' import { HistoryHeader } from '../../components/HistoryHeader' import { Loading } from '../../components/Loading' import TroubleshootConnectionCard from '../../components/TroubleshootConnectionCard' @@ -19,17 +19,14 @@ import { AssetPreview } from './AssetPreview' import { AssetSummary } from './AssetSummary' import { DownloadActionBar } from './DownloadActionBar' -interface MatchParams { - hash: string -} - -export function Share(props: RouteComponentProps): ReactElement { +export function Share(): ReactElement { const { apiUrl, beeApi } = useContext(SettingsContext) const { status } = useContext(BeeContext) - const reference = props.match.params.hash + const { hash } = useParams() + const reference = hash! // eslint-disable-line - const history = useHistory() + const navigate = useNavigate() const { enqueueSnackbar } = useSnackbar() const [loading, setLoading] = useState(true) @@ -71,16 +68,17 @@ export function Share(props: RouteComponentProps): ReactElement { } function onClose() { - // POP means there is no history - nowhere to go back yet - if (history.action === 'POP') { - history.push(ROUTES.UPLOAD) + if (navigate.length > 0) { + // There is at least one different route in browser history that we can return to + navigate(-1) } else { - history.goBack() + // This is the first page user opened, navigate to upload page instead of going back + navigate(ROUTES.UPLOAD) } } function onUpdateFeed() { - history.push(ROUTES.FEEDS_UPDATE.replace(':hash', reference)) + navigate(ROUTES.FEEDS_UPDATE.replace(':hash', reference)) } useEffect(() => { diff --git a/src/pages/files/Upload.tsx b/src/pages/files/Upload.tsx index b45134d..da9b77a 100644 --- a/src/pages/files/Upload.tsx +++ b/src/pages/files/Upload.tsx @@ -1,7 +1,7 @@ import { Box } from '@material-ui/core' import { useSnackbar } from 'notistack' import { ReactElement, useContext, useEffect, useState } from 'react' -import { useHistory } from 'react-router-dom' +import { useNavigate } from 'react-router-dom' import { DocumentationText } from '../../components/DocumentationText' import { HistoryHeader } from '../../components/HistoryHeader' import { ProgressIndicator } from '../../components/ProgressIndicator' @@ -36,7 +36,7 @@ export function Upload(): ReactElement { const { status } = useContext(BeeContext) const { enqueueSnackbar } = useSnackbar() - const history = useHistory() + const navigate = useNavigate() useEffect(() => { refresh() @@ -46,7 +46,7 @@ export function Upload(): ReactElement { if (!files.length) { setFiles([]) - history.replace(ROUTES.UPLOAD) + navigate(ROUTES.UPLOAD, { replace: true }) return <> } @@ -80,12 +80,12 @@ export function Upload(): ReactElement { putHistory(HISTORY_KEYS.UPLOAD_HISTORY, hash.reference, getAssetNameFromFiles(files)) if (uploadOrigin.origin === 'UPLOAD') { - history.replace(ROUTES.HASH.replace(':hash', hash.reference)) + navigate(ROUTES.HASH.replace(':hash', hash.reference), { replace: true }) } else { updateFeed(beeApi, identity as Identity, hash.reference, stamp.batchID, password as string).then(() => { persistIdentity(identities, identity as Identity) setIdentities([...identities]) - history.replace(ROUTES.FEEDS_PAGE.replace(':uuid', uploadOrigin.uuid as string)) + navigate(ROUTES.FEEDS_PAGE.replace(':uuid', uploadOrigin.uuid as string), { replace: true }) }) } }) diff --git a/src/pages/files/UploadArea.tsx b/src/pages/files/UploadArea.tsx index aa81397..ff24a24 100644 --- a/src/pages/files/UploadArea.tsx +++ b/src/pages/files/UploadArea.tsx @@ -3,7 +3,7 @@ import { DropzoneArea } from 'material-ui-dropzone' import { useSnackbar } from 'notistack' import { ReactElement, useContext, useState } from 'react' import { FilePlus, FolderPlus, PlusCircle } from 'react-feather' -import { useHistory } from 'react-router-dom' +import { useNavigate } from 'react-router-dom' import { DocumentationText } from '../../components/DocumentationText' import { SwarmButton } from '../../components/SwarmButton' import { Context, UploadOrigin } from '../../providers/File' @@ -51,7 +51,7 @@ const useStyles = makeStyles((theme: Theme) => export function UploadArea({ uploadOrigin, showHelp }: Props): ReactElement { const { setFiles, setUploadOrigin } = useContext(Context) const classes = useStyles() - const history = useHistory() + const navigate = useNavigate() const { enqueueSnackbar } = useSnackbar() const [strictWebsiteMode, setStrictWebsiteMode] = useState(false) const [version, setVersion] = useState(0) @@ -115,7 +115,7 @@ export function UploadArea({ uploadOrigin, showHelp }: Props): ReactElement { if (files.length) { setUploadOrigin(uploadOrigin) - history.push(ROUTES.UPLOAD_IN_PROGRESS) + navigate(ROUTES.UPLOAD_IN_PROGRESS) } } } diff --git a/src/pages/stamps/CreatePostageStampPage.tsx b/src/pages/stamps/CreatePostageStampPage.tsx index 46c6995..762665d 100644 --- a/src/pages/stamps/CreatePostageStampPage.tsx +++ b/src/pages/stamps/CreatePostageStampPage.tsx @@ -1,14 +1,14 @@ import { ReactElement } from 'react' -import { useHistory } from 'react-router' +import { useNavigate } from 'react-router' import { HistoryHeader } from '../../components/HistoryHeader' import { ROUTES } from '../../routes' import { PostageStampCreation } from './PostageStampCreation' export function CreatePostageStampPage(): ReactElement { - const history = useHistory() + const navigate = useNavigate() function onFinished() { - history.push(ROUTES.STAMPS) + navigate(ROUTES.STAMPS) } return ( diff --git a/src/pages/stamps/index.tsx b/src/pages/stamps/index.tsx index e8ac696..221673e 100644 --- a/src/pages/stamps/index.tsx +++ b/src/pages/stamps/index.tsx @@ -2,7 +2,7 @@ import { CircularProgress, Container } from '@material-ui/core' import { createStyles, makeStyles } from '@material-ui/core/styles' import { ReactElement, useContext, useEffect } from 'react' import { PlusSquare } from 'react-feather' -import { useHistory } from 'react-router' +import { useNavigate } from 'react-router' import { SwarmButton } from '../../components/SwarmButton' import TroubleshootConnectionCard from '../../components/TroubleshootConnectionCard' import { Context as BeeContext } from '../../providers/Bee' @@ -29,7 +29,7 @@ const useStyles = makeStyles(() => export default function Stamp(): ReactElement { const classes = useStyles() - const history = useHistory() + const navigate = useNavigate() const { stamps, isLoading, error, start, stop } = useContext(StampsContext) const { status } = useContext(BeeContext) @@ -44,7 +44,7 @@ export default function Stamp(): ReactElement { if (!status.all) return function navigateToNewStamp() { - history.push(ROUTES.STAMPS_NEW) + navigate(ROUTES.STAMPS_NEW) } return ( diff --git a/src/routes.tsx b/src/routes.tsx index aa47029..ad0aa5e 100644 --- a/src/routes.tsx +++ b/src/routes.tsx @@ -1,5 +1,5 @@ import type { ReactElement } from 'react' -import { Route, Switch } from 'react-router-dom' +import { Route, Routes } from 'react-router-dom' import Accounting from './pages/accounting' import Feeds from './pages/feeds' import CreateNewFeed from './pages/feeds/CreateNewFeed' @@ -34,22 +34,22 @@ export enum ROUTES { } const BaseRouter = (): ReactElement => ( - - - - - - - - - - - - - - - - + + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + } /> + ) export default BaseRouter