feat: implement router v6

Also fix tests that broke after the upgrade

src/components/Home.jsx

@@ -1,20 +1,19 @@
 import React, { Component } from 'react'
-import { Route, withRouter } from 'react-router'
+import { Outlet } from 'react-router-dom'
 
-import { translate } from 'cozy-ui/transpiled/react/I18n'
+import { CozyConfirmDialogProvider } from 'cozy-harvest-lib'
 import { Main, Content } from 'cozy-ui/transpiled/react/Layout'
 
-import Konnector from 'components/Konnector'
 import Applications from 'components/Applications'
+import FooterLogo from 'components/FooterLogo'
 import ScrollToTopOnMount from 'components/ScrollToTopOnMount'
 import Services from 'components/Services'
-import FooterLogo from 'components/FooterLogo'
 import Shortcuts from 'components/Shortcuts'
-import { CozyConfirmDialogProvider } from 'cozy-harvest-lib'
 
 class Home extends Component {
   render() {
     const { setAppsReady, wrapper } = this.props
+
     return (
       <CozyConfirmDialogProvider>
         <Main className="u-flex-grow-1">
@@ -25,11 +24,12 @@ class Home extends Component {
             <Shortcuts />
             <FooterLogo />
           </Content>
-          <Route path="/connected/:konnectorSlug" component={Konnector} />
         </Main>
+
+        <Outlet />
       </CozyConfirmDialogProvider>
     )
   }
 }
 
-export default withRouter(translate()(Home))
+export default Home

src/components/IntentRedirect.jsx

@@ -1,12 +1,12 @@
 /* global cozy */
 import React from 'react'
-import { Redirect } from 'react-router-dom'
+import { Redirect, useSearchParams } from 'react-router-dom'
 import { connect } from 'react-redux'
 
 import { getInstalledKonnectors } from 'reducers'
 
-const IntentRedirect = ({ installedKonnectors, location }) => {
-  const queryString = !!location && location.search
+const IntentRedirect = ({ installedKonnectors }) => {
+  const queryString = useSearchParams()
   const query =
     queryString &&
     queryString

src/components/Konnector.jsx

@@ -1,24 +1,23 @@
 import React, { useCallback, useEffect } from 'react'
 import { connect } from 'react-redux'
-import { withRouter } from 'react-router-dom'
-import flow from 'lodash/flow'
+import { useLocation, useNavigate, useParams } from 'react-router-dom'
 
-import { Routes as HarvestRoutes } from 'cozy-harvest-lib'
 import datacardOptions from 'cozy-harvest-lib/dist/datacards/datacardOptions'
 import log from 'cozy-logger'
+import { Routes as HarvestRoutes } from 'cozy-harvest-lib'
 
+import { closeApp, openApp } from 'hooks/useOpenApp'
 import { getKonnector } from 'ducks/konnectors'
-
 import { getTriggersByKonnector } from 'reducers'
-import { closeApp, openApp } from 'hooks/useOpenApp'
 
-export const Konnector = ({ konnector, history, match, triggers }) => {
-  const { konnectorSlug } = match ? match.params : {}
+export const StatelessKonnector = ({ konnector, triggers, slug }) => {
+  const navigate = useNavigate()
   const konnectorWithTriggers = konnector
     ? { ...konnector, triggers: { data: triggers } }
     : undefined
-  const onDismiss = useCallback(() => history.push('/connected'), [history])
-  const slug = konnector?.slug || location.hash.split('/')[2]
+  const onDismiss = useCallback(() => navigate('/connected'), [navigate])
+  const konnectorSlug = slug || konnector?.slug || location.hash.split('/')[2]
+  const location = useLocation()
 
   useEffect(() => {
     openApp()
@@ -39,21 +38,24 @@ export const Konnector = ({ konnector, history, match, triggers }) => {
 
   return (
     <HarvestRoutes
-      konnectorRoot={`/connected/${slug}`}
+      datacardOptions={datacardOptions}
       konnector={konnectorWithTriggers}
+      konnectorRoot={`/connected/${konnectorSlug}`}
       konnectorSlug={konnectorSlug}
       onDismiss={onDismiss}
-      datacardOptions={datacardOptions}
     />
   )
 }
 
-const mapStateToProps = (state, ownProps) => {
-  const { konnectorSlug } = ownProps.match.params
-  return {
-    konnector: getKonnector(state.oldcozy, konnectorSlug),
-    triggers: getTriggersByKonnector(state, konnectorSlug)
-  }
+const StatefulKonnector = connect((state, { slug }) => ({
+  konnector: getKonnector(state.oldcozy, slug),
+  triggers: getTriggersByKonnector(state, slug)
+}))(StatelessKonnector)
+
+export const Konnector = () => {
+  const { konnectorSlug } = useParams()
+
+  return <StatefulKonnector slug={konnectorSlug} />
 }
 
-export default flow(connect(mapStateToProps), withRouter)(Konnector)
+export default Konnector

src/components/Konnector.spec.jsx

@@ -1,9 +1,12 @@
+import { enableFetchMocks } from 'jest-fetch-mock'
+enableFetchMocks()
+
 import React from 'react'
-import { Router } from 'react-router-dom'
-import { createMemoryHistory } from 'history'
-import { fireEvent, render } from '@testing-library/react'
+import { fireEvent, render, screen } from '@testing-library/react'
+import { Navigate, createMemoryRouter, RouterProvider } from 'react-router-dom'
 
-import { Konnector } from './Konnector'
+import { StatelessKonnector } from './Konnector'
+import { act } from 'react-dom/test-utils'
 
 jest.mock('cozy-harvest-lib', () => ({
   Routes: ({ konnector, triggers, onDismiss }) => (
@@ -13,22 +16,47 @@ jest.mock('cozy-harvest-lib', () => ({
   )
 }))
 
-it('it correctly goes back to the home page onDismiss and allows nav goBack', () => {
-  const history = createMemoryHistory()
-
-  const { getByText } = render(
-    <Router history={history} initialEntries={['/connected']}>
-      <Konnector history={history} konnector={{ slug: 'alan' }} />
-    </Router>
+const setupMyTest = () => {
+  const router = createMemoryRouter(
+    [
+      {
+        path: '*',
+        element: <Navigate to="/connected" />
+      },
+      {
+        path: '/connected',
+        element: <div>Home</div>
+      },
+      {
+        path: '/connected/:konnectorSlug/*',
+        element: <StatelessKonnector slug="alan" konnector={{ slug: 'alan' }} />
+      }
+    ],
+    {
+      initialEntries: ['/connected'],
+      initialIndex: 0
+    }
   )
 
-  history.push('connected/alan/accounts/123')
+  render(<RouterProvider router={router} />)
+
+  return { router }
+}
+
+it('it correctly goes back to the home page onDismiss and allows nav goBack', () => {
+  const { router } = setupMyTest()
+
+  act(() => {
+    router.navigate('/connected/alan/accounts/123')
+  })
 
-  fireEvent.click(getByText('alan'))
+  fireEvent.click(screen.getByText('alan'))
 
-  expect(history.location.pathname).toBe('/connected')
+  expect(router.state.location.pathname).toBe('/connected')
 
-  history.go(-1)
+  act(() => {
+    router.navigate(-1)
+  })
 
-  expect(history.location.pathname).toBe('/connected/alan/accounts/123')
+  expect(router.state.location.pathname).toBe('/connected/alan/accounts/123')
 })

src/components/KonnectorErrors.jsx

@@ -1,31 +1,33 @@
-import React from 'react'
 import PropTypes from 'prop-types'
-import { useClient, models } from 'cozy-client'
-import { connect } from 'react-redux'
-import { withRouter } from 'react-router-dom'
-import keyBy from 'lodash/keyBy'
+import React from 'react'
 import flow from 'lodash/flow'
-import Infos from 'cozy-ui/transpiled/react/Infos'
-import Typography from 'cozy-ui/transpiled/react/Typography'
-import InfosCarrousel from 'cozy-ui/transpiled/react/InfosCarrousel'
+import keyBy from 'lodash/keyBy'
+import { connect } from 'react-redux'
+import { useClient, models } from 'cozy-client'
+import { useNavigate } from 'react-router-dom'
+
+import AppIcon from 'cozy-ui/transpiled/react/AppIcon'
 import Button from 'cozy-ui/transpiled/react/Button'
+import CrossButton from 'cozy-ui/transpiled/react/Icons/Cross'
+import Divider from 'cozy-ui/transpiled/react/MuiCozyTheme/Divider'
 import Icon from 'cozy-ui/transpiled/react/Icon'
 import IconButton from 'cozy-ui/transpiled/react/IconButton'
-import CrossButton from 'cozy-ui/transpiled/react/Icons/Cross'
+import Infos from 'cozy-ui/transpiled/react/Infos'
+import InfosCarrousel from 'cozy-ui/transpiled/react/InfosCarrousel'
+import MuiCozyTheme from 'cozy-ui/transpiled/react/MuiCozyTheme'
+import Typography from 'cozy-ui/transpiled/react/Typography'
+import useBreakpoints from 'cozy-ui/transpiled/react/hooks/useBreakpoints'
 import { Media, Bd } from 'cozy-ui/transpiled/react/Media'
+import { getErrorLocaleBound, KonnectorJobError } from 'cozy-harvest-lib'
 import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import useBreakpoints from 'cozy-ui/transpiled/react/hooks/useBreakpoints'
-import Divider from 'cozy-ui/transpiled/react/MuiCozyTheme/Divider'
-import MuiCozyTheme from 'cozy-ui/transpiled/react/MuiCozyTheme'
+
 import {
-  getTriggersInError,
   getAccountsWithErrors,
-  getInstalledKonnectors
+  getInstalledKonnectors,
+  getTriggersInError
 } from 'reducers/index'
 import ReactMarkdownWrapper from 'components/ReactMarkdownWrapper'
-import AppIcon from 'cozy-ui/transpiled/react/AppIcon'
 import homeConfig from 'config/home.json'
-import { getErrorLocaleBound, KonnectorJobError } from 'cozy-harvest-lib'
 
 const {
   triggers: { triggers: triggersModel, triggerStates: triggerStatesModel },
@@ -70,8 +72,7 @@ const KonnectorError = ({
   triggerErrors,
   index,
   konnectorsBySlug,
-  accountsById,
-  history
+  accountsById
 }) => {
   const client = useClient()
   const { t, lang } = useI18n()
@@ -81,6 +82,7 @@ const KonnectorError = ({
   const konnectorSlug = triggersModel.getKonnector(trigger)
   const konnectorAccount = triggersModel.getAccountId(trigger)
   const konnector = konnectorsBySlug[konnectorSlug]
+  const navigate = useNavigate()
 
   const errorTitle = getErrorLocaleBound(konnError, konnector, lang, 'title')
 
@@ -139,9 +141,7 @@ const KonnectorError = ({
           className="u-mh-0"
           size={isMobile ? 'small' : 'normal'}
           onClick={() =>
-            history.push(
-              `/connected/${konnectorSlug}/accounts/${konnectorAccount}`
-            )
+            navigate(`/connected/${konnectorSlug}/accounts/${konnectorAccount}`)
           }
         />
       }
@@ -152,8 +152,7 @@ const KonnectorError = ({
 export const KonnectorErrors = ({
   triggersInError,
   accountsWithErrors,
-  installedKonnectors,
-  history
+  installedKonnectors
 }) => {
   const accountsWithErrorsById = keyBy(accountsWithErrors, '_id')
   const installedKonnectorsBySlug = keyBy(installedKonnectors, getKonnectorSlug)
@@ -180,7 +179,6 @@ export const KonnectorErrors = ({
         {nonMutedTriggerErrors.map((trigger, index) => (
           <KonnectorError
             key={trigger._id}
-            history={history}
             trigger={trigger}
             triggerErrors={nonMutedTriggerErrors}
             konnectorsBySlug={installedKonnectorsBySlug}
@@ -198,18 +196,17 @@ export const KonnectorErrors = ({
 }
 
 KonnectorErrors.propTypes = {
-  triggersInError: PropTypes.array.isRequired,
   accountsWithErrors: PropTypes.array.isRequired,
   installedKonnectors: PropTypes.arrayOf(PropTypes.object.isRequired),
-  history: PropTypes.object.isRequired
+  triggersInError: PropTypes.array.isRequired
 }
 
 const mapStateToProps = state => {
   return {
-    triggersInError: getTriggersInError(state),
     accountsWithErrors: getAccountsWithErrors(state),
-    installedKonnectors: getInstalledKonnectors(state)
+    installedKonnectors: getInstalledKonnectors(state),
+    triggersInError: getTriggersInError(state)
   }
 }
 
-export default flow(connect(mapStateToProps), withRouter)(KonnectorErrors)
+export default flow(connect(mapStateToProps))(KonnectorErrors)

src/components/KonnectorErrors.spec.jsx

@@ -6,6 +6,11 @@ import { render, fireEvent } from '@testing-library/react'
 
 jest.mock('cozy-ui/transpiled/react/AppIcon', () => () => null)
 
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useNavigate: () => jest.fn()
+}))
+
 describe('KonnectorErrors', () => {
   const MOCKED_DATE = '2020-01-08T09:49:23.589Z'
   beforeAll(() => {
@@ -21,8 +26,6 @@ describe('KonnectorErrors', () => {
     save: jest.fn()
   }
 
-  const mockHistory = {}
-
   const DEFAULT_INSTALLED_KONNECTORS = [
     { slug: 'test', name: 'Test Konnector' }
   ]
@@ -38,7 +41,6 @@ describe('KonnectorErrors', () => {
           triggersInError={triggersInError}
           accountsWithErrors={accountsWithErrors}
           installedKonnectors={installedKonnectors}
-          history={mockHistory}
         />
       </AppLike>
     )