Cleanup

packages/redux-devtools-rtk-query-monitor/src/components/QueryForm.tsx

@@ -3,7 +3,7 @@ import type { DebouncedFunc } from 'lodash';
 import { css } from '@emotion/react';
 import { Select } from '@redux-devtools/ui';
 import { QueryFormValues } from '../types';
-import { StyleUtilsContext } from '../styles/createStylingFromTheme';
+import { StyleUtilsContext } from '../styles/themes';
 import { SelectOption } from '../types';
 import debounce from 'lodash.debounce';
 import { sortQueryOptions, QueryComparators } from '../utils/comparators';

packages/redux-devtools-rtk-query-monitor/src/components/TreeView.tsx

@@ -2,10 +2,7 @@ import { createSelector, Selector } from '@reduxjs/toolkit';
 import React, { ComponentProps, ReactNode } from 'react';
 import { JSONTree } from 'react-json-tree';
 import { Base16Theme } from 'react-base16-styling';
-import {
+import { getJsonTreeTheme, StyleUtilsContext } from '../styles/themes';
-  getJsonTreeTheme,
-  StyleUtilsContext,
-} from '../styles/createStylingFromTheme';
 import { getItemString, labelRenderer } from '../styles/tree';
 import { identity } from '../utils/object';
 

packages/redux-devtools-rtk-query-monitor/src/containers/RtkQueryMonitor.tsx

@@ -1,34 +1,26 @@
 import React, { Component } from 'react';
 import { Action, AnyAction } from 'redux';
+import { ThemeProvider } from '@emotion/react';
 import RtkQueryInspector from './RtkQueryInspector';
 import { reducer } from '../reducers';
 import {
   ExternalProps,
   RtkQueryMonitorProps,
   RtkQueryMonitorState,
-  StyleUtils,
 } from '../types';
 import {
-  colorMap,
+  createRtkQueryMonitorThemeFromBase16Theme,
-  createThemeState,
+  resolveBase16Theme,
   StyleUtilsContext,
-} from '../styles/createStylingFromTheme';
+} from '../styles/themes';
-import { ThemeProvider } from '@emotion/react';
-import { getBase16Theme, invertBase16Theme } from 'react-base16-styling';
-import * as reduxThemes from 'redux-devtools-themes';
 
 interface DefaultProps {
   theme: string;
   invertTheme: boolean;
 }
 
-export interface RtkQueryComponentState {
-  readonly styleUtils: StyleUtils;
-}
-
 class RtkQueryMonitor<S, A extends Action<string>> extends Component<
-  RtkQueryMonitorProps<S, A>,
+  RtkQueryMonitorProps<S, A>
-  RtkQueryComponentState
 > {
   static update = reducer;
 
@@ -37,14 +29,6 @@ class RtkQueryMonitor<S, A extends Action<string>> extends Component<
     invertTheme: false,
   };
 
-  constructor(props: RtkQueryMonitorProps<S, A>) {
-    super(props);
-
-    this.state = {
-      styleUtils: createThemeState<S, A>(props),
-    };
-  }
-
   render() {
     const {
       currentStateIndex,
@@ -52,19 +36,20 @@ class RtkQueryMonitor<S, A extends Action<string>> extends Component<
       monitorState,
       dispatch,
       actionsById,
+      theme,
+      invertTheme,
     } = this.props;
 
-    // TODO Cleanup
+    const base16Theme = resolveBase16Theme(theme);
-    const base16Theme =
+    const styleUtils = { base16Theme, invertTheme };
-      getBase16Theme(this.props.theme, { ...reduxThemes }) ??
+    const rtkQueryMonitorTheme = createRtkQueryMonitorThemeFromBase16Theme(
-      reduxThemes.nicinabox;
+      base16Theme,
-    const theme = this.props.invertTheme
+      invertTheme,
-      ? invertBase16Theme(base16Theme)
+    );
-      : base16Theme;
 
     return (
-      <StyleUtilsContext.Provider value={this.state.styleUtils}>
+      <StyleUtilsContext.Provider value={styleUtils}>
-        <ThemeProvider theme={colorMap(theme)}>
+        <ThemeProvider theme={rtkQueryMonitorTheme}>
           <RtkQueryInspector<S, AnyAction>
             computedStates={computedStates}
             currentStateIndex={currentStateIndex}

packages/redux-devtools-rtk-query-monitor/src/styles/themes.ts

@@ -1,10 +1,15 @@
-import { getBase16Theme } from 'react-base16-styling';
+import { getBase16Theme, invertBase16Theme } from 'react-base16-styling';
-import type { StylingConfig } from 'react-base16-styling';
+import type { Base16Theme, StylingConfig } from 'react-base16-styling';
 import rgba from 'hex-rgba';
 import * as reduxThemes from 'redux-devtools-themes';
-import { Action } from 'redux';
 import { createContext } from 'react';
-import { RtkQueryMonitorProps, StyleUtils } from '../types';
+import { StyleUtils } from '../types';
+
+export function resolveBase16Theme(
+  theme: keyof typeof reduxThemes | Base16Theme,
+) {
+  return getBase16Theme(theme, reduxThemes) ?? reduxThemes.nicinabox;
+}
 
 declare module '@emotion/react' {
   export interface Theme {
@@ -75,13 +80,14 @@ export const colorMap = (theme: reduxThemes.Base16Theme) =>
     TOGGLE_BUTTON_ERROR: rgba(theme.base08, 40),
   }) as const;
 
-export function createThemeState<S, A extends Action<string>>(
+export function createRtkQueryMonitorThemeFromBase16Theme(
-  props: RtkQueryMonitorProps<S, A>,
+  base16Theme: Base16Theme,
-): StyleUtils {
+  invertTheme: boolean,
-  const base16Theme =
+) {
-    getBase16Theme(props.theme, { ...reduxThemes }) ?? reduxThemes.nicinabox;
+  const finalBase16Theme = invertTheme
-
+    ? invertBase16Theme(base16Theme)
-  return { base16Theme, invertTheme: !!props.invertTheme };
+    : base16Theme;
+  return colorMap(finalBase16Theme);
 }
 
 export const StyleUtilsContext = createContext<StyleUtils>({

packages/redux-devtools-rtk-query-monitor/src/types.ts

@@ -35,7 +35,7 @@ export interface RtkQueryMonitorProps<S, A extends Action<string>>
   extends LiftedState<S, A, RtkQueryMonitorState> {
   dispatch: Dispatch<Action | LiftedAction<S, A, RtkQueryMonitorState>>;
   theme: keyof typeof themes | Base16Theme;
-  invertTheme?: boolean;
+  invertTheme: boolean;
 }
 
 export type RtkQueryApiState = ReturnType<