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

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)
     }
   }
 

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 (

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 (
     <StyledListItem button selected={isSelected} disableRipple>

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 (
     <ListItem

src/pages/feeds/CreateNewFeed.tsx

@@ -3,7 +3,7 @@ import { Form, Formik } from 'formik'
 import { useSnackbar } from 'notistack'
 import { ReactElement, useContext, useState } from 'react'
 import { Check, X } from 'react-feather'
-import { useHistory } from 'react-router'
+import { useNavigate } from 'react-router'
 import { DocumentationText } from '../../components/DocumentationText'
 import ExpandableListItemActions from '../../components/ExpandableListItemActions'
 import ExpandableListItemKey from '../../components/ExpandableListItemKey'
@@ -34,7 +34,7 @@ export default function CreateNewFeed(): ReactElement {
   const [loading, setLoading] = useState(false)
   const { enqueueSnackbar } = useSnackbar()
 
-  const history = useHistory()
+  const navigate = useNavigate()
 
   async function onSubmit(values: FormValues) {
     setLoading(true)
@@ -65,12 +65,12 @@ export default function CreateNewFeed(): ReactElement {
     const identity = await convertWalletToIdentity(wallet, values.type, values.identityName, values.password)
     persistIdentity(identities, identity)
     setIdentities(identities)
-    history.push(ROUTES.FEEDS)
+    navigate(ROUTES.FEEDS)
     setLoading(false)
   }
 
   function cancel() {
-    history.goBack()
+    navigate(-1)
   }
 
   return (

src/pages/feeds/FeedSubpage.tsx

@@ -2,7 +2,7 @@ import * as swarmCid from '@ethersphere/swarm-cid'
 import { Box } from '@material-ui/core'
 import { ReactElement, useContext, useEffect, useState } from 'react'
 import { X } from 'react-feather'
-import { RouteComponentProps, useHistory } from 'react-router-dom'
+import { useParams, useNavigate } from 'react-router-dom'
 import { DocumentationText } from '../../components/DocumentationText'
 import ExpandableListItemActions from '../../components/ExpandableListItemActions'
 import ExpandableListItemKey from '../../components/ExpandableListItemKey'
@@ -15,20 +15,16 @@ import { Context as SettingsContext } from '../../providers/Settings'
 import { ROUTES } from '../../routes'
 import { UploadArea } from '../files/UploadArea'
 
-interface MatchParams {
-  uuid: string
-}
-
-export function FeedSubpage(props: RouteComponentProps<MatchParams>): 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<MatchParams>): 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 (

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<MatchParams>): 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<string | null>(null)
   const [selectedIdentity, setSelectedIdentity] = useState<Identity | null>(null)
@@ -32,7 +29,7 @@ export default function UpdateFeed(props: RouteComponentProps<MatchParams>): 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<MatchParams>): Rea
   }
 
   function onCancel() {
-    history.goBack()
+    navigate(-1)
   }
 
   function onBeginUpdatingFeed() {
@@ -76,10 +73,10 @@ export default function UpdateFeed(props: RouteComponentProps<MatchParams>): 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)
 

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<Identity | null>(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() {

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')
 

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<Record<string, never>>, newValue: number) {
-    history.push(newValue === 1 ? ROUTES.DOWNLOAD : ROUTES.UPLOAD)
+    navigate(newValue === 1 ? ROUTES.DOWNLOAD : ROUTES.UPLOAD)
   }
 
   return (

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<MatchParams>): 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<MatchParams>): 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(() => {

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 })
           })
         }
       })

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)
       }
     }
   }

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 (

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 <TroubleshootConnectionCard />
 
   function navigateToNewStamp() {
-    history.push(ROUTES.STAMPS_NEW)
+    navigate(ROUTES.STAMPS_NEW)
   }
 
   return (

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 => (
-  <Switch>
-    <Route exact path={ROUTES.UPLOAD_IN_PROGRESS} component={Upload} />
-    <Route exact path={ROUTES.UPLOAD} component={UploadLander} />
-    <Route exact path={ROUTES.DOWNLOAD} component={Download} />
-    <Route exact path={ROUTES.HASH} component={Share} />
-    <Route exact path={ROUTES.ACCOUNTING} component={Accounting} />
-    <Route exact path={ROUTES.SETTINGS} component={Settings} />
-    <Route exact path={ROUTES.STAMPS} component={Stamps} />
-    <Route exact path={ROUTES.STAMPS_NEW} component={CreatePostageStampPage} />
-    <Route exact path={ROUTES.STATUS} component={Status} />
-    <Route exact path={ROUTES.FEEDS} component={Feeds} />
-    <Route exact path={ROUTES.FEEDS_NEW} component={CreateNewFeed} />
-    <Route exact path={ROUTES.FEEDS_UPDATE} component={UpdateFeed} />
-    <Route exact path={ROUTES.FEEDS_PAGE} component={FeedSubpage} />
-    <Route path={ROUTES.INFO} component={Info} />
-  </Switch>
+  <Routes>
+    <Route path={ROUTES.UPLOAD_IN_PROGRESS} element={<Upload />} />
+    <Route path={ROUTES.UPLOAD} element={<UploadLander />} />
+    <Route path={ROUTES.DOWNLOAD} element={<Download />} />
+    <Route path={ROUTES.HASH} element={<Share />} />
+    <Route path={ROUTES.ACCOUNTING} element={<Accounting />} />
+    <Route path={ROUTES.SETTINGS} element={<Settings />} />
+    <Route path={ROUTES.STAMPS} element={<Stamps />} />
+    <Route path={ROUTES.STAMPS_NEW} element={<CreatePostageStampPage />} />
+    <Route path={ROUTES.STATUS} element={<Status />} />
+    <Route path={ROUTES.FEEDS} element={<Feeds />} />
+    <Route path={ROUTES.FEEDS_NEW} element={<CreateNewFeed />} />
+    <Route path={ROUTES.FEEDS_UPDATE} element={<UpdateFeed />} />
+    <Route path={ROUTES.FEEDS_PAGE} element={<FeedSubpage />} />
+    <Route path={ROUTES.INFO} element={<Info />} />
+  </Routes>
 )
 
 export default BaseRouter