Remove connected-react-router from inspector demo

packages/redux-devtools-inspector-monitor/demo/package.json

@@ -14,15 +14,13 @@
     "@redux-devtools/dock-monitor": "^2.1.1",
     "@redux-devtools/inspector-monitor": "^2.1.2",
     "base16": "^1.0.0",
-    "connected-react-router": "^6.9.2",
-    "history": "^4.10.1",
     "immutable": "^4.0.0",
     "lodash.shuffle": "^4.2.0",
     "react": "^17.0.2",
     "react-bootstrap": "^2.3.1",
     "react-dom": "^17.0.2",
     "react-redux": "^7.2.8",
-    "react-router": "^5.3.1",
+    "react-router-dom": "^5.3.1",
     "redux": "^4.2.0",
     "redux-logger": "^3.0.6"
   },
@@ -32,13 +30,12 @@
     "@babel/preset-react": "^7.16.7",
     "@babel/preset-typescript": "^7.16.7",
     "@types/base16": "^1.0.2",
-    "@types/history": "^4.7.11",
     "@types/lodash.shuffle": "^4.2.7",
     "@types/node": "^16.11.33",
     "@types/react": "^17.0.45",
     "@types/react-dom": "^17.0.16",
     "@types/react-redux": "^7.1.24",
-    "@types/react-router": "^5.1.18",
+    "@types/react-router-dom": "^5.1.18",
     "@types/redux-logger": "^3.0.9",
     "@types/webpack-env": "^1.16.4",
     "@typescript-eslint/eslint-plugin": "^5.22.0",

packages/redux-devtools-inspector-monitor/demo/src/DemoApp.tsx

@@ -10,9 +10,8 @@ import Col from 'react-bootstrap/Col';
 import InputGroup from 'react-bootstrap/InputGroup';
 import Row from 'react-bootstrap/Row';
 import * as base16 from 'base16';
-import { push as pushRoute } from 'connected-react-router';
-import { Path } from 'history';
 import { inspectorThemes } from '@redux-devtools/inspector-monitor';
+import { RouteComponentProps, withRouter } from 'react-router-dom';
 import getOptions, { Options } from './getOptions';
 import {
   AddFunctionAction,
@@ -140,14 +139,13 @@ interface Props
   addFunction: () => void;
   addSymbol: () => void;
   shuffleArray: () => void;
-  pushRoute: (path: Path) => void;
 }
 
