test-tab demo

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

@@ -36,7 +36,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/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 React, { CSSProperties, useRef } from 'react';
 import { connect } from 'react-redux';
 import { Button, Toolbar, Spacer } from '@redux-devtools/ui';
 import pkg from '@redux-devtools/inspector-monitor-test-tab/package.json';
-import { RouteComponentProps, withRouter } from 'react-router-dom';
+import { useLocation } from 'react-router-dom';
 import getOptions from './getOptions';
 import { DemoAppState } from './reducers';
 import {
@@ -69,87 +69,84 @@ 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();
 
-  render() {
+  const options = getOptions(location);
-    const options = getOptions(this.props.location);
 
-    return (
+  const toggleTimeoutUpdate = () => {
-      <div style={styles.wrapper}>
+    const enabled = !props.timeoutUpdateEnabled;
-        <h3>{pkg.name || <span style={styles.muted}>Package Name</span>}</h3>
+    props.toggleTimeoutUpdate(enabled);
-        <h5>
-          {pkg.description || (
-            <span style={styles.muted}>Package Description</span>
-          )}
-        </h5>
-        <Toolbar>
-          <Spacer />
-          <Button onClick={this.props.increment}>Increment</Button>
-          <Button onClick={this.props.push}>Push</Button>
-          <Button onClick={this.props.pop}>Pop</Button>
-          <Button onClick={this.props.replace}>Replace</Button>
-          <Button onClick={this.props.changeNested}>Change Nested</Button>
-          <Spacer />
-        </Toolbar>
-        <Toolbar>
-          <Spacer />
-          <Button onClick={this.props.pushHugeArray}>Push Huge Array</Button>
-          <Button onClick={this.props.addHugeObject}>Add Huge Object</Button>
-          <Button onClick={this.props.hugePayload}>Huge Payload</Button>
-          <Spacer />
-        </Toolbar>
-        <Toolbar>
-          <Spacer />
-          <Button onClick={this.props.addIterator}>Add Iterator</Button>
-          <Button onClick={this.props.addImmutableMap}>
-            Add Immutable Map
-          </Button>
-          <Button onClick={this.props.changeImmutableNested}>
-            Change Immutable Nested
-          </Button>
-          <Spacer />
-        </Toolbar>
-        <Toolbar>
-          <Spacer />
-          <Button onClick={this.props.addRecursive}>Add Recursive</Button>
-          <Button onClick={this.props.addFunction}>Add Function</Button>
-          <Button onClick={this.props.addSymbol}>Add Symbol</Button>
-          <Spacer />
-        </Toolbar>
-        <Toolbar>
-          <Spacer />
-          <Button onClick={this.toggleTimeoutUpdate}>
-            Timeout Update {this.props.timeoutUpdateEnabled ? 'On' : 'Off'}
-          </Button>
-          <Button onClick={this.props.shuffleArray}>Shuffle Array</Button>
-          <Spacer />
-        </Toolbar>
-        <div>
-          {options.useExtension ? (
-            <a href={`${ROOT}`} style={styles.link}>
-              Disable browser extension
-            </a>
-          ) : (
-            <a href={`${ROOT}?ext`} style={styles.link}>
-              Use browser extension
-            </a>
-          )}
-        </div>
-      </div>
-    );
-  }
-
-  toggleTimeoutUpdate = () => {
-    const enabled = !this.props.timeoutUpdateEnabled;
-    this.props.toggleTimeoutUpdate(enabled);
 
     if (enabled) {
-      this.timeout = window.setInterval(this.props.timeoutUpdate, 1000);
+      timeout.current = window.setInterval(props.timeoutUpdate, 1000);
     } else {
-      clearTimeout(this.timeout);
+      clearTimeout(timeout.current);
     }
   };
+
+  return (
+    <div style={styles.wrapper}>
+      <h3>{pkg.name || <span style={styles.muted}>Package Name</span>}</h3>
+      <h5>
+        {pkg.description || (
+          <span style={styles.muted}>Package Description</span>
+        )}
+      </h5>
+      <Toolbar>
+        <Spacer />
+        <Button onClick={props.increment}>Increment</Button>
+        <Button onClick={props.push}>Push</Button>
+        <Button onClick={props.pop}>Pop</Button>
+        <Button onClick={props.replace}>Replace</Button>
+        <Button onClick={props.changeNested}>Change Nested</Button>
+        <Spacer />
+      </Toolbar>
+      <Toolbar>
+        <Spacer />
+        <Button onClick={props.pushHugeArray}>Push Huge Array</Button>
+        <Button onClick={props.addHugeObject}>Add Huge Object</Button>
+        <Button onClick={props.hugePayload}>Huge Payload</Button>
+        <Spacer />
+      </Toolbar>
+      <Toolbar>
+        <Spacer />
+        <Button onClick={props.addIterator}>Add Iterator</Button>
+        <Button onClick={props.addImmutableMap}>Add Immutable Map</Button>
+        <Button onClick={props.changeImmutableNested}>
+          Change Immutable Nested
+        </Button>
+        <Spacer />
+      </Toolbar>
+      <Toolbar>
+        <Spacer />
+        <Button onClick={props.addRecursive}>Add Recursive</Button>
+        <Button onClick={props.addFunction}>Add Function</Button>
+        <Button onClick={props.addSymbol}>Add Symbol</Button>
+        <Spacer />
+      </Toolbar>
+      <Toolbar>
+        <Spacer />
+        <Button onClick={toggleTimeoutUpdate}>
+          Timeout Update {props.timeoutUpdateEnabled ? 'On' : 'Off'}
+        </Button>
+        <Button onClick={props.shuffleArray}>Shuffle Array</Button>
+        <Spacer />
+      </Toolbar>
+      <div>
+        {options.useExtension ? (
+          <a href={`${ROOT}`} style={styles.link}>
+            Disable browser extension
+          </a>
+        ) : (
+          <a href={`${ROOT}?ext`} style={styles.link}>
+            Use browser extension
+          </a>
+        )}
+      </div>
+    </div>
+  );
 }
 
 export default connect((state: DemoAppState) => state, {
@@ -180,4 +177,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-test-tab/demo/src/DevTools.tsx

@@ -6,7 +6,7 @@ import {
   Tab,
 } from '@redux-devtools/inspector-monitor';
 import { DockMonitor } from '@redux-devtools/dock-monitor';
-import { RouteComponentProps, withRouter } from 'react-router-dom';
+import { useLocation } from 'react-router-dom';
 import getOptions from './getOptions';
 import { TestTab } from '@redux-devtools/inspector-monitor-test-tab';
 import { Action } from 'redux';
@@ -36,9 +36,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-test-tab/demo/src/index.tsx

@@ -10,7 +10,7 @@ import {
   StoreEnhancerStoreCreator,
 } 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';
@@ -60,9 +60,9 @@ render(
           colorPreference: 'auto',
         }}
       >
-        <Route path={ROOT}>
+        <Routes>
-          <DemoApp />
+          <Route path={ROOT} element={<DemoApp />} />
-        </Route>
+        </Routes>
         {!useDevtoolsExtension && <ConnectedDevTools />}
       </Container>
     </BrowserRouter>

pnpm-lock.yaml

@@ -1375,7 +1375,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/styled-components': ^5.1.25
       '@types/webpack-env': ^1.16.4
@@ -1432,7 +1431,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/styled-components': 5.1.25
       '@types/webpack-env': 1.16.4