Update react-router-dom to v6

oasisprotocol · Sep 22, 2022 · 6e68989 · 6e68989
1 parent b5a93e0
commit 6e68989
Show file tree

Hide file tree

Showing 12 changed files with 89 additions and 169 deletions.
diff --git a/package.json b/package.json
@@ -80,7 +80,7 @@
     "react-helmet-async": "1.3.0",
     "react-i18next": "11.17.4",
     "react-redux": "7.2.8",
-    "react-router-dom": "5.3.3",
+    "react-router-dom": "6.4.0",
     "react-test-renderer": "17.0.2",
     "redux-saga": "1.2.1",
     "styled-components": "5.3.5",

diff --git a/src/app/__tests__/__snapshots__/index.test.tsx.snap b/src/app/__tests__/__snapshots__/index.test.tsx.snap
@@ -41,31 +41,24 @@ exports[`<App /> should render and match the snapshot 1`] = `
       <Styled(Main)>
         <FatalErrorHandler />
         <Toolbar />
-        <Switch>
+        <Routes>
           <Route
-            component={[Function]}
-            exact={true}
+            element={<HomePage />}
             path="/"
           />
           <Route
-            component={[Function]}
-            exact={true}
+            element={<CreateWalletPage />}
             path="/create-wallet"
           />
           <Route
-            component={[Function]}
-            path="/open-wallet"
+            element={<OpenWalletPage />}
+            path="/open-wallet/*"
           />
           <Route
-            component={[Function]}
-            exact={true}
-            path="/account/:address/stake"
+            element={<AccountPage />}
+            path="/account/:address/*"
           />
-          <Route
-            component={[Function]}
-            path="/account/:address"
-          />
-        </Switch>
+        </Routes>
         <Memo />
       </Styled(Main)>
     </Box>

diff --git a/src/app/components/Footer/__tests__/__snapshots__/index.test.tsx.snap b/src/app/components/Footer/__tests__/__snapshots__/index.test.tsx.snap
@@ -265,6 +265,7 @@ exports[`<Footer /> should render mobile version of footer 1`] = `
     data-testid="mobile-footer-navigation"
   >
     <a
+      class=""
       href="/account/dummy"
     >
       <span
