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

* feat: remove connected react router push from components (3)

* Update src/modules/ui/dashboard/selectors.ts

Co-authored-by: Gabriel Díaz <git@subsme.slmail.me>
Signed-off-by: Melisa Anabella Rossi <merossi@itba.edu.ar>

---------

Signed-off-by: Melisa Anabella Rossi <merossi@itba.edu.ar>
Co-authored-by: Gabriel Díaz <git@subsme.slmail.me>

src/components/CollectionDetailPage/CollectionDetailPage.container.ts

@@ -12,7 +12,7 @@ import { MapStateProps, MapDispatchProps, MapDispatch } from './CollectionDetail
 import CollectionDetailPage from './CollectionDetailPage'
 
 const mapState = (state: RootState): MapStateProps => {
-  const collectionId = getCollectionId(state) || ''
+  const collectionId = getCollectionId() || ''
   const collection = getCollection(state, collectionId)
   const statusByCollectionId = getStatusByCollectionId(state)
 

src/components/CollectionProvider/CollectionProvider.container.ts

@@ -15,7 +15,7 @@ import { getCuration } from 'modules/curations/collectionCuration/selectors'
 import { FETCH_ITEM_CURATIONS_REQUEST } from 'modules/curations/itemCuration/actions'
 
 const mapState = (state: RootState, ownProps: OwnProps): MapStateProps => {
-  const id = ownProps.id || getCollectionId(state)
+  const id = ownProps.id || getCollectionId()
   const collection = id ? getCollection(state, id) : null
   const items = collection ? getCollectionItems(state, collection.id) : []
   const paginatedItems = collection ? getPaginatedCollectionItems(state, collection.id, ownProps.itemsPageSize || DEFAULT_PAGE_SIZE) : []

src/components/ENSDetailPage/ENSDetailPage.container.ts

@@ -12,7 +12,7 @@ import { MapStateProps, MapDispatchProps } from './ENSDetailPage.types'
 import ENSDetailPage from './ENSDetailPage'
 
 const mapState = (state: RootState): MapStateProps => {
-  const name = getENSName(state)
+  const name = getENSName()
   return {
     name,
     ens: name ? getENSBySubdomain(state, `${name}.dcl.eth`) : null,

src/components/ItemDetailPage/ItemDetailPage.container.ts

@@ -12,7 +12,7 @@ import ItemDetailPage from './ItemDetailPage'
 import { getIsWearableUtilityEnabled } from 'modules/features/selectors'
 
 const mapState = (state: RootState): MapStateProps => {
-  const itemId = getItemId(state)
+  const itemId = getItemId()
   const item = itemId ? getItem(state, itemId) : null
   const wallet = getWallet(state)!
   const collection = item && item.collectionId ? getCollection(state, item.collectionId) : null

src/components/ItemEditorPage/CenterPanel/CenterPanel.container.ts

@@ -37,7 +37,7 @@ import CenterPanel from './CenterPanel'
 const mapState = (state: RootState): MapStateProps => {
   const address = getAddress(state)
   let collection: Collection | undefined
-  const collectionId = getSelectedCollectionId(state)
+  const collectionId = getSelectedCollectionId()
   // Emotes created by the user
   let emotes = getEmotes(state)
   if (collectionId) {

src/components/ItemEditorPage/LeftPanel/Header/Header.container.ts

@@ -14,7 +14,7 @@ import Header from './Header'
 
 const mapState = (state: RootState): MapStateProps => {
   let collection: Collection | undefined
-  const collectionId = getSelectedCollectionId(state)
+  const collectionId = getSelectedCollectionId()
   if (collectionId) {
     const collections = getCollections(state)
     collection = collections.find(collection => collection.id === collectionId)
@@ -23,7 +23,7 @@ const mapState = (state: RootState): MapStateProps => {
   return {
     address,
     isLoggedIn: isLoggedIn(state),
-    isReviewing: isReviewing(state),
+    isReviewing: isReviewing(),
     collection,
     hasEditRights: collection !== undefined && address !== undefined && hasViewAndEditRights(state, address, collection),
     hasUserOrphanItems: hasUserOrphanItems(state)

src/components/ItemEditorPage/LeftPanel/LeftPanel.container.ts

@@ -27,7 +27,7 @@ import { MapStateProps, MapDispatchProps, MapDispatch } from './LeftPanel.types'
 import LeftPanel from './LeftPanel'
 
 const mapState = (state: RootState): MapStateProps => {
-  const selectedCollectionId = getSelectedCollectionId(state)
+  const selectedCollectionId = getSelectedCollectionId()
   const address = getAddress(state)
   const itemsPaginationData = selectedCollectionId
     ? getPaginationData(state, selectedCollectionId)
@@ -55,7 +55,7 @@ const mapState = (state: RootState): MapStateProps => {
     visibleItems: getVisibleItems(state),
     bodyShape: getBodyShape(state),
     wearableController: getWearablePreviewController(state),
-    isReviewing: isReviewing(state),
+    isReviewing: isReviewing(),
     isLoading: isLoadingType(getLoading(state), FETCH_ITEMS_REQUEST) || isLoadingType(getLoading(state), FETCH_ORPHAN_ITEM_REQUEST),
     isPlayingEmote: isPlayingEmote(state),
     hasUserOrphanItems: hasUserOrphanItems(state)

src/components/ItemEditorPage/LeftPanel/Toasts/ItemAdded/ItemAddedToast.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from 'react'
 import { Button, Toast, ToastType } from 'decentraland-ui'
 import { Link, useHistory, useLocation } from 'react-router-dom'
+import { getNewItemName } from 'modules/item/selectors'
 import { locations } from 'routing/locations'
 import { T, t } from 'decentraland-dapps/dist/modules/translation/utils'
 
@@ -10,11 +11,12 @@ import { Props } from './ItemAddedToast.types'
 import './ItemAddedToast.css'
 
 const ItemAddedToast: React.FC<Props> = props => {
-  const { collectionId, itemName } = props
+  const { collectionId } = props
   const [shouldShowToast, setShouldShowToast] = useState(false)
   const [item, setItem] = useState<string | null>(null)
   const history = useHistory()
   const location = useLocation()
+  const itemName = getNewItemName()
 
   useEffect(() => {
     if (itemName) {

src/components/ItemEditorPage/LeftPanel/Toasts/ItemAdded/ItemAddedToast.types.ts

@@ -1,6 +1,3 @@
 export type Props = {
   collectionId: string | null
-  itemName: string | null
 }
-
-export type MapStateProps = Pick<Props, 'itemName'>

src/components/ItemEditorPage/LeftPanel/Toasts/ItemAdded/index.ts

@@ -1,3 +1,3 @@
-import ItemAddedToast from './ItemAddedToast.container'
+import ItemAddedToast from './ItemAddedToast'
 
 export { ItemAddedToast }

src/components/ItemEditorPage/TopPanel/TopPanel.container.ts

@@ -1,7 +1,7 @@
 import { connect } from 'react-redux'
-import { push } from 'connected-react-router'
 import { getAddress, getChainId, getLoading, isConnected } from 'decentraland-dapps/dist/modules/wallet/selectors'
 import { RootState } from 'modules/common/types'
+import { withRouter } from 'react-router-dom'
 import { isWalletCommitteeMember } from 'modules/committee/selectors'
 import { getSelectedCollectionId, isReviewing } from 'modules/location/selectors'
 import { setCollectionCurationAssigneeRequest } from 'modules/curations/collectionCuration/actions'
@@ -17,7 +17,7 @@ import { getCuration } from 'modules/curations/collectionCuration/selectors'
 import { getItemCurations, getLoading as getLoadingItemCurations } from 'modules/curations/itemCuration/selectors'
 
 const mapState = (state: RootState): MapStateProps => {
-  const selectedCollectionId = getSelectedCollectionId(state)
+  const selectedCollectionId = getSelectedCollectionId()
   const collection = selectedCollectionId ? getCollection(state, selectedCollectionId) : null
   const items = collection ? getCollectionItems(state, collection.id) : []
   const itemCurations = collection ? getItemCurations(state, collection.id) : []
@@ -32,9 +32,9 @@ const mapState = (state: RootState): MapStateProps => {
     curation,
     chainId: getChainId(state),
     isConnected: isConnected(state),
-    isReviewing: isReviewing(state),
+    isReviewing: isReviewing(),
     isCommitteeMember: isWalletCommitteeMember(state),
-    selectedCollectionId: getSelectedCollectionId(state),
+    selectedCollectionId: getSelectedCollectionId(),
     isLoading:
       isLoadingType(getLoading(state), FETCH_COLLECTION_REQUEST) ||
       isLoadingType(getLoadingItemCurations(state), FETCH_ITEM_CURATIONS_REQUEST) ||
@@ -43,10 +43,9 @@ const mapState = (state: RootState): MapStateProps => {
 }
 
 const mapDispatch = (dispatch: MapDispatch): MapDispatchProps => ({
-  onNavigate: path => dispatch(push(path)),
   onSetAssignee: (collectionId, assignee, curation) => dispatch(setCollectionCurationAssigneeRequest(collectionId, assignee, curation)),
   onInitiateTPApprovalFlow: collection => dispatch(initiateTPApprovalFlow(collection)),
   onInitiateApprovalFlow: collection => dispatch(initiateApprovalFlow(collection))
 })
 
-export default connect(mapState, mapDispatch)(TopPanel)
+export default connect(mapState, mapDispatch)(withRouter(TopPanel))

src/components/ItemEditorPage/TopPanel/TopPanel.tsx

@@ -22,7 +22,8 @@ export default class TopPanel extends React.PureComponent<Props, State> {
   }
 
   handleBack = () => {
-    this.props.onNavigate(locations.curation())
+    const { history } = this.props
+    history.push(locations.curation())
   }
 
   handleConfirmApprovalModal = (collection: Collection, curation: CollectionCuration | null) => {

src/components/ItemEditorPage/TopPanel/TopPanel.types.ts

@@ -1,6 +1,6 @@
 import { Dispatch } from 'redux'
-import { CallHistoryMethodAction } from 'connected-react-router'
 import { ChainId } from '@dcl/schemas'
+import { RouteComponentProps } from 'react-router-dom'
 import {
   initiateApprovalFlow,
   InitiateApprovalFlowAction,
@@ -31,11 +31,10 @@ export type Props = {
   isReviewing: boolean
   isCommitteeMember: boolean
   selectedCollectionId: string | null
-  onNavigate: (path: string) => void
   onInitiateApprovalFlow: typeof initiateApprovalFlow
   onInitiateTPApprovalFlow: typeof initiateTPApprovalFlow
   onSetAssignee: typeof setCollectionCurationAssigneeRequest
-}
+} & RouteComponentProps
 
 export type State = {
   currentVeredict?: boolean
@@ -65,7 +64,5 @@ export type MapStateProps = Pick<
   | 'isCommitteeMember'
   | 'selectedCollectionId'
 >
-export type MapDispatchProps = Pick<Props, 'onNavigate' | 'onInitiateApprovalFlow' | 'onInitiateTPApprovalFlow' | 'onSetAssignee'>
-export type MapDispatch = Dispatch<
-  CallHistoryMethodAction | InitiateApprovalFlowAction | InitiateTPApprovalFlowAction | SetCollectionCurationAssigneeRequestAction
->
+export type MapDispatchProps = Pick<Props, 'onInitiateApprovalFlow' | 'onInitiateTPApprovalFlow' | 'onSetAssignee'>
+export type MapDispatch = Dispatch<InitiateApprovalFlowAction | InitiateTPApprovalFlowAction | SetCollectionCurationAssigneeRequestAction>

src/components/ItemProvider/ItemProvider.container.ts

@@ -12,7 +12,7 @@ import { MapStateProps, MapDispatchProps, MapDispatch, OwnProps } from './ItemPr
 import ItemProvider from './ItemProvider'
 
 const mapState = (state: RootState, ownProps: OwnProps): MapStateProps => {
-  const id = ownProps.id || getItemId(state)
+  const id = ownProps.id || getItemId()
   const items = getItems(state)
   const collections = getCollections(state)
 

src/components/LandDetailPage/LandDetailPage.container.ts

@@ -1,5 +1,5 @@
 import { connect } from 'react-redux'
-import { push, replace } from 'connected-react-router'
+import { withRouter } from 'react-router-dom'
 import { RootState } from 'modules/common/types'
 import { getLandId } from 'modules/location/selectors'
 import { openModal } from 'decentraland-dapps/dist/modules/modal/actions'
@@ -10,7 +10,7 @@ import { MapStateProps, MapDispatchProps, MapDispatch } from './LandDetailPage.t
 import LandDetailPage from './LandDetailPage'
 
 const mapState = (state: RootState): MapStateProps => {
-  const landId = getLandId(state) || ''
+  const landId = getLandId() || ''
   return {
     ensList: getENSForLand(state, landId),
     parcelsAvailableToBuildEstates: getParcelsAvailableToBuildEstates(state),
@@ -21,9 +21,7 @@ const mapState = (state: RootState): MapStateProps => {
 }
 
 const mapDispatch = (dispatch: MapDispatch): MapDispatchProps => ({
-  onNavigate: path => dispatch(push(path)),
-  onReplace: path => dispatch(replace(path)),
   onOpenModal: (name, metadata) => dispatch(openModal(name, metadata))
 })
 
-export default connect(mapState, mapDispatch)(LandDetailPage)
+export default connect(mapState, mapDispatch)(withRouter(LandDetailPage))

src/components/LandDetailPage/LandDetailPage.tsx

@@ -64,13 +64,13 @@ export default class LandDetailPage extends React.PureComponent<Props, State> {
   }
 
   handleClick = (x: number, y: number) => {
-    const { deploymentsByCoord, projects, onNavigate, onReplace, landTiles } = this.props
+    const { deploymentsByCoord, projects, history, landTiles } = this.props
     const id = coordsToId(x, y)
     const deployment = deploymentsByCoord[id]
     if (deployment && deployment.projectId && deployment.projectId in projects) {
-      onNavigate(locations.sceneDetail(deployment.projectId))
+      history.push(locations.sceneDetail(deployment.projectId))
     } else if (id in landTiles) {
-      onReplace(locations.landDetail(landTiles[id].land.id))
+      history.replace(locations.landDetail(landTiles[id].land.id))
     }
   }
 
@@ -110,7 +110,7 @@ export default class LandDetailPage extends React.PureComponent<Props, State> {
   }
 
   renderDetail(land: Land, deployments: Deployment[], rental: Rental | null) {
-    const { ensList, parcelsAvailableToBuildEstates, projects, onNavigate, onOpenModal } = this.props
+    const { ensList, parcelsAvailableToBuildEstates, projects, history, onOpenModal } = this.props
     const { hovered, mouseX, mouseY, showTooltip } = this.state
     const occupiedTotal = this.computeOccupiedLand(land, deployments)
     const landOwner = rental && (land.roles.includes(RoleType.LESSOR) || land.roles.includes(RoleType.TENANT)) ? rental.lessor : land.owner
@@ -128,7 +128,7 @@ export default class LandDetailPage extends React.PureComponent<Props, State> {
         ) : null}
         <Section size="large">
           <Row>
-            <Back absolute onClick={() => onNavigate(locations.land())} />
+            <Back absolute onClick={() => history.push(locations.land())} />
             <Narrow>
               <Row>
                 <Column>
@@ -151,12 +151,12 @@ export default class LandDetailPage extends React.PureComponent<Props, State> {
                   <Column className="actions" align="right">
                     <Row>
                       <RentedLandWrapper land={land}>
-                        <Button basic onClick={() => onNavigate(locations.landTransfer(land.id))}>
+                        <Button basic onClick={() => history.push(locations.landTransfer(land.id))}>
                           {t('land_detail_page.transfer')}
                         </Button>
                       </RentedLandWrapper>
                       <RentedLandWrapper land={land}>
-                        <Button basic onClick={() => onNavigate(locations.landEdit(land.id))}>
+                        <Button basic onClick={() => history.push(locations.landEdit(land.id))}>
                           {t('global.edit')}
                         </Button>
                       </RentedLandWrapper>
@@ -196,13 +196,13 @@ export default class LandDetailPage extends React.PureComponent<Props, State> {
                             <>
                               <Dropdown.Item
                                 text={t('land_detail_page.assign_name')}
-                                onClick={() => onNavigate(locations.landSelectENS(land.id))}
+                                onClick={() => history.push(locations.landSelectENS(land.id))}
                               />
                               <Dropdown.Divider />
                             </>
                             <Dropdown.Item
                               text={t('land_detail_page.set_operator')}
-                              onClick={() => onNavigate(locations.landOperator(land.id))}
+                              onClick={() => history.push(locations.landOperator(land.id))}
                             />
                           </Dropdown.Menu>
                         </Dropdown>
@@ -222,7 +222,7 @@ export default class LandDetailPage extends React.PureComponent<Props, State> {
                     <Dropdown.Menu>
                       <Dropdown.Item
                         text={t('land_detail_page.set_operator')}
-                        onClick={() => onNavigate(locations.landOperator(land.id))}
+                        onClick={() => history.push(locations.landOperator(land.id))}
                       />
                     </Dropdown.Menu>
                   </Dropdown>
@@ -261,7 +261,7 @@ export default class LandDetailPage extends React.PureComponent<Props, State> {
                       deployment={deployment}
                       onMouseEnter={this.handleMouseEnter}
                       onMouseLeave={this.handleMouseLeave}
-                      onNavigate={onNavigate}
+                      onNavigate={(path: string) => history.push(path)}
                       onOpenModal={onOpenModal}
                       projects={projects}
                     />

src/components/LandDetailPage/LandDetailPage.types.ts

@@ -1,5 +1,5 @@
 import { Dispatch } from 'redux'
-import { CallHistoryMethodAction } from 'connected-react-router'
+import { RouteComponentProps } from 'react-router-dom'
 import { ProjectState } from 'modules/project/reducer'
 import { openModal, OpenModalAction } from 'decentraland-dapps/dist/modules/modal/actions'
 import { Deployment } from 'modules/deployment/types'
@@ -12,10 +12,8 @@ export type Props = {
   deploymentsByCoord: Record<string, Deployment>
   landTiles: Record<string, LandTile>
   projects: ProjectState['data']
-  onNavigate: (path: string) => void
-  onReplace: (path: string) => void
   onOpenModal: typeof openModal
-}
+} & RouteComponentProps
 
 export type State = {
   hovered: Deployment | null
@@ -25,5 +23,5 @@ export type State = {
 }
 
 export type MapStateProps = Pick<Props, 'ensList' | 'parcelsAvailableToBuildEstates' | 'deploymentsByCoord' | 'projects' | 'landTiles'>
-export type MapDispatchProps = Pick<Props, 'onNavigate' | 'onOpenModal' | 'onReplace'>
-export type MapDispatch = Dispatch<CallHistoryMethodAction | OpenModalAction>
+export type MapDispatchProps = Pick<Props, 'onOpenModal'>
+export type MapDispatch = Dispatch<OpenModalAction>

src/components/LandProvider/LandProvider.container.ts

@@ -11,7 +11,7 @@ import { MapStateProps, OwnProps } from './LandProvider.types'
 import LandProvider from './LandProvider'
 
 const mapState = (state: RootState, ownProps: OwnProps): MapStateProps => {
-  const id = ownProps.id || getLandId(state)
+  const id = ownProps.id || getLandId()
   const lands = getLands(state)
   const land = lands.find(land => land.id === id) || null
 

src/components/SceneDetailPage/SceneDetailPage.container.ts

@@ -1,5 +1,4 @@
 import { connect } from 'react-redux'
-import { push } from 'connected-react-router'
 import { isLoadingType } from 'decentraland-dapps/dist/modules/loading/selectors'
 import { RootState } from 'modules/common/types'
 import { FETCH_LANDS_REQUEST } from 'modules/land/actions'
@@ -17,7 +16,7 @@ import { MapStateProps, MapDispatchProps, MapDispatch } from './SceneDetailPage.
 import SceneDetailPage from './SceneDetailPage'
 
 const mapState = (state: RootState): MapStateProps => {
-  const projectId = getProjectId(state)
+  const projectId = getProjectId()
   const projects = getProjects(state)
   const project = projectId && projectId in projects ? projects[projectId] : null
   const deploymentsByProjectId = getDeploymentsByProjectId(state)
@@ -37,7 +36,6 @@ const mapState = (state: RootState): MapStateProps => {
 }
 
 const mapDispatch = (dispatch: MapDispatch): MapDispatchProps => ({
-  onNavigate: path => dispatch(push(path)),
   onOpenModal: (name, metadata) => dispatch(openModal(name, metadata)),
   onDelete: project => dispatch(deleteProject(project)),
   onDuplicate: project => dispatch(duplicateProjectRequest(project)),