Remove demo dependency on connected-react-router (#1159)

* Remove connected-react-router from inspector demo

* test-tab

Author: Methuselah96

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

@@ -15,15 +15,13 @@
     "@redux-devtools/inspector-monitor": "^2.1.2",
     "@redux-devtools/inspector-monitor-test-tab": "^0.8.6",
     "@redux-devtools/ui": "^1.2.1",
-    "connected-react-router": "^6.9.2",
-    "history": "^4.10.1",
     "immutable": "^4.0.0",
     "lodash.shuffle": "^4.2.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-is": "^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",
     "styled-components": "^5.3.5"
@@ -33,13 +31,12 @@
     "@babel/preset-env": "^7.17.10",
     "@babel/preset-react": "^7.16.7",
     "@babel/preset-typescript": "^7.16.7",
-    "@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/styled-components": "^5.1.25",
     "@types/webpack-env": "^1.16.4",

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

@@ -1,8 +1,8 @@
 import React, { CSSProperties } from 'react';
 import { connect } from 'react-redux';
 import { Button, Toolbar, Spacer } from '@redux-devtools/ui';
-import { push as pushRoute } from 'connected-react-router';
 import pkg from '@redux-devtools/inspector-monitor-test-tab/package.json';
+import { RouteComponentProps, withRouter } from 'react-router-dom';
 import getOptions from './getOptions';
 import { DemoAppState } from './reducers';
 import {
@@ -69,11 +69,11 @@ interface Props
   shuffleArray: () => 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}>
@@ -180,5 +180,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-test-tab/demo/src/DevTools.tsx

@@ -1,16 +1,14 @@
 import React from 'react';
-import { connect } from 'react-redux';
 import { createDevTools } from '@redux-devtools/core';
 import {
   InspectorMonitor,
   base16Themes,
   Tab,
 } from '@redux-devtools/inspector-monitor';
 import { DockMonitor } from '@redux-devtools/dock-monitor';
-import { Location } from 'history';
+import { RouteComponentProps, withRouter } from 'react-router-dom';
 import getOptions from './getOptions';
 import { TestTab } from '@redux-devtools/inspector-monitor-test-tab';
-import { DemoAppState } from './reducers';
 import { Action } from 'redux';
 
 export const getDevTools = (location: { search: string }) =>
@@ -38,13 +36,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-test-tab/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-test-tab/demo/src/index.tsx

@@ -10,12 +10,10 @@ import {
   StoreEnhancerStoreCreator,
 } 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';
 
@@ -31,14 +29,12 @@ const ROOT =
 
 const DevTools = getDevTools(window.location);
 
-const history = createBrowserHistory();
-
 const useDevtoolsExtension =
   !!(window as unknown as { __REDUX_DEVTOOLS_EXTENSION__: unknown }) &&
   getOptions(window.location).useExtension;
 
 const enhancer = compose(
-  applyMiddleware(logger, routerMiddleware(history)),
+  applyMiddleware(logger),
   (next: StoreEnhancerStoreCreator) => {
     const instrument = useDevtoolsExtension
       ? (
@@ -52,11 +48,11 @@ const enhancer = compose(
   persistState(getDebugSessionKey())
 );
 
-const store = createStore(createRootReducer(history), enhancer);
+const store = createStore(rootReducer, enhancer);
 
 render(
   <Provider store={store}>
-    <ConnectedRouter history={history}>
+    <BrowserRouter>
       <Container
         themeData={{
           theme: 'default',
@@ -69,7 +65,7 @@ render(
         </Route>
         {!useDevtoolsExtension && <ConnectedDevTools />}
       </Container>
-    </ConnectedRouter>
+    </BrowserRouter>
   </Provider>,
   document.getElementById('root')
 );

packages/redux-devtools-inspector-monitor-test-tab/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 } } }[] } };
 
@@ -139,11 +133,9 @@ type DemoAppAction =
   | HugePayloadAction
   | AddFunctionAction
   | AddSymbolAction
-  | ShuffleArrayAction
-  | LocationChangeAction;
+  | ShuffleArrayAction;
 
 export interface DemoAppState {
-  router: RouterState;
   timeoutUpdateEnabled: boolean;
   store: number;
   undefined: { val: undefined };
@@ -162,11 +154,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
@@ -231,5 +220,3 @@ const createRootReducer = (
     shuffleArray: (state = DEFAULT_SHUFFLE_ARRAY, action) =>
       action.type === 'SHUFFLE_ARRAY' ? shuffle(state) : state,
   });
-
-export default createRootReducer;

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.3.3",
     "@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';
 }