From 0319b810c99e7f0e199a6bd284df540d51d8560f Mon Sep 17 00:00:00 2001
From: FaberVitale <faber.vitale@gmail.com>
Date: Sun, 27 Jun 2021 14:10:07 +0200
Subject: [PATCH] feat(rtk-query): do not display tree node preview

Other changes:

* improve visibility of demo devTools on small devices

* tweak QueryPreviewInfo labels
---
 .../demo/src/DevTools.tsx                      |  4 ++--
 .../demo/src/features/posts/PostsManager.tsx   |  9 ++++-----
 .../demo/src/index.css                         |  2 +-
 .../src/components/QueryPreviewInfo.tsx        |  6 +++---
 .../src/components/TreeView.tsx                | 18 +++++++++---------
 .../src/containers/RtkQueryInspector.tsx       |  2 +-
 .../src/styles/tree.tsx                        | 10 +++++-----
 7 files changed, 25 insertions(+), 26 deletions(-)

diff --git a/packages/redux-devtools-rtk-query-monitor/demo/src/DevTools.tsx b/packages/redux-devtools-rtk-query-monitor/demo/src/DevTools.tsx
index ab93ccdf..4051dfc0 100644
--- a/packages/redux-devtools-rtk-query-monitor/demo/src/DevTools.tsx
+++ b/packages/redux-devtools-rtk-query-monitor/demo/src/DevTools.tsx
@@ -7,11 +7,11 @@ const largeScreenQuery = window.matchMedia('(min-width: 1024px)');
 
 export default createDevTools(
   <DockMonitor
-    fluid
     toggleVisibilityKey="ctrl-h"
     changePositionKey="ctrl-q"
     changeMonitorKey="ctrl-m"
-    defaultSize={largeScreenQuery.matches ? 0.34 : 0.55}
+    fluid
+    defaultSize={largeScreenQuery.matches ? 0.44 : 0.55}
   >
     <RtkQueryMonitor />
   </DockMonitor>
diff --git a/packages/redux-devtools-rtk-query-monitor/demo/src/features/posts/PostsManager.tsx b/packages/redux-devtools-rtk-query-monitor/demo/src/features/posts/PostsManager.tsx
index 7be37aad..daeba804 100644
--- a/packages/redux-devtools-rtk-query-monitor/demo/src/features/posts/PostsManager.tsx
+++ b/packages/redux-devtools-rtk-query-monitor/demo/src/features/posts/PostsManager.tsx
@@ -52,10 +52,10 @@ const AddPost = () => {
   };
 
   return (
-    <Flex p={5}>
-      <Box flex={10}>
-        <FormControl isInvalid={Boolean(post.name.length < 3 && post.name)}>
-          <FormLabel htmlFor="name">Post name</FormLabel>
+    <Flex p={'5px 0'} flexDirection="row" flexWrap="wrap" maxWidth={'85%'}>
+      <Box flex={'5 0 auto'} padding="0 5px 0 0">
+        <FormControl flexDirection="column" isInvalid={Boolean(post.name.length < 3 && post.name)}>
+          <FormLabel  htmlFor="name">Post name</FormLabel>
           <Input
             id="name"
             name="name"
@@ -65,7 +65,6 @@ const AddPost = () => {
           />
         </FormControl>
       </Box>
-      <Spacer />
       <Box>
         <Button
           mt={8}
diff --git a/packages/redux-devtools-rtk-query-monitor/demo/src/index.css b/packages/redux-devtools-rtk-query-monitor/demo/src/index.css
index 7e8b2943..ae605301 100644
--- a/packages/redux-devtools-rtk-query-monitor/demo/src/index.css
+++ b/packages/redux-devtools-rtk-query-monitor/demo/src/index.css
@@ -35,7 +35,7 @@ h6 {
 
 section {
   display: block;
-  max-width: 67vw;
+  max-width: 65%;
 }
 
 .pokemon-list {
diff --git a/packages/redux-devtools-rtk-query-monitor/src/components/QueryPreviewInfo.tsx b/packages/redux-devtools-rtk-query-monitor/src/components/QueryPreviewInfo.tsx
index f9cee0f5..f4e82937 100644
--- a/packages/redux-devtools-rtk-query-monitor/src/components/QueryPreviewInfo.tsx
+++ b/packages/redux-devtools-rtk-query-monitor/src/components/QueryPreviewInfo.tsx
@@ -9,7 +9,7 @@ import { TreeView } from './TreeView';
 
 type QueryTimings = {
   startedAt: string;
-  latestFetchAt: string;
+  loadedAt: string;
   duration: string;
 };
 
@@ -45,7 +45,7 @@ export class QueryPreviewInfo extends PureComponent<QueryPreviewInfoProps> {
         ? new Date(query.startedTimeStamp).toISOString()
         : '-';
 
-      const latestFetchAt = query.fulfilledTimeStamp
+      const loadedAt = query.fulfilledTimeStamp
         ? new Date(query.fulfilledTimeStamp).toISOString()
         : '-';
 
@@ -53,7 +53,7 @@ export class QueryPreviewInfo extends PureComponent<QueryPreviewInfoProps> {
 
       const timings = {
         startedAt,
-        latestFetchAt,
+        loadedAt,
         duration: '-',
       };
 
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 8f97977c..103f76c4 100644
--- a/packages/redux-devtools-rtk-query-monitor/src/components/TreeView.tsx
+++ b/packages/redux-devtools-rtk-query-monitor/src/components/TreeView.tsx
@@ -42,13 +42,14 @@ export class TreeView extends React.PureComponent<TreeViewProps> {
     ReturnType<typeof createTreeItemLabelRenderer>
   >(identity, createTreeItemLabelRenderer);
 
-  readonly selectGetItemString = createSelector(
-    [
-      (styling: StylingFunction, _: boolean) => styling,
-      (_: StylingFunction, isWideLayout: boolean) => isWideLayout,
-    ],
-    (styling, isWideLayout) => (type: string, data: any) =>
-      getItemString(styling, type, data, DATA_TYPE_KEY, isWideLayout)
+  readonly selectGetItemString = createSelector<
+    StylingFunction,
+    StylingFunction,
+    (type: string, data: unknown) => ReactNode
+  >(
+    identity,
+    (styling) => (type, data) =>
+      getItemString(styling, type, data, DATA_TYPE_KEY, false)
   );
 
   readonly selectTheme = createSelector<
@@ -63,7 +64,6 @@ export class TreeView extends React.PureComponent<TreeViewProps> {
 
   render(): ReactNode {
     const {
-      isWideLayout,
       data,
       before,
       after,
@@ -86,7 +86,7 @@ export class TreeView extends React.PureComponent<TreeViewProps> {
                 labelRenderer={this.selectLabelRenderer(styling)}
                 theme={this.selectTheme(base16Theme)}
                 invertTheme={invertTheme}
-                getItemString={this.selectGetItemString(styling, isWideLayout)}
+                getItemString={this.selectGetItemString(styling)}
                 hideRoot={hideRoot}
               />
               {after}
diff --git a/packages/redux-devtools-rtk-query-monitor/src/containers/RtkQueryInspector.tsx b/packages/redux-devtools-rtk-query-monitor/src/containers/RtkQueryInspector.tsx
index 5d772374..cd7b0e3e 100644
--- a/packages/redux-devtools-rtk-query-monitor/src/containers/RtkQueryInspector.tsx
+++ b/packages/redux-devtools-rtk-query-monitor/src/containers/RtkQueryInspector.tsx
@@ -77,7 +77,7 @@ class RtkQueryInspector<S, A extends Action<unknown>> extends PureComponent<
   updateSizeMode = (): void => {
     if (this.inspectorRef.current) {
       const isWideLayout =
-        this.inspectorRef.current.offsetWidth > RtkQueryInspector.wideLayout;
+        this.inspectorRef.current.offsetWidth >= RtkQueryInspector.wideLayout;
 
       if (isWideLayout !== this.state.isWideLayout) {
         this.setState({ isWideLayout });
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 5840ed5d..1dfe3469 100644
--- a/packages/redux-devtools-rtk-query-monitor/src/styles/tree.tsx
+++ b/packages/redux-devtools-rtk-query-monitor/src/styles/tree.tsx
@@ -40,12 +40,12 @@ function getShortTypeString(val: unknown, diff: boolean | undefined) {
 function getText(
   type: string,
   data: any,
-  isWideLayout: boolean,
+  previewContent: boolean,
   isDiff: boolean | undefined
 ) {
   if (type === 'Object') {
     const keys = Object.keys(data);
-    if (!isWideLayout) return keys.length ? '{…}' : '{}';
+    if (!previewContent) return keys.length ? '{…}' : '{}';
 
     const str = keys
       .slice(0, 3)
@@ -57,7 +57,7 @@ function getText(
 
     return `{ ${str} }`;
   } else if (type === 'Array') {
-    if (!isWideLayout) return data.length ? '[…]' : '[]';
+    if (!previewContent) return data.length ? '[…]' : '[]';
 
     const str = data
       .slice(0, 4)
@@ -76,7 +76,7 @@ export function getItemString(
   type: string,
   data: any,
   dataTypeKey: string | symbol | undefined,
-  isWideLayout: boolean,
+  previewContent: boolean,
   isDiff?: boolean
 ): ReactNode {
   return (
@@ -85,7 +85,7 @@ export function getItemString(
       {dataTypeKey && data[dataTypeKey]
         ? `${data[dataTypeKey] as string} `
         : ''}
-      {getText(type, data, isWideLayout, isDiff)}
+      {getText(type, data, previewContent, isDiff)}
     </span>
   );
 }