feat(harvest): Replace router dependency in component by context dep

We want harvest to work without major changes with both a v3 router (Banks and Drive), v4 (use case "Home"), and with a v6 router (use case "MyPapers"). Initially we didn't want to have a backward compatibility with v3 and Banks because we thought it was autonomous and passed everything to harvest. But this is not the case. Moreover we initially thought of using a context to determine which version of the router to use, but this poses problems because there are several "entry points" to Harvest and we are not sure to have the context in all cases. The idea is that we remove the direct dependency on the router via `withRouter` in the components, and replace it with a global `withAdaptiveRouter` dependency that will use either version of the router. Some components were already using this semblance of an approach with the approach with `withMountPointHistory`. So we improved it by adding `location` to this HOC.
cozy · Dec 21, 2022 · e66ef79 · e66ef79
1 parent 525af21
commit e66ef79
Show file tree

Hide file tree

Showing 9 changed files with 177 additions and 99 deletions.
diff --git a/packages/cozy-harvest-lib/src/components/AccountForm/index.jsx b/packages/cozy-harvest-lib/src/components/AccountForm/index.jsx
@@ -1,5 +1,4 @@
 import React, { PureComponent } from 'react'
-import { withRouter } from 'react-router'
 import { Form } from 'react-final-form'
 import PropTypes from 'prop-types'
 import get from 'lodash/get'
@@ -15,6 +14,7 @@ import { Media, Img, Bd } from 'cozy-ui/transpiled/react/Media'
 import Typography from 'cozy-ui/transpiled/react/Typography'
 import { Dialog } from 'cozy-ui/transpiled/react/CozyDialogs'
 
+import withAdaptiveRouter from '../hoc/withRouter'
 import withLocales from '../hoc/withLocales'
 import AccountFields from './AccountFields'
 import ReadOnlyIdentifier from './ReadOnlyIdentifier'
@@ -230,6 +230,7 @@ export class AccountForm extends PureComponent {
       showError,
       t,
       fieldOptions,
+      historyAction,
       flowState
     } = this.props
     const submitting = flowState.running
@@ -343,7 +344,7 @@ export class AccountForm extends PureComponent {
                   className="u-mt-2 u-mb-1-half"
                   fullWidth
                   label={t('accountForm.installFlagship.label')}
-                  onClick={() => this.props.history.push('/')}
+                  onClick={() => historyAction('/', 'push')}
                 />
               </>
             )}
