Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(deps): update dependency react-router-dom to v6 #940

Merged
merged 5 commits into from
May 15, 2022
Merged

fix(deps): update dependency react-router-dom to v6 #940

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
60d5c42
fix(deps): update dependency react-router-dom to v6
renovate-bot May 15, 2022
f637748
inspector-monitor demo
Methuselah96 May 15, 2022
0c4229d
test-tab demo
Methuselah96 May 15, 2022
f313647
rtk-query-monitor
Methuselah96 May 15, 2022
77983b9
Fix
Methuselah96 May 15, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
3 changes: 1 addition & 2 deletions packages/redux-devtools-inspector-monitor-test-tab/demo/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@
"react-dom": "^17.0.2",
"react-is": "^17.0.2",
"react-redux": "^7.2.8",
"react-router-dom": "^5.3.1",
"react-router-dom": "^6.3.0",
"redux": "^4.2.0",
"redux-logger": "^3.0.6",
"styled-components": "^5.3.5"
Expand All @@ -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",
Expand Down
151 changes: 74 additions & 77 deletions packages/redux-devtools-inspector-monitor-test-tab/demo/src/DemoApp.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 {
Expand Down Expand Up @@ -69,87 +69,84 @@ 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();

render() {
const options = getOptions(this.props.location);
const options = getOptions(location);

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={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);
const toggleTimeoutUpdate = () => {
const enabled = !props.timeoutUpdateEnabled;
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, {
Expand Down Expand Up @@ -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);
9 changes: 4 additions & 5 deletions packages/redux-devtools-inspector-monitor-test-tab/demo/src/DevTools.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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);
}
8 changes: 4 additions & 4 deletions packages/redux-devtools-inspector-monitor-test-tab/demo/src/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -60,9 +60,9 @@ render(
colorPreference: 'auto',
}}
>
<Route path={ROOT}>
<DemoApp />
</Route>
<Routes>
<Route path={ROOT} element={<DemoApp />} />
</Routes>
{!useDevtoolsExtension && <ConnectedDevTools />}
</Container>
</BrowserRouter>
Expand Down
3 changes: 1 addition & 2 deletions packages/redux-devtools-inspector-monitor/demo/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
"react-bootstrap": "^2.3.1",
"react-dom": "^17.0.2",
"react-redux": "^7.2.8",
"react-router-dom": "^5.3.1",
"react-router-dom": "^6.3.0",
"redux": "^4.2.0",
"redux-logger": "^3.0.6"
},
Expand All @@ -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",
Expand Down