inspector-monitor demo

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

@@ -35,7 +35,6 @@
     "@types/react": "^17.0.45",
     "@types/react-dom": "^17.0.16",
     "@types/react-redux": "^7.1.24",
-    "@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

@@ -1,4 +1,4 @@
-import React, { CSSProperties } from 'react';
+import React, { CSSProperties, useRef } from 'react';
 import { connect } from 'react-redux';
 import pkg from '@redux-devtools/inspector-monitor/package.json';
 import Button from 'react-bootstrap/Button';
@@ -11,7 +11,7 @@ import InputGroup from 'react-bootstrap/InputGroup';
 import Row from 'react-bootstrap/Row';
 import * as base16 from 'base16';
 import { inspectorThemes } from '@redux-devtools/inspector-monitor';
-import { RouteComponentProps, withRouter } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router-dom';
 import getOptions, { Options } from './getOptions';
 import {
   AddFunctionAction,
@@ -141,11 +141,50 @@ interface Props
   shuffleArray: () => void;
 }
 
-class DemoApp extends React.Component<Props & RouteComponentProps> {
+function DemoApp(props: Props) {
-  timeout?: number;
+  const timeout = useRef<number | undefined>();
+  const location = useLocation();
+  const navigate = useNavigate();
 
-  render() {
+  const toggleExtension = () => {
-    const options = getOptions(this.props.location);
+    const options = getOptions(location);
+
+    window.location.href = buildUrl({
+      ...options,
+      useExtension: !options.useExtension,
+    });
+  };
+
+  const toggleImmutableSupport = () => {
+    const options = getOptions(location);
+
+    navigate(
+      buildUrl({ ...options, supportImmutable: !options.supportImmutable })
+    );
+  };
+
+  const toggleTheme = () => {
+    const options = getOptions(location);
+
+    navigate(buildUrl({ ...options, dark: !options.dark }));
+  };
+
+  const setTheme = (options: Options, theme: string) => {
+    navigate(buildUrl({ ...options, theme }));
+  };
+
+  const toggleTimeoutUpdate = () => {
+    const enabled = !props.timeoutUpdateEnabled;
+    props.toggleTimeoutUpdate(enabled);
+
+    if (enabled) {
+      timeout.current = window.setInterval(props.timeoutUpdate, 1000);
+    } else {
+      clearTimeout(timeout.current);
+    }
+  };
+
+  const options = getOptions(location);
 
   return (
     <div style={styles.wrapper}>
@@ -169,7 +208,7 @@ class DemoApp extends React.Component<Props & RouteComponentProps> {
                   <FormControl
                     as="select"
                     onChange={(event) =>
-                        this.setTheme(options, event.currentTarget.value)
+                      setTheme(options, event.currentTarget.value)
                     }
                   >
                     {themeOptions.map((theme) => (
@@ -181,7 +220,7 @@ class DemoApp extends React.Component<Props & RouteComponentProps> {
                       />
                     ))}
                   </FormControl>
-                    <a onClick={this.toggleTheme} style={styles.link}>
+                  <a onClick={toggleTheme} style={styles.link}>
                     {options.dark ? 'Light theme' : 'Dark theme'}
                   </a>
                 </InputGroup>
@@ -192,113 +231,71 @@ class DemoApp extends React.Component<Props & RouteComponentProps> {
       </div>
       <div style={styles.content}>
         <div style={styles.buttons}>
-            <Button onClick={this.props.increment} style={styles.button}>
+          <Button onClick={props.increment} style={styles.button}>
             Increment
           </Button>
-            <Button onClick={this.props.push} style={styles.button}>
+          <Button onClick={props.push} style={styles.button}>
             Push
           </Button>
-            <Button onClick={this.props.pop} style={styles.button}>
+          <Button onClick={props.pop} style={styles.button}>
             Pop
           </Button>
-            <Button onClick={this.props.replace} style={styles.button}>
+          <Button onClick={props.replace} style={styles.button}>
             Replace
           </Button>
-            <Button onClick={this.props.changeNested} style={styles.button}>
+          <Button onClick={props.changeNested} style={styles.button}>
             Change Nested
           </Button>
-            <Button onClick={this.props.pushHugeArray} style={styles.button}>
+          <Button onClick={props.pushHugeArray} style={styles.button}>
             Push Huge Array
           </Button>
-            <Button onClick={this.props.addHugeObject} style={styles.button}>
+          <Button onClick={props.addHugeObject} style={styles.button}>
             Add Huge Object
           </Button>
-            <Button onClick={this.props.addIterator} style={styles.button}>
+          <Button onClick={props.addIterator} style={styles.button}>
             Add Iterator
           </Button>
-            <Button onClick={this.props.addRecursive} style={styles.button}>
+          <Button onClick={props.addRecursive} style={styles.button}>
             Add Recursive
           </Button>
-            <Button onClick={this.props.addNativeMap} style={styles.button}>
+          <Button onClick={props.addNativeMap} style={styles.button}>
             Add Native Map
           </Button>
-            <Button onClick={this.props.addImmutableMap} style={styles.button}>
+          <Button onClick={props.addImmutableMap} style={styles.button}>
             Add Immutable Map
           </Button>
-            <Button
+          <Button onClick={props.changeImmutableNested} style={styles.button}>
-              onClick={this.props.changeImmutableNested}
-              style={styles.button}
-            >
             Change Immutable Nested
           </Button>
-            <Button onClick={this.props.hugePayload} style={styles.button}>
+          <Button onClick={props.hugePayload} style={styles.button}>
             Huge Payload
           </Button>
-            <Button onClick={this.props.addFunction} style={styles.button}>
+          <Button onClick={props.addFunction} style={styles.button}>
             Add Function
           </Button>
-            <Button onClick={this.props.addSymbol} style={styles.button}>
+          <Button onClick={props.addSymbol} style={styles.button}>
             Add Symbol
           </Button>
-            <Button onClick={this.toggleTimeoutUpdate} style={styles.button}>
+          <Button onClick={toggleTimeoutUpdate} style={styles.button}>
-              Timeout Update {this.props.timeoutUpdateEnabled ? 'On' : 'Off'}
+            Timeout Update {props.timeoutUpdateEnabled ? 'On' : 'Off'}
           </Button>
-            <Button onClick={this.props.shuffleArray} style={styles.button}>
+          <Button onClick={props.shuffleArray} style={styles.button}>
             Shuffle Array
           </Button>
         </div>
       </div>
       <div style={styles.links}>
-          <a onClick={this.toggleExtension} style={styles.link}>
+        <a onClick={toggleExtension} style={styles.link}>
           {(options.useExtension ? 'Disable' : 'Enable') +
             ' Chrome Extension (will reload this page)'}
         </a>
-          <a onClick={this.toggleImmutableSupport} style={styles.link}>
+        <a onClick={toggleImmutableSupport} style={styles.link}>
           {(options.supportImmutable ? 'Disable' : 'Enable') +
             ' Full Immutable Support'}
         </a>
       </div>
     </div>
   );
-  }
-
-  toggleExtension = () => {
-    const options = getOptions(this.props.location);
-
-    window.location.href = buildUrl({
-      ...options,
-      useExtension: !options.useExtension,
-    });
-  };
-
-  toggleImmutableSupport = () => {
-    const options = getOptions(this.props.location);
-
-    this.props.history.push(
-      buildUrl({ ...options, supportImmutable: !options.supportImmutable })
-    );
-  };
-
-  toggleTheme = () => {
-    const options = getOptions(this.props.location);
-
-    this.props.history.push(buildUrl({ ...options, dark: !options.dark }));
-  };
-
-  setTheme = (options: Options, theme: string) => {
-    this.props.history.push(buildUrl({ ...options, theme }));
-  };
-
-  toggleTimeoutUpdate = () => {
-    const enabled = !this.props.timeoutUpdateEnabled;
-    this.props.toggleTimeoutUpdate(enabled);
-
-    if (enabled) {
-      this.timeout = window.setInterval(this.props.timeoutUpdate, 1000);
-    } else {
-      clearTimeout(this.timeout);
-    }
-  };
 }
 
 export default connect((state: DemoAppState) => state, {
@@ -330,4 +327,4 @@ export default connect((state: DemoAppState) => state, {
   addFunction: (): AddFunctionAction => ({ type: 'ADD_FUNCTION' }),
   addSymbol: (): AddSymbolAction => ({ type: 'ADD_SYMBOL' }),
   shuffleArray: (): ShuffleArrayAction => ({ type: 'SHUFFLE_ARRAY' }),
-})(withRouter(DemoApp));
+})(DemoApp);

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

@@ -5,7 +5,7 @@ import {
   InspectorMonitor,
   base16Themes,
 } from '@redux-devtools/inspector-monitor';
-import { RouteComponentProps, withRouter } from 'react-router-dom';
+import { useLocation } from 'react-router-dom';
 import getOptions from './getOptions';
 
 const CustomComponent = () => (
@@ -46,9 +46,8 @@ export const getDevTools = (location: { search: string }) =>
     </DockMonitor>
   );
 
-const UnconnectedDevTools = ({ location }: RouteComponentProps) => {
+export function ConnectedDevTools() {
+  const location = useLocation();
   const DevTools = getDevTools(location);
   return <DevTools />;
-};
+}
-
-export const ConnectedDevTools = withRouter(UnconnectedDevTools);

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

@@ -9,7 +9,7 @@ import {
   StoreEnhancer,
 } from 'redux';
 import logger from 'redux-logger';
-import { BrowserRouter, Route } from 'react-router-dom';
+import { BrowserRouter, Route, Routes } from 'react-router-dom';
 import { persistState } from '@redux-devtools/core';
 import DemoApp from './DemoApp';
 import { rootReducer } from './reducers';
@@ -52,9 +52,9 @@ const store = createStore(rootReducer, enhancer);
 render(
   <Provider store={store}>
     <BrowserRouter>
-      <Route path={ROOT}>
+      <Routes>
-        <DemoApp />
+        <Route path={ROOT} element={<DemoApp />} />
-      </Route>
+      </Routes>
       {!useDevtoolsExtension && <ConnectedDevTools />}
     </BrowserRouter>
   </Provider>,

pnpm-lock.yaml

@@ -1556,7 +1556,6 @@ importers:
       '@types/react': ^17.0.45
       '@types/react-dom': ^17.0.16
       '@types/react-redux': ^7.1.24
-      '@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
@@ -1609,7 +1608,6 @@ importers:
       '@types/react': 17.0.45
       '@types/react-dom': 17.0.16
       '@types/react-redux': 7.1.24
-      '@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