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

src/components/Modals/CustomLayoutModal/CustomLayoutModal.container.ts

@@ -1,6 +1,5 @@
 import { connect } from 'react-redux'
-import { push } from 'connected-react-router'
-
+import { withRouter } from 'react-router-dom'
 import { locations } from 'routing/locations'
 import { RootState } from 'modules/common/types'
 import { LOAD_MANIFEST_REQUEST, createProjectFromTemplate } from 'modules/project/actions'
@@ -23,18 +22,18 @@ const mapState = (state: RootState): MapStateProps => {
 }
 
 const mapDispatch = (dispatch: MapDispatch): MapDispatchProps => ({
-  onCreateProject: (name, description, template, sdk) =>
+  onCreateProject: (name, description, template, sdk, history) =>
     dispatch(
       createProjectFromTemplate(template, {
         title: name,
         description,
         sdk,
         onSuccess: (project: Project) => {
           const redirectTo = sdk === SDKVersion.SDK6 ? locations.sceneEditor(project.id) : locations.inspector(project.id)
-          dispatch(push(redirectTo))
+          history.push(redirectTo)
         }
       })
     )
 })
 
-export default connect(mapState, mapDispatch)(CustomLayoutModal)
+export default connect(mapState, mapDispatch)(withRouter(CustomLayoutModal))

src/components/Modals/CustomLayoutModal/CustomLayoutModal.tsx

@@ -53,9 +53,9 @@ export default class CustomLayoutModal extends React.PureComponent<Props, State>
   }
 
   handleSubmit = (sdk: SDKVersion) => {
-    const { onCreateProject, onClose } = this.props
+    const { history, onCreateProject, onClose } = this.props
     const { name, description, rows, cols } = this.state
-    onCreateProject(name, description, fromLayout(rows, cols), sdk)
+    onCreateProject(name, description, fromLayout(rows, cols), sdk, history)
     onClose()
   }
 

src/components/Modals/CustomLayoutModal/CustomLayoutModal.types.ts

@@ -1,17 +1,19 @@
 import { Dispatch } from 'redux'
+import { History } from 'history'
+import { RouteComponentProps } from 'react-router-dom'
 import { ModalProps } from 'decentraland-dapps/dist/providers/ModalProvider/ModalProvider.types'
-import { CallHistoryMethodAction } from 'connected-react-router'
 
 import { CreateProjectFromTemplateAction } from 'modules/project/actions'
 import { Template } from 'modules/template/types'
 import { SDKVersion } from 'modules/scene/types'
 