@@ -294,6 +295,7 @@ exports[`<Footer /> should render mobile version of footer 1`] = `
       </span>
     </a>
     <a
+      class=""
       href="/account/dummy/stake"
     >
       <span

diff --git a/src/app/components/Sidebar/index.tsx b/src/app/components/Sidebar/index.tsx
@@ -17,7 +17,7 @@ import * as React from 'react'
 import { useContext } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useDispatch, useSelector } from 'react-redux'
-import { Link, NavLink, useHistory, useLocation } from 'react-router-dom'
+import { Link, NavLink, useNavigate, useLocation } from 'react-router-dom'
 import { Language } from '../../../styles/theme/icons/language/Language'
 import { ThemeSwitcher } from '../ThemeSwitcher'
 import logotype from '../../../../public/logo192.png'
@@ -165,15 +165,15 @@ const SidebarFooter = (props: SidebarFooterProps) => {
   const { t, i18n } = useTranslation()
   const size = props.size
   const dispatch = useDispatch()
-  const history = useHistory()
+  const navigate = useNavigate()
 
   const setLanguage = (ln: string) => {
     i18n.changeLanguage(ln)
   }
 
   const logout = () => {
     dispatch(walletActions.closeWallet())
-    history.push('/')
+    navigate('/')
   }
 
   return (

diff --git a/src/app/index.tsx b/src/app/index.tsx
@@ -10,7 +10,7 @@ import * as React from 'react'
 import { useContext } from 'react'
 import { Helmet } from 'react-helmet-async'
 import { useTranslation } from 'react-i18next'
-import { Route, Switch } from 'react-router-dom'
+import { Route, Routes } from 'react-router-dom'
 import styled from 'styled-components'
 import { FatalErrorHandler } from './components/FatalErrorHandler'
 import { Footer } from './components/Footer'
@@ -47,13 +47,12 @@ export function App() {
           <AppMain>
             <FatalErrorHandler />
             <Toolbar />
-            <Switch>
-              <Route exact path="/" component={HomePage} />
-              <Route exact path="/create-wallet" component={CreateWalletPage} />
-              <Route path="/open-wallet" component={OpenWalletPage} />
-              <Route exact path="/account/:address/stake" component={AccountPage} />
-              <Route path="/account/:address" component={AccountPage} />
-            </Switch>
+            <Routes>
+              <Route path="/" element={<HomePage />} />
+              <Route path="/create-wallet" element={<CreateWalletPage />} />
+              <Route path="/open-wallet/*" element={<OpenWalletPage />} />
+              <Route path="/account/:address/*" element={<AccountPage />} />
+            </Routes>
             <Footer />
           </AppMain>
         </Box>

diff --git a/src/app/pages/AccountPage/__tests__/index.test.tsx b/src/app/pages/AccountPage/__tests__/index.test.tsx
@@ -1,7 +1,7 @@
 import { render, screen } from '@testing-library/react'
 import * as React from 'react'
 import { Provider, useDispatch } from 'react-redux'
-import { MemoryRouter, Route } from 'react-router-dom'
+import { MemoryRouter, Route, Routes } from 'react-router-dom'
 import { ThemeProvider } from 'styles/theme/ThemeProvider'
 import { LocationDescriptor } from 'history'
 import { configureAppStore } from 'store/configureStore'
@@ -25,7 +25,9 @@ const renderPage = (store: any, initialEntries: LocationDescriptor[]) =>
     <Provider store={store}>
       <ThemeProvider>
         <MemoryRouter initialEntries={initialEntries}>
-          <Route path="/account/:address" component={AccountPage} />
+          <Routes>
+            <Route path="/account/:address" element={<AccountPage />} />
+          </Routes>
         </MemoryRouter>
       </ThemeProvider>
     </Provider>,

diff --git a/src/app/pages/AccountPage/index.tsx b/src/app/pages/AccountPage/index.tsx
@@ -16,7 +16,7 @@ import * as React from 'react'
 import { useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useDispatch, useSelector } from 'react-redux'
-import { NavLink, Route, Switch, useParams } from 'react-router-dom'
+import { NavLink, Route, Routes, useParams } from 'react-router-dom'
 import styled from 'styled-components'
 import { normalizeColor } from 'grommet/utils'
 
@@ -59,7 +59,7 @@ interface NavItemProps {
 const counterZIndex = mobileHeaderZIndex - 1
 const NavItem = ({ counter, label, route }: NavItemProps) => {
   return (
-    <StyledNavItem exact to={route}>
+    <StyledNavItem end to={route}>
       <Text>{label}</Text>
       {!!counter && (
         <Box
@@ -89,7 +89,7 @@ interface AccountPageParams {
 export function AccountPage(props: Props) {
   const { t } = useTranslation()
   const isMobile = React.useContext(ResponsiveContext) === 'small'
-  const { address } = useParams<AccountPageParams>()
+  const { address } = useParams<keyof AccountPageParams>()
   const dispatch = useDispatch()
 
   const account = useSelector(selectAccount)
@@ -119,8 +119,8 @@ export function AccountPage(props: Props) {
 
   // Reload account balances if address or network changes
   useEffect(() => {
-    dispatch(accountActions.fetchAccount(address))
-    dispatch(stakingActions.fetchAccount(address))
+    dispatch(accountActions.fetchAccount(address!))
+    dispatch(stakingActions.fetchAccount(address!))
     return () => {
       dispatch(accountActions.clearAccount())
     }
@@ -189,7 +189,7 @@ export function AccountPage(props: Props) {
                   ? t('account.subnavigation.mobileActiveDelegations', 'Delegations')
                   : t('account.subnavigation.activeDelegations', 'Active delegations')
               }
-              route={`/account/${address}/active-delegations`}
+              route="active-delegations"
             />
 
             <NavItem
@@ -199,15 +199,15 @@ export function AccountPage(props: Props) {
                   ? t('account.subnavigation.mobileDebondingDelegations', 'Debonding')
                   : t('account.subnavigation.debondingDelegations', 'Debonding delegations')
               }
-              route={`/account/${address}/debonding-delegations`}
+              route="debonding-delegations"
             />
           </Nav>
-          <Switch>
-            <Route exact path="/account/:address" component={AccountDetails} />
-            <Route exact path="/account/:address/stake" component={ValidatorList} />
-            <Route exact path="/account/:address/active-delegations" component={ActiveDelegationList} />
-            <Route exact path="/account/:address/debonding-delegations" component={DebondingDelegationList} />
-          </Switch>
+          <Routes>
+            <Route path="/" element={<AccountDetails />} />
+            <Route path="/stake" element={<ValidatorList />} />
+            <Route path="/active-delegations" element={<ActiveDelegationList />} />
+            <Route path="/debonding-delegations" element={<DebondingDelegationList />} />
+          </Routes>
         </>
       )}
     </Box>

diff --git a/src/app/pages/HomePage/index.tsx b/src/app/pages/HomePage/index.tsx
@@ -24,7 +24,7 @@ export function HomePage() {
             )}
           </Paragraph>
           <Box direction="row" justify="between" margin={{ top: 'medium' }}>
-            <NavLink to="/open-wallet">
+            <NavLink to="open-wallet">
               <Button
                 type="submit"
                 label={t('home.existing.button', 'Open wallet')}
@@ -48,7 +48,7 @@ export function HomePage() {
             )}
           </Paragraph>
           <Box direction="row" justify="between" margin={{ top: 'medium' }}>
-            <NavLink to="/create-wallet">
+            <NavLink to="create-wallet">
               <Button type="submit" label={t('home.create.button', 'Create wallet')} primary icon={<Add />} />
             </NavLink>
           </Box>

diff --git a/src/app/pages/OpenWalletPage/index.tsx b/src/app/pages/OpenWalletPage/index.tsx
@@ -6,8 +6,7 @@
 import { Anchor, Box, Button, Heading } from 'grommet'
 import * as React from 'react'
 import { Trans, useTranslation } from 'react-i18next'
-import { Switch } from 'react-router'
-import { NavLink, Route } from 'react-router-dom'
+import { NavLink, Route, Routes } from 'react-router-dom'
 import { FromLedger } from './Features/FromLedger'
 
 import { FromMnemonic } from './Features/FromMnemonic'
@@ -27,13 +26,13 @@ export function SelectOpenMethod() {
       <Heading level="3">{t('openWallet.header', 'How do you want to open your wallet?')}</Heading>
 
       <Box direction="row-responsive" justify="start" margin={{ top: 'medium' }} gap="medium">
-        <NavLink to="/open-wallet/mnemonic">
+        <NavLink to="mnemonic">
           <Button type="submit" label={t('openWallet.method.mnemonic', 'Mnemonic')} primary />
         </NavLink>
-        <NavLink to="/open-wallet/private-key">
+        <NavLink to="private-key">
           <Button type="submit" label={t('openWallet.method.privateKey', 'Private key')} primary />
         </NavLink>
-        <NavLink to="/open-wallet/ledger">
+        <NavLink to="ledger">
           <Button type="submit" label={t('openWallet.method.ledger', 'Ledger')} primary />
         </NavLink>
       </Box>
@@ -61,11 +60,11 @@ export function SelectOpenMethod() {
 interface Props {}
 export function OpenWalletPage(props: Props) {
   return (
-    <Switch>
-      <Route exact path="/open-wallet" component={SelectOpenMethod} />
-      <Route exact path="/open-wallet/mnemonic" component={FromMnemonic} />
-      <Route exact path="/open-wallet/private-key" component={FromPrivateKey} />
-      <Route exact path="/open-wallet/ledger" component={FromLedger} />
-    </Switch>
+    <Routes>
+      <Route path="/" element={<SelectOpenMethod />} />
+      <Route path="/mnemonic" element={<FromMnemonic />} />
+      <Route path="/private-key" element={<FromPrivateKey />} />
+      <Route path="/ledger" element={<FromLedger />} />
+    </Routes>
   )
 }
diff --git a/src/app/useRouteRedirects.test.ts b/src/app/useRouteRedirects.test.ts
@@ -8,16 +8,12 @@ jest.mock('react-redux', () => ({
   useSelector: jest.fn(),
 }))
 
-const mockedHistoryPush = jest.fn()
+const mockNavigate = jest.fn()
 jest.mock('react-router-dom', () => ({
-  useHistory: () => ({
-    push: mockedHistoryPush,
-  }),
+  useNavigate: () => mockNavigate,
 }))
 
 describe('useRouteRedirects', () => {
-  beforeEach(() => {})
-
   it('should redirects to account page', () => {
     when(useSelector as any)
       .calledWith(selectAddress)
@@ -27,7 +23,7 @@ describe('useRouteRedirects', () => {
 
     renderHook(() => useRouteRedirects())
 
-    expect(mockedHistoryPush).toHaveBeenCalledWith('/account/dummyAddress')
+    expect(mockNavigate).toHaveBeenCalledWith('/account/dummyAddress')
   })
 
   it('should not trigger redirect when address is not defined', () => {
@@ -39,7 +35,7 @@ describe('useRouteRedirects', () => {
 
     renderHook(() => useRouteRedirects())
 
-    expect(mockedHistoryPush).not.toHaveBeenCalled()
+    expect(mockNavigate).not.toHaveBeenCalled()
   })
 
   it('should not trigger redirect when active wallet id is missing', () => {
@@ -51,6 +47,6 @@ describe('useRouteRedirects', () => {
 
     renderHook(() => useRouteRedirects())
 
-    expect(mockedHistoryPush).not.toHaveBeenCalled()
+    expect(mockNavigate).not.toHaveBeenCalled()
   })
 })
diff --git a/src/app/useRouteRedirects.tsx b/src/app/useRouteRedirects.tsx
@@ -1,17 +1,20 @@
 import { useEffect } from 'react'
 import { useSelector } from 'react-redux'
-import { useHistory } from 'react-router-dom'
+import { useNavigate } from 'react-router-dom'
 
 import { selectActiveWalletId, selectAddress } from 'app/state/wallet/selectors'
 
 export const useRouteRedirects = () => {
   const activeWalletIndex = useSelector(selectActiveWalletId)
   const address = useSelector(selectAddress)
-  const history = useHistory()
+  const navigate = useNavigate()
 
   useEffect(() => {
     if (typeof activeWalletIndex !== 'undefined' && address) {
-      history.push(`/account/${address}`)
+      navigate(`/account/${address}`)
     }
-  }, [activeWalletIndex, address, history])
+    // omit navigate dependency as it is not stable
+    // https://github.com/remix-run/react-router/issues/7634
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [activeWalletIndex, address])
 }