fix: inverted monitor theme inside devtoop-app

Othetr changes:

* simplify monitor integration

packages/redux-devtools-app/src/containers/monitors/RtkQueryMonitorWrapper.tsx

@@ -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<typeof actionCreators>;
-type Props = DispatchProps;
-
-class RtkQueryInspectorMonitorWrapper extends Component<Props> {
-  static update = RtkQueryInspectorMonitor.update;
-
-  render() {
-    return (
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
-      <RtkQueryInspectorMonitor defaultIsVisible invertTheme {...this.props} />
-    );
-  }
-}
-
-const actionCreators = {
-  selectMonitorWithState: selectMonitorWithState,
-};
-
-export default connect(null, actionCreators)(RtkQueryInspectorMonitorWrapper);

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 <ChartMonitorWrapper />;
     case 'RtkQueryMonitor':
-      return <RtkQueryInspectorMonitorWrapper />;
+      return <RtkQueryInspectorMonitor />;
     default:
       return <InspectorWrapper />;
   }

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<S> {
+
-  select: (state: unknown) => unknown;
+interface DefaultProps {
-  theme: keyof typeof themes | Base16Theme;
+  theme: keyof typeof base16Themes;
-  preserveScrollTop: boolean;
+  invertTheme: boolean;
-  expandActionRoot: boolean;
-  expandStateRoot: boolean;
-  markStateDiff: boolean;
 }
 
 export interface RtkQueryInspectorComponentState {
   readonly styleUtils: StyleUtils;
 }
 
-class RtkQueryInspectorMonitor<
+class RtkQueryInspectorMonitor<S, A extends Action<unknown>> extends Component<
-  S,
-  A extends Action<unknown>
-> extends PureComponent<
   RtkQueryInspectorMonitorProps<S, A>,
   RtkQueryInspectorComponentState
 > {
-  constructor(props: RtkQueryInspectorMonitorProps<S, A>) {
-    super(props);
-
-    this.state = {
-      styleUtils: createThemeState<S, A>(props),
-    };
-  }
-
   static update = reducer;
 
   static propTypes = {
@@ -52,25 +37,24 @@ class RtkQueryInspectorMonitor<
     actionsById: PropTypes.object,
     stagedActionIds: PropTypes.array,
     skippedActionIds: PropTypes.array,
-    monitorState: PropTypes.shape({
+    monitorState: PropTypes.object,
-      initialScrollTop: PropTypes.number,
-    }),
-
-    preserveScrollTop: PropTypes.bool,
-    select: PropTypes.func.isRequired,
     theme: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
     invertTheme: PropTypes.bool,
   };
 
-  static defaultProps: DefaultProps<unknown> = {
+  static defaultProps = {
-    select: (state: unknown) => state,
+    theme: 'inspector',
-    theme: 'nicinabox',
+    invertTheme: false,
-    preserveScrollTop: true,
-    expandActionRoot: true,
-    expandStateRoot: true,
-    markStateDiff: false,
   };
 
+  constructor(props: RtkQueryInspectorMonitorProps<S, A>) {
+    super(props);
+
+    this.state = {
+      styleUtils: createThemeState<S, A>(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<unknown>;
+  defaultProps: DefaultProps;
 };

packages/redux-devtools-rtk-query-inspector-monitor/src/reducers.ts

@@ -41,14 +41,12 @@ const monitorSlice = createSlice({
   },
 });
 
-export default function reducer<S, A extends Action<unknown>>(
+export function reducer<S, A extends Action<unknown>>(
   props: RtkQueryInspectorProps<S, A>,
-  state: RtkQueryInspectorMonitorState | undefined = initialState,
+  state: RtkQueryInspectorMonitorState | undefined,
   action: AnyAction
 ): RtkQueryInspectorMonitorState {
-  const output = monitorSlice.reducer(state, action);
+  return monitorSlice.reducer(state, action);
-
-  return output;
 }
 
 export const { selectQueryKey, changeQueryFormValues } = monitorSlice.actions;