changed tree background theme

Author: joshua0308

package-lock.json

@@ -50,7 +50,8 @@
     "rc-tooltip": "^3.7.3",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
-    "react-json-view": "^1.19.1",
+    "react-json-tree": "^0.11.2",
+    "redux-devtools-themes": "^1.0.0",
     "sass": "^1.22.7"
   }
 }

package.json

@@ -44,8 +44,8 @@ class MainContainer extends Component {
 
   emptySnapshot() {
     const { port } = this.state;
-    this.setState({ snapshots: [] , snapshotIndex: 0 });
-    port.postMessage({ action: 'emptySnap'});
+    this.setState({ snapshots: [], snapshotIndex: 0 });
+    port.postMessage({ action: 'emptySnap' });
   }
 
   // change the snapshot index
@@ -88,7 +88,7 @@ class MainContainer extends Component {
 
   render() {
     const { snapshots, snapshotIndex } = this.state;
-    
+
     return (
       <div className="main-container">
         <HeadContainer />

src/app/containers/MainContainer.jsx

@@ -1,28 +1,76 @@
 import React, { Component } from 'react';
-import ReactJson from 'react-json-view';
+import JSONTree from 'react-json-tree';
+import * as themes from 'redux-devtools-themes';
 
-const JsonDisplay = (snapshot, index) => (
-  <ReactJson
-    key={`JsonDisplay${index}`}
-    enableClipboard={false}
-    theme="solarized"
-    groupArraysAfterLength={50}
-    src={snapshot}
-  />
+const getItemString = (type, data, itemType, itemString) => (
+  <span>
+    //
+    {type}
+  </span>
 );
+
 class StateContainer extends Component {
   constructor(props) {
     super(props);
+    console.log(themes);
   }
 
   render() {
-    let snapshotObjs = [];
     const { snapshot } = this.props;
-    if (snapshot) {
-      snapshotObjs = snapshot.map((component, index) => JsonDisplay(component, index));
-    }
-    return <div className="state-container">{snapshotObjs}</div>;
+    return (
+      <div className="state-container">
+        {snapshot && (
+          <JSONTree
+            data={snapshot}
+            theme={{ tree: () => ({ className: 'json-tree' }) }}
+            getItemString={getItemString}
+          />
+        )}
+      </div>
+    );
   }
 }
 
 export default StateContainer;
+
+// const theme = {
+//   scheme: 'monokai',
+//   author: 'wimer hazenberg (http://www.monokai.nl)',
+//   base00: '#272822',
+//   base01: '#383830',
+//   base02: '#49483e',
+//   base03: '#75715e',
+//   base04: '#a59f85',
+//   base05: '#f8f8f2',
+//   base06: '#f5f4f1',
+//   base07: '#f9f8f5',
+//   base08: '#f92672',
+//   base09: '#fd971f',
+//   base0A: '#f4bf75',
+//   base0B: '#a6e22e',
+//   base0C: '#a1efe4',
+//   base0D: '#66d9ef',
+//   base0E: '#ae81ff',
+//   base0F: '#cc6633',
+// };
+
+// const theme = {
+//   scheme: 'nicinabox',
+//   author: 'nicinabox (http://github.com/nicinabox)',
+//   base00: '#2A2F3A',
+//   base01: '#3C444F',
+//   base02: '#4F5A65',
+//   base03: '#BEBEBE',
+//   base04: '#b0b0b0', // based on ocean theme
+//   base05: '#d0d0d0', // based on ocean theme
+//   base06: '#FFFFFF',
+//   base07: '#f5f5f5', // based on ocean theme
+//   base08: '#fb9fb1', // based on ocean theme
+//   base09: '#FC6D24',
+//   base0A: '#ddb26f', // based on ocean theme
+//   base0B: '#A1C659',
+//   base0C: '#12cfc0', // based on ocean theme
+//   base0D: '#6FB3D2',
+//   base0E: '#D381C3',
+//   base0F: '#deaf8f', // based on ocean theme
+// };

src/app/containers/StateContainer.jsx

@@ -0,0 +1,6 @@
+.json-tree {
+  margin: 0;
+  padding: 10px;
+  background-color: $brand-color;
+  list-style: none;
+}

src/app/styles/components/_jsonTree.scss

@@ -0,0 +1,11 @@
+.state-container {
+  font-size: 15px;
+  flex: 6 auto;
+  height: 100%;
+  overflow: scroll;
+  background-color: $brand-color;
+}
+
+// .state-container ul {
+//   background-color: $brand-color;
+// }

src/app/styles/layout/_stateContainer.scss

@@ -7,10 +7,11 @@
 @import 'base/base', 'base/fonts', 'base/helpers', 'base/typography';
 
 // 4. Layout-related sections
-@import 'layout/actionContainer';
+@import 'layout/actionContainer', 'layout/stateContainer';
 
 // 5. Components
-@import 'components/buttons', 'components/actionComponent';
+@import 'components/buttons', 'components/actionComponent',
+  'components/jsonTree';
 
 // other styles that needs to be modularized
 @import 'styles';

src/app/styles/main.scss

@@ -16,14 +16,6 @@
   flex-wrap: wrap;
 }
 
-.state-container {
-  font-size: 15px;
-  flex: 6 auto;
-  height: 100%;
-  overflow: scroll;
-  background-color: $brand-color;
-}
-
 /* if extension width is less than 500px, stack the body containers */
 // this is not working for some reason
 @media (max-width: 500px) {

src/app/styles/styles.scss

@@ -8,7 +8,6 @@ let snapshotArr = [];
 // establishing connection with devtools
 chrome.runtime.onConnect.addListener((port) => {
   bg = port;
-  // bg.postMessage({ from: 'background.js', message: 'established connection', date: Date.now() });
 
   // if snapshots were saved in the snapshotArr,
   // send it to devtools as soon as connection to devtools is made
@@ -19,7 +18,7 @@ chrome.runtime.onConnect.addListener((port) => {
   // receive snapshot from devtools and send it to contentScript
   port.onMessage.addListener((msg) => {
     console.log('background -> contentScript', msg);
-    if(msg.action==='emptySnap') {
+    if (msg.action === 'emptySnap') {
       snapshotArr = [];
     } else {
       // find active tab
@@ -33,6 +32,7 @@ chrome.runtime.onConnect.addListener((port) => {
 
 // background.js recieves message from contentScript.js
 chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
+  console.log(request);
   // if port is not null, send a message to devtools
   if (bg) {
     // get active tab id

src/extension/background.js

@@ -3,7 +3,7 @@ console.log('contentScript running');
 // listening for messages from npm package
 window.addEventListener('message', (msg) => {
   const { action, payload } = msg.data;
-
+  console.log(msg.data);
   if (action === 'recordSnap') chrome.runtime.sendMessage(payload);
 });