Merge pull request #36 from oslabs-beta/josh/react-router

implemented react-router and fixed tree component from changing size of outer div

Author: mylee1995

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

@@ -0,0 +1,27 @@
+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;
+  console.log('TREE COMPONENT IS PRINTED');
+  console.log(snapshot);
+  return (
+    <React.Fragment>
+      {snapshot && (
+        <JSONTree
+          data={snapshot}
+          theme={{ tree: () => ({ className: 'json-tree' }) }}
+          getItemString={getItemString}
+        />
+      )}
+    </React.Fragment>
+  );
+};
+export default Tree;

src/app/components/Tree.jsx

@@ -1,76 +1,34 @@
 import React, { Component } from 'react';
-import JSONTree from 'react-json-tree';
-import * as themes from 'redux-devtools-themes';
-
-const getItemString = (type, data, itemType, itemString) => (
-  <span>
-    //
-    {type}
-  </span>
-);
+import { MemoryRouter as Router, Route, NavLink } from 'react-router-dom';
+import Tree from '../components/Tree';
+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 && (
-          <JSONTree
-            data={snapshot}
-            theme={{ tree: () => ({ className: 'json-tree' }) }}
-            getItemString={getItemString}
-          />
-        )}
-      </div>
+      <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,5 +1,5 @@
 import React from 'react';
-import MainSlider from '../components/MainSlider'
+import MainSlider from '../components/MainSlider';
 
 const TravelContainer = ({
   playForward,

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

@@ -9,7 +9,17 @@
   visibility: hidden;
 }
 
+.jump-button:focus {
+  outline: 0;
+  // make the text in the button not highlightable
+  -webkit-user-select: none; /* Safari */
+  -moz-user-select: none; /* Firefox */
+  -ms-user-select: none; /* IE10+/Edge */
+  user-select: none; /* Standard */
+}
+
 .jump-button:hover {
+  // remove the blue border when button is clicked
   background-color: $highlight-color;
 }
 

src/app/styles/components/_buttons.scss

@@ -1,7 +1,8 @@
 .json-tree {
-  margin: 0;
-  padding: 10px;
+  position: absolute;
+  margin: 10px;
+  padding: 0;
   background-color: $brand-color;
   list-style: none;
-  min-width: 300px;
+  // overflow: hidden;
 }