From b31b83010a6b2f762cbcd26becd3903a5fb81b9b Mon Sep 17 00:00:00 2001
From: Behzad Mehrabi <bezmehrabi@gmail.com>
Date: Fri, 8 Apr 2022 12:19:01 +0430
Subject: [PATCH] Data tab added

---
 .../src/components/QueryPreviewData.tsx       | 53 +++++++++++++++++++
 .../src/containers/QueryPreview.tsx           | 18 +++++++
 .../src/reducers.ts                           |  2 +-
 .../src/selectors.ts                          |  1 +
 .../src/types.ts                              |  1 +
 5 files changed, 74 insertions(+), 1 deletion(-)
 create mode 100644 packages/redux-devtools-rtk-query-monitor/src/components/QueryPreviewData.tsx

diff --git a/packages/redux-devtools-rtk-query-monitor/src/components/QueryPreviewData.tsx b/packages/redux-devtools-rtk-query-monitor/src/components/QueryPreviewData.tsx
new file mode 100644
index 00000000..8fa4e6f1
--- /dev/null
+++ b/packages/redux-devtools-rtk-query-monitor/src/components/QueryPreviewData.tsx
@@ -0,0 +1,53 @@
+import React from 'react';
+import { createSelector, Selector } from '@reduxjs/toolkit';
+import { QueryStatus } from '@reduxjs/toolkit/dist/query';
+import { RtkResourceInfo } from '../types';
+import { TreeView } from './TreeView';
+import { identity } from '../utils/object';
+
+type FormattedQuery =
+  | { status: QueryStatus.fulfilled; data: unknown }
+  | {
+      status: QueryStatus.rejected;
+      error: unknown;
+    }
+  | {
+      status: QueryStatus.uninitialized | QueryStatus.pending;
+    };
+
+const selectFormattedQuery: Selector<RtkResourceInfo, FormattedQuery> =
+  createSelector<
+    [(identity: RtkResourceInfo) => RtkResourceInfo],
+    FormattedQuery
+  >(identity, ({ state }: RtkResourceInfo): FormattedQuery => {
+    if (state.status === 'fulfilled') {
+      return {
+        status: state.status,
+        data: state.data,
+      };
+    }
+
+    if (state.status === 'rejected') {
+      return {
+        status: state.status,
+        error: state.error,
+      };
+    }
+
+    return {
+      status: state.status,
+    };
+  });
+
+export interface QueryPreviewDataProps {
+  resInfo: RtkResourceInfo;
+  isWideLayout: boolean;
+}
+
+function QueryPreviewData({ resInfo, isWideLayout }: QueryPreviewDataProps) {
+  const formattedQuery = selectFormattedQuery(resInfo);
+
+  return <TreeView data={formattedQuery} isWideLayout={isWideLayout} />;
+}
+
+export default QueryPreviewData;
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 67f47703..20fac8de 100644
--- a/packages/redux-devtools-rtk-query-monitor/src/containers/QueryPreview.tsx
+++ b/packages/redux-devtools-rtk-query-monitor/src/containers/QueryPreview.tsx
@@ -33,6 +33,9 @@ import {
   QueryPreviewActionsProps,
 } from '../components/QueryPreviewActions';
 import { isTabVisible } from '../utils/tabs';
+import QueryPreviewData, {
+  QueryPreviewDataProps,
+} from '../components/QueryPreviewData';
 
 export interface QueryPreviewProps<S = unknown> {
   readonly selectedTab: QueryPreviewTabs;
@@ -61,6 +64,11 @@ const MappedQueryPreviewTags = mapProps<
   isWideLayout,
 }))(QueryPreviewTags);
 
+const MappedQueryPreviewData = mapProps<
+  QueryPreviewTabProps,
+  QueryPreviewDataProps
+>(({ resInfo, isWideLayout }) => ({ resInfo, isWideLayout }))(QueryPreviewData);
+
 const MappedQueryPreviewInfo = mapProps<
   QueryPreviewTabProps,
   QueryPreviewInfoProps
@@ -93,6 +101,16 @@ const MappedQueryPreviewActions = mapProps<
 const tabs: ReadonlyArray<
   TabOption<QueryPreviewTabs, QueryPreviewTabProps, RtkResourceInfo['type']>
 > = [
+  {
+    label: 'Data',
+    value: QueryPreviewTabs.queryData,
+    component: MappedQueryPreviewData,
+    visible: {
+      query: true,
+      mutation: true,
+      default: true,
+    },
+  },
   {
     label: 'Query',
     value: QueryPreviewTabs.queryinfo,
diff --git a/packages/redux-devtools-rtk-query-monitor/src/reducers.ts b/packages/redux-devtools-rtk-query-monitor/src/reducers.ts
index ffac65d1..fdbf309c 100644
--- a/packages/redux-devtools-rtk-query-monitor/src/reducers.ts
+++ b/packages/redux-devtools-rtk-query-monitor/src/reducers.ts
@@ -20,7 +20,7 @@ const initialState: RtkQueryMonitorState = {
       queryFilter: QueryFilters.queryKey,
     },
   },
-  selectedPreviewTab: QueryPreviewTabs.queryinfo,
+  selectedPreviewTab: QueryPreviewTabs.queryData,
   selectedQueryKey: null,
 };
 
diff --git a/packages/redux-devtools-rtk-query-monitor/src/selectors.ts b/packages/redux-devtools-rtk-query-monitor/src/selectors.ts
index 5a964aba..7050e633 100644
--- a/packages/redux-devtools-rtk-query-monitor/src/selectors.ts
+++ b/packages/redux-devtools-rtk-query-monitor/src/selectors.ts
@@ -262,6 +262,7 @@ export function createInspectorSelectors<S>(): InspectorSelectors<S> {
         [QueryPreviewTabs.querySubscriptions]: Object.keys(subscriptions ?? {})
           .length,
         [QueryPreviewTabs.apiConfig]: 0,
+        [QueryPreviewTabs.queryData]: 0,
         [QueryPreviewTabs.queryinfo]: 0,
         [QueryPreviewTabs.actions]: actions.length,
       };
diff --git a/packages/redux-devtools-rtk-query-monitor/src/types.ts b/packages/redux-devtools-rtk-query-monitor/src/types.ts
index e81fbb9c..86b5ba01 100644
--- a/packages/redux-devtools-rtk-query-monitor/src/types.ts
+++ b/packages/redux-devtools-rtk-query-monitor/src/types.ts
@@ -8,6 +8,7 @@ import type { QueryComparators } from './utils/comparators';
 import type { QueryFilters } from './utils/filters';
 
 export enum QueryPreviewTabs {
+  queryData,
   queryinfo,
   apiConfig,
   querySubscriptions,