temp

packages/dev-tools/src/extension/content_script.js

@@ -43,18 +43,19 @@ function initializeAgent(target) {
         }, '*');
       }
     },
-          onRecordGroupChange: ({
-            storeId,
-            schemaType,
-            records,
-          }) => {
-            window.postMessage({
-              store: {
-                storeId, schemaType, records,
-              },
-              source: 'overreact-devtools-agent',
-            }, '*');
-          },
+    onRecordGroupChange: ({
+      storeId,
+      schemaType,
+      records,
+    }) => {
+      window.postMessage({
+        type: 'store-update',
+        store: {
+          storeId, schemaType, records,
+        },
+        source: 'overreact-devtools-agent',
+      }, '*');
+    },
   };
 
   Object.defineProperty(

packages/dev-tools/src/ui/devtools-ui.js

@@ -9,26 +9,21 @@ import { updateStore } from './slices/store';
 import port from './port';
 
 import { RequestsTab } from './tabs/requests';
+import { StoreTab } from './tabs/store';
 
 export function DevToolsUI() {
   const dispatch = useDispatch();
-  const stores = useSelector(state => state.store.stores);
-
-  console.log(stores);
 
   const handleMessageFromAgent = useCallback(msg => {
     const { type } = msg;
     if (msg.request) {
-
-    if (type === 'on-request' || type === 'on-error') {
-      dispatch(addRequest({ request: msg.request }));
+      if (type === 'on-request' || type === 'on-error') {
+        dispatch(addRequest({ request: msg.request }));
+      }
     }
 
-    if (msg.store) {
+    if (type === 'store-update') {
       dispatch(updateStore({ store: msg.store }));
-    if (type === 'get-store') {
-      // TODO
-    }
     }
   }, [dispatch]);
 
@@ -36,23 +31,8 @@ export function DevToolsUI() {
     port.onMessage.addListener(msg => handleMessageFromAgent(msg));
   }, [handleMessageFromAgent]);
 
-  const renderStore = useCallback((storeName, store) => (
-    <div>
-      <h2>{storeName}</h2>
-      <ul>
-        {store && _.keys(store).map(key => (
-          <li key={key}>{`${key}: ${JSON.stringify(store)}`}</li>
-        ))}
-      </ul>
-    </div>
-  ), []);
-
   return (
     <div>
-      <h1>Store</h1>
-      <ul>
-        { stores && _.chain(stores).keys().map(key => renderStore(key, stores[key])).value() }
-      </ul>
       <Pivot>
         <PivotItem
           headerText="Requests"
@@ -62,7 +42,7 @@ export function DevToolsUI() {
         <PivotItem
           headerText="Store"
         >
-          Placeholder for Store
+          <StoreTab />
         </PivotItem>
       </Pivot>
     </div>

packages/dev-tools/src/ui/tabs/store.js

@@ -0,0 +1,67 @@
+import React, {
+  useState, useCallback, useMemo, useReducer, useEffect,
+} from 'react';
+import { useSelector } from 'react-redux';
+import ReactJson from 'react-json-view';
+import {
+  Label,
+
+  mergeStyleSets,
+  Depths,
+} from '@fluentui/react';
+
+const classNames = mergeStyleSets({
+  tabContainer: {
+    display: 'flex',
+    flex: 1,
+  },
+  leftPane: {
+    display: 'flex',
+    flexDirection: 'column',
+  },
+  rightPane: {
+    display: 'flex',
+    minWidth: 300,
+    flexDirection: 'column',
+    padding: 10,
+    boxShadow: Depths.depth4,
+  },
+});
+
+function Store(props) {
+  const { stores } = props;
+
+  const onSelect = useCallback(select => {
+    window._select = select;
+    console.log(select);
+  }, []);
+
+  return (
+    <div>
+      <Label>Stores</Label>
+      <ReactJson
+        src={stores}
+        name={null}
+        collapsed={2}
+        onSelect={onSelect}
+      />
+    </div>
+  );
+}
+
+export function StoreTab() {
+  // const [tick, forceRerender] = useReducer(x => x + 1, 0);
+
+  const stores = useSelector(state => state.store.stores);
+
+  return (
+    <div className={classNames.tabContainer}>
+      <div className={classNames.leftPane}>
+        <Store stores={stores} />
+      </div>
+      <div className={classNames.rightPane}>
+        datarefs
+      </div>
+    </div>
+  );
+}

yarn.lock

@@ -16829,7 +16829,7 @@ unbox-primitive@^1.0.1:
     has-symbols "^1.0.2"
     which-boxed-primitive "^1.0.2"
 
-underscore@^1.10.2:
+underscore@*, underscore@^1.10.2:
   version "1.13.1"
   resolved "https://registry.yarnpkg.com/underscore/-/underscore-1.13.1.tgz#0c1c6bd2df54b6b69f2314066d65b6cde6fcf9d1"
   integrity sha512-hzSoAVtJF+3ZtiFX0VgfFPHEDRm7Y/QPjGyNo4TVdnDTdft3tr8hEkD25a1jC+TjTuE7tkHGKkhwCgs9dgBB2g==