@@ -429,7 +430,7 @@ AccountForm.defaultProps = {
 }
 
 export default compose(
-  withRouter,
+  withAdaptiveRouter,
   withConnectionFlow(),
   withLocales,
   withKonnectorLocales

diff --git a/packages/cozy-harvest-lib/src/components/AccountModal.jsx b/packages/cozy-harvest-lib/src/components/AccountModal.jsx
@@ -14,7 +14,7 @@ import * as triggersModel from '../helpers/triggers'
 import KonnectorAccountTabs from './KonnectorConfiguration/KonnectorAccountTabs'
 import AccountSelectBox from './AccountSelectBox/AccountSelectBox'
 import KonnectorModalHeader from './KonnectorModalHeader'
-import { withMountPointHistory } from './MountPointContext'
+import { withMountPointProps } from './MountPointContext'
 import withLocales from './hoc/withLocales'
 import DialogContent from '@material-ui/core/DialogContent'
 import {
@@ -53,6 +53,7 @@ export class AccountModal extends Component {
     fetching: true,
     error: null
   }
+
   async componentDidMount() {
     await this.loadSelectedAccountId()
   }
@@ -121,12 +122,12 @@ export class AccountModal extends Component {
       intentsApi,
       innerAccountModalOverrides
     } = this.props
-
     const { trigger, account, fetching, error } = this.state
+
     return (
       <>
         <KonnectorModalHeader konnector={konnector}>
-          {showAccountSelection ? (
+          {showAccountSelection && (
             <AccountSelectBox
               loading={!account}
               selectedAccount={account}
@@ -138,9 +139,9 @@ export class AccountModal extends Component {
                 pushHistory('/new')
               }}
             />
-          ) : null}
+          )}
         </KonnectorModalHeader>
-        {error || fetching ? (
+        {(error || fetching) && (
           <DialogContent className="u-pb-2">
             {error && (
               <Infos
@@ -163,7 +164,7 @@ export class AccountModal extends Component {
               </div>
             )}
           </DialogContent>
-        ) : null}
+        )}
         {!error && !fetching && (
           <DialogContent className={isMobile ? 'u-p-0' : 'u-pt-0'}>
             <KonnectorAccountTabs
@@ -226,6 +227,6 @@ AccountModal.propTypes = {
 export default flow(
   withClient,
   withLocales,
-  withMountPointHistory,
+  withMountPointProps,
   withBreakpoints()
 )(AccountModal)
diff --git a/packages/cozy-harvest-lib/src/components/EditAccountModal.jsx b/packages/cozy-harvest-lib/src/components/EditAccountModal.jsx
@@ -19,17 +19,16 @@ import {
 import { fetchAccount } from '../connections/accounts'
 import * as triggersModel from '../helpers/triggers'
 import TriggerManager from './TriggerManager'
-import { withMountPointHistory } from './MountPointContext'
+import { withMountPointProps } from './MountPointContext'
 import logger from '../logger'
 import { withTracker } from './hoc/tracking'
 import useTimeout from './hooks/useTimeout'
-import { withRouter } from 'react-router'
 import { intentsApiProptype } from '../helpers/proptypes'
 
 const showStyle = { opacity: 1, transition: 'opacity 0.3s ease' }
 const hideStyle = { opacity: 0, transition: 'opacity 0.3s ease' }
 
-const DumbEditAccountModal = withRouter(
+const DumbEditAccountModal = withMountPointProps(
   ({
     konnector,
     account,
@@ -210,6 +209,6 @@ EditAccountModal.propTypes = {
 
 export default flow(
   withClient,
-  withMountPointHistory,
+  withMountPointProps,
   withTracker
 )(EditAccountModal)
diff --git a/packages/cozy-harvest-lib/src/components/KonnectorAccounts.jsx b/packages/cozy-harvest-lib/src/components/KonnectorAccounts.jsx
@@ -2,21 +2,21 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import get from 'lodash/get'
 import compose from 'lodash/flowRight'
-import { withRouter } from 'react-router'
+import DialogContent from '@material-ui/core/DialogContent'
 
+import CozyRealtime from 'cozy-realtime'
 import { withClient } from 'cozy-client'
 import Spinner from 'cozy-ui/transpiled/react/Spinner'
 import { translate } from 'cozy-ui/transpiled/react/I18n'
 import Infos from 'cozy-ui/transpiled/react/Infos'
 import Button from 'cozy-ui/transpiled/react/Button'
 import Typography from 'cozy-ui/transpiled/react/Typography'
-import CozyRealtime from 'cozy-realtime'
-import { fetchAccountsFromTriggers } from '../connections/accounts'
 
+import { fetchAccountsFromTriggers } from '../connections/accounts'
 import { fetchTrigger } from '../connections/triggers'
-import KonnectorModalHeader from './KonnectorModalHeader'
 import logger from '../logger'
-import DialogContent from '@material-ui/core/DialogContent'
+import withAdaptiveRouter from './hoc/withRouter'
+import KonnectorModalHeader from './KonnectorModalHeader'
 
 export class KonnectorAccounts extends React.Component {
   constructor(props) {
@@ -162,4 +162,8 @@ KonnectorAccounts.propTypes = {
   t: PropTypes.func.isRequired
 }
 
-export default compose(withRouter, translate(), withClient)(KonnectorAccounts)
+export default compose(
+  withAdaptiveRouter,
+  translate(),
+  withClient
+)(KonnectorAccounts)
diff --git a/packages/cozy-harvest-lib/src/components/KonnectorSuccess.jsx b/packages/cozy-harvest-lib/src/components/KonnectorSuccess.jsx
@@ -1,18 +1,18 @@
 import get from 'lodash/get'
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
-import { withRouter } from 'react-router'
+import DialogContent from '@material-ui/core/DialogContent'
 
 import { translate } from 'cozy-ui/transpiled/react/I18n'
 import Button from 'cozy-ui/transpiled/react/Button'
 import Typography from 'cozy-ui/transpiled/react/Typography'
 
-import DriveLink from '../components/KonnectorConfiguration/Success/DriveLink'
-import BanksLink from '../components/KonnectorConfiguration/Success/BanksLink'
 import ConnectingIllu from '../assets/connecting-data-in-progress.svg'
-import Markdown from './Markdown'
 import getRelatedAppsSlugs from '../models/getRelatedAppsSlugs'
-import DialogContent from '@material-ui/core/DialogContent'
+import DriveLink from './KonnectorConfiguration/Success/DriveLink'
+import BanksLink from './KonnectorConfiguration/Success/BanksLink'
+import withAdaptiveRouter from './hoc/withRouter'
+import Markdown from './Markdown'
 
 const SuccessImage = () => <ConnectingIllu className="u-w-4 u-h-4" />
 
@@ -123,4 +123,4 @@ KonnectorSuccess.propTypes = {
 
 export { SuccessImage, BanksLink, DriveLink }
 
-export default withRouter(translate()(KonnectorSuccess))
+export default withAdaptiveRouter(translate()(KonnectorSuccess))
diff --git a/packages/cozy-harvest-lib/src/components/MountPointContext.jsx b/packages/cozy-harvest-lib/src/components/MountPointContext.jsx
@@ -1,8 +1,9 @@
 import React, { useContext } from 'react'
 import PropTypes from 'prop-types'
-import { withRouter } from 'react-router'
 
-const MountPointContext = React.createContext()
+import withAdaptiveRouter from './hoc/withRouter'
+
+export const MountPointContext = React.createContext()
 
 export class RawMountPointProvider extends React.Component {
   constructor(props) {
@@ -14,26 +15,17 @@ export class RawMountPointProvider extends React.Component {
     this.state = {
       baseRoute: props.baseRoute || '/',
       pushHistory: this.pushHistory,
-      replaceHistory: this.replaceHistory
+      replaceHistory: this.replaceHistory,
+      location: props.location
     }
   }
 
-  historyAction(route, method) {
-    const { history } = this.props
-    const { baseRoute } = this.state
-    const segments = '/'.concat(
-      baseRoute.split('/').concat(route.split('/')).filter(Boolean).join('/')
-    )
-
-    history[method](segments)
-  }
-
   pushHistory(route) {
-    this.historyAction(route, 'push')
+    this.props.historyAction(route, 'push')
   }
 
   replaceHistory(route) {
-    this.historyAction(route, 'replace')
+    this.props.historyAction(route, 'replace')
   }
 
   render() {
@@ -50,25 +42,26 @@ RawMountPointProvider.propTypes = {
   history: PropTypes.object
 }
 
-const withMountPointHistory = BaseComponent => {
+export const withMountPointProps = BaseComponent => {
   const Component = props => {
-    const { pushHistory, replaceHistory } = useContext(MountPointContext)
+    const { pushHistory, replaceHistory, location } =
+      useContext(MountPointContext)
 
     return (
       <BaseComponent
         pushHistory={pushHistory}
         replaceHistory={replaceHistory}
+        location={location}
         {...props}
       />
     )
   }
 
-  Component.displayName = `withMountPointHistory(${
+  Component.displayName = `withMountPointProps(${
     BaseComponent.displayName || BaseComponent.name
   })`
 
   return Component
 }
 
-const MountPointProvider = withRouter(RawMountPointProvider)
-export { MountPointContext, MountPointProvider, withMountPointHistory }
+export const MountPointProvider = withAdaptiveRouter(RawMountPointProvider)
diff --git a/packages/cozy-harvest-lib/src/components/MountPointContext.spec.jsx b/packages/cozy-harvest-lib/src/components/MountPointContext.spec.jsx