From d7abfe1e872ba1361cf45c76de7a8e77ee59f47f Mon Sep 17 00:00:00 2001 From: Nathan Bierema Date: Sun, 15 May 2022 16:03:18 -0400 Subject: [PATCH] Remove connected-react-router from inspector demo --- .../demo/package.json | 7 ++---- .../demo/src/DemoApp.tsx | 23 ++++++++----------- .../demo/src/DevTools.tsx | 12 +++------- .../demo/src/getOptions.ts | 4 ++-- .../demo/src/index.tsx | 16 +++++-------- .../demo/src/reducers.ts | 17 ++------------ pnpm-lock.yaml | 15 ++++-------- 7 files changed, 30 insertions(+), 64 deletions(-) diff --git a/packages/redux-devtools-inspector-monitor/demo/package.json b/packages/redux-devtools-inspector-monitor/demo/package.json index c696b879..cf4bc9db 100644 --- a/packages/redux-devtools-inspector-monitor/demo/package.json +++ b/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", diff --git a/packages/redux-devtools-inspector-monitor/demo/src/DemoApp.tsx b/packages/redux-devtools-inspector-monitor/demo/src/DemoApp.tsx index a1cd466c..fb183e70 100644 --- a/packages/redux-devtools-inspector-monitor/demo/src/DemoApp.tsx +++ b/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 { +class DemoApp extends React.Component { timeout?: number; render() { - const options = getOptions(this.props.router.location); + const options = getOptions(this.props.location); return (
@@ -265,7 +263,7 @@ class DemoApp extends React.Component { } 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 { }; 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)); diff --git a/packages/redux-devtools-inspector-monitor/demo/src/DevTools.tsx b/packages/redux-devtools-inspector-monitor/demo/src/DevTools.tsx index 829474e6..cd8a5890 100644 --- a/packages/redux-devtools-inspector-monitor/demo/src/DevTools.tsx +++ b/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 = () => (
); -const UnconnectedDevTools = ({ location }: { location: Location }) => { +const UnconnectedDevTools = ({ location }: RouteComponentProps) => { const DevTools = getDevTools(location); return ; }; -const mapStateToProps = (state: DemoAppState) => ({ - location: state.router.location, -}); - -export const ConnectedDevTools = connect(mapStateToProps)(UnconnectedDevTools); +export const ConnectedDevTools = withRouter(UnconnectedDevTools); diff --git a/packages/redux-devtools-inspector-monitor/demo/src/getOptions.ts b/packages/redux-devtools-inspector-monitor/demo/src/getOptions.ts index 2b8a0071..99aa45c8 100644 --- a/packages/redux-devtools-inspector-monitor/demo/src/getOptions.ts +++ b/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'; } diff --git a/packages/redux-devtools-inspector-monitor/demo/src/index.tsx b/packages/redux-devtools-inspector-monitor/demo/src/index.tsx index 82015be0..e690bf22 100644 --- a/packages/redux-devtools-inspector-monitor/demo/src/index.tsx +++ b/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( - + {!useDevtoolsExtension && } - + , document.getElementById('root') ); diff --git a/packages/redux-devtools-inspector-monitor/demo/src/reducers.ts b/packages/redux-devtools-inspector-monitor/demo/src/reducers.ts index a90e4646..f98b19ae 100644 --- a/packages/redux-devtools-inspector-monitor/demo/src/reducers.ts +++ b/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 => +export const rootReducer: Reducer = combineReducers({ - router: connectRouter(history) as Reducer, 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; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index a4d331d2..f9c628e0 100644 --- a/pnpm-lock.yaml +++ b/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=}