feat: remove connected react router (#379)

package.json

@@ -12,7 +12,6 @@
     "@maticnetwork/maticjs-ethers": "^1.0.3",
     "@sentry/react": "^7.64.0",
     "@typechain/ethers-v5": "^10.0.0",
-    "connected-react-router": "^6.9.1",
     "decentraland-dapps": "^22.1.0",
     "decentraland-transactions": "^2.6.0",
     "decentraland-ui": "^6.1.0",

src/components/Routes/Routes.container.tsx

@@ -1,13 +1,18 @@
 import { connect } from 'react-redux'
+import { closeAllModals } from 'decentraland-dapps/dist/modules/modal'
 import { isConnected } from 'decentraland-dapps/dist/modules/wallet/selectors'
 import { getIsSubscriptionEnabled } from '../../modules/features/selectors'
 import { RootState } from '../../modules/reducer'
 import Routes from './Routes'
-import { MapStateProps } from './Routes.types'
+import { MapDispatch, MapDispatchProps, MapStateProps } from './Routes.types'
 
 const mapState = (state: RootState): MapStateProps => ({
   isConnected: isConnected(state),
   isSubscriptionEnabled: !!getIsSubscriptionEnabled(state)
 })
 
-export default connect(mapState)(Routes)
+const mapDispatch = (dispatch: MapDispatch): MapDispatchProps => ({
+  closeAllModals: () => dispatch(closeAllModals())
+})
+
+export default connect(mapState, mapDispatch)(Routes)

src/components/Routes/Routes.tsx

@@ -1,4 +1,5 @@
-import { Redirect, Route, Switch } from 'react-router-dom'
+import { useEffect } from 'react'
+import { Redirect, Route, Switch, useLocation } from 'react-router-dom'
 import Intercom from 'decentraland-dapps/dist/components/Intercom'
 import { usePageTracking } from 'decentraland-dapps/dist/hooks/usePageTracking'
 import { config } from '../../config'
@@ -10,10 +11,15 @@ import { ProtectedRoute } from '../ProtectedRoute'
 import { SignInPage } from '../SignInPage'
 import { Props } from './Routes.types'
 
-const Routes = ({ isSubscriptionEnabled }: Props) => {
+const Routes = ({ isSubscriptionEnabled, closeAllModals }: Props) => {
   const APP_ID = config.get('INTERCOM_APP_ID')
+  const location = useLocation()
   usePageTracking()
 
+  useEffect(() => {
+    closeAllModals()
+  }, [location.pathname])
+
   return (
     <>
       <Switch>

src/components/Routes/Routes.types.ts

@@ -3,8 +3,10 @@ import { Dispatch } from 'redux'
 export type Props = {
   isConnected: boolean
   isSubscriptionEnabled: boolean
+  closeAllModals: () => void
 }
+
 export type MapStateProps = Pick<Props, 'isConnected' | 'isSubscriptionEnabled'>
 
-export type MapDispatchProps = Props
+export type MapDispatchProps = Pick<Props, 'closeAllModals'>
 export type MapDispatch = Dispatch

src/index.tsx

@@ -2,7 +2,7 @@
 import 'semantic-ui-css/semantic.min.css'
 import ReactDOM 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'
@@ -30,9 +30,9 @@ const component = (
         <ToastProvider>
           <WalletProvider>
             <ModalProvider components={modals}>
-              <ConnectedRouter history={history}>
+              <Router history={history}>
                 <Routes />
-              </ConnectedRouter>
+              </Router>
             </ModalProvider>
           </WalletProvider>
         </ToastProvider>

src/modules/modal/sagas.ts

@@ -1,23 +1,11 @@
-import { LOCATION_CHANGE } from 'connected-react-router'
-import { closeAllModals, closeModal } from 'decentraland-dapps/dist/modules/modal/actions'
-import { ModalState } from 'decentraland-dapps/dist/modules/modal/reducer'
-import { getOpenModals } from 'decentraland-dapps/dist/modules/modal/selectors'
-import { delay, put, select, takeEvery } from 'redux-saga/effects'
+import { closeModal } from 'decentraland-dapps/dist/modules/modal/actions'
+import { put, takeEvery } from 'redux-saga/effects'
 import { IMPORT_WITHDRAWAL_SUCCESS } from '../mana/actions'
 
 export function* modalSaga() {
-  yield takeEvery(LOCATION_CHANGE, handleLocationChange)
   yield takeEvery(IMPORT_WITHDRAWAL_SUCCESS, handleImportWithdrawalSuccess)
 }
 
-function* handleLocationChange() {
-  const openModals: ModalState = yield select(getOpenModals)
-  if (Object.keys(openModals).length > 0) {
-    yield delay(100)
-    yield put(closeAllModals())
-  }
-}
-
 function* handleImportWithdrawalSuccess() {
   yield put(closeModal('ImportWithdrawalModal'))
 }

src/modules/reducer.ts

@@ -1,4 +1,3 @@
-import { connectRouter } from 'connected-react-router'
 import { authorizationReducer as authorization } from 'decentraland-dapps/dist/modules/authorization/reducer'
 import { featuresReducer as features } from 'decentraland-dapps/dist/modules/features/reducer'
 import { gatewayReducer as gateway } from 'decentraland-dapps/dist/modules/gateway/reducer'
@@ -9,12 +8,11 @@ import { toastReducer as toast } from 'decentraland-dapps/dist/modules/toast/red
 import { transactionReducer as transaction } from 'decentraland-dapps/dist/modules/transaction/reducer'
 import { translationReducer as translation } from 'decentraland-dapps/dist/modules/translation/reducer'
 import { walletReducer as wallet } from 'decentraland-dapps/dist/modules/wallet/reducer'
-import { History } from 'history'
 import { combineReducers } from 'redux'
 import { manaReducer as mana } from './mana/reducer'
 import { subscriptionReducer as subscription } from './subscription/reducer'
 
-export const createRootReducer = (history: History) =>
+export const createRootReducer = () =>
   combineReducers({
     authorization,
     profile,
@@ -27,8 +25,7 @@ export const createRootReducer = (history: History) =>
     toast,
     gateway,
     features,
-    subscription,
-    router: connectRouter(history)
+    subscription
   })
 
 export type RootState = ReturnType<ReturnType<typeof createRootReducer>>

src/modules/sagas.ts

@@ -4,7 +4,6 @@ import { featuresSaga } from 'decentraland-dapps/dist/modules/features/sagas'
 import { ApplicationName } from 'decentraland-dapps/dist/modules/features/types'
 import { createGatewaySaga } from 'decentraland-dapps/dist/modules/gateway/sagas'
 import { FiatGateway } from 'decentraland-dapps/dist/modules/gateway/types'
-import { locationSaga } from 'decentraland-dapps/dist/modules/location/sagas'
 import { NotificationsAPI } from 'decentraland-dapps/dist/modules/notifications'
 import { createProfileSaga } from 'decentraland-dapps/dist/modules/profile/sagas'
 import { toastSaga } from 'decentraland-dapps/dist/modules/toast/sagas'
@@ -71,7 +70,6 @@ export function* rootSaga(notificationsAPI: NotificationsAPI) {
     walletSaga(),
     translationSaga(),
     modalSaga(),
-    locationSaga(),
     localLocationSaga(),
     featuresSaga({
       polling: {

src/modules/store.ts

@@ -1,6 +1,5 @@
 import { localStorageGetIdentity } from '@dcl/single-sign-on-client'
 import { Env } from '@dcl/ui-env'
-import { routerMiddleware } from 'connected-react-router'
 import { createAnalyticsMiddleware } from 'decentraland-dapps/dist/modules/analytics/middleware'
 import { SET_PURCHASE } from 'decentraland-dapps/dist/modules/gateway/actions'
 import { NotificationsAPI } from 'decentraland-dapps/dist/modules/notifications'
@@ -21,7 +20,7 @@ import { rootSaga } from './sagas'
 const basename = /^decentraland.(zone|org|today)$/.test(window.location.host) ? '/account' : undefined
 
 export const history = createBrowserHistory({ basename })
-const rootReducer = storageReducerWrapper(createRootReducer(history))
+const rootReducer = storageReducerWrapper(createRootReducer())
 
 const sagasMiddleware = createSagasMiddleware({ context: { history } })
 const loggerMiddleware = createLogger({
@@ -42,14 +41,7 @@ const { storageMiddleware, loadStorageMiddleware } = createStorageMiddleware({
 })
 const analyticsMiddleware = createAnalyticsMiddleware(config.get('SEGMENT_API_KEY'))
 
-const middleware = applyMiddleware(
-  sagasMiddleware,
-  routerMiddleware(history),
-  loggerMiddleware,
-  transactionMiddleware,
-  storageMiddleware,
-  analyticsMiddleware
-)
+const middleware = applyMiddleware(sagasMiddleware, loggerMiddleware, transactionMiddleware, storageMiddleware, analyticsMiddleware)
 const enhancer = compose(middleware)
 const store = createStore(rootReducer, enhancer)
 

src/specs/store.ts

@@ -1,5 +1,4 @@
 import { localStorageGetIdentity } from '@dcl/single-sign-on-client'
-import { routerMiddleware } from 'connected-react-router'
 import { SET_PURCHASE } from 'decentraland-dapps/dist/modules/gateway'
 import { NotificationsAPI } from 'decentraland-dapps/dist/modules/notifications'
 import { createStorageMiddleware } from 'decentraland-dapps/dist/modules/storage/middleware'
@@ -21,8 +20,8 @@ import { rootSaga } from '../modules/sagas'
 
 export function initTestStore(preloadedState = {}) {
   const testHistory = createMemoryHistory({ initialEntries: ['/marketplace'] })
-  const rootReducer = storageReducerWrapper(createRootReducer(testHistory))
-  const sagasMiddleware = createSagasMiddleware()
+  const rootReducer = storageReducerWrapper(createRootReducer())
+  const sagasMiddleware = createSagasMiddleware({ context: { history: testHistory } })
   const transactionMiddleware = createTransactionMiddleware()
   const { storageMiddleware, loadStorageMiddleware } = createStorageMiddleware({
     storageKey: 'account',
@@ -35,7 +34,7 @@ export function initTestStore(preloadedState = {}) {
     migrations
   })
 
-  const middleware = applyMiddleware(sagasMiddleware, routerMiddleware(testHistory), transactionMiddleware, storageMiddleware)
+  const middleware = applyMiddleware(sagasMiddleware, transactionMiddleware, storageMiddleware)
   const enhancer = compose(middleware)
   const store = createStore(rootReducer, preloadedState, enhancer)
 

src/specs/utils.tsx

@@ -1,6 +1,6 @@
 import { Provider } from 'react-redux'
+import { Router } from 'react-router-dom'
 import { render } from '@testing-library/react'
-import { ConnectedRouter } from 'connected-react-router'
 import { en } from 'decentraland-dapps/dist/modules/translation/defaults'
 import { mergeTranslations } from 'decentraland-dapps/dist/modules/translation/utils'
 import TranslationProvider from 'decentraland-dapps/dist/providers/TranslationProvider'
@@ -38,7 +38,7 @@ export function renderWithProviders(
     return (
       <Provider store={initializedStore}>
         <TranslationProvider locales={['en', 'en-EN']}>
-          <ConnectedRouter history={history}>{children}</ConnectedRouter>
+          <Router history={history}>{children}</Router>
         </TranslationProvider>
       </Provider>
     )