From 01b92eedb5097b40ec0d9a26b17d62f5e9c76eed Mon Sep 17 00:00:00 2001 From: FaberVitale Date: Sun, 13 Jun 2021 11:55:09 +0200 Subject: [PATCH] fix: inverted monitor theme inside devtoop-app Othetr changes: * simplify monitor integration --- .../monitors/RtkQueryMonitorWrapper.tsx | 25 -------- .../src/utils/getMonitor.tsx | 4 +- .../src/RtkQueryInspectorMonitor.tsx | 58 +++++++------------ .../src/reducers.ts | 8 +-- 4 files changed, 26 insertions(+), 69 deletions(-) delete mode 100644 packages/redux-devtools-app/src/containers/monitors/RtkQueryMonitorWrapper.tsx diff --git a/packages/redux-devtools-app/src/containers/monitors/RtkQueryMonitorWrapper.tsx b/packages/redux-devtools-app/src/containers/monitors/RtkQueryMonitorWrapper.tsx deleted file mode 100644 index 77aa1e3a..00000000 --- a/packages/redux-devtools-app/src/containers/monitors/RtkQueryMonitorWrapper.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import React, { Component } from 'react'; -import { connect, ResolveThunks } from 'react-redux'; -import RtkQueryInspectorMonitor from '@redux-devtools/rtk-query-inspector-monitor'; -import { selectMonitorWithState } from '../../actions'; - -type DispatchProps = ResolveThunks; -type Props = DispatchProps; - -class RtkQueryInspectorMonitorWrapper extends Component { - static update = RtkQueryInspectorMonitor.update; - - render() { - return ( - // eslint-disable-next-line @typescript-eslint/ban-ts-comment - // @ts-ignore - - ); - } -} - -const actionCreators = { - selectMonitorWithState: selectMonitorWithState, -}; - -export default connect(null, actionCreators)(RtkQueryInspectorMonitorWrapper); diff --git a/packages/redux-devtools-app/src/utils/getMonitor.tsx b/packages/redux-devtools-app/src/utils/getMonitor.tsx index 6b7f39bc..f427a778 100644 --- a/packages/redux-devtools-app/src/utils/getMonitor.tsx +++ b/packages/redux-devtools-app/src/utils/getMonitor.tsx @@ -1,8 +1,8 @@ import React from 'react'; import LogMonitor from '@redux-devtools/log-monitor'; -import RtkQueryInspectorMonitorWrapper from '../containers/monitors/RtkQueryMonitorWrapper'; import ChartMonitorWrapper from '../containers/monitors/ChartMonitorWrapper'; import InspectorWrapper from '../containers/monitors/InspectorWrapper'; +import RtkQueryInspectorMonitor from '@redux-devtools/rtk-query-inspector-monitor/lib/RtkQueryInspectorMonitor'; export const monitors = [ { value: 'InspectorMonitor', name: 'Inspector' }, @@ -20,7 +20,7 @@ export default function getMonitor({ monitor }: { monitor: string }) { case 'ChartMonitor': return ; case 'RtkQueryMonitor': - return ; + return ; default: return ; } diff --git a/packages/redux-devtools-rtk-query-inspector-monitor/src/RtkQueryInspectorMonitor.tsx b/packages/redux-devtools-rtk-query-inspector-monitor/src/RtkQueryInspectorMonitor.tsx index 6cb714c8..8df18219 100644 --- a/packages/redux-devtools-rtk-query-inspector-monitor/src/RtkQueryInspectorMonitor.tsx +++ b/packages/redux-devtools-rtk-query-inspector-monitor/src/RtkQueryInspectorMonitor.tsx @@ -1,10 +1,8 @@ -import React, { PureComponent } from 'react'; +import React, { Component } from 'react'; import PropTypes from 'prop-types'; -import * as themes from 'redux-devtools-themes'; import { Action } from 'redux'; -import { Base16Theme } from 'react-base16-styling'; import RtkQueryInspector from './RtkQueryInspector'; -import reducer from './reducers'; +import { reducer } from './reducers'; import { ExternalProps, RtkQueryInspectorMonitorProps, @@ -14,35 +12,22 @@ import { createThemeState, StyleUtils, StyleUtilsContext, + base16Themes, } from './styles/createStylingFromTheme'; -interface DefaultProps { - select: (state: unknown) => unknown; - theme: keyof typeof themes | Base16Theme; - preserveScrollTop: boolean; - expandActionRoot: boolean; - expandStateRoot: boolean; - markStateDiff: boolean; + +interface DefaultProps { + theme: keyof typeof base16Themes; + invertTheme: boolean; } export interface RtkQueryInspectorComponentState { readonly styleUtils: StyleUtils; } -class RtkQueryInspectorMonitor< - S, - A extends Action -> extends PureComponent< +class RtkQueryInspectorMonitor> extends Component< RtkQueryInspectorMonitorProps, RtkQueryInspectorComponentState > { - constructor(props: RtkQueryInspectorMonitorProps) { - super(props); - - this.state = { - styleUtils: createThemeState(props), - }; - } - static update = reducer; static propTypes = { @@ -52,25 +37,24 @@ class RtkQueryInspectorMonitor< actionsById: PropTypes.object, stagedActionIds: PropTypes.array, skippedActionIds: PropTypes.array, - monitorState: PropTypes.shape({ - initialScrollTop: PropTypes.number, - }), - - preserveScrollTop: PropTypes.bool, - select: PropTypes.func.isRequired, + monitorState: PropTypes.object, theme: PropTypes.oneOfType([PropTypes.object, PropTypes.string]), invertTheme: PropTypes.bool, }; - static defaultProps: DefaultProps = { - select: (state: unknown) => state, - theme: 'nicinabox', - preserveScrollTop: true, - expandActionRoot: true, - expandStateRoot: true, - markStateDiff: false, + static defaultProps = { + theme: 'inspector', + invertTheme: false, }; + constructor(props: RtkQueryInspectorMonitorProps) { + super(props); + + this.state = { + styleUtils: createThemeState(props), + }; + } + render() { const { styleUtils: { base16Theme }, @@ -98,5 +82,5 @@ export default (RtkQueryInspectorMonitor as unknown) as React.ComponentType< state: RtkQueryInspectorMonitorState | undefined, action: Action ): RtkQueryInspectorMonitorState; - defaultProps: DefaultProps; + defaultProps: DefaultProps; }; diff --git a/packages/redux-devtools-rtk-query-inspector-monitor/src/reducers.ts b/packages/redux-devtools-rtk-query-inspector-monitor/src/reducers.ts index a68b914c..5c765b08 100644 --- a/packages/redux-devtools-rtk-query-inspector-monitor/src/reducers.ts +++ b/packages/redux-devtools-rtk-query-inspector-monitor/src/reducers.ts @@ -41,14 +41,12 @@ const monitorSlice = createSlice({ }, }); -export default function reducer>( +export function reducer>( props: RtkQueryInspectorProps, - state: RtkQueryInspectorMonitorState | undefined = initialState, + state: RtkQueryInspectorMonitorState | undefined, action: AnyAction ): RtkQueryInspectorMonitorState { - const output = monitorSlice.reducer(state, action); - - return output; + return monitorSlice.reducer(state, action); } export const { selectQueryKey, changeQueryFormValues } = monitorSlice.actions;