inspector-monitor demo

2025-07-22 06:00:07 +03:00 · 2022-05-15 16:59:33 -04:00 · 2022-05-15 16:59:33 -04:00 · f63774863d
commit f63774863d
parent 60d5c42154
5 changed files with 143 additions and 150 deletions
--- a/packages/redux-devtools-inspector-monitor/demo/package.json
+++ b/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",
--- a/packages/redux-devtools-inspector-monitor/demo/src/DemoApp.tsx
+++ b/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> {
-  timeout?: number;
+function DemoApp(props: Props) {
+  const timeout = useRef<number | undefined>();
+  const location = useLocation();
+  const navigate = useNavigate();

-  render() {
-    const options = getOptions(this.props.location);
+  const toggleExtension = () => {
+    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
-              onClick={this.props.changeImmutableNested}
-              style={styles.button}
-            >
+          <Button onClick={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}>
-              Timeout Update {this.props.timeoutUpdateEnabled ? 'On' : 'Off'}
+          <Button onClick={toggleTimeoutUpdate} style={styles.button}>
+            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);
--- a/packages/redux-devtools-inspector-monitor/demo/src/DevTools.tsx
+++ b/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);
+}
--- a/packages/redux-devtools-inspector-monitor/demo/src/index.tsx
+++ b/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}>
-        <DemoApp />
-      </Route>
+      <Routes>
+        <Route path={ROOT} element={<DemoApp />} />
+      </Routes>
      {!useDevtoolsExtension && <ConnectedDevTools />}
    </BrowserRouter>
  </Provider>,
--- a/pnpm-lock.yaml
+++ b/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