feat: remove push sagas (#2258)

webapp/src/components/AssetBrowse/AssetBrowse.container.ts

@@ -8,8 +8,7 @@ import {
   getSection,
   getOnlySmart,
   getOnlyOnRent,
-  getIsFullscreen,
-  getVisitedLocations
+  getIsFullscreen
 } from '../../modules/routing/selectors'
 import { isMapSet } from '../../modules/routing/utils'
 import { setView } from '../../modules/ui/actions'
@@ -28,8 +27,7 @@ const mapState = (state: RootState): MapStateProps => {
     assetType: getAssetType(state),
     viewInState: getView(state),
     onlySmart: getOnlySmart(state),
-    onlyOnRent: getOnlyOnRent(state),
-    visitedLocations: getVisitedLocations(state)
+    onlyOnRent: getOnlyOnRent(state)
   }
 }
 

webapp/src/components/AssetBrowse/AssetBrowse.tsx

@@ -6,6 +6,7 @@ import { BackToTopButton, Mobile, NotMobile, Page, Tabs } from 'decentraland-ui'
 import { usePagination } from '../../lib/pagination'
 import { locations } from '../../modules/routing/locations'
 import { BrowseOptions } from '../../modules/routing/types'
+import { ExtendedHistory } from '../../modules/types'
 import { View } from '../../modules/ui/types'
 import { getPersistedIsMapProperty, isAccountView, isListsSection } from '../../modules/ui/utils'
 import { Section as DecentralandSection } from '../../modules/vendor/decentraland'
@@ -43,15 +44,15 @@ const AssetBrowse = (props: Props) => {
     onlyOnSale,
     onlySmart,
     viewInState,
-    onlyOnRent,
-    visitedLocations
+    onlyOnRent
   } = props
 
   const location = useLocation()
-  const history = useHistory()
+  const history = useHistory() as ExtendedHistory
   const { changeFilter } = usePagination()
 
   // Prevent fetching more than once while browsing
