Replace connected-react-router with use of withRouter()

11 files changed, 64 insertions, 90 deletions

diff --git a/gui/src/renderer/app.tsx b/gui/src/renderer/app.tsx
index 4d7b9e9931..d7d5b8bf29 100644
--- a/gui/src/renderer/app.tsx
+++ b/gui/src/renderer/app.tsx
@@ -1,12 +1,8 @@
-import {
-  ConnectedRouter,
-  push as pushHistory,
-  replace as replaceHistory,
-} from 'connected-react-router';
 import { ipcRenderer, shell, webFrame } from 'electron';
 import log from 'electron-log';
 import * as React from 'react';
 import { Provider } from 'react-redux';
+import { Router } from 'react-router';
 import { bindActionCreators } from 'redux';
 
 import ErrorBoundary from './components/ErrorBoundary';
@@ -77,20 +73,13 @@ const SUPPORTED_LOCALE_LIST = [
 
 export default class AppRenderer {
   private history = new History('/');
-  private reduxStore = configureStore(this.history);
+  private reduxStore = configureStore();
   private reduxActions = {
     account: bindActionCreators(accountActions, this.reduxStore.dispatch),
     connection: bindActionCreators(connectionActions, this.reduxStore.dispatch),
     settings: bindActionCreators(settingsActions, this.reduxStore.dispatch),
     version: bindActionCreators(versionActions, this.reduxStore.dispatch),
     userInterface: bindActionCreators(userInterfaceActions, this.reduxStore.dispatch),
-    history: bindActionCreators(
-      {
-        push: pushHistory,
-        replace: replaceHistory,
-      },
-      this.reduxStore.dispatch,
-    ),
   };
 
   private locale = 'en';
@@ -229,11 +218,11 @@ export default class AppRenderer {
     return (
       <AppContext.Provider value={{ app: this }}>
         <Provider store={this.reduxStore}>
-          <ConnectedRouter history={this.history}>
+          <Router history={this.history}>
             <ErrorBoundary>
               <AppRoutes />
             </ErrorBoundary>
-          </ConnectedRouter>
+          </Router>
         </Provider>
       </AppContext.Provider>
     );
diff --git a/gui/src/renderer/containers/AccountPage.tsx b/gui/src/renderer/containers/AccountPage.tsx
index 012427b94d..accd4287b2 100644
--- a/gui/src/renderer/containers/AccountPage.tsx
+++ b/gui/src/renderer/containers/AccountPage.tsx
@@ -1,6 +1,5 @@
-import { goBack } from 'connected-react-router';
 import { connect } from 'react-redux';
-import { bindActionCreators } from 'redux';
+import { RouteComponentProps, withRouter } from 'react-router';
 import { links } from '../../config.json';
 import consumePromise from '../../shared/promise';
 import Account from '../components/Account';
@@ -14,17 +13,16 @@ const mapStateToProps = (state: IReduxState) => ({
   expiryLocale: state.userInterface.locale,
   isOffline: state.connection.isBlocked,
 });
-const mapDispatchToProps = (dispatch: ReduxDispatch, props: IAppContext) => {
-  const history = bindActionCreators({ goBack }, dispatch);
+const mapDispatchToProps = (_dispatch: ReduxDispatch, props: RouteComponentProps & IAppContext) => {
   return {
     onLogout: () => {
       consumePromise(props.app.logout());
     },
     onClose: () => {
-      history.goBack();
+      props.history.goBack();
     },
     onBuyMore: () => props.app.openLinkWithAuth(links.purchase),
   };
 };
 
-export default withAppContext(connect(mapStateToProps, mapDispatchToProps)(Account));
+export default withAppContext(withRouter(connect(mapStateToProps, mapDispatchToProps)(Account)));
diff --git a/gui/src/renderer/containers/AdvancedSettingsPage.tsx b/gui/src/renderer/containers/AdvancedSettingsPage.tsx
index ddadca983d..6dec67cf4d 100644
--- a/gui/src/renderer/containers/AdvancedSettingsPage.tsx
+++ b/gui/src/renderer/containers/AdvancedSettingsPage.tsx
@@ -1,7 +1,6 @@
-import { goBack, push } from 'connected-react-router';
 import log from 'electron-log';
 import { connect } from 'react-redux';
-import { bindActionCreators } from 'redux';
+import { RouteComponentProps, withRouter } from 'react-router';
 import { BridgeState, RelayProtocol, TunnelProtocol } from '../../shared/daemon-rpc-types';
 import RelaySettingsBuilder from '../../shared/relay-settings-builder';
 import AdvancedSettings from '../components/AdvancedSettings';
@@ -51,11 +50,10 @@ const mapRelaySettingsToProtocolAndPort = (relaySettings: RelaySettingsRedux) =>
   }
 };
 
-const mapDispatchToProps = (dispatch: ReduxDispatch, props: IAppContext) => {
-  const history = bindActionCreators({ push, goBack }, dispatch);
+const mapDispatchToProps = (_dispatch: ReduxDispatch, props: RouteComponentProps & IAppContext) => {
   return {
     onClose: () => {
-      history.goBack();
+      props.history.goBack();
     },
     setOpenVpnRelayProtocolAndPort: async (protocol?: RelayProtocol, port?: number) => {
       const relayUpdate = RelaySettingsBuilder.normal()
@@ -154,9 +152,11 @@ const mapDispatchToProps = (dispatch: ReduxDispatch, props: IAppContext) => {
         log.error('Failed to update mtu value', e.message);
       }
     },
-    onViewWireguardKeys: () => history.push('/settings/advanced/wireguard-keys'),
-    onViewLinuxSplitTunneling: () => history.push('/settings/advanced/linux-split-tunneling'),
+    onViewWireguardKeys: () => props.history.push('/settings/advanced/wireguard-keys'),
+    onViewLinuxSplitTunneling: () => props.history.push('/settings/advanced/linux-split-tunneling'),
   };
 };
 
-export default withAppContext(connect(mapStateToProps, mapDispatchToProps)(AdvancedSettings));
+export default withAppContext(
+  withRouter(connect(mapStateToProps, mapDispatchToProps)(AdvancedSettings)),
+);
diff --git a/gui/src/renderer/containers/ConnectPage.tsx b/gui/src/renderer/containers/ConnectPage.tsx
index f09033ae43..f56bc6e160 100644
--- a/gui/src/renderer/containers/ConnectPage.tsx
+++ b/gui/src/renderer/containers/ConnectPage.tsx
@@ -1,7 +1,6 @@
-import { push } from 'connected-react-router';
 import log from 'electron-log';
 import { connect } from 'react-redux';
-import { bindActionCreators } from 'redux';
+import { RouteComponentProps, withRouter } from 'react-router';
 import { sprintf } from 'sprintf-js';
 import { messages } from '../../shared/gettext';
 import Connect from '../components/Connect';
@@ -72,12 +71,10 @@ const mapStateToProps = (state: IReduxState) => {
   };
 };
 
-const mapDispatchToProps = (dispatch: ReduxDispatch, props: IAppContext) => {
-  const history = bindActionCreators({ push }, dispatch);
-
+const mapDispatchToProps = (_dispatch: ReduxDispatch, props: RouteComponentProps & IAppContext) => {
   return {
     onSelectLocation: () => {
-      history.push('/select-location');
+      props.history.push('/select-location');
     },
     onConnect: async () => {
       try {
@@ -103,4 +100,4 @@ const mapDispatchToProps = (dispatch: ReduxDispatch, props: IAppContext) => {
   };
 };
 
-export default withAppContext(connect(mapStateToProps, mapDispatchToProps)(Connect));
+export default withAppContext(withRouter(connect(mapStateToProps, mapDispatchToProps)(Connect)));
diff --git a/gui/src/renderer/containers/PreferencesPage.tsx b/gui/src/renderer/containers/PreferencesPage.tsx
index 64799ed59b..c7099283f9 100644
--- a/gui/src/renderer/containers/PreferencesPage.tsx
+++ b/gui/src/renderer/containers/PreferencesPage.tsx
@@ -1,7 +1,6 @@
-import { goBack } from 'connected-react-router';
 import log from 'electron-log';
 import { connect } from 'react-redux';
-import { bindActionCreators } from 'redux';
+import { RouteComponentProps, withRouter } from 'react-router';
 import consumePromise from '../../shared/promise';
 import Preferences from '../components/Preferences';
 import withAppContext, { IAppContext } from '../context';
@@ -18,11 +17,10 @@ const mapStateToProps = (state: IReduxState) => ({
   startMinimized: state.settings.guiSettings.startMinimized,
 });
 
-const mapDispatchToProps = (dispatch: ReduxDispatch, props: IAppContext) => {
-  const history = bindActionCreators({ goBack }, dispatch);
+const mapDispatchToProps = (_dispatch: ReduxDispatch, props: RouteComponentProps & IAppContext) => {
   return {
     onClose: () => {
-      history.goBack();
+      props.history.goBack();
     },
     setEnableSystemNotifications: (flag: boolean) => {
       props.app.setEnableSystemNotifications(flag);
@@ -53,4 +51,6 @@ const mapDispatchToProps = (dispatch: ReduxDispatch, props: IAppContext) => {
   };
 };
 
-export default withAppContext(connect(mapStateToProps, mapDispatchToProps)(Preferences));
+export default withAppContext(
+  withRouter(connect(mapStateToProps, mapDispatchToProps)(Preferences)),
+);
diff --git a/gui/src/renderer/containers/SelectLanguagePage.tsx b/gui/src/renderer/containers/SelectLanguagePage.tsx
index f72c79d1f2..eb052fb8a6 100644
--- a/gui/src/renderer/containers/SelectLanguagePage.tsx
+++ b/gui/src/renderer/containers/SelectLanguagePage.tsx
@@ -1,6 +1,5 @@
-import { goBack } from 'connected-react-router';
 import { connect } from 'react-redux';
-import { bindActionCreators } from 'redux';
+import { RouteComponentProps, withRouter } from 'react-router';
 import SelectLanguage from '../components/SelectLanguage';
 import withAppContext, { IAppContext } from '../context';
 import { IReduxState, ReduxDispatch } from '../redux/store';
@@ -9,19 +8,19 @@ const mapStateToProps = (state: IReduxState) => ({
   preferredLocale: state.settings.guiSettings.preferredLocale,
 });
 
-const mapDispatchToProps = (dispatch: ReduxDispatch, props: IAppContext) => {
-  const history = bindActionCreators({ goBack }, dispatch);
-
+const mapDispatchToProps = (_dispatch: ReduxDispatch, props: RouteComponentProps & IAppContext) => {
   return {
     preferredLocalesList: props.app.getPreferredLocaleList(),
     setPreferredLocale(locale: string) {
       props.app.setPreferredLocale(locale);
-      history.goBack();
+      props.history.goBack();
     },
     onClose() {
-      history.goBack();
+      props.history.goBack();
     },
   };
 };
 
-export default withAppContext(connect(mapStateToProps, mapDispatchToProps)(SelectLanguage));
+export default withAppContext(
+  withRouter(connect(mapStateToProps, mapDispatchToProps)(SelectLanguage)),
+);
diff --git a/gui/src/renderer/containers/SelectLocationPage.tsx b/gui/src/renderer/containers/SelectLocationPage.tsx
index 2c0d29c8ee..29bb468304 100644
--- a/gui/src/renderer/containers/SelectLocationPage.tsx
+++ b/gui/src/renderer/containers/SelectLocationPage.tsx
@@ -1,6 +1,6 @@
-import { goBack } from 'connected-react-router';
 import log from 'electron-log';
 import { connect } from 'react-redux';
+import { RouteComponentProps, withRouter } from 'react-router';
 import { bindActionCreators } from 'redux';
 import BridgeSettingsBuilder from '../../shared/bridge-settings-builder';
 import { LiftedConstraint, RelayLocation } from '../../shared/daemon-rpc-types';
@@ -40,18 +40,17 @@ const mapStateToProps = (state: IReduxState) => {
     allowBridgeSelection,
   };
 };
-const mapDispatchToProps = (dispatch: ReduxDispatch, props: IAppContext) => {
-  const history = bindActionCreators({ goBack }, dispatch);
+const mapDispatchToProps = (dispatch: ReduxDispatch, props: RouteComponentProps & IAppContext) => {
   const userInterface = bindActionCreators(userInterfaceActions, dispatch);
 
   return {
-    onClose: () => history.goBack(),
+    onClose: () => props.history.goBack(),
     onChangeLocationScope: (scope: LocationScope) => {
       userInterface.setLocationScope(scope);
     },
     onSelectExitLocation: async (relayLocation: RelayLocation) => {
       // dismiss the view first
-      history.goBack();
+      props.history.goBack();
 
       try {
         const relayUpdate = RelaySettingsBuilder.normal().location.fromRaw(relayLocation).build();
@@ -64,7 +63,7 @@ const mapDispatchToProps = (dispatch: ReduxDispatch, props: IAppContext) => {
     },
     onSelectBridgeLocation: async (bridgeLocation: RelayLocation) => {
       // dismiss the view first
-      history.goBack();
+      props.history.goBack();
 
       try {
         await props.app.updateBridgeSettings(
@@ -76,7 +75,7 @@ const mapDispatchToProps = (dispatch: ReduxDispatch, props: IAppContext) => {
     },
     onSelectClosestToExit: async () => {
       // dismiss the view first
-      history.goBack();
+      props.history.goBack();
 
       try {
         await props.app.updateBridgeSettings(new BridgeSettingsBuilder().location.any().build());
@@ -87,4 +86,6 @@ const mapDispatchToProps = (dispatch: ReduxDispatch, props: IAppContext) => {
   };
 };
 
-export default withAppContext(connect(mapStateToProps, mapDispatchToProps)(SelectLocation));
+export default withAppContext(
+  withRouter(connect(mapStateToProps, mapDispatchToProps)(SelectLocation)),
+);
diff --git a/gui/src/renderer/containers/SettingsPage.tsx b/gui/src/renderer/containers/SettingsPage.tsx
index fda21f1b7d..4fe6e078e5 100644
--- a/gui/src/renderer/containers/SettingsPage.tsx
+++ b/gui/src/renderer/containers/SettingsPage.tsx
@@ -1,7 +1,6 @@
-import { goBack, push } from 'connected-react-router';
 import { remote, shell } from 'electron';
 import { connect } from 'react-redux';
-import { bindActionCreators } from 'redux';
+import { RouteComponentProps, withRouter } from 'react-router';
 import Settings from '../components/Settings';
 import withAppContext, { IAppContext } from '../context';
 import { IReduxState, ReduxDispatch } from '../redux/store';
@@ -18,18 +17,17 @@ const mapStateToProps = (state: IReduxState, props: IAppContext) => ({
   upToDateVersion: state.version.suggestedUpgrade ? false : true,
   isOffline: state.connection.isBlocked,
 });
-const mapDispatchToProps = (dispatch: ReduxDispatch) => {
-  const history = bindActionCreators({ push, goBack }, dispatch);
+const mapDispatchToProps = (_dispatch: ReduxDispatch, props: RouteComponentProps & IAppContext) => {
   return {
     onQuit: () => remote.app.quit(),
-    onClose: () => history.goBack(),
-    onViewSelectLanguage: () => history.push('/settings/language'),
-    onViewAccount: () => history.push('/settings/account'),
-    onViewSupport: () => history.push('/settings/support'),
-    onViewPreferences: () => history.push('/settings/preferences'),
-    onViewAdvancedSettings: () => history.push('/settings/advanced'),
+    onClose: () => props.history.goBack(),
+    onViewSelectLanguage: () => props.history.push('/settings/language'),
+    onViewAccount: () => props.history.push('/settings/account'),
+    onViewSupport: () => props.history.push('/settings/support'),
+    onViewPreferences: () => props.history.push('/settings/preferences'),
+    onViewAdvancedSettings: () => props.history.push('/settings/advanced'),
     onExternalLink: (url: string) => shell.openExternal(url),
   };
 };
 
-export default withAppContext(connect(mapStateToProps, mapDispatchToProps)(Settings));
+export default withAppContext(withRouter(connect(mapStateToProps, mapDispatchToProps)(Settings)));
diff --git a/gui/src/renderer/containers/SupportPage.tsx b/gui/src/renderer/containers/SupportPage.tsx
index 7382b9d694..7cb72b9c72 100644
--- a/gui/src/renderer/containers/SupportPage.tsx
+++ b/gui/src/renderer/containers/SupportPage.tsx
@@ -1,6 +1,6 @@
-import { goBack } from 'connected-react-router';
 import { shell } from 'electron';
 import { connect } from 'react-redux';
+import { RouteComponentProps, withRouter } from 'react-router';
 import { bindActionCreators } from 'redux';
 import Support from '../components/Support';
 import { collectProblemReport, sendProblemReport } from '../lib/problem-report';
@@ -15,13 +15,12 @@ const mapStateToProps = (state: IReduxState) => ({
   outdatedVersion: state.version.suggestedUpgrade ? true : false,
 });
 
-const mapDispatchToProps = (dispatch: ReduxDispatch) => {
+const mapDispatchToProps = (dispatch: ReduxDispatch, props: RouteComponentProps) => {
   const { saveReportForm, clearReportForm } = bindActionCreators(supportActions, dispatch);
-  const history = bindActionCreators({ goBack }, dispatch);
 
   return {
     onClose() {
-      history.goBack();
+      props.history.goBack();
     },
     viewLog(path: string) {
       shell.openItem(path);
@@ -34,4 +33,4 @@ const mapDispatchToProps = (dispatch: ReduxDispatch) => {
   };
 };
 
-export default connect(mapStateToProps, mapDispatchToProps)(Support);
+export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Support));
diff --git a/gui/src/renderer/containers/WireguardKeysPage.tsx b/gui/src/renderer/containers/WireguardKeysPage.tsx
index 869f0df223..9e5fa6fc8c 100644
--- a/gui/src/renderer/containers/WireguardKeysPage.tsx
+++ b/gui/src/renderer/containers/WireguardKeysPage.tsx
@@ -1,6 +1,5 @@
-import { goBack, push } from 'connected-react-router';
 import { connect } from 'react-redux';
-import { bindActionCreators } from 'redux';
+import { RouteComponentProps, withRouter } from 'react-router';
 import { links } from '../../config.json';
 import WireguardKeys from '../components/WireguardKeys';
 import withAppContext, { IAppContext } from '../context';
@@ -14,10 +13,9 @@ const mapStateToProps = (state: IReduxState) => ({
   tunnelState: state.connection.status,
   windowFocused: state.userInterface.windowFocused,
 });
-const mapDispatchToProps = (dispatch: ReduxDispatch, props: IAppContext) => {
-  const history = bindActionCreators({ push, goBack }, dispatch);
+const mapDispatchToProps = (_dispatch: ReduxDispatch, props: RouteComponentProps & IAppContext) => {
   return {
-    onClose: () => history.goBack(),
+    onClose: () => props.history.goBack(),
     onGenerateKey: () => props.app.generateWireguardKey(),
     onReplaceKey: (oldKey: IWgKey) => props.app.replaceWireguardKey(oldKey),
     onVerifyKey: (publicKey: IWgKey) => props.app.verifyWireguardKey(publicKey),
@@ -25,4 +23,6 @@ const mapDispatchToProps = (dispatch: ReduxDispatch, props: IAppContext) => {
   };
 };
 
-export default withAppContext(connect(mapStateToProps, mapDispatchToProps)(WireguardKeys));
+export default withAppContext(
+  withRouter(connect(mapStateToProps, mapDispatchToProps)(WireguardKeys)),
+);
diff --git a/gui/src/renderer/redux/store.ts b/gui/src/renderer/redux/store.ts
index 43ebc312ef..49f864d18b 100644
--- a/gui/src/renderer/redux/store.ts
+++ b/gui/src/renderer/redux/store.ts
@@ -1,5 +1,4 @@
-import { connectRouter, push, replace, routerMiddleware } from 'connected-react-router';
-import { applyMiddleware, combineReducers, compose, createStore, Dispatch } from 'redux';
+import { combineReducers, compose, createStore, Dispatch } from 'redux';
 
 import accountActions, { AccountAction } from './account/actions';
 import accountReducer, { IAccountReduxState } from './account/reducers';
@@ -14,8 +13,6 @@ import userInterfaceReducer, { IUserInterfaceReduxState } from './userinterface/
 import versionActions, { VersionAction } from './version/actions';
 import versionReducer, { IVersionReduxState } from './version/reducers';
 
-import History from '../lib/history';
-
 export interface IReduxState {
   account: IAccountReduxState;
   connection: IConnectionReduxState;
@@ -35,7 +32,7 @@ export type ReduxAction =
 export type ReduxStore = ReturnType<typeof configureStore>;
 export type ReduxDispatch = Dispatch<ReduxAction>;
 
-export default function configureStore(routerHistory: History, initialState?: IReduxState) {
+export default function configureStore(initialState?: IReduxState) {
   const actionCreators = {
     ...accountActions,
     ...connectionActions,
@@ -43,8 +40,6 @@ export default function configureStore(routerHistory: History, initialState?: IR
     ...supportActions,
     ...versionActions,
     ...userInterfaceActions,
-    pushRoute: (route: string) => push(route),
-    replaceRoute: (route: string) => replace(route),
   };
 
   const reducers = {
@@ -54,7 +49,6 @@ export default function configureStore(routerHistory: History, initialState?: IR
     support: supportReducer,
     version: versionReducer,
     userInterface: userInterfaceReducer,
-    router: connectRouter(routerHistory),
   };
 
   const composeEnhancers: typeof compose = (() => {
@@ -66,8 +60,7 @@ export default function configureStore(routerHistory: History, initialState?: IR
     return compose;
   })();
 
-  const enhancer = composeEnhancers(applyMiddleware(routerMiddleware(routerHistory)));
-
+  const enhancer = composeEnhancers();
   const rootReducer = combineReducers(reducers);
 
   if (initialState) {