changed TreeContainer to a functional component Tree.jsx

Author: joshua0308

src/app/components/Tree.jsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import JSONTree from 'react-json-tree';
+
+const getItemString = (type, data, itemType, itemString) => (
+  <span>
+    //
+    {type}
+  </span>
+);
+
+const Tree = (props) => {
+  const { snapshot } = props;
+  return (
+    <JSONTree
+      data={snapshot}
+      theme={{ tree: () => ({ className: 'json-tree' }) }}
+      getItemString={getItemString}
+    />
+  );
+};
+export default Tree;

src/app/containers/StateContainer.jsx

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
-import JSONTree from 'react-json-tree';
 import * as themes from 'redux-devtools-themes';
+import Tree from '../components/Tree';
 
 const getItemString = (type, data, itemType, itemString) => (
   <span>
@@ -17,17 +17,7 @@ class StateContainer extends Component {
 
   render() {
     const { snapshot } = this.props;
-    return (
-      <div className="state-container">
-        {snapshot && (
-          <JSONTree
-            data={snapshot}
-            theme={{ tree: () => ({ className: 'json-tree' }) }}
-            getItemString={getItemString}
-          />
-        )}
-      </div>
-    );
+    return <div className="state-container">{snapshot && <Tree snapshot={snapshot} />}</div>;
   }
 }
 

src/extension/background.js

@@ -1,10 +1,6 @@
 console.log('background.js file is running');
 
 let bg;
-
-// when tab refreshes, empty snapshotArr
-
-// need a function to clear snapshotArr when either tab is closed or page is refreshed
 let snapshotArr = [];
 
 // establishing connection with devtools
@@ -34,17 +30,11 @@ chrome.runtime.onConnect.addListener((port) => {
 
 // background.js recieves message from contentScript.js
 chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
-  console.log('npm -> background', request);
-  // if port is not null, send a message to devtools
-
-  if (request.action === 'tabReload') {
-    console.log('tabReload');
-    snapshotArr = [];
-  }
+  if (request.action === 'tabReload') snapshotArr = [];
 
-  console.log(request);
   if (request.action === 'recordSnap') {
     snapshotArr.push(request.payload);
+    // if port is not null, send a message to devtools
     if (bg) {
       // get active tab id
       // get snapshot arr from tab object