feat: remove connected react router

webapp/package.json

@@ -16,13 +16,12 @@
     "@well-known-components/fetch-component": "^2.0.2",
     "buffer": "^6.0.3",
     "classnames": "^2.3.1",
-    "connected-react-router": "^6.9.1",
     "date-fns": "^2.23.0",
     "dcl-catalyst-client": "^21.6.0",
     "dcl-catalyst-commons": "^9.0.1",
     "decentraland-connect": "^6.3.1",
     "decentraland-crypto-fetch": "^1.0.3",
-    "decentraland-dapps": "^22.0.0",
+    "decentraland-dapps": "^23.0.0",
     "decentraland-transactions": "^2.7.0",
     "decentraland-ui": "^6.1.1",
     "ethers": "^5.6.8",
@@ -123,4 +122,4 @@
     "type": "git",
     "url": "https://github.com/decentraland/marketplace.git"
   }
-}
+}

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

@@ -1,9 +1,11 @@
 import { connect } from 'react-redux'
 import { withRouter } from 'react-router-dom'
+import { Location } from 'history'
 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 { locationChanged } from '../../modules/routing/actions'
 import Routes from './Routes'
 import { MapDispatchProps, MapStateProps } from './Routes.types'
 
@@ -12,7 +14,10 @@ const mapState = (state: RootState): MapStateProps => ({
 })
 
 const mapDispatch = (dispatch: Dispatch): MapDispatchProps => ({
-  onLocationChanged: () => dispatch(closeAllModals())
+  onLocationChanged: (location: Location) => {
+    dispatch(closeAllModals())
+    dispatch(locationChanged(location))
+  }
 })
 
 export default withRouter(connect(mapState, mapDispatch)(Routes))

webapp/src/components/Routes/Routes.tsx