-class DemoApp extends React.Component<Props> {
+class DemoApp extends React.Component<Props & RouteComponentProps> {
   timeout?: number;
 
   render() {
-    const options = getOptions(this.props.router.location);
+    const options = getOptions(this.props.location);
 
     return (
       <div style={styles.wrapper}>
@@ -265,7 +263,7 @@ class DemoApp extends React.Component<Props> {
   }
 
   toggleExtension = () => {
-    const options = getOptions(this.props.router.location);
+    const options = getOptions(this.props.location);
 
     window.location.href = buildUrl({
       ...options,
@@ -274,21 +272,21 @@ class DemoApp extends React.Component<Props> {
   };
 
   toggleImmutableSupport = () => {
-    const options = getOptions(this.props.router.location);
+    const options = getOptions(this.props.location);
 
-    this.props.pushRoute(
+    this.props.history.push(
       buildUrl({ ...options, supportImmutable: !options.supportImmutable })
     );
   };
 
   toggleTheme = () => {
-    const options = getOptions(this.props.router.location);
+    const options = getOptions(this.props.location);
 
-    this.props.pushRoute(buildUrl({ ...options, dark: !options.dark }));
+    this.props.history.push(buildUrl({ ...options, dark: !options.dark }));
   };
 
   setTheme = (options: Options, theme: string) => {
-    this.props.pushRoute(buildUrl({ ...options, theme }));
+    this.props.history.push(buildUrl({ ...options, theme }));
   };
 
   toggleTimeoutUpdate = () => {
@@ -332,5 +330,4 @@ export default connect((state: DemoAppState) => state, {
   addFunction: (): AddFunctionAction => ({ type: 'ADD_FUNCTION' }),
   addSymbol: (): AddSymbolAction => ({ type: 'ADD_SYMBOL' }),
   shuffleArray: (): ShuffleArrayAction => ({ type: 'SHUFFLE_ARRAY' }),
-  pushRoute,
-})(DemoApp);
+})(withRouter(DemoApp));

packages/redux-devtools-inspector-monitor/demo/src/DevTools.tsx

@@ -1,14 +1,12 @@
 import React from 'react';
-import { connect } from 'react-redux';
 import { createDevTools } from '@redux-devtools/core';
 import { DockMonitor } from '@redux-devtools/dock-monitor';
-import { Location } from 'history';
 import {
   InspectorMonitor,
   base16Themes,
 } from '@redux-devtools/inspector-monitor';
+import { RouteComponentProps, withRouter } from 'react-router-dom';
 import getOptions from './getOptions';
-import { DemoAppState } from './reducers';
 
 const CustomComponent = () => (
   <div
@@ -48,13 +46,9 @@ export const getDevTools = (location: { search: string }) =>
     </DockMonitor>
   );
 
-const UnconnectedDevTools = ({ location }: { location: Location }) => {
+const UnconnectedDevTools = ({ location }: RouteComponentProps) => {
   const DevTools = getDevTools(location);
   return <DevTools />;
 };
 
-const mapStateToProps = (state: DemoAppState) => ({
-  location: state.router.location,
-});
-
-export const ConnectedDevTools = connect(mapStateToProps)(UnconnectedDevTools);
+export const ConnectedDevTools = withRouter(UnconnectedDevTools);

packages/redux-devtools-inspector-monitor/demo/src/getOptions.ts

@@ -9,12 +9,12 @@ export default function getOptions(location: { search: string }) {
   return {
     useExtension: location.search.indexOf('ext') !== -1,
     supportImmutable: location.search.indexOf('immutable') !== -1,
-    theme: getTheme(),
+    theme: getTheme(location),
     dark: location.search.indexOf('dark') !== -1,
   };
 }
 
-function getTheme() {
+function getTheme(location: { search: string }) {
   const match = /theme=([^&]+)/.exec(location.search);
   return match ? match[1] : 'inspector';
 }

packages/redux-devtools-inspector-monitor/demo/src/index.tsx

@@ -9,12 +9,10 @@ import {
   StoreEnhancer,
 } from 'redux';
 import logger from 'redux-logger';
-import { Route } from 'react-router';
-import { createBrowserHistory } from 'history';
-import { ConnectedRouter, routerMiddleware } from 'connected-react-router';
+import { BrowserRouter, Route } from 'react-router-dom';
 import { persistState } from '@redux-devtools/core';
 import DemoApp from './DemoApp';
-import createRootReducer from './reducers';
+import { rootReducer } from './reducers';
 import getOptions from './getOptions';
 import { ConnectedDevTools, getDevTools } from './DevTools';
 
@@ -30,14 +28,12 @@ const ROOT =
 
 const DevTools = getDevTools(window.location);
 
-const history = createBrowserHistory();
-
 const useDevtoolsExtension =
   !!(window as unknown as { __REDUX_DEVTOOLS_EXTENSION__: unknown })
     .__REDUX_DEVTOOLS_EXTENSION__ && getOptions(window.location).useExtension;
 
 const enhancer = compose(
-  applyMiddleware(logger, routerMiddleware(history)),
+  applyMiddleware(logger),
   (next: StoreEnhancerStoreCreator) => {
     const instrument = useDevtoolsExtension
       ? (
@@ -51,16 +47,16 @@ const enhancer = compose(
   persistState(getDebugSessionKey())
 );
 
-const store = createStore(createRootReducer(history), enhancer);
+const store = createStore(rootReducer, enhancer);
 
 render(
   <Provider store={store}>
-    <ConnectedRouter history={history}>
+    <BrowserRouter>
       <Route path={ROOT}>
         <DemoApp />
       </Route>
       {!useDevtoolsExtension && <ConnectedDevTools />}
-    </ConnectedRouter>
+    </BrowserRouter>
   </Provider>,
   document.getElementById('root')
 );

packages/redux-devtools-inspector-monitor/demo/src/reducers.ts

@@ -1,12 +1,6 @@
 import Immutable from 'immutable';
 import shuffle from 'lodash.shuffle';
 import { combineReducers, Reducer } from 'redux';
-import {
-  connectRouter,
-  LocationChangeAction,
-  RouterState,
-} from 'connected-react-router';
-import { History } from 'history';
 
 type Nested = { long: { nested: { path: { to: { a: string } } }[] } };
 
@@ -168,11 +162,9 @@ type DemoAppAction =
   | HugePayloadAction
   | AddFunctionAction
   | AddSymbolAction
-  | ShuffleArrayAction
-  | LocationChangeAction;
+  | ShuffleArrayAction;
 
 export interface DemoAppState {
-  router: RouterState;
   timeoutUpdateEnabled: boolean;
   store: number;
   undefined: { val: undefined };
@@ -192,11 +184,8 @@ export interface DemoAppState {
   shuffleArray: unknown[];
 }
 
-const createRootReducer = (
-  history: History
-): Reducer<DemoAppState, DemoAppAction> =>
+export const rootReducer: Reducer<DemoAppState, DemoAppAction> =
   combineReducers<DemoAppState, DemoAppAction>({
-    router: connectRouter(history) as Reducer<RouterState, DemoAppAction>,
     timeoutUpdateEnabled: (state = false, action) =>
       action.type === 'TOGGLE_TIMEOUT_UPDATE'
         ? action.timeoutUpdateEnabled
@@ -263,5 +252,3 @@ const createRootReducer = (
     shuffleArray: (state = DEFAULT_SHUFFLE_ARRAY, action) =>
       action.type === 'SHUFFLE_ARRAY' ? shuffle(state) : state,
   });
-
-export default createRootReducer;

pnpm-lock.yaml

@@ -1549,27 +1549,24 @@ importers:
       '@redux-devtools/dock-monitor': ^2.1.1
       '@redux-devtools/inspector-monitor': ^2.1.2
       '@types/base16': ^1.0.2
-      '@types/history': ^4.7.11
       '@types/lodash.shuffle': ^4.2.7
       '@types/node': ^16.11.33
       '@types/react': ^17.0.45
       '@types/react-dom': ^17.0.16
       '@types/react-redux': ^7.1.24
-      '@types/react-router': ^5.1.18
+      '@types/react-router-dom': ^5.1.18
       '@types/redux-logger': ^3.0.9
       '@types/webpack-env': ^1.16.4
       '@typescript-eslint/eslint-plugin': ^5.22.0
       '@typescript-eslint/parser': ^5.22.0
       babel-loader: ^8.2.5
       base16: ^1.0.0
-      connected-react-router: ^6.9.2
       cross-env: ^7.0.3
       eslint: ^8.15.0
       eslint-config-prettier: ^8.5.0
       eslint-plugin-react: ~7.28.0
       eslint-plugin-react-hooks: ^4.5.0
       fork-ts-checker-webpack-plugin: ^7.2.11
-      history: ^4.10.1
       html-webpack-plugin: ^5.5.0
       immutable: ^4.0.0
       lodash.shuffle: ^4.2.0
@@ -1577,7 +1574,7 @@ importers:
       react-bootstrap: ^2.3.1
       react-dom: ^17.0.2
       react-redux: ^7.2.8
-      react-router: ^5.3.1
+      react-router-dom: ^5.3.1
       redux: ^4.2.0
       redux-logger: ^3.0.6
       ts-node: ^10.7.0
@@ -1590,15 +1587,13 @@ importers:
       '@redux-devtools/dock-monitor': link:../../redux-devtools-dock-monitor
       '@redux-devtools/inspector-monitor': link:..
       base16: 1.0.0
-      connected-react-router: 6.9.2_00712eb8f791d7f1c28c0ddcca5e8608
-      history: 4.10.1
       immutable: 4.0.0
       lodash.shuffle: 4.2.0
       react: 17.0.2
       react-bootstrap: 2.3.1_569957a51d469c962fcce166a59b9f78
       react-dom: 17.0.2_react@17.0.2
       react-redux: 7.2.8_react-dom@17.0.2+react@17.0.2
-      react-router: 5.3.1_react@17.0.2
+      react-router-dom: 5.3.1_react@17.0.2
       redux: 4.2.0
       redux-logger: 3.0.6
     devDependencies:
@@ -1607,13 +1602,12 @@ importers:
       '@babel/preset-react': 7.16.7_@babel+core@7.17.10
       '@babel/preset-typescript': 7.16.7_@babel+core@7.17.10
       '@types/base16': 1.0.2
-      '@types/history': 4.7.11
       '@types/lodash.shuffle': 4.2.7
       '@types/node': 16.11.33
       '@types/react': 17.0.45
       '@types/react-dom': 17.0.16
       '@types/react-redux': 7.1.24
-      '@types/react-router': 5.1.18
+      '@types/react-router-dom': 5.3.3
       '@types/redux-logger': 3.0.9
       '@types/webpack-env': 1.16.4
       '@typescript-eslint/eslint-plugin': 5.22.0_9817cbad956b8aa5d1e3d9ec99e4a1e4
@@ -15582,6 +15576,7 @@ packages:
       chalk: 2.4.2
       diff-match-patch: 1.0.5
     dev: false
+    bundledDependencies: []
 
   /jsonfile/2.4.0:
     resolution: {integrity: sha1-NzaitCi4e72gzIO1P6PWM6NcKug=}