feat: remove connected react router from sagas (#2257)

webapp/package.json

@@ -123,4 +123,4 @@
     "type": "git",
     "url": "https://github.com/decentraland/marketplace.git"
   }
-}
+}

webapp/src/components/AccountPage/AccountPage.container.ts

@@ -1,11 +1,10 @@
 import { connect } from 'react-redux'
-import { replace } from 'connected-react-router'
 import { isConnecting } from 'decentraland-dapps/dist/modules/wallet/selectors'
 import { RootState } from '../../modules/reducer'
 import { getIsFullscreen, getVendor, getViewAsGuest } from '../../modules/routing/selectors'
 import { getWallet } from '../../modules/wallet/selectors'
 import AccountPage from './AccountPage'
-import { MapStateProps, MapDispatch, MapDispatchProps, OwnProps } from './AccountPage.types'
+import { MapStateProps, OwnProps } from './AccountPage.types'
 
 const mapState = (state: RootState, ownProps: OwnProps): MapStateProps => {
   const { address } = ownProps.match.params
@@ -20,8 +19,4 @@ const mapState = (state: RootState, ownProps: OwnProps): MapStateProps => {
   }
 }
 
-const mapDispatch = (dispatch: MapDispatch): MapDispatchProps => ({
-  onRedirect: path => dispatch(replace(path))
-})
-
-export default connect(mapState, mapDispatch)(AccountPage)
+export default connect(mapState)(AccountPage)

webapp/src/components/AccountPage/AccountPage.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react'
-import { useLocation } from 'react-router-dom'
+import { useHistory, useLocation } from 'react-router-dom'
 import { AddressProvider } from 'decentraland-dapps/dist/containers/AddressProvider'
 import { t } from 'decentraland-dapps/dist/modules/translation/utils'
 import { Page, Loader, Center } from 'decentraland-ui'
@@ -12,17 +12,18 @@ import AccountBanner from './AccountBanner'
 import { Props } from './AccountPage.types'
 import './AccountPage.css'
 
-const AccountPage = ({ addressInUrl, vendor, wallet, isConnecting, viewAsGuest, onRedirect }: Props) => {
+const AccountPage = ({ addressInUrl, vendor, wallet, isConnecting, viewAsGuest }: Props) => {
   const isCurrentAccount = (!addressInUrl || wallet?.address === addressInUrl) && !viewAsGuest
   const { pathname, search } = useLocation()
+  const history = useHistory()
 
   // Redirect to signIn if trying to access current account without a wallet
   useEffect(() => {
     if (!addressInUrl && !isConnecting && !wallet) {
-      onRedirect(locations.signIn(`${pathname}${search}`))
+      history.replace(locations.signIn(`${pathname}${search}`))
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [addressInUrl, isConnecting, wallet, onRedirect])
+  }, [addressInUrl, isConnecting, wallet, history])
 
   return (
     <PageLayout className="AccountPage" activeTab={isCurrentAccount ? NavigationTab.MY_STORE : undefined}>

webapp/src/components/AccountPage/AccountPage.types.ts

@@ -1,6 +1,4 @@
 import { RouteComponentProps } from 'react-router-dom'
-import { CallHistoryMethodAction } from 'connected-react-router'
-import { Dispatch } from 'redux'
 import { Wallet } from 'decentraland-dapps/dist/modules/wallet/types'
 import { VendorName } from '../../modules/vendor/types'
 
@@ -13,10 +11,7 @@ export type Props = {
   isConnecting: boolean
   isFullscreen?: boolean
   viewAsGuest: boolean
-  onRedirect: (path: string) => void
 } & RouteComponentProps<Params>
 
 export type MapStateProps = Pick<Props, 'addressInUrl' | 'vendor' | 'wallet' | 'isConnecting' | 'isFullscreen' | 'viewAsGuest'>
-export type MapDispatchProps = Pick<Props, 'onRedirect'>
-export type MapDispatch = Dispatch<CallHistoryMethodAction>
 export type OwnProps = RouteComponentProps<Params>

webapp/src/components/AssetPage/SaleActionBox/BuyNFTButtons/BuyNFTButtons.container.tsx

@@ -1,5 +1,4 @@
 import { connect } from 'react-redux'
-import { replace } from 'connected-react-router'
 import { Order } from '@dcl/schemas'
 import { openModal } from 'decentraland-dapps/dist/modules/modal/actions'
 import { getOpenModals } from 'decentraland-dapps/dist/modules/modal/selectors'
@@ -29,8 +28,7 @@ const mapDispatch = (dispatch: MapDispatch, ownProps: OwnProps): MapDispatchProp
           })
         )
       : dispatch(openModal('MintNftWithCryptoModal', { item: asset })),
