added react-router to switch between tree and chart component

Author: joshua0308

package-lock.json

@@ -51,6 +51,7 @@
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
     "react-json-tree": "^0.11.2",
+    "react-router-dom": "^5.0.1",
     "redux-devtools-themes": "^1.0.0",
     "sass": "^1.22.7"
   }

package.json

@@ -0,0 +1,5 @@
+import React from 'react';
+
+const Chart = props => <div>Chart</div>;
+
+export default Chart;

src/app/components/Chart.jsx

@@ -10,12 +10,18 @@ const getItemString = (type, data, itemType, itemString) => (
 
 const Tree = (props) => {
   const { snapshot } = props;
+  console.log('TREE COMPONENT IS PRINTED');
+  console.log(snapshot);
   return (
-    <JSONTree
-      data={snapshot}
-      theme={{ tree: () => ({ className: 'json-tree' }) }}
-      getItemString={getItemString}
-    />
+    <React.Fragment>
+      {snapshot && (
+        <JSONTree
+          data={snapshot}
+          theme={{ tree: () => ({ className: 'json-tree' }) }}
+          getItemString={getItemString}
+        />
+      )}
+    </React.Fragment>
   );
 };
 export default Tree;

src/app/components/Tree.jsx

@@ -1,66 +1,34 @@
 import React, { Component } from 'react';
-import * as themes from 'redux-devtools-themes';
+import { MemoryRouter as Router, Route, NavLink } from 'react-router-dom';
 import Tree from '../components/Tree';
-
-const getItemString = (type, data, itemType, itemString) => (
-  <span>
-    //
-    {type}
-  </span>
-);
+import Chart from '../components/Chart';
 
 class StateContainer extends Component {
   constructor(props) {
     super(props);
-    console.log(themes);
   }
 
   render() {
     const { snapshot } = this.props;
-    return <div className="state-container">{snapshot && <Tree snapshot={snapshot} />}</div>;
+    return (
+      <Router>
+        <div className="state-container">
+          <div className="navbar">
+            <NavLink className="router-link" activeClassName="is-active" to="/tree">
+              Tree
+            </NavLink>
+            <NavLink className="router-link" activeClassName="is-active" to="/chart">
+              Chart
+            </NavLink>
+          </div>
+          <Route path="/tree" render={() => <Tree snapshot={snapshot} />} />
+          <Route path="/chart" render={() => <Chart snapshot={snapshot} />} />
+        </div>
+      </Router>
+    );
   }
 }
+{
+}
 
 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

@@ -1,4 +1,5 @@
 import React, { Component } from 'react';
+
 import Slider from '../components/Slider';
 
 class TravelContainer extends Component {

src/app/containers/TravelContainer.jsx

@@ -16,6 +16,11 @@ $light-grey-one: #474c55 !default;
 /// @type Color
 $light-grey-two: #5f6369 !default;
 
+$light-grey-three: rgb(101, 104, 110) !default;
+
+/// @type Color
+$navbar-color: rgb(68, 72, 78) !default;
+
 /// @type Color
 $border-color: rgba(190, 190, 190, 0.5) !default;
 

src/app/styles/abstracts/_variables.scss

@@ -6,6 +6,31 @@
   background-color: $brand-color;
 }
 
-// .state-container ul {
-//   background-color: $brand-color;
-// }
+.state-container .navbar {
+  background-color: $navbar-color;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+  height: 30px;
+}
+
+.state-container {
+  .router-link {
+    height: 100%;
+    width: 80px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: $navbar-color;
+    text-decoration: none;
+    color: $text-color;
+  }
+  .router-link:hover {
+    background-color: $light-grey-three;
+  }
+
+  .router-link.is-active {
+    background-color: $brand-color;
+  }
+}