diffing tab at top right with text

Author: mylee1995

package-lock.json

@@ -50,12 +50,12 @@
   "dependencies": {
     "d3": "^3.5.17",
     "jsondiffpatch": "^0.3.11",
-    "jsondiffpatch-for-react": "^1.0.3",
     "prop-types": "^15.7.2",
     "rc-slider": "^8.6.13",
     "rc-tooltip": "^3.7.3",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
+    "react-html-parser": "^2.0.2",
     "react-json-tree": "^0.11.2",
     "react-router-dom": "^5.0.1",
     "react-select": "^3.0.4",

package.json

@@ -1,11 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { diff, reverse, formatters } from "jsondiffpatch";
+import { diff, formatters } from 'jsondiffpatch';
+import ReactHtmlParser from 'react-html-parser';
 import './diff.css';
 
 import { useStoreContext } from '../store';
 
-function Diff({ snapshot }) {
+function Diff({ snapshot, show }) {
   const [mainState] = useStoreContext();
   const { snapshots, viewIndex } = mainState;
 
@@ -21,20 +22,13 @@ function Diff({ snapshot }) {
   } else {
     [previous] = snapshots;
   }
-  const delta = diff(previous,snapshot)
-  console.log('delta',delta);
+
+  const delta = diff(previous, snapshot);
   const html = formatters.html.format(delta, previous);
-  console.log('format', formatters.html.format(delta, previous));
-  if (previous === undefined) {
-    return (
-      <div>
-       states are equal
-      </div>
-    );
-  }
+  show ? formatters.html.showUnchanged() : formatters.html.hideUnchanged();
+
   return (
-    <div dangerouslySetInnerHTML={{__html: html}}>
-    </div>
+    previous ? <div> { ReactHtmlParser(html) } </div> : <div>states are equal</div>
   );
 }
 
@@ -43,6 +37,7 @@ Diff.propTypes = {
     state: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
     children: PropTypes.arrayOf(PropTypes.object),
   }).isRequired,
+  // show: PropTypes.boolean,
 };
 
 export default Diff;

src/app/components/Diff.jsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {
+  MemoryRouter as Router, Route, NavLink, Switch,
+} from 'react-router-dom';
+
+import Diff from './Diff';
+
+const DiffRoute = ({ snapshot }) => (
+  <Router>
+    <div className="navbar">
+      <NavLink className="router-link" activeClassName="is-active" exact to="/">
+        Tree
+      </NavLink>
+      <NavLink className="router-link" activeClassName="is-active" to="/diffRaw">
+        Raw
+      </NavLink>
+    </div>
+    <Switch>
+      <Route path="/diffRaw" render={() => <Diff snapshot={snapshot} show />} />
+      <Route path="/" render={() => <Diff snapshot={snapshot} show={false} />} />
+    </Switch>
+  </Router>
+);
+
+DiffRoute.propTypes = {
+  snapshot: PropTypes.shape({
+    state: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+    children: PropTypes.arrayOf(PropTypes.object),
+  }).isRequired,
+};
+
+export default DiffRoute;

src/app/components/DiffRoute.jsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {
+  MemoryRouter as Router, Route, NavLink, Switch,
+} from 'react-router-dom';
+
+import Chart from './Chart';
+import Tree from './Tree';
+
+const StateRoute = ({ snapshot }) => (
+  <Router>
+    <div className="navbar">
+      <NavLink className="router-link" activeClassName="is-active" exact to="/">
+        Tree
+      </NavLink>
+      <NavLink className="router-link" activeClassName="is-active" to="/chart">
+        Chart
+      </NavLink>
+    </div>
+    <Switch>
+      <Route path="/chart" render={() => <Chart snapshot={snapshot} />} />
+      <Route path="/" render={() => <Tree snapshot={snapshot} />} />
+    </Switch>
+  </Router>
+);
+
+StateRoute.propTypes = {
+  snapshot: PropTypes.shape({
+    state: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+    children: PropTypes.arrayOf(PropTypes.object),
+  }).isRequired,
+};
+
+export default StateRoute;

src/app/components/StateRoute.jsx

@@ -1,34 +1,38 @@
-import React from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import {
   MemoryRouter as Router, Route, NavLink, Switch,
 } from 'react-router-dom';
-import Tree from '../components/Tree';
-import Chart from '../components/Chart';
-import Diff from '../components/Diff';
+import StateRoute from '../components/StateRoute';
+import DiffRoute from '../components/DiffRoute';
 
-const StateContainer = ({ snapshot }) => (
-  <Router>
-    <div className="state-container">
-      <div className="navbar">
-        <NavLink className="router-link" activeClassName="is-active" exact to="/">
-          Tree
-        </NavLink>
-        <NavLink className="router-link" activeClassName="is-active" to="/chart">
-          Chart
-        </NavLink>
-        <NavLink className="router-link" activeClassName="is-active" to="/diff">
-          Diff
-        </NavLink>
+
+const StateContainer = ({ snapshot }) => {
+  const [Text, setText] = useState('State');
+  return (
+    <Router>
+      <div className="state-container">
+        <div className="main-navbar-container">
+          <div className="main-navbar-text">
+            {Text}
+          </div>
+          <div className="main-navbar">
+            <NavLink className="main-router-link" activeClassName="is-active" exact to="/">
+              State
+            </NavLink>
+            <NavLink className="main-router-link" activeClassName="is-active" to="/diff">
+              Diff
+            </NavLink>
+          </div>
+        </div>
+        <Switch>
+          <Route path="/diff" render={() => { setText('Diff'); return <DiffRoute snapshot={snapshot} />; }} />
+          <Route path="/" render={() => { setText('State'); return <StateRoute snapshot={snapshot} />; }} />
+        </Switch>
       </div>
-      <Switch>
-        <Route path="/chart" render={() => <Chart snapshot={snapshot} />} />
-        <Route path="/diff" render={() => <Diff snapshot={snapshot} />} />
-        <Route path="/" render={() => <Tree snapshot={snapshot} />} />
-      </Switch>
-    </div>
-  </Router>
-);
+    </Router>
+  );
+};
 
 StateContainer.propTypes = {
   snapshot: PropTypes.shape({

src/app/containers/StateContainer.jsx

@@ -13,6 +13,24 @@
   height: 30px;
 }
 
+.state-container .main-navbar{
+  background-color: #565A61;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  height: 40px;
+  margin: 6px;
+}
+
+.state-container .main-navbar-container{
+  background-color: #565A61;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  height: 40px;
+}
+
 .navbar {
   // prevent navbar from scrolling with state/tree display
   position: sticky;
@@ -23,6 +41,27 @@
 }
 
 .state-container {
+  .main-navbar-text {
+    margin: 6px;
+  }
+  .main-router-link {
+    height: 80%;
+    width: 80px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: $navbar-color;
+    text-decoration: none;
+    color: $text-color;
+  }
+  .main-router-link:hover {
+    background-color: $light-grey-three;
+  }
+
+  .main-router-link.is-active {
+    background-color: $brand-color;
+  }
+
   .router-link {
     height: 100%;
     width: 80px;