From 123ecd2076cf692a678ccbb03c6702ad5c230aad Mon Sep 17 00:00:00 2001
From: Nathan Bierema <nbierema@gmail.com>
Date: Wed, 13 Dec 2023 19:09:02 -0500
Subject: [PATCH] Remove more unused styling

---
 .../src/components/TreeView.tsx               | 33 ++----------
 .../src/containers/QueryPreview.tsx           |  9 ----
 .../src/styles/tree.tsx                       | 53 +++++++------------
 3 files changed, 25 insertions(+), 70 deletions(-)

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 ecbeb3dc..c7f1be0f 100644
--- a/packages/redux-devtools-rtk-query-monitor/src/components/TreeView.tsx
+++ b/packages/redux-devtools-rtk-query-monitor/src/components/TreeView.tsx
@@ -1,13 +1,12 @@
 import { createSelector, Selector } from '@reduxjs/toolkit';
 import React, { ComponentProps, ReactNode } from 'react';
 import { JSONTree } from 'react-json-tree';
-import { Base16Theme, StylingFunction } from 'react-base16-styling';
-import { DATA_TYPE_KEY } from '../monitor-config';
+import { Base16Theme } from 'react-base16-styling';
 import {
   getJsonTreeTheme,
   StyleUtilsContext,
 } from '../styles/createStylingFromTheme';
-import { createTreeItemLabelRenderer, getItemString } from '../styles/tree';
+import { getItemString, labelRenderer } from '../styles/tree';
 import { identity } from '../utils/object';
 
 export interface TreeViewProps
@@ -39,28 +38,6 @@ export class TreeView extends React.PureComponent<TreeViewProps> {
     },
   };
 
-  readonly selectLabelRenderer: Selector<
-    StylingFunction,
-    ReturnType<typeof createTreeItemLabelRenderer>,
-    never
-  > = createSelector<
-    [(stylingFunction: StylingFunction) => StylingFunction],
-    ReturnType<typeof createTreeItemLabelRenderer>
-  >(identity, createTreeItemLabelRenderer);
-
-  readonly selectGetItemString: Selector<
-    StylingFunction,
-    (type: string, data: unknown) => ReactNode,
-    never
-  > = createSelector<
-    [(stylingFunction: StylingFunction) => StylingFunction],
-    (type: string, data: unknown) => ReactNode
-  >(
-    identity,
-    (styling) => (type, data) =>
-      getItemString(styling, type, data, DATA_TYPE_KEY, false),
-  );
-
   readonly selectTheme: Selector<
     Base16Theme,
     ReturnType<typeof getJsonTreeTheme>,
@@ -88,7 +65,7 @@ export class TreeView extends React.PureComponent<TreeViewProps> {
 
     return (
       <StyleUtilsContext.Consumer>
-        {({ styling, invertTheme, base16Theme }) => {
+        {({ invertTheme, base16Theme }) => {
           return (
             <div
               {...rootProps}
@@ -103,10 +80,10 @@ export class TreeView extends React.PureComponent<TreeViewProps> {
                 keyPath={keyPath}
                 shouldExpandNodeInitially={shouldExpandNodeInitially}
                 data={data}
-                labelRenderer={this.selectLabelRenderer(styling)}
+                labelRenderer={labelRenderer}
                 theme={this.selectTheme(base16Theme)}
                 invertTheme={invertTheme}
-                getItemString={this.selectGetItemString(styling)}
+                getItemString={getItemString}
                 hideRoot={hideRoot}
               />
               {after}
diff --git a/packages/redux-devtools-rtk-query-monitor/src/containers/QueryPreview.tsx b/packages/redux-devtools-rtk-query-monitor/src/containers/QueryPreview.tsx
index 05ed2173..2eeee431 100644
--- a/packages/redux-devtools-rtk-query-monitor/src/containers/QueryPreview.tsx
+++ b/packages/redux-devtools-rtk-query-monitor/src/containers/QueryPreview.tsx
@@ -1,6 +1,5 @@
 import React, { ReactNode } from 'react';
 import type { Interpolation, Theme } from '@emotion/react';
-import { createTreeItemLabelRenderer } from '../styles/tree';
 import {
   QueryPreviewTabs,
   RtkResourceInfo,
@@ -180,14 +179,6 @@ const tabs: ReadonlyArray<
 ];
 
 export class QueryPreview<S> extends React.PureComponent<QueryPreviewProps<S>> {
-  readonly labelRenderer: ReturnType<typeof createTreeItemLabelRenderer>;
-
-  constructor(props: QueryPreviewProps<S>) {
-    super(props);
-
-    this.labelRenderer = createTreeItemLabelRenderer();
-  }
-
   renderLabelWithCounter = (
     label: React.ReactText,
     counter: number,
diff --git a/packages/redux-devtools-rtk-query-monitor/src/styles/tree.tsx b/packages/redux-devtools-rtk-query-monitor/src/styles/tree.tsx
index 7aa4f375..763c2756 100644
--- a/packages/redux-devtools-rtk-query-monitor/src/styles/tree.tsx
+++ b/packages/redux-devtools-rtk-query-monitor/src/styles/tree.tsx
@@ -1,8 +1,8 @@
-import React, { ReactNode } from 'react';
-import { StylingFunction } from 'react-base16-styling';
-import type { LabelRenderer } from 'react-json-tree';
+import React from 'react';
+import type { GetItemString, LabelRenderer } from 'react-json-tree';
 import { isCollection, isIndexed, isKeyed } from 'immutable';
 import isIterable from '../utils/isIterable';
+import { DATA_TYPE_KEY } from '../monitor-config';
 
 const IS_IMMUTABLE_KEY = '@@__IS_IMMUTABLE__@@';
 
@@ -73,34 +73,21 @@ function getText(
   }
 }
 
-export function getItemString(
-  styling: StylingFunction,
-  type: string,
-  data: any,
-  dataTypeKey: string | symbol | undefined,
-  previewContent: boolean,
-  isDiff?: boolean,
-): ReactNode {
-  return (
-    <span {...styling('treeItemHint')}>
-      {data[IS_IMMUTABLE_KEY] ? 'Immutable' : ''}
-      {dataTypeKey && data[dataTypeKey]
-        ? `${data[dataTypeKey] as string} `
-        : ''}
-      {getText(type, data, previewContent, isDiff)}
-    </span>
-  );
-}
+export const getItemString: GetItemString = (type: string, data: any) => (
+  <span>
+    {data[IS_IMMUTABLE_KEY] ? 'Immutable' : ''}
+    {DATA_TYPE_KEY && data[DATA_TYPE_KEY]
+      ? `${data[DATA_TYPE_KEY] as string} `
+      : ''}
+    {getText(type, data, false, undefined)}
+  </span>
+);
 
-export function createTreeItemLabelRenderer(): LabelRenderer {
-  return function labelRenderer([key], nodeType, expanded) {
-    return (
-      <span>
-        <span css={(theme) => ({ color: theme.TEXT_PLACEHOLDER_COLOR })}>
-          {key}
-        </span>
-        {!expanded && ': '}
-      </span>
-    );
-  };
-}
+export const labelRenderer: LabelRenderer = ([key], nodeType, expanded) => (
+  <span>
+    <span css={(theme) => ({ color: theme.TEXT_PLACEHOLDER_COLOR })}>
+      {key}
+    </span>
+    {!expanded && ': '}
+  </span>
+);