From 6ac37d41532be72b581c7b500a260f431542e72d Mon Sep 17 00:00:00 2001 From: Nathan Bierema Date: Wed, 13 Dec 2023 19:33:26 -0500 Subject: [PATCH] Cleanup --- .../src/components/QueryForm.tsx | 2 +- .../src/components/TreeView.tsx | 5 +-- .../src/containers/RtkQueryMonitor.tsx | 45 +++++++------------ .../{createStylingFromTheme.ts => themes.ts} | 28 +++++++----- .../src/types.ts | 2 +- 5 files changed, 35 insertions(+), 47 deletions(-) rename packages/redux-devtools-rtk-query-monitor/src/styles/{createStylingFromTheme.ts => themes.ts} (84%) diff --git a/packages/redux-devtools-rtk-query-monitor/src/components/QueryForm.tsx b/packages/redux-devtools-rtk-query-monitor/src/components/QueryForm.tsx index c6680342..b3656694 100644 --- a/packages/redux-devtools-rtk-query-monitor/src/components/QueryForm.tsx +++ b/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'; diff --git a/packages/redux-devtools-rtk-query-monitor/src/components/TreeView.tsx b/packages/redux-devtools-rtk-query-monitor/src/components/TreeView.tsx index c7f1be0f..054642a3 100644 --- a/packages/redux-devtools-rtk-query-monitor/src/components/TreeView.tsx +++ b/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 { - getJsonTreeTheme, - StyleUtilsContext, -} from '../styles/createStylingFromTheme'; +import { getJsonTreeTheme, StyleUtilsContext } from '../styles/themes'; import { getItemString, labelRenderer } from '../styles/tree'; import { identity } from '../utils/object'; diff --git a/packages/redux-devtools-rtk-query-monitor/src/containers/RtkQueryMonitor.tsx b/packages/redux-devtools-rtk-query-monitor/src/containers/RtkQueryMonitor.tsx index 6b54533a..c01c8478 100644 --- a/packages/redux-devtools-rtk-query-monitor/src/containers/RtkQueryMonitor.tsx +++ b/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, - createThemeState, + createRtkQueryMonitorThemeFromBase16Theme, + resolveBase16Theme, StyleUtilsContext, -} from '../styles/createStylingFromTheme'; -import { ThemeProvider } from '@emotion/react'; -import { getBase16Theme, invertBase16Theme } from 'react-base16-styling'; -import * as reduxThemes from 'redux-devtools-themes'; +} from '../styles/themes'; interface DefaultProps { theme: string; invertTheme: boolean; } -export interface RtkQueryComponentState { - readonly styleUtils: StyleUtils; -} - class RtkQueryMonitor> extends Component< - RtkQueryMonitorProps, - RtkQueryComponentState + RtkQueryMonitorProps > { static update = reducer; @@ -37,14 +29,6 @@ class RtkQueryMonitor> extends Component< invertTheme: false, }; - constructor(props: RtkQueryMonitorProps) { - super(props); - - this.state = { - styleUtils: createThemeState(props), - }; - } - render() { const { currentStateIndex, @@ -52,19 +36,20 @@ class RtkQueryMonitor> extends Component< monitorState, dispatch, actionsById, + theme, + invertTheme, } = this.props; - // TODO Cleanup - const base16Theme = - getBase16Theme(this.props.theme, { ...reduxThemes }) ?? - reduxThemes.nicinabox; - const theme = this.props.invertTheme - ? invertBase16Theme(base16Theme) - : base16Theme; + const base16Theme = resolveBase16Theme(theme); + const styleUtils = { base16Theme, invertTheme }; + const rtkQueryMonitorTheme = createRtkQueryMonitorThemeFromBase16Theme( + base16Theme, + invertTheme, + ); return ( - - + + computedStates={computedStates} currentStateIndex={currentStateIndex} diff --git a/packages/redux-devtools-rtk-query-monitor/src/styles/createStylingFromTheme.ts b/packages/redux-devtools-rtk-query-monitor/src/styles/themes.ts similarity index 84% rename from packages/redux-devtools-rtk-query-monitor/src/styles/createStylingFromTheme.ts rename to packages/redux-devtools-rtk-query-monitor/src/styles/themes.ts index 7fa6f3b8..5b16051e 100644 --- a/packages/redux-devtools-rtk-query-monitor/src/styles/createStylingFromTheme.ts +++ b/packages/redux-devtools-rtk-query-monitor/src/styles/themes.ts @@ -1,10 +1,15 @@ -import { getBase16Theme } from 'react-base16-styling'; -import type { StylingConfig } from 'react-base16-styling'; +import { getBase16Theme, invertBase16Theme } 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>( - props: RtkQueryMonitorProps, -): StyleUtils { - const base16Theme = - getBase16Theme(props.theme, { ...reduxThemes }) ?? reduxThemes.nicinabox; - - return { base16Theme, invertTheme: !!props.invertTheme }; +export function createRtkQueryMonitorThemeFromBase16Theme( + base16Theme: Base16Theme, + invertTheme: boolean, +) { + const finalBase16Theme = invertTheme + ? invertBase16Theme(base16Theme) + : base16Theme; + return colorMap(finalBase16Theme); } export const StyleUtilsContext = createContext({ diff --git a/packages/redux-devtools-rtk-query-monitor/src/types.ts b/packages/redux-devtools-rtk-query-monitor/src/types.ts index eecd6753..19935884 100644 --- a/packages/redux-devtools-rtk-query-monitor/src/types.ts +++ b/packages/redux-devtools-rtk-query-monitor/src/types.ts @@ -35,7 +35,7 @@ export interface RtkQueryMonitorProps> extends LiftedState { dispatch: Dispatch>; theme: keyof typeof themes | Base16Theme; - invertTheme?: boolean; + invertTheme: boolean; } export type RtkQueryApiState = ReturnType<