@@ -38,7 +38,7 @@ const Routes = ({ inMaintenance, onLocationChanged }: Props) => {
   const location = useLocation()
 
   useEffect(() => {
-    onLocationChanged()
+    onLocationChanged(location)
   }, [location])
 
   const APP_ID = config.get('INTERCOM_APP_ID')

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

@@ -1,9 +1,9 @@
 import { RouteComponentProps } from 'react-router-dom'
-import { closeAllModals } from 'decentraland-dapps/dist/modules/modal/actions'
+import { Location } from 'history'
 
 export type Props = RouteComponentProps & {
   inMaintenance: boolean
-  onLocationChanged: typeof closeAllModals
+  onLocationChanged: (location: Location) => void
 }
 
 export type MapStateProps = Pick<Props, 'inMaintenance'>

webapp/src/index.tsx

@@ -1,6 +1,6 @@
 import { render } from 'react-dom'
 import { Provider } from 'react-redux'
-import { ConnectedRouter } from 'connected-react-router'
+import { Router } from 'react-router-dom'
 import ModalProvider from 'decentraland-dapps/dist/providers/ModalProvider'
 import ToastProvider from 'decentraland-dapps/dist/providers/ToastProvider'
 import TranslationProvider from 'decentraland-dapps/dist/providers/TranslationProvider'
@@ -23,14 +23,14 @@ function main() {
     <Provider store={store}>
       <TranslationProvider locales={Object.keys(locales)}>
         <WalletProvider>
-          <ConnectedRouter history={history}>
+          <Router history={history}>
             <ToastProvider>
               <ModalProvider components={modals}>
                 <ScrollToTop />
                 <Routes />
               </ModalProvider>
             </ToastProvider>
-          </ConnectedRouter>
+          </Router>
         </WalletProvider>
       </TranslationProvider>
     </Provider>

webapp/src/modules/favorites/sagas.ts

@@ -1,15 +1,17 @@
-import { History } from 'history'
+import { History, Location } from 'history'
 import { call, getContext, put, race, select, take, takeEvery } from 'redux-saga/effects'
 import { CatalogFilters, Item } from '@dcl/schemas'
 import { closeModal, CloseModalAction, CLOSE_MODAL, openModal } from 'decentraland-dapps/dist/modules/modal/actions'
 import { ConnectWalletSuccessAction, CONNECT_WALLET_FAILURE, CONNECT_WALLET_SUCCESS } from 'decentraland-dapps/dist/modules/wallet/actions'
 import { AuthIdentity } from 'decentraland-crypto-fetch'
 import { isErrorWithMessage } from '../../lib/error'
+import { getListIdFromLocation } from '../../utils/routing'
 import { getIsMarketplaceServerEnabled } from '../features/selectors'
 import { getIdentity as getAccountIdentity } from '../identity/utils'
 import { getData as getItemsData } from '../item/selectors'
 import { ItemBrowseOptions } from '../item/types'
 import { locations } from '../routing/locations'
+import { getLocation } from '../routing/selectors'
 import { SortDirection } from '../routing/types'
 import { MARKETPLACE_SERVER_URL, NFT_SERVER_URL } from '../vendor/decentraland'
 import { CatalogAPI } from '../vendor/decentraland/catalog/api'
@@ -65,7 +67,7 @@ import {
   unpickItemFailure,
   BULK_PICK_FAILURE
 } from './actions'
-import { getList, getListId, isOwnerUnpickingFromCurrentList } from './selectors'
+import { getList, isOwnerUnpickingFromCurrentList } from './selectors'
 import { convertListsBrowseSortByIntoApiSortBy } from './utils'
 
 export function* favoritesSaga(getIdentity: () => AuthIdentity | undefined) {
@@ -125,7 +127,8 @@ export function* favoritesSaga(getIdentity: () => AuthIdentity | undefined) {
       if (address) yield call(getAccountIdentity)
 
       let items: Item[] = []
-      const listId: string | null = (yield select(getListId)) as ReturnType<typeof getListId>
+      const location: Location = yield select(getLocation)
+      const listId: string | null = getListIdFromLocation(location)
       if (!listId) {
         throw new Error('List id not found')
       }

webapp/src/modules/favorites/selectors.spec.ts

@@ -1,4 +1,3 @@
-import { match } from 'react-router-dom'
 import { Item } from '@dcl/schemas'
 import { WalletState } from 'decentraland-dapps/dist/modules/wallet'
 import { getDefaultState } from '../../tests/defaultStore'
@@ -22,7 +21,6 @@ import {
   isLoadingFavoritedItems,
   getFavoritesDataByItemId,
   getIsPickedByUser,
-  getListId,
   getLoading,
   getState,
   isPickingOrUnpicking,
@@ -161,25 +159,6 @@ describe('when getting the count of favorites an item has', () => {
   })
 })
 
-describe('when getting the listId from the pathname', () => {
-  let listId: string
-  let listIdMatch: match<{ listId: string }>
-
-  beforeEach(() => {
-    listId = 'list-id'
-    listIdMatch = {
-      params: {
-        listId
-      },
-      path: locations.list('list-id')
-    } as match<{ listId: string }>
-  })
-
-  it('should return the listId that comes after /lists', () => {
-    expect(getListId.resultFunc(listIdMatch)).toBe(listId)
-  })
-})
-
 describe('when getting if the favorited items are being loaded', () => {
   describe("and there's no favorited items request action in the loading state", () => {
     it('should return false', () => {
@@ -406,7 +385,7 @@ describe('when getting if the owner of the current list is unpicking an item fro
     ]
     state = {
       ...state,
-      router: {
+      routing: {
         location: {
           pathname: locations.list('aListId')
         },
@@ -451,7 +430,7 @@ describe('when getting if the owner of the current list is unpicking an item fro
 
       describe('and the item is being unpicked from the current list', () => {
         beforeEach(() => {
-          state.router.location.pathname = locations.list(unpickedFrom[0].id)
+          state.routing.location.pathname = locations.list(unpickedFrom[0].id)
         })
 
         it('should return false', () => {
@@ -461,7 +440,7 @@ describe('when getting if the owner of the current list is unpicking an item fro
 
       describe("and the item isn't being unpicked from the current list", () => {
         beforeEach(() => {
-          state.router.location.pathname = locations.list('someOtherId')
+          state.routing.location.pathname = locations.list('someOtherId')
         })
 
         it('should return false', () => {
@@ -485,7 +464,7 @@ describe('when getting if the owner of the current list is unpicking an item fro
 
       describe('and the item is being unpicked from the current list', () => {
         beforeEach(() => {
-          state.router.location.pathname = locations.list(unpickedFrom[0].id)
+          state.routing.location.pathname = locations.list(unpickedFrom[0].id)
         })
 
         it('should return true', () => {
@@ -495,7 +474,7 @@ describe('when getting if the owner of the current list is unpicking an item fro
 
       describe("and the item isn't being unpicked from the current list", () => {
         beforeEach(() => {
-          state.router.location.pathname = locations.list('someOtherId')
+          state.routing.location.pathname = locations.list('someOtherId')
         })
 
         it('should return false', () => {
@@ -540,7 +519,7 @@ describe('when getting if the owner of the current list is unpicking an item fro
 
       describe('and the item is being unpicked from the current list', () => {
         beforeEach(() => {
-          state.router.location.pathname = locations.list(unpickedFrom[0].id)
+          state.routing.location.pathname = locations.list(unpickedFrom[0].id)
         })
 
         it('should return true', () => {
@@ -550,7 +529,7 @@ describe('when getting if the owner of the current list is unpicking an item fro
 
       describe("and the item isn't being unpicked from the current list", () => {
         beforeEach(() => {
-          state.router.location.pathname = locations.list('someOtherId')
+          state.routing.location.pathname = locations.list('someOtherId')
         })
 
         it('should return false', () => {
@@ -574,7 +553,7 @@ describe('when getting if the owner of the current list is unpicking an item fro
 
       describe('and the item is being unpicked from the current list', () => {
         beforeEach(() => {
-          state.router.location.pathname = locations.list(unpickedFrom[0].id)
+          state.routing.location.pathname = locations.list(unpickedFrom[0].id)
         })
 
         it('should return true', () => {
@@ -584,7 +563,7 @@ describe('when getting if the owner of the current list is unpicking an item fro
 
       describe("and the item isn't being unpicked from the current list", () => {
         beforeEach(() => {
-          state.router.location.pathname = locations.list('someOtherId')
+          state.routing.location.pathname = locations.list('someOtherId')
         })
 
         it('should return false', () => {