+  const visitedLocations = history.getLastVisitedLocations()
   const lastLocation = visitedLocations[visitedLocations.length - 2]
   const [hasFetched, setHasFetched] = useState(
     history.action === 'POP' &&
@@ -78,6 +79,17 @@ const AssetBrowse = (props: Props) => {
 
   const isMapPropertyPersisted = getPersistedIsMapProperty()
 
+  useEffect(() => {
+    const cancelListener = history.listen((_location, action) => {
+      if (action === 'POP') {
+        setHasFetched(false)
+      }
+    })
+    return () => {
+      cancelListener()
+    }
+  }, [history])
+
   useEffect(() => {
     if (section === DecentralandSection.LAND && !isAccountView(view) && isMapPropertyPersisted === false && isMap) {
       // To prevent the map view from being displayed when the user clicks on the Land navigation tab.

webapp/src/components/AssetBrowse/AssetBrowse.types.ts

@@ -1,4 +1,3 @@
-import { RouterLocation } from 'connected-react-router'
 import { Dispatch } from 'redux'
 import { AssetType } from '../../modules/asset/types'
 import { browse, BrowseAction, fetchAssetsFromRoute, FetchAssetsFromRouteAction } from '../../modules/routing/actions'
@@ -24,12 +23,11 @@ export type Props = {
   onlyOnSale?: boolean
   onlySmart?: boolean
   onlyOnRent?: boolean
-  visitedLocations: RouterLocation<unknown>[]
 }
 
 export type MapStateProps = Pick<
   Props,
-  'isMap' | 'isFullscreen' | 'onlyOnSale' | 'viewInState' | 'section' | 'assetType' | 'onlySmart' | 'onlyOnRent' | 'visitedLocations'
+  'isMap' | 'isFullscreen' | 'onlyOnSale' | 'viewInState' | 'section' | 'assetType' | 'onlySmart' | 'onlyOnRent'
 >
 export type MapDispatchProps = Pick<Props, 'onSetView' | 'onFetchAssetsFromRoute' | 'onBrowse'>
 export type MapDispatch = Dispatch<SetViewAction | FetchAssetsFromRouteAction | BrowseAction>

webapp/src/components/AssetCard/AssetCard.container.ts

@@ -1,13 +1,11 @@
 import { connect } from 'react-redux'
-import { getLocation } from 'connected-react-router'
 import { RentalListing } from '@dcl/schemas'
 import { getAssetPrice, isNFT } from '../../modules/asset/utils'
 import { getData } from '../../modules/order/selectors'
 import { getActiveOrder } from '../../modules/order/utils'
 import { RootState } from '../../modules/reducer'
 import { getRentalById } from '../../modules/rental/selectors'
 import { getOpenRentalId } from '../../modules/rental/utils'
-import { locations } from '../../modules/routing/locations'
 import { getPageName, getSortBy, getWearablesUrlParams } from '../../modules/routing/selectors'
 import { PageName } from '../../modules/routing/types'
 import { isClaimingBackLandTransactionPending } from '../../modules/ui/browse/selectors'
@@ -31,11 +29,11 @@ const mapState = (state: RootState, ownProps: OwnProps): MapStateProps => {
 
   return {
     price,
-    showListedTag: pageName === PageName.ACCOUNT && Boolean(price) && getLocation(state).pathname !== locations.root(),
     isClaimingBackLandTransactionPending: isNFT(asset) ? isClaimingBackLandTransactionPending(state, asset) : false,
     rental: rentalOfNFT,
     showRentalChip: rentalOfNFT !== null && pageName === PageName.ACCOUNT,
     sortBy: getSortBy(state),
+    pageName,
     appliedFilters: {
       minPrice,
       maxPrice

webapp/src/components/AssetCard/AssetCard.spec.tsx

@@ -3,7 +3,7 @@ import { screen } from '@testing-library/react'
 import { BodyShape, ChainId, Network, NFTCategory, Rarity, WearableCategory } from '@dcl/schemas'
 import { Asset } from '../../modules/asset/types'
 import { INITIAL_STATE } from '../../modules/favorites/reducer'
-import { SortBy } from '../../modules/routing/types'
+import { PageName, SortBy } from '../../modules/routing/types'
 import { renderWithProviders } from '../../utils/test'
 import AssetCard from './AssetCard'
 import { Props as AssetCardProps } from './AssetCard.types'
@@ -20,6 +20,7 @@ function renderAssetCard(props: Partial<AssetCardProps> = {}) {
       rental={null}
       sortBy={SortBy.RECENTLY_LISTED}
       appliedFilters={{ maxPrice: '100', minPrice: '1' }}
+      pageName={PageName.ACCOUNT}
       {...props}
     />,
     {

webapp/src/components/AssetCard/AssetCard.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useMemo } from 'react'
 import { useInView } from 'react-intersection-observer'
-import { Link } from 'react-router-dom'
+import { Link, useLocation } from 'react-router-dom'
 import { Item, Network, RentalListing } from '@dcl/schemas'
 import { Profile } from 'decentraland-dapps/dist/containers'
 import { t } from 'decentraland-dapps/dist/modules/translation/utils'
@@ -16,7 +16,8 @@ import {
   isRentalListingExecuted,
   isRentalListingOpen
 } from '../../modules/rental/utils'
-import { SortBy } from '../../modules/routing/types'
+import { locations } from '../../modules/routing/locations'
+import { PageName, SortBy } from '../../modules/routing/types'
 import { AssetImage } from '../AssetImage'
 import { FavoritesCounter } from '../FavoritesCounter'
 import { Mana } from '../Mana'
@@ -80,7 +81,7 @@ const AssetCard = (props: Props) => {
     asset,
     isManager,
     price,
-    showListedTag,
+    pageName,
     showRentalChip: showRentalBubble,
     onClick,
     isClaimingBackLandTransactionPending,
@@ -91,6 +92,8 @@ const AssetCard = (props: Props) => {
 
   const { ref, inView } = useInView()
   const isMobile = useMobileMediaQuery()
+  const location = useLocation()
+  const showListedTag = pageName === PageName.ACCOUNT && Boolean(price) && location.pathname !== locations.root()
 
   const title = getAssetName(asset)
   const { parcel, estate, wearable, emote, ens } = asset.data

webapp/src/components/AssetCard/AssetCard.types.ts

@@ -1,13 +1,13 @@
 import { Order, RentalListing } from '@dcl/schemas'
 import { Asset } from '../../modules/asset/types'
-import { BrowseOptions } from '../../modules/routing/types'
+import { BrowseOptions, PageName } from '../../modules/routing/types'
 
 export type Props = {
   asset: Asset
   price: string | null
   order?: Order
   isManager?: boolean
-  showListedTag?: boolean
+  pageName: PageName
   onClick?: () => void
   isClaimingBackLandTransactionPending: boolean
   showRentalChip: boolean
@@ -18,6 +18,6 @@ export type Props = {
 
 export type MapStateProps = Pick<
   Props,
-  'showListedTag' | 'price' | 'showRentalChip' | 'rental' | 'isClaimingBackLandTransactionPending' | 'sortBy' | 'appliedFilters'
+  'pageName' | 'price' | 'showRentalChip' | 'rental' | 'isClaimingBackLandTransactionPending' | 'sortBy' | 'appliedFilters'
 >
 export type OwnProps = Pick<Props, 'asset' | 'order' | 'isManager'>

webapp/src/components/AssetList/AssetList.container.ts

@@ -8,15 +8,7 @@ import { FETCH_NFTS_REQUEST } from '../../modules/nft/actions'
 import { isLoadingNftsByView } from '../../modules/nft/selectors'
 import { RootState } from '../../modules/reducer'
 import { browse, clearFilters } from '../../modules/routing/actions'
-import {
-  getVendor,
-  getPageNumber,
-  getAssetType,
-  getSection,
-  getSearch,
-  hasFiltersEnabled,
-  getVisitedLocations
-} from '../../modules/routing/selectors'
+import { getVendor, getPageNumber, getAssetType, getSection, getSearch, hasFiltersEnabled } from '../../modules/routing/selectors'
 import { getBrowseAssets, getCount, getView } from '../../modules/ui/browse/selectors'
 import AssetList from './AssetList'
 import { MapStateProps, MapDispatch, MapDispatchProps } from './AssetList.types'
@@ -40,8 +32,7 @@ const mapState = (state: RootState): MapStateProps => {
       assetType === AssetType.ITEM
         ? isLoadingType(getLoadingItems(state), FETCH_ITEMS_REQUEST) || isLoadingFavoritedItems(state)
         : isLoadingType(loadingState, FETCH_NFTS_REQUEST),
-    hasFiltersEnabled: hasFiltersEnabled(state),
-    visitedLocations: getVisitedLocations(state)
+    hasFiltersEnabled: hasFiltersEnabled(state)
   }
 }
 

webapp/src/components/AssetList/AssetList.tsx

@@ -1,11 +1,12 @@
 import React, { useCallback, useMemo, useEffect } from 'react'
-import { Link, useLocation } from 'react-router-dom'
+import { Link, useHistory, useLocation } from 'react-router-dom'
 import { NFTCategory } from '@dcl/schemas'
 import { getAnalytics } from 'decentraland-dapps/dist/modules/analytics/utils'
 import { t, T } from 'decentraland-dapps/dist/modules/translation/utils'
 import { Card, Loader } from 'decentraland-ui'
 import { locations } from '../../modules/routing/locations'
 import { getCategoryFromSection } from '../../modules/routing/search'
+import { ExtendedHistory } from '../../modules/types'
 import { getMaxQuerySize, MAX_PAGE } from '../../modules/vendor/api'
 import * as events from '../../utils/events'
 import { AssetCard } from '../AssetCard'
@@ -15,23 +16,12 @@ import { Props } from './AssetList.types'
 import './AssetList.css'
 
 const AssetList = (props: Props) => {
-  const {
-    vendor,
-    section,
-    assetType,
-    assets,
-    page,
-    count,
-    search,
-    isLoading,
-    hasFiltersEnabled,
-    visitedLocations,
-    onBrowse,
-    isManager,
-    onClearFilters
-  } = props
+  const { vendor, section, assetType, assets, page, count, search, isLoading, hasFiltersEnabled, onBrowse, isManager, onClearFilters } =
+    props
 
   const location = useLocation()
+  const history = useHistory() as ExtendedHistory
+  const visitedLocations = history.getLastVisitedLocations()
 
   useEffect(() => {
     if (visitedLocations.length > 1) {

webapp/src/components/AssetList/AssetList.types.ts

@@ -1,4 +1,3 @@
-import { RouterLocation } from 'connected-react-router'
 import { Dispatch } from 'redux'
 import { Asset, AssetType } from '../../modules/asset/types'
 import { browse, BrowseAction, clearFilters, ClearFiltersAction } from '../../modules/routing/actions'
@@ -18,12 +17,11 @@ export type Props = {
   onBrowse: typeof browse
   onClearFilters: typeof clearFilters
   search: string
-  visitedLocations: RouterLocation<unknown>[]
 }
 
 export type MapStateProps = Pick<
   Props,
-  'vendor' | 'section' | 'assets' | 'page' | 'count' | 'isLoading' | 'assetType' | 'search' | 'hasFiltersEnabled' | 'visitedLocations'
+  'vendor' | 'section' | 'assets' | 'page' | 'count' | 'isLoading' | 'assetType' | 'search' | 'hasFiltersEnabled'
 >
 export type MapDispatchProps = Pick<Props, 'onBrowse' | 'onClearFilters'>
 export type MapDispatch = Dispatch<BrowseAction | ClearFiltersAction>

webapp/src/components/Routes/Routes.container.ts

@@ -1,14 +1,18 @@
 import { connect } from 'react-redux'
-import { withRouter } from 'react-router'
+import { withRouter } from 'react-router-dom'
+import { Dispatch } from 'redux'
+import { closeAllModals } from 'decentraland-dapps/dist/modules/modal/actions'
 import { getIsMaintenanceEnabled } from '../../modules/features/selectors'
 import { RootState } from '../../modules/reducer'
 import Routes from './Routes'
-import { MapStateProps } from './Routes.types'
+import { MapDispatchProps, MapStateProps } from './Routes.types'
 
 const mapState = (state: RootState): MapStateProps => ({
   inMaintenance: getIsMaintenanceEnabled(state)
 })
 
-const mapDispatch = (_: any) => ({})
+const mapDispatch = (dispatch: Dispatch): MapDispatchProps => ({
+  onLocationChanged: () => dispatch(closeAllModals())
+})
 
 export default withRouter(connect(mapState, mapDispatch)(Routes))

webapp/src/components/Routes/Routes.tsx

@@ -1,5 +1,5 @@
-import { useCallback } from 'react'
-import { Switch, Route, Redirect, RouteComponentProps } from 'react-router-dom'
+import { useCallback, useEffect } from 'react'
+import { Switch, Route, Redirect, RouteComponentProps, useLocation } from 'react-router-dom'
 import Intercom from 'decentraland-dapps/dist/components/Intercom'
 import { usePageTracking } from 'decentraland-dapps/dist/hooks/usePageTracking'
 import { t } from 'decentraland-dapps/dist/modules/translation/utils'
@@ -33,8 +33,13 @@ import { SuccessPage } from '../SuccessPage'
 import { TransferPage } from '../TransferPage'
 import { Props } from './Routes.types'
 
-const Routes = ({ inMaintenance }: Props) => {
+const Routes = ({ inMaintenance, onLocationChanged }: Props) => {
   usePageTracking()
+  const location = useLocation()
+
+  useEffect(() => {
+    onLocationChanged()
+  }, [location])
 
   const APP_ID = config.get('INTERCOM_APP_ID')
   const renderItemAssetPage = useCallback(() => <AssetPage type={AssetType.ITEM} />, [])

webapp/src/components/Routes/Routes.types.ts

@@ -1,10 +1,13 @@
-import { RouteComponentProps } from 'react-router'
+import { RouteComponentProps } from 'react-router-dom'
+import { closeAllModals } from 'decentraland-dapps/dist/modules/modal/actions'
 
 export type Props = RouteComponentProps & {
   inMaintenance: boolean
+  onLocationChanged: typeof closeAllModals
 }
 
 export type MapStateProps = Pick<Props, 'inMaintenance'>
+export type MapDispatchProps = Pick<Props, 'onLocationChanged'>
 
 export type State = {
   hasError: boolean

webapp/src/components/SuccessPage/SuccessPage.container.ts

@@ -1,5 +1,4 @@
 import { connect } from 'react-redux'
-import { getSearch } from 'connected-react-router'
 import { Dispatch } from 'redux'
 import { ChainId } from '@dcl/schemas'
 import { openModal } from 'decentraland-dapps/dist/modules/modal/actions'
@@ -13,7 +12,7 @@ import { getTokenIdFromLogs } from './utils'
 import { MapDispatchProps, MapStateProps } from './SuccessPage.types'
 
 const mapState = (state: RootState): MapStateProps => {
-  const search = new URLSearchParams(getSearch(state))
+  const search = new URLSearchParams(window.location.search)
   const transaction = getTransaction(state, search.get('txHash') || '')
   const address = getAddress(state)
   const isLoadingTx = Boolean(transaction && transaction.status !== TransactionStatus.CONFIRMED)

webapp/src/modules/modal/sagas.ts

@@ -1,5 +1,4 @@
-import { LOCATION_CHANGE } from 'connected-react-router'
-import { delay, put, select, takeEvery } from 'redux-saga/effects'
+import { put, select, takeEvery } from 'redux-saga/effects'
 import { closeModal, closeAllModals, openModal } from 'decentraland-dapps/dist/modules/modal/actions'
 import { getOpenModals } from 'decentraland-dapps/dist/modules/modal/selectors'
 import {
@@ -19,7 +18,6 @@ import {
 } from '../rental/actions'
 
 export function* modalSaga() {
-  yield takeEvery(LOCATION_CHANGE, handleLocationChange)
   yield takeEvery(
     [
       CLAIM_ASSET_SUCCESS,
@@ -37,14 +35,6 @@ export function* modalSaga() {
   yield takeEvery(ACCEPT_RENTAL_LISTING_SUCCESS, handleOpenRentConfirmationModal)
 }
 
-function* handleLocationChange() {
-  const openModals = (yield select(getOpenModals)) as ReturnType<typeof getOpenModals>
-  if (Object.keys(openModals).length > 0) {
-    yield delay(100)
-    yield handleCloseAllModals()
-  }
-}
-
 function* handleCloseAllModals() {
   yield put(closeAllModals())
 }

webapp/src/modules/reducer.ts

@@ -26,7 +26,6 @@ import { nftReducer as nft } from './nft/reducer'
 import { orderReducer as order } from './order/reducer'
 import { proximityReducer as proximity } from './proximity/reducer'
 import { rentalReducer as rental } from './rental/reducer'
-import { routingReducer as routing } from './routing/reducer'
 import { saleReducer as sale } from './sale/reducer'
 import { storeReducer as store } from './store/reducer'
 import { tileReducer as tile } from './tile/reducer'
@@ -44,7 +43,6 @@ export const createRootReducer = (history: History) =>
     rental,
     profile,
     proximity,
-    routing,
     storage,
     tile,
     toast,