feat: remove connected react router push from components (#3122)

src/components/CollectionDetailPage/CollectionDetailPage.tsx

@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useMemo, useState } from 'react'
 import classNames from 'classnames'
+import { useHistory, useLocation } from 'react-router-dom'
 import { Network } from '@dcl/schemas'
 import { Section, Row, Narrow, Column, Header, Button, Popup, Tabs, Table, Label, SemanticSIZES } from 'decentraland-ui'
 import { NetworkCheck } from 'decentraland-dapps/dist/containers'
@@ -30,7 +31,6 @@ import { Props } from './CollectionDetailPage.types'
 import CollectionItem from './CollectionItem'
 
 import './CollectionDetailPage.css'
-import { useHistory, useLocation } from 'react-router'
 
 export default function CollectionDetailPage({
   collection,

src/components/ENSDetailPage/ENSDetailPage.spec.tsx

@@ -9,10 +9,14 @@ import ENSDetailPage from './ENSDetailPage'
 import { Props } from './ENSDetailPage.types'
 
 jest.mock('components/LoggedInDetailPage', () => ({ children }: any) => <div>{children}</div>)
-jest.mock('react-router-dom', () => ({
-  useHistory: jest.fn(() => ({ push: jest.fn() })),
-  Link: ({ to, children }: { to: string; children: React.ReactNode }) => <a href={to}>{children}</a>
-}))
+jest.mock('react-router-dom', () => {
+  const module = jest.requireActual('react-router-dom')
+  return {
+    ...module,
+    useHistory: jest.fn(() => ({ push: jest.fn() })),
+    Link: ({ to, children }: { to: string; children: React.ReactNode }) => <a href={to}>{children}</a>
+  } as unknown
+})
 
 function renderENSDetailPage(props: Partial<Props>) {
   return renderWithProviders(

src/components/LandAction/LandAction.tsx

@@ -5,14 +5,15 @@ import Back from 'components/Back'
 import { locations } from 'routing/locations'
 import { Props } from './LandAction.types'
 import './LandAction.css'
+import { withRouter } from 'react-router'
 
-export default class LandAction extends React.PureComponent<Props> {
+class LandAction extends React.PureComponent<Props> {
   render() {
-    const { land, title, subtitle, children, onNavigate } = this.props
+    const { land, title, subtitle, children, history } = this.props
     return (
       <div className="LandAction">
         <Row height={48}>
-          <Back absolute onClick={() => onNavigate(locations.landDetail(land.id))} />
+          <Back absolute onClick={() => history.push(locations.landDetail(land.id))} />
         </Row>
         <Row className="main">
           <Narrow>
@@ -36,3 +37,5 @@ export default class LandAction extends React.PureComponent<Props> {
     )
   }
 }
+
+export default withRouter(LandAction)

src/components/LandAction/LandAction.types.ts

@@ -1,14 +1,9 @@
-import { Dispatch } from 'redux'
 import { Land } from 'modules/land/types'
-import { CallHistoryMethodAction } from 'connected-react-router'
+import { RouteComponentProps } from 'react-router'
 
 export type Props = {
   land: Land
   title?: React.ReactNode
   subtitle?: React.ReactNode
   children: React.ReactNode
-  onNavigate: (path: string) => void
-}
-
-export type MapDispatchProps = Pick<Props, 'onNavigate'>
-export type MapDispatch = Dispatch<CallHistoryMethodAction>
+} & RouteComponentProps

src/components/LandAction/index.ts

@@ -1,2 +1,2 @@
-import LandAction from './LandAction.container'
+import LandAction from './LandAction'
 export default LandAction

src/components/LandAssignENSPage/LandAssignENSPage.container.ts

@@ -1,5 +1,5 @@
-import { push, goBack } from 'connected-react-router'
 import { connect } from 'react-redux'
+import { withRouter } from 'react-router-dom'
 import { isLoadingType } from 'decentraland-dapps/dist/modules/loading/selectors'
 import { RootState } from 'modules/common/types'
 import {
@@ -47,9 +47,7 @@ const mapState = (state: RootState, ownProps: OwnProps): MapStateProps => {
 const mapDispatch = (dispatch: MapDispatch): MapDispatchProps => ({
   onSetENSResolver: ens => dispatch(setENSResolverRequest(ens)),
   onSetENSContent: (ens, land) => dispatch(setENSContentRequest(ens, land)),
-  onReclaimName: ens => dispatch(reclaimNameRequest(ens)),
-  onBack: () => dispatch(goBack()),
-  onNavigate: path => dispatch(push(path))
+  onReclaimName: ens => dispatch(reclaimNameRequest(ens))
 })
 
-export default connect(mapState, mapDispatch)(LandAssignENSPage)
+export default connect(mapState, mapDispatch)(withRouter(LandAssignENSPage))

src/components/LandAssignENSPage/LandAssignENSPage.tsx

@@ -10,7 +10,7 @@ import { Props } from './LandAssignENSPage.types'
 
 export default class LandAssignENSPage extends React.PureComponent<Props> {
   handleGoBack = () => {
-    this.props.onBack()
+    this.props.history.goBack()
   }
 
   render() {
@@ -21,10 +21,10 @@ export default class LandAssignENSPage extends React.PureComponent<Props> {
       isWaitingTxSetContent,
       isWaitingTxReclaim,
       isWaitingTxSetResolver,
+      history,
       onSetENSResolver,
       onSetENSContent,
-      onReclaimName,
-      onNavigate
+      onReclaimName
     } = this.props
 
     return (
@@ -52,7 +52,7 @@ export default class LandAssignENSPage extends React.PureComponent<Props> {
                 onSetENSResolver={onSetENSResolver}
                 onReclaimName={onReclaimName}
                 onBack={this.handleGoBack}
-                onNavigate={onNavigate}
+                onNavigate={(path: string) => history.push(path)}
               />
             </LandAction>
           )

src/components/LandAssignENSPage/LandAssignENSPage.types.ts

@@ -1,6 +1,5 @@
 import { Dispatch } from 'redux'
-import { CallHistoryMethodAction, goBack } from 'connected-react-router'
-import { match } from 'react-router'
+import { RouteComponentProps, match } from 'react-router'
 import {
   setENSContentRequest,
   setENSResolverRequest,
@@ -26,16 +25,12 @@ export type Props = {
   onSetENSResolver: typeof setENSResolverRequest
   onSetENSContent: typeof setENSContentRequest
   onReclaimName: typeof reclaimNameRequest
-  onBack: typeof goBack
-  onNavigate: (path: string) => void
-}
+} & RouteComponentProps
 
 export type MapStateProps = Pick<
   Props,
   'ens' | 'isLoading' | 'error' | 'isWaitingTxSetContent' | 'isWaitingTxSetResolver' | 'isWaitingTxReclaim'
 >
-export type MapDispatchProps = Pick<Props, 'onSetENSResolver' | 'onSetENSContent' | 'onReclaimName' | 'onBack' | 'onNavigate'>
-export type MapDispatch = Dispatch<
-  CallHistoryMethodAction | SetENSResolverRequestAction | SetENSContentRequestAction | ReclaimNameRequestAction
->
+export type MapDispatchProps = Pick<Props, 'onSetENSResolver' | 'onSetENSContent' | 'onReclaimName'>
+export type MapDispatch = Dispatch<SetENSResolverRequestAction | SetENSContentRequestAction | ReclaimNameRequestAction>
 export type OwnProps = Pick<Props, 'match'>

src/components/LandDetailPage/ENSChip/ENSChip.container.ts

@@ -1,8 +1,8 @@
 import { connect } from 'react-redux'
-import { push } from 'connected-react-router'
+import { withRouter } from 'react-router-dom'
 import { RootState } from 'modules/common/types'
 import { isLoadingContentBySubdomain, isPendingContentBySubdomain } from 'modules/ens/selectors'
-import { MapStateProps, MapDispatchProps, MapDispatch, OwnProps } from './ENSChip.types'
+import { MapStateProps, OwnProps } from './ENSChip.types'
 import ENSChip from './ENSChip'
 
 const mapState = (state: RootState, ownProps: OwnProps): MapStateProps => {
@@ -12,8 +12,4 @@ const mapState = (state: RootState, ownProps: OwnProps): MapStateProps => {
   }
 }
 
-const mapDispatch = (dispatch: MapDispatch): MapDispatchProps => ({
-  onNavigate: path => dispatch(push(path))
-})
-
-export default connect(mapState, mapDispatch)(ENSChip)
+export default connect(mapState)(withRouter(ENSChip))

src/components/LandDetailPage/ENSChip/ENSChip.tsx

@@ -7,9 +7,9 @@ import './ENSChip.css'
 
 export default class ENSChip extends React.PureComponent<Props> {
   handleOnClick = () => {
-    const { isLoading, onNavigate } = this.props
+    const { isLoading, history } = this.props
     if (isLoading) {
-      onNavigate(locations.activity())
+      history.push(locations.activity())
     }
   }
 

src/components/LandDetailPage/ENSChip/ENSChip.types.ts

@@ -1,16 +1,11 @@
-import { Dispatch } from 'redux'
-import { CallHistoryMethodAction } from 'connected-react-router'
+import { RouteComponentProps } from 'react-router-dom'
 import { ENS } from 'modules/ens/types'
-import { SetENSContentRequestAction } from 'modules/ens/actions'
 
 export type Props = {
   ens: ENS
   isLoading: boolean
-  onNavigate: (path: string) => void
   onIconClick: () => void
-}
+} & RouteComponentProps
 
 export type MapStateProps = Pick<Props, 'isLoading'>
-export type MapDispatchProps = Pick<Props, 'onNavigate'>
-export type MapDispatch = Dispatch<CallHistoryMethodAction | SetENSContentRequestAction>
 export type OwnProps = Pick<Props, 'ens' | 'onIconClick'>

src/components/LandPage/LandPage.container.ts

@@ -1,5 +1,4 @@
 import { connect } from 'react-redux'
-import { push } from 'connected-react-router'
 import { RootState } from 'modules/common/types'
 import { getLands, isLoading } from 'modules/land/selectors'
 import { getLandPageView } from 'modules/ui/land/selectors'
@@ -14,7 +13,6 @@ const mapState = (state: RootState): MapStateProps => ({
 })
 
 const mapDispatch = (dispatch: MapDispatch): MapDispatchProps => ({
-  onNavigate: path => dispatch(push(path)),
   onSetView: view => dispatch(setLandPageView(view))
 })
 

src/components/LandPage/LandPage.types.ts

@@ -1,5 +1,4 @@
 import { Dispatch } from 'redux'
-import { CallHistoryMethodAction } from 'connected-react-router'
 import { Land } from 'modules/land/types'
 import { LandPageView } from 'modules/ui/land/types'
 import { setLandPageView, SetLandPageViewAction } from 'modules/ui/land/actions'
@@ -8,7 +7,6 @@ export type Props = {
   lands: Land[]
   view: LandPageView
   isLoading: boolean
-  onNavigate: (path: string) => void
   onSetView: typeof setLandPageView
 }
 
@@ -22,5 +20,5 @@ export type State = {
 }
 
 export type MapStateProps = Pick<Props, 'lands' | 'view' | 'isLoading'>
-export type MapDispatchProps = Pick<Props, 'onNavigate' | 'onSetView'>
-export type MapDispatch = Dispatch<CallHistoryMethodAction | SetLandPageViewAction>
+export type MapDispatchProps = Pick<Props, 'onSetView'>
+export type MapDispatch = Dispatch<SetLandPageViewAction>

src/components/LandPage/TableRow/TableRow.container.ts

@@ -1,8 +1,8 @@
 import { connect } from 'react-redux'
-import { push } from 'connected-react-router'
+import { withRouter } from 'react-router-dom'
 import { RootState } from 'modules/common/types'
 import { getDeploymentsByLandId, getRentalForLand } from 'modules/land/selectors'
-import { MapDispatch, MapDispatchProps, MapStateProps, OwnProps } from './TableRow.types'
+import { MapStateProps, OwnProps } from './TableRow.types'
 import TableRow from './TableRow'
 
 const mapState = (state: RootState, ownProps: OwnProps): MapStateProps => {
@@ -19,8 +19,4 @@ const mapState = (state: RootState, ownProps: OwnProps): MapStateProps => {
   }
 }
 
-const mapDispatch = (dispatch: MapDispatch): MapDispatchProps => ({
-  onNavigate: path => dispatch(push(path))
-})
-
-export default connect(mapState, mapDispatch)(TableRow)
+export default connect(mapState)(withRouter(TableRow))

src/components/LandPage/TableRow/TableRow.tsx

@@ -22,11 +22,11 @@ const sortLandPoolLast = (a: string, b: string) => {
 
 export default class TableRow extends React.PureComponent<Props> {
   render() {
-    const { land, deployments, rental, onNavigate } = this.props
+    const { land, deployments, rental, history } = this.props
     const { x, y } = getCoords(land)
 
     return (
-      <Table.Row className="TableRow" onClick={() => onNavigate(locations.landDetail(land.id))}>
+      <Table.Row className="TableRow" onClick={() => history.push(locations.landDetail(land.id))}>
         <Table.Cell>
           <Row>
             <Column width={67} grow={false} shrink={false}>

src/components/LandPage/TableRow/TableRow.types.ts

@@ -1,16 +1,12 @@
-import { Dispatch } from 'redux'
-import { CallHistoryMethodAction } from 'connected-react-router'
+import { RouteComponentProps } from 'react-router-dom'
 import { Land, Rental } from 'modules/land/types'
 import { Deployment } from 'modules/deployment/types'
 
 export type Props = {
   land: Land
   deployments: Deployment[]
   rental: Rental | null
-  onNavigate: (path: string) => void
-}
+} & RouteComponentProps
 
 export type MapStateProps = Pick<Props, 'deployments' | 'rental'>
-export type MapDispatchProps = Pick<Props, 'onNavigate'>
-export type MapDispatch = Dispatch<CallHistoryMethodAction>
 export type OwnProps = Pick<Props, 'land'>

src/components/LandSelectENSPage/LandSelectENSPage.container.ts

@@ -1,5 +1,5 @@
-import { push } from 'connected-react-router'
 import { connect } from 'react-redux'
+import { withRouter } from 'react-router-dom'
 import { RootState } from 'modules/common/types'
 import { fetchENSRequest } from 'modules/ens/actions'
 import { getENSList } from 'modules/ens/selectors'
@@ -11,8 +11,7 @@ const mapState = (state: RootState): MapStateProps => ({
 })
 
 const mapDispatch = (dispatch: MapDispatch): MapDispatchProps => ({
-  onFetchENS: (name, land) => dispatch(fetchENSRequest(name, land)),
-  onNavigate: path => dispatch(push(path))
+  onFetchENS: (name, land) => dispatch(fetchENSRequest(name, land))
 })
 
-export default connect(mapState, mapDispatch)(LandSelectENSPage)
+export default connect(mapState, mapDispatch)(withRouter(LandSelectENSPage))

src/components/LandSelectENSPage/LandSelectENSPage.tsx

@@ -10,8 +10,8 @@ import { Props } from './LandSelectENSPage.types'
 
 export default class LandSelectENSPage extends React.PureComponent<Props> {
   handleUpdateSubdomain = (land: Land, selectedSubdomain: string) => {
-    const { onNavigate } = this.props
-    onNavigate(locations.landAssignENS(land.id, selectedSubdomain))
+    const { history } = this.props
+    history.push(locations.landAssignENS(land.id, selectedSubdomain))
   }
 
   render() {

src/components/LandSelectENSPage/LandSelectENSPage.types.ts

@@ -1,5 +1,5 @@
 import { Dispatch } from 'redux'
-import { CallHistoryMethodAction } from 'connected-react-router'
+import { RouteComponentProps } from 'react-router-dom'
 import { fetchENSRequest, FetchENSRequestAction } from 'modules/ens/actions'
 import { ENS, ENSError } from 'modules/ens/types'
 
@@ -8,9 +8,8 @@ export type Props = {
   error: ENSError
   isLoading: boolean
   onFetchENS: typeof fetchENSRequest
-  onNavigate: (path: string) => void
-}
+} & RouteComponentProps
 
 export type MapStateProps = Pick<Props, 'ensList'>
-export type MapDispatchProps = Pick<Props, 'onFetchENS' | 'onNavigate'>
-export type MapDispatch = Dispatch<CallHistoryMethodAction | FetchENSRequestAction>
+export type MapDispatchProps = Pick<Props, 'onFetchENS'>
+export type MapDispatch = Dispatch<FetchENSRequestAction>

src/components/Modals/CloneTemplateModal/CloneTemplateModal.types.ts

@@ -1,6 +1,5 @@
 import { Dispatch } from 'redux'
 import { ModalProps } from 'decentraland-dapps/dist/providers/ModalProvider/ModalProvider.types'
-import { CallHistoryMethodAction } from 'connected-react-router'
 
 import { DuplicateProjectRequestAction, duplicateProjectRequest } from 'modules/project/actions'
 import { Project } from 'modules/project/types'
@@ -18,4 +17,4 @@ export type CloneTemplateModalMetadata = {
 
 export type MapStateProps = Pick<Props, 'error' | 'isLoading'>
 export type MapDispatchProps = Pick<Props, 'onDuplicate'>
-export type MapDispatch = Dispatch<DuplicateProjectRequestAction | CallHistoryMethodAction>
+export type MapDispatch = Dispatch<DuplicateProjectRequestAction>