-export type Props = ModalProps & {
-  error: string | null
-  isLoading: boolean
-  onCreateProject: (name: string, description: string, template: Template, sdk: SDKVersion) => void
-  isCreateSceneOnlySDK7Enabled: boolean
-}
+export type Props = ModalProps &
+  RouteComponentProps & {
+    error: string | null
+    isLoading: boolean
+    onCreateProject: (name: string, description: string, template: Template, sdk: SDKVersion, history: History) => void
+    isCreateSceneOnlySDK7Enabled: boolean
+  }
 
 export enum SceneCreationStep {
   INFO = 'info',
@@ -31,4 +33,4 @@ export type State = {
 
 export type MapStateProps = Pick<Props, 'error' | 'isLoading' | 'isCreateSceneOnlySDK7Enabled'>
 export type MapDispatchProps = Pick<Props, 'onCreateProject'>
-export type MapDispatch = Dispatch<CreateProjectFromTemplateAction | CallHistoryMethodAction>
+export type MapDispatch = Dispatch<CreateProjectFromTemplateAction>

src/components/Modals/DeployModal/DeployToLand/DeployToLand.container.ts

@@ -1,5 +1,5 @@
 import { connect } from 'react-redux'
-import { push } from 'connected-react-router'
+import { withRouter } from 'react-router-dom'
 import { getError as getWalletError, isConnecting, isConnected, getAddress } from 'decentraland-dapps/dist/modules/wallet/selectors'
 import {
   isLoading,
@@ -20,7 +20,6 @@ import { getLandTiles, getDeploymentsByCoord } from 'modules/land/selectors'
 import { isLoggedIn } from 'modules/identity/selectors'
 import { getENSByWallet } from 'modules/ens/selectors'
 import { getMedia, isRecording, getProgress } from 'modules/media/selectors'
-import { locations } from 'routing/locations'
 import { MapStateProps, MapDispatchProps, MapDispatch } from './DeployToLand.types'
 import DeployToLand from './DeployToLand'
 
@@ -50,8 +49,7 @@ const mapState = (state: RootState): MapStateProps => ({
 const mapDispatch = (dispatch: MapDispatch): MapDispatchProps => ({
   onOpenModal: (name, metadata) => dispatch(openModal(name, metadata)),
   onRecord: () => dispatch(recordMediaRequest()),
-  onDeploy: (projectId, placement, overrideDeploymentId) => dispatch(deployToLandRequest(projectId, placement, overrideDeploymentId)),
-  onNavigateHome: () => dispatch(push(locations.root()))
+  onDeploy: (projectId, placement, overrideDeploymentId) => dispatch(deployToLandRequest(projectId, placement, overrideDeploymentId))
 })
 
-export default connect(mapState, mapDispatch)(DeployToLand)
+export default connect(mapState, mapDispatch)(withRouter(DeployToLand))

src/components/Modals/DeployModal/DeployToLand/DeployToLand.tsx

@@ -97,7 +97,7 @@ export default class DeployToLand extends React.PureComponent<Props, State> {
   }
 
   handleNavigateHome = () => {
-    this.props.onNavigateHome()
+    this.props.history.push(locations.root())
     this.props.onClose()
   }
 

src/components/Modals/DeployModal/DeployToLand/DeployToLand.types.ts

@@ -1,6 +1,6 @@
 import { Dispatch } from 'redux'
 import { SignInProps } from 'decentraland-ui'
-import { CallHistoryMethodAction } from 'connected-react-router'
+import { RouteComponentProps } from 'react-router-dom'
 import { Coordinate, Rotation, DeploymentStatus, Deployment } from 'modules/deployment/types'
 import { DeployToLandRequestAction, deployToLandRequest } from 'modules/deployment/actions'
 import { RecordMediaRequestAction, recordMediaRequest } from 'modules/media/actions'
@@ -42,8 +42,7 @@ export type Props = {
   onDeployToPool: () => void
   onDeployToWorld: () => void
   onBack: () => void
-  onNavigateHome: () => void
-}
+} & RouteComponentProps
 
 export type State = {
   placement: {
@@ -79,8 +78,8 @@ export type MapStateProps = Pick<
   | 'landTiles'
   | 'ensList'
 >
-export type MapDispatchProps = Pick<Props, 'onOpenModal' | 'onDeploy' | 'onRecord' | 'onNavigateHome'>
-export type MapDispatch = Dispatch<OpenModalAction | DeployToLandRequestAction | RecordMediaRequestAction | CallHistoryMethodAction>
+export type MapDispatchProps = Pick<Props, 'onOpenModal' | 'onDeploy' | 'onRecord'>
+export type MapDispatch = Dispatch<OpenModalAction | DeployToLandRequestAction | RecordMediaRequestAction>
 
 export enum DeployToLandView {
   NONE = 'NONE',

src/components/Modals/DeployModal/DeployToWorld/DeployToWorld.container.ts

@@ -1,5 +1,4 @@
 import { connect } from 'react-redux'
-import { push, replace } from 'connected-react-router'
 import { RootState } from 'modules/common/types'
 import { fetchContributableNamesRequest } from 'modules/ens/actions'
 import { getCurrentProject } from 'modules/project/selectors'
@@ -40,8 +39,6 @@ const mapDispatch = (dispatch: MapDispatch): MapDispatchProps => ({
     return dispatch(deployToWorldRequest(projectId, name))
   },
   onRecord: () => dispatch(recordMediaRequest()),
-  onNavigate: path => dispatch(push(path)),
-  onReplace: (path, locationState) => dispatch(replace(path, locationState)),
   onFetchContributableNames: () => dispatch(fetchContributableNamesRequest())
 })
 

src/components/Modals/DeployModal/DeployToWorld/DeployToWorld.tsx

@@ -1,5 +1,6 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import classNames from 'classnames'
+import { useHistory } from 'react-router-dom'
 import { Button, Field, Icon as DCLIcon, SelectField, Checkbox, Row, Popup, List, DropdownItemProps } from 'decentraland-ui'
 import Modal from 'decentraland-dapps/dist/containers/Modal'
 import { t } from 'decentraland-dapps/dist/modules/translation/utils'
@@ -42,7 +43,6 @@ export default function DeployToWorld({
   isWorldContributorEnabled,
   onPublish,
   onRecord,
-  onNavigate,
   onClose,
   onBack,
   onFetchContributableNames
@@ -56,6 +56,7 @@ export default function DeployToWorld({
   const [confirmWorldReplaceContent, setConfirmWorldReplaceContent] = useState<boolean>(false)
   // Ref used to store current world deployment status and validate if the user is trying to deploy the same world
   const currentDeployment = useRef<Deployment | undefined>()
+  const history = useHistory()
 
   const currenWorldLabel = world && ensList.find(ens => ens.subdomain === world)?.name
 
@@ -108,13 +109,13 @@ export default function DeployToWorld({
 
   const handleClose = useCallback(() => {
     if (view === DeployToWorldView.SUCCESS) {
-      onNavigate(locations.sceneDetail(project.id))
+      history.push(locations.sceneDetail(project.id))
     }
     if (isLoading) {
       return
     }
     onClose()
-  }, [view, project, isLoading, onClose, onNavigate])
+  }, [view, project, isLoading, onClose, history])
 
   const handleClaimName = useCallback(() => {
     if (nameType === NameType.DCL) {

src/components/Modals/DeployModal/DeployToWorld/DeployToWorld.types.ts

@@ -1,5 +1,4 @@
 import { Dispatch } from 'redux'
-import { CallHistoryMethodAction } from 'connected-react-router'
 import { SceneMetrics } from '@dcl/inspector/dist/redux/scene-metrics/types'
 import { deployToWorldRequest, DeployToWorldRequestAction } from 'modules/deployment/actions'
 import { recordMediaRequest, RecordMediaRequestAction } from 'modules/media/actions'
@@ -9,7 +8,6 @@ import { Project } from 'modules/project/types'
 import { ModelMetrics } from 'modules/models/types'
 import { DeploymentState } from 'modules/deployment/reducer'
 import { Deployment } from 'modules/deployment/types'
-import { DeployToWorldLocationStateProps } from 'modules/location/types'
 import { DeployModalMetadata } from '../DeployModal.types'
 import { Scene } from 'modules/scene/types'
 
@@ -31,8 +29,6 @@ export type Props = {
   onBack: () => void
   onPublish: typeof deployToWorldRequest
   onRecord: typeof recordMediaRequest
-  onNavigate: (path: string) => void
-  onReplace: (path: string, locationState?: DeployToWorldLocationStateProps) => void
   onFetchContributableNames: () => void
 }
 
@@ -50,13 +46,9 @@ export type MapStateProps = Pick<
   | 'contributableNames'
   | 'isWorldContributorEnabled'
 >
-export type MapDispatchProps = Pick<Props, 'onPublish' | 'onNavigate' | 'onRecord' | 'onReplace' | 'onFetchContributableNames'>
+export type MapDispatchProps = Pick<Props, 'onPublish' | 'onRecord' | 'onFetchContributableNames'>
 export type MapDispatch = Dispatch<
-  | DeployToWorldRequestAction
-  | CallHistoryMethodAction
-  | RecordMediaRequestAction
-  | FetchExternalNamesRequestAction
-  | FetchContributableNamesRequestAction
+  DeployToWorldRequestAction | RecordMediaRequestAction | FetchExternalNamesRequestAction | FetchContributableNamesRequestAction
 >
 
 export enum DeployToWorldView {

src/components/SceneDetailPage/DeploymentDetail/DeploymentDetail.container.ts

@@ -1,5 +1,5 @@
 import { connect } from 'react-redux'
-import { push } from 'connected-react-router'
+import { withRouter } from 'react-router-dom'
 import { RootState } from 'modules/common/types'
 import { openModal } from 'decentraland-dapps/dist/modules/modal/actions'
 import { getLandTiles } from 'modules/land/selectors'
@@ -11,8 +11,7 @@ const mapState = (state: RootState): MapStateProps => ({
 })
 
 const mapDispatch = (dispatch: MapDispatch): MapDispatchProps => ({
-  onNavigate: path => dispatch(push(path)),
   onOpenModal: (name, metadata) => dispatch(openModal(name, metadata))
 })
 
-export default connect(mapState, mapDispatch)(DeploymentDetail)
+export default connect(mapState, mapDispatch)(withRouter(DeploymentDetail))

src/components/SceneDetailPage/DeploymentDetail/DeploymentDetail.tsx

@@ -65,7 +65,7 @@ export default class DeploymentDetail extends React.PureComponent<Props> {
   }
 
   render() {
-    const { project, deployment, landTiles, onNavigate, onOpenModal } = this.props
+    const { project, deployment, landTiles, history, onOpenModal } = this.props
     const landId = deployment.base in landTiles ? landTiles[deployment.base].land.id : null
     const locationText = deployment.world ? deployment.world : deployment.base
     const status = getStatus(project, deployment)
@@ -77,7 +77,7 @@ export default class DeploymentDetail extends React.PureComponent<Props> {
     return (
       <div
         className={classNames('DeploymentDetail', { clickable: landId })}
-        onClick={() => landId && onNavigate(locations.landDetail(landId))}
+        onClick={() => landId && history.push(locations.landDetail(landId))}
       >
         {this.renderThumbnail()}
         <Stats label={t('scene_detail_page.status')}>{statusText}</Stats>

src/components/SceneDetailPage/DeploymentDetail/DeploymentDetail.types.ts

@@ -1,5 +1,5 @@
 import { Dispatch } from 'redux'
-import { CallHistoryMethodAction } from 'connected-react-router'
+import { RouteComponentProps } from 'react-router-dom'
 import { Deployment } from 'modules/deployment/types'
 import { openModal, OpenModalAction } from 'decentraland-dapps/dist/modules/modal/actions'
 import { Project } from 'modules/project/types'
@@ -9,10 +9,9 @@ export type Props = {
   project: Project
   deployment: Deployment
   onOpenModal: typeof openModal
-  onNavigate: (path: string) => void
   landTiles: Record<string, LandTile>
-}
+} & RouteComponentProps
 
 export type MapStateProps = Pick<Props, 'landTiles'>
-export type MapDispatchProps = Pick<Props, 'onNavigate' | 'onOpenModal'>
-export type MapDispatch = Dispatch<CallHistoryMethodAction | OpenModalAction>
+export type MapDispatchProps = Pick<Props, 'onOpenModal'>
+export type MapDispatch = Dispatch<OpenModalAction>

src/components/SceneViewPage/SceneViewPage.container.ts

@@ -1,7 +1,5 @@
 import { connect } from 'react-redux'
-import { push } from 'connected-react-router'
-
-import { locations } from 'routing/locations'
+import { withRouter } from 'react-router'
 import { RootState } from 'modules/common/types'
 import { likePoolRequest } from 'modules/pool/actions'
 import { loadProjectSceneRequest, loadPublicProjectRequest } from 'modules/project/actions'
@@ -37,8 +35,7 @@ const mapDispatch = (dispatch: MapDispatch): MapDispatchProps => ({
   onLoadProject: (id: string, type: PreviewType.PUBLIC | PreviewType.POOL = PreviewType.PUBLIC) =>
     dispatch(loadPublicProjectRequest(id, type)),
   onOpenModal: (name, metadata) => dispatch(openModal(name, metadata)),
-  onBack: () => dispatch(push(locations.poolSearch())),
   onLoadProjectScene: (project: Project, type: PreviewType.PUBLIC | PreviewType.POOL) => dispatch(loadProjectSceneRequest(project, type))
 })
 
-export default connect(mapState, mapDispatch)(SceneViewPage)
+export default connect(mapState, mapDispatch)(withRouter(SceneViewPage))

src/components/SceneViewPage/SceneViewPage.tsx

@@ -4,6 +4,7 @@ import { Loader, Page, Responsive, Container, Button, Icon as IconUI } from 'dec
 import Profile from 'decentraland-dapps/dist/containers/Profile'
 import { t } from 'decentraland-dapps/dist/modules/translation/utils'
 import { PreviewType } from 'modules/editor/types'
+import { locations } from 'routing/locations'
 import Chip from 'components/Chip'
 import Footer from 'components/Footer'
 import Icon from 'components/Icon'
@@ -154,8 +155,13 @@ export default class SceneViewPage extends React.PureComponent<Props> {
     )
   }
 
+  handleBack = () => {
+    const { history } = this.props
+    history.push(locations.poolSearch())
+  }
+
   render() {
-    const { isFetching, isPreviewing, isReady, onBack } = this.props
+    const { isFetching, isPreviewing, isReady } = this.props
 
     if (isFetching) {
       return this.renderLoading()
@@ -175,7 +181,7 @@ export default class SceneViewPage extends React.PureComponent<Props> {
           <>
             <Navbar />
             <Container className="back-container">
-              <Back absolute onClick={onBack}></Back>
+              <Back absolute onClick={this.handleBack}></Back>
               <Button secondary onClick={this.handleExportProject.bind(this)} loading={!currentProject} disabled={!currentProject}>
                 <IconUI name="download" />
                 {t('scene_detail_page.download_scene')}

src/components/SceneViewPage/SceneViewPage.types.ts

@@ -1,6 +1,5 @@
 import { Dispatch } from 'redux'
-import { CallHistoryMethodAction } from 'connected-react-router'
-import { match } from 'react-router'
+import { match, RouteComponentProps } from 'react-router'
 import { Profile } from 'decentraland-dapps/dist/modules/profile/types'
 
 import { Project } from 'modules/project/types'
@@ -30,24 +29,22 @@ export type Props = {
   onPreview: () => ReturnType<typeof togglePreview>
   onLikePool: typeof likePoolRequest
   onOpenModal: typeof openModal
-  onBack: () => void
   onLoadProjectScene: (project: Project, type: PreviewType.POOL | PreviewType.PUBLIC) => void
-}
+} & RouteComponentProps
 
 export type MapStateProps = Pick<
   Props,
   'isPreviewing' | 'isFetching' | 'isLoggedIn' | 'isReady' | 'isLoading' | 'currentProject' | 'currentPool' | 'scenes' | 'currentAuthor'
 >
 export type MapDispatchProps = Pick<
   Props,
-  'onLoadProject' | 'onPreview' | 'onLikePool' | 'onOpenModal' | 'onCloseEditor' | 'onBack' | 'onLoadProjectScene'
+  'onLoadProject' | 'onPreview' | 'onLikePool' | 'onOpenModal' | 'onCloseEditor' | 'onLoadProjectScene'
 >
 export type MapDispatch = Dispatch<
   | LoadPublicProjectRequestAction
   | TogglePreviewAction
   | LikePoolRequestAction
   | OpenModalAction
   | CloseEditorAction
-  | CallHistoryMethodAction
   | LoadProjectSceneRequestAction
 >

src/components/SettingsPage/SettingsPage.container.ts

@@ -1,5 +1,4 @@
 import { connect } from 'react-redux'
-import { push } from 'connected-react-router'
 import { getData as getWallet } from 'decentraland-dapps/dist/modules/wallet/selectors'
 
 import { RootState } from 'modules/common/types'
@@ -14,7 +13,6 @@ const mapState = (state: RootState): MapStateProps => ({
 })
 
 const mapDispatch = (dispatch: MapDispatch): MapDispatchProps => ({
-  onNavigate: path => dispatch(push(path)),
   onSetUpdateManager: (address, type, isApproved) => dispatch(setUpdateManagerRequest(address, type, isApproved))
 })