Fix rtk-query-monitor types

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

@@ -1,6 +1,7 @@
 import { createSelector, Selector } from '@reduxjs/toolkit';
 import React, { ReactNode, PureComponent } from 'react';
 import { Action, AnyAction } from 'redux';
+import type { KeyPath, ShouldExpandNodeInitially } from 'react-json-tree';
 import { QueryPreviewTabs } from '../types';
 import { renderTabPanelButtonId, renderTabPanelId } from '../utils/a11y';
 import { emptyRecord, identity } from '../utils/object';
@@ -43,7 +44,7 @@ export class QueryPreviewActions extends PureComponent<QueryPreviewActionsProps>
     return output;
   });
 
-  isLastActionNode = (keyPath: (string | number)[], layer: number): boolean => {
+  isLastActionNode = (keyPath: KeyPath, layer: number): boolean => {
     if (layer >= 1) {
       const len = this.props.actionsOfQuery.length;
       const actionKey = keyPath[keyPath.length - 1];
@@ -58,11 +59,11 @@ export class QueryPreviewActions extends PureComponent<QueryPreviewActionsProps>
     return false;
   };
 
-  shouldExpandNodeInitially = (
+  shouldExpandNodeInitially: ShouldExpandNodeInitially = (
-    keyPath: (string | number)[],
+    keyPath,
-    value: unknown,
+    value,
-    layer: number
+    layer
-  ): boolean => {
+  ) => {
     if (layer === 1) {
       return this.isLastActionNode(keyPath, layer);
     }

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

@@ -1,4 +1,5 @@
 import React, { ReactNode, PureComponent } from 'react';
+import type { ShouldExpandNodeInitially } from 'react-json-tree';
 import { ApiStats, QueryPreviewTabs, RtkQueryApiState } from '../types';
 import { StyleUtilsContext } from '../styles/createStylingFromTheme';
 import { TreeView, TreeViewProps } from './TreeView';
@@ -17,11 +18,11 @@ const rootProps: TreeViewProps['rootProps'] = {
 };
 
 export class QueryPreviewApi extends PureComponent<QueryPreviewApiProps> {
-  shouldExpandApiStateNode = (
+  shouldExpandApiStateNode: ShouldExpandNodeInitially = (
-    keyPath: (string | number)[],
+    keyPath,
-    value: unknown,
+    value,
-    layer: number
+    layer
-  ): boolean => {
+  ) => {
     const lastKey = keyPath[keyPath.length - 1];
 
     return layer <= 1 && lastKey !== 'config';

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

@@ -1,4 +1,5 @@
 import React, { ReactNode, PureComponent } from 'react';
+import type { ShouldExpandNodeInitially } from 'react-json-tree';
 import { QueryPreviewTabs, RtkResourceInfo } from '../types';
 import { renderTabPanelButtonId, renderTabPanelId } from '../utils/a11y';
 import { TreeView, TreeViewProps } from './TreeView';
@@ -15,11 +16,11 @@ const rootProps: TreeViewProps['rootProps'] = {
 };
 
 export class QueryPreviewData extends PureComponent<QueryPreviewDataProps> {
-  shouldExpandNodeInitially = (
+  shouldExpandNodeInitially: ShouldExpandNodeInitially = (
-    keyPath: (string | number)[],
+    keyPath,
-    value: unknown,
+    value,
-    layer: number
+    layer
-  ): boolean => {
+  ) => {
     return layer <= 1;
   };
 

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

@@ -1,6 +1,7 @@
 import { createSelector, Selector } from '@reduxjs/toolkit';
 import { QueryStatus } from '@reduxjs/toolkit/dist/query';
 import React, { ReactNode, PureComponent } from 'react';
+import type { ShouldExpandNodeInitially } from 'react-json-tree';
 import { QueryPreviewTabs, RtkResourceInfo, RTKStatusFlags } from '../types';
 import { renderTabPanelButtonId, renderTabPanelId } from '../utils/a11y';
 import { formatMs } from '../utils/formatters';
@@ -35,11 +36,11 @@ export interface QueryPreviewInfoProps {
   isWideLayout: boolean;
 }
 export class QueryPreviewInfo extends PureComponent<QueryPreviewInfoProps> {
-  shouldExpandNodeInitially = (
+  shouldExpandNodeInitially: ShouldExpandNodeInitially = (
-    keyPath: (string | number)[],
+    keyPath,
-    value: unknown,
+    value,
-    layer: number
+    layer
-  ): boolean => {
+  ) => {
     const lastKey = keyPath[keyPath.length - 1];
 
     return layer <= 1 && lastKey !== 'query' && lastKey !== 'mutation';

packages/redux-devtools-rtk-query-monitor/src/styles/tree.tsx

@@ -1,5 +1,6 @@
 import React, { ReactNode } from 'react';
 import { StylingFunction } from 'react-base16-styling';
+import type { LabelRenderer } from 'react-json-tree';
 import { isCollection, isIndexed, isKeyed } from 'immutable';
 import isIterable from '../utils/isIterable';
 
@@ -91,12 +92,10 @@ export function getItemString(
   );
 }
 
-export function createTreeItemLabelRenderer(styling: StylingFunction) {
+export function createTreeItemLabelRenderer(
-  return function labelRenderer(
+  styling: StylingFunction
-    [key]: (string | number)[],
+): LabelRenderer {
-    nodeType: string,
+  return function labelRenderer([key], nodeType, expanded) {
-    expanded: boolean
-  ): ReactNode {
     return (
       <span>
         <span {...styling('treeItemKey')}>{key}</span>