-  onBuyItemWithCard: item => dispatch(buyItemWithCardRequest(item)),
-  onRedirect: path => dispatch(replace(path))
+  onBuyItemWithCard: item => dispatch(buyItemWithCardRequest(item))
 })
 
 export default connect(mapState, mapDispatch)(BuyNFTButtons)

webapp/src/components/AssetPage/SaleActionBox/BuyNFTButtons/BuyNFTButtons.tsx

@@ -1,5 +1,5 @@
 import { memo, useCallback, useMemo } from 'react'
-import { useLocation } from 'react-router-dom'
+import { useHistory, useLocation } from 'react-router-dom'
 import { Order } from '@dcl/schemas'
 import { getAnalytics } from 'decentraland-dapps/dist/modules/analytics/utils'
 import { Loader } from 'decentraland-ui'
@@ -23,8 +23,7 @@ const BuyNFTButtons = ({
   isBuyingWithCryptoModalOpen,
   onBuyWithCrypto,
   onExecuteOrderWithCard,
-  onBuyItemWithCard,
-  onRedirect
+  onBuyItemWithCard
 }: Props) => {
   const analytics = getAnalytics()
   const location = useLocation()
@@ -33,6 +32,7 @@ const BuyNFTButtons = ({
     const shouldOpenModal = search.get('buyWithCrypto')
     return shouldOpenModal
   }, [location.search])
+  const history = useHistory()
 
   const handleBuyWithCard = useCallback(
     (asset: Asset) => {
@@ -45,13 +45,13 @@ const BuyNFTButtons = ({
   const handleBuyWithCrypto = useCallback(
     (asset: Asset, order: Order | null) => {
       if (!isConnecting && !wallet && !isBuyingWithCryptoModalOpen) {
-        onRedirect(locations.signIn(`${location.pathname}?buyWithCrypto=true`))
+        history.replace(locations.signIn(`${location.pathname}?buyWithCrypto=true`))
       } else {
         analytics.track(events.CLICK_BUY_NFT_WITH_CRYPTO)
         onBuyWithCrypto(asset, order)
       }
     },
-    [isConnecting, wallet, isBuyingWithCryptoModalOpen, location.pathname, analytics, onRedirect, onBuyWithCrypto]
+    [isConnecting, wallet, isBuyingWithCryptoModalOpen, location.pathname, analytics, history, onBuyWithCrypto]
   )
 
   return (

webapp/src/components/AssetPage/SaleActionBox/BuyNFTButtons/BuyNFTButtons.types.ts

@@ -1,4 +1,3 @@
-import { CallHistoryMethodAction } from 'connected-react-router'
 import { Dispatch } from 'redux'
 import { Order } from '@dcl/schemas'
 import { OpenModalAction } from 'decentraland-dapps/dist/modules/modal/actions'
@@ -18,14 +17,11 @@ export type Props = {
   onBuyWithCrypto: (asset: Asset, order?: Order | null) => void
   onExecuteOrderWithCard: typeof executeOrderWithCardRequest
   onBuyItemWithCard: typeof buyItemWithCardRequest
-  onRedirect: (path: string) => void
 }
 
 export type OwnProps = Pick<Props, 'asset' | 'assetType' | 'tokenId' | 'buyWithCardClassName'>
 
 export type MapStateProps = Pick<Props, 'wallet' | 'isConnecting' | 'isBuyingWithCryptoModalOpen'>
 
-export type MapDispatchProps = Pick<Props, 'onExecuteOrderWithCard' | 'onBuyItemWithCard' | 'onBuyWithCrypto' | 'onRedirect'>
-export type MapDispatch = Dispatch<
-  ExecuteOrderWithCardRequestAction | BuyItemWithCardRequestAction | OpenModalAction | CallHistoryMethodAction
->
+export type MapDispatchProps = Pick<Props, 'onExecuteOrderWithCard' | 'onBuyItemWithCard' | 'onBuyWithCrypto'>
+export type MapDispatch = Dispatch<ExecuteOrderWithCardRequestAction | BuyItemWithCardRequestAction | OpenModalAction>

webapp/src/components/AssetPage/YourOffer/YourOffer.container.ts

@@ -1,8 +1,6 @@
 import { connect } from 'react-redux'
-import { push } from 'connected-react-router'
 import { cancelBidRequest } from '../../../modules/bid/actions'
 import { RootState } from '../../../modules/reducer'
-import { locations } from '../../../modules/routing/locations'
 import { getAddress } from '../../../modules/wallet/selectors'
 import YourOffer from './YourOffer'
 import { MapStateProps, MapDispatchProps, MapDispatch } from './YourOffer.types'
@@ -12,7 +10,6 @@ const mapState = (state: RootState): MapStateProps => ({
 })
 
 const mapDispatch = (dispatch: MapDispatch): MapDispatchProps => ({
-  onUpdate: bid => dispatch(push(locations.bid(bid.contractAddress, bid.tokenId))),
   onCancel: bid => dispatch(cancelBidRequest(bid))
 })
 

webapp/src/components/AssetPage/YourOffer/YourOffer.tsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from 'react'
+import { useHistory } from 'react-router-dom'
 import classNames from 'classnames'
 import { Bid, Network } from '@dcl/schemas'
 import { t } from 'decentraland-dapps/dist/modules/translation/utils'
@@ -9,6 +10,7 @@ import iconListings from '../../../images/iconListings.png'
 import infoIcon from '../../../images/infoIcon.png'
 import { formatDistanceToNow } from '../../../lib/date'
 import { formatWeiMANA } from '../../../lib/mana'
+import { locations } from '../../../modules/routing/locations'
 import { bidAPI } from '../../../modules/vendor/decentraland'
 import Mana from '../../Mana/Mana'
 import { ManaToFiat } from '../../ManaToFiat'
@@ -80,7 +82,8 @@ const ExpirationDate = (props: { bid: Bid }) => {
 }
 
 const YourOffer = (props: Props) => {
-  const { nft, address, onUpdate, onCancel } = props
+  const history = useHistory()
+  const { nft, address, onCancel } = props
 
   const [bid, setBid] = useState<Bid>()
   const isMobile = useMobileMediaQuery()
@@ -124,7 +127,7 @@ const YourOffer = (props: Props) => {
           <Button inverted fluid className={styles.actions} onClick={() => onCancel(bid)}>
             {t('offers_table.remove')}
           </Button>
-          <Button primary fluid className={styles.actions} onClick={() => onUpdate(bid)}>
+          <Button primary fluid className={styles.actions} onClick={() => history.push(locations.bid(bid.contractAddress, bid.tokenId))}>
             {t('global.update')}
           </Button>
         </div>

webapp/src/components/AssetPage/YourOffer/YourOffer.types.ts

@@ -1,5 +1,4 @@
 import { Dispatch } from 'react'
-import { CallHistoryMethodAction } from 'connected-react-router'
 import { Bid } from '@dcl/schemas'
 import { CancelBidRequestAction } from '../../../modules/bid/actions'
 import { NFT } from '../../../modules/nft/types'
@@ -8,12 +7,11 @@ import { VendorName } from '../../../modules/vendor'
 export type Props = {
   nft: NFT<VendorName.DECENTRALAND> | null
   address?: string
-  onUpdate: (bid: Bid) => void
   onCancel: (bid: Bid) => void
 }
 
 export type MapStateProps = Pick<Props, 'address'>
 
-export type MapDispatchProps = Pick<Props, 'onUpdate' | 'onCancel'>
+export type MapDispatchProps = Pick<Props, 'onCancel'>
 
-export type MapDispatch = Dispatch<CallHistoryMethodAction | CancelBidRequestAction>
+export type MapDispatch = Dispatch<CancelBidRequestAction>

webapp/src/components/Atlas/Atlas.container.ts

@@ -1,5 +1,4 @@
 import { connect } from 'react-redux'
-import { push } from 'connected-react-router'
 import { getContract } from '../../modules/contract/selectors'
 import { getWalletNFTs } from '../../modules/nft/selectors'
 import { RootState } from '../../modules/reducer'
@@ -8,7 +7,7 @@ import { getOnRentNFTsByLessor } from '../../modules/ui/browse/selectors'
 import { Contract } from '../../modules/vendor/services'
 import { getWallet } from '../../modules/wallet/selectors'
 import Atlas from './Atlas'
-import { MapStateProps, MapDispatch, MapDispatchProps } from './Atlas.types'
+import { MapStateProps } from './Atlas.types'
 
 const mapState = (state: RootState): MapStateProps => {
   const wallet = getWallet(state)
@@ -24,8 +23,4 @@ const mapState = (state: RootState): MapStateProps => {
   }
 }
 
-const mapDispatch = (dispatch: MapDispatch): MapDispatchProps => ({
-  onNavigate: path => dispatch(push(path))
-})
-
-export default connect(mapState, mapDispatch)(Atlas)
+export default connect(mapState)(Atlas)

webapp/src/components/Atlas/Atlas.tsx

@@ -1,4 +1,5 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { useHistory } from 'react-router-dom'
 import classNames from 'classnames'
 import { NFTCategory, RentalStatus } from '@dcl/schemas'
 import { t } from 'decentraland-dapps/dist/modules/translation/utils'
@@ -18,7 +19,6 @@ const getCoords = (x: number | string, y: number | string) => `${x},${y}`
 const Atlas: React.FC<Props> = (props: Props) => {
   const {
     tiles,
-    onNavigate,
     isEstate,
     withNavigation,
     nfts,
@@ -36,6 +36,7 @@ const Atlas: React.FC<Props> = (props: Props) => {
     lastUpdated
   } = props
 
+  const history = useHistory()
   const [showPopup, setShowPopup] = useState(false)
   const [isInfoPopupOpen, setIsInfoPopupOpen] = useState(false)
   const [hoveredTile, setHoveredTile] = useState<Tile | null>(null)
@@ -167,21 +168,21 @@ const Atlas: React.FC<Props> = (props: Props) => {
         const estates = getContract({
           category: NFTCategory.ESTATE
         })
-        estates && onNavigate(locations.nft(estates.address, tile.estate_id))
+        estates && history.push(locations.nft(estates.address, tile.estate_id))
       } else {
         try {
           const land = getContract({
             category: NFTCategory.PARCEL
           })
           const tokenId = await nftAPI.fetchTokenId(tile.x, tile.y)
-          land && onNavigate(locations.nft(land.address, tokenId ?? undefined))
+          land && history.push(locations.nft(land.address, tokenId ?? undefined))
         } catch (error) {
           const errorMessage = isErrorWithMessage(error) ? error.message : t('global.unknown_error')
           console.warn(`Couldn't fetch parcel ${tile.x},${tile.y}: ${errorMessage}`)
         }
       }
     },
-    [withNavigation, tiles, getContract, onNavigate]
+    [withNavigation, tiles, getContract]
   )
 
   const handleHover = useCallback(

webapp/src/components/Atlas/Atlas.types.ts

@@ -1,6 +1,4 @@
 import React from 'react'
-import { CallHistoryMethodAction } from 'connected-react-router'
-import { Dispatch } from 'redux'
 import { RentalListing } from '@dcl/schemas'
 import { AtlasTile, AtlasProps } from 'decentraland-ui'
 import { getContract } from '../../modules/contract/selectors'
@@ -35,10 +33,7 @@ export type Props = Partial<AtlasProps> & {
   lastUpdated?: Date
   lastAtlasModifiedDate: Date | null
   getContract: (query: Partial<Contract>) => ReturnType<typeof getContract>
-  onNavigate: (path: string) => void
   children?: React.ReactNode
 }
 
 export type MapStateProps = Pick<Props, 'tiles' | 'nfts' | 'nftsOnRent' | 'tilesByEstateId' | 'getContract' | 'lastAtlasModifiedDate'>
-export type MapDispatchProps = Pick<Props, 'onNavigate'>
-export type MapDispatch = Dispatch<CallHistoryMethodAction>

webapp/src/components/Bid/Bid.container.ts

@@ -1,10 +1,8 @@
 import { connect } from 'react-redux'
-import { push } from 'connected-react-router'
 import { isLoadingType } from 'decentraland-dapps/dist/modules/loading/selectors'
 import { cancelBidRequest, archiveBid, unarchiveBid, acceptBidRequest, ACCEPT_BID_REQUEST } from '../../modules/bid/actions'
 import { getLoading } from '../../modules/bid/selectors'
 import { RootState } from '../../modules/reducer'
-import { locations } from '../../modules/routing/locations'
 import { getArchivedBidIds } from '../../modules/ui/nft/bid/selectors'
 import { getWallet } from '../../modules/wallet/selectors'
 import Bid from './Bid'
@@ -17,7 +15,6 @@ const mapState = (state: RootState): MapStateProps => ({
 })
 
 const mapDispatch = (dispatch: MapDispatch): MapDispatchProps => ({
-  onUpdate: bid => dispatch(push(locations.bid(bid.contractAddress, bid.tokenId))),
   onCancel: bid => dispatch(cancelBidRequest(bid)),
   onArchive: bid => dispatch(archiveBid(bid)),
   onUnarchive: bid => dispatch(unarchiveBid(bid)),

webapp/src/components/Bid/Bid.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useState } from 'react'
-import { Link } from 'react-router-dom'
+import { Link, useHistory } from 'react-router-dom'
 import { ethers } from 'ethers'
 import { T, t } from 'decentraland-dapps/dist/modules/translation/utils'
 import { Loader, Stats, Button } from 'decentraland-ui'
@@ -20,8 +20,8 @@ import { Props } from './Bid.types'
 import './Bid.css'
 
 const Bid = (props: Props) => {
-  const { bid, wallet, archivedBidIds, onAccept, onArchive, onUnarchive, onCancel, onUpdate, isArchivable, hasImage, isAcceptingBid } =
-    props
+  const { bid, wallet, archivedBidIds, onAccept, onArchive, onUnarchive, onCancel, isArchivable, hasImage, isAcceptingBid } = props
+  const history = useHistory()
 
   const isArchived = archivedBidIds.includes(bid.id)
   const isBidder = !!wallet && addressEquals(wallet.address, bid.bidder)
@@ -67,7 +67,7 @@ const Bid = (props: Props) => {
               <div className="actions">
                 {isBidder ? (
                   <>
-                    <Button primary onClick={() => onUpdate(bid)}>
+                    <Button primary onClick={() => history.push(locations.bid(bid.contractAddress, bid.tokenId))}>
                       {t('global.update')}
                     </Button>
                     <Button onClick={() => onCancel(bid)}>{t('global.cancel')}</Button>

webapp/src/components/Bid/Bid.types.ts

@@ -1,4 +1,3 @@
-import { CallHistoryMethodAction } from 'connected-react-router'
 import { Dispatch } from 'redux'
 import { Bid } from '@dcl/schemas'
 import { Wallet } from 'decentraland-dapps/dist/modules/wallet/types'
@@ -19,7 +18,6 @@ export type Props = {
   archivedBidIds: string[]
   isArchivable?: boolean
   hasImage?: boolean
-  onUpdate: (bid: Bid) => void
   onCancel: typeof cancelBidRequest
   onArchive: typeof archiveBid
   onUnarchive: typeof unarchiveBid
@@ -28,9 +26,7 @@ export type Props = {
 }
 
 export type MapStateProps = Pick<Props, 'archivedBidIds' | 'wallet' | 'isAcceptingBid'>
-export type MapDispatchProps = Pick<Props, 'onUpdate' | 'onCancel' | 'onArchive' | 'onUnarchive' | 'onAccept'>
-export type MapDispatch = Dispatch<
-  CallHistoryMethodAction | CancelBidRequestAction | ArchiveBidAction | UnarchiveBidAction | AcceptBidRequestAction
->
+export type MapDispatchProps = Pick<Props, 'onCancel' | 'onArchive' | 'onUnarchive' | 'onAccept'>
+export type MapDispatch = Dispatch<CancelBidRequestAction | ArchiveBidAction | UnarchiveBidAction | AcceptBidRequestAction>
 
 export type OwnProps = Pick<Props, 'bid' | 'isArchivable' | 'hasImage'>