From d7863eef60bf3d332ce0348278a44eddbd889cff Mon Sep 17 00:00:00 2001 From: Melisa Anabella Rossi Date: Tue, 11 Jun 2024 15:12:27 -0300 Subject: [PATCH] feat: remove connected react router (#379) --- package-lock.json | 11 +++++++---- package.json | 1 - src/components/Routes/Routes.container.tsx | 9 +++++++-- src/components/Routes/Routes.tsx | 10 ++++++++-- src/components/Routes/Routes.types.ts | 4 +++- src/index.tsx | 6 +++--- src/modules/modal/sagas.ts | 16 ++-------------- src/modules/reducer.ts | 7 ++----- src/modules/sagas.ts | 2 -- src/modules/store.ts | 12 ++---------- src/specs/store.ts | 7 +++---- src/specs/utils.tsx | 4 ++-- 12 files changed, 39 insertions(+), 50 deletions(-) diff --git a/package-lock.json b/package-lock.json index 31e23365..6b754f8f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -17,7 +17,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", @@ -9235,6 +9234,7 @@ "node_modules/connected-react-router": { "version": "6.9.1", "license": "MIT", + "peer": true, "dependencies": { "lodash.isequalwith": "^4.4.0", "prop-types": "^15.7.2" @@ -13657,7 +13657,8 @@ "node_modules/immutable": { "version": "4.1.0", "license": "MIT", - "optional": true + "optional": true, + "peer": true }, "node_modules/impetus": { "version": "0.8.8", @@ -17737,7 +17738,8 @@ }, "node_modules/lodash.isequalwith": { "version": "4.4.0", - "license": "MIT" + "license": "MIT", + "peer": true }, "node_modules/lodash.isfunction": { "version": "3.0.9", @@ -20413,7 +20415,8 @@ "node_modules/seamless-immutable": { "version": "7.1.4", "license": "BSD-3-Clause", - "optional": true + "optional": true, + "peer": true }, "node_modules/secp256k1": { "version": "4.0.3", diff --git a/package.json b/package.json index 189cc1c9..6cd62c20 100644 --- a/package.json +++ b/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", diff --git a/src/components/Routes/Routes.container.tsx b/src/components/Routes/Routes.container.tsx index 90a4b161..6e9355cf 100644 --- a/src/components/Routes/Routes.container.tsx +++ b/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) diff --git a/src/components/Routes/Routes.tsx b/src/components/Routes/Routes.tsx index de1c35bd..7576642c 100644 --- a/src/components/Routes/Routes.tsx +++ b/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 ( <> diff --git a/src/components/Routes/Routes.types.ts b/src/components/Routes/Routes.types.ts index 04cbb443..d5fcc321 100644 --- a/src/components/Routes/Routes.types.ts +++ b/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 -export type MapDispatchProps = Props +export type MapDispatchProps = Pick export type MapDispatch = Dispatch diff --git a/src/index.tsx b/src/index.tsx index b2429970..e1a09236 100644 --- a/src/index.tsx +++ b/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 = ( - + - + diff --git a/src/modules/modal/sagas.ts b/src/modules/modal/sagas.ts index 53d58e85..9040e276 100644 --- a/src/modules/modal/sagas.ts +++ b/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')) } diff --git a/src/modules/reducer.ts b/src/modules/reducer.ts index 20464cba..4ef68b91 100644 --- a/src/modules/reducer.ts +++ b/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> diff --git a/src/modules/sagas.ts b/src/modules/sagas.ts index 8bd0f092..556415a6 100644 --- a/src/modules/sagas.ts +++ b/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: { diff --git a/src/modules/store.ts b/src/modules/store.ts index 4af5ca56..29ec28f7 100644 --- a/src/modules/store.ts +++ b/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) diff --git a/src/specs/store.ts b/src/specs/store.ts index b8c3fef4..98229fc9 100644 --- a/src/specs/store.ts +++ b/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) diff --git a/src/specs/utils.tsx b/src/specs/utils.tsx index cb5bdc1d..734aa276 100644 --- a/src/specs/utils.tsx +++ b/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 ( - {children} + {children} )