Merge pull request #70 from oslabs-beta/bryan/diff

Bryan/diff

Author: starkspark

package-lock.json

@@ -52,9 +52,11 @@
   },
   "dependencies": {
     "d3": "^3.5.17",
+    "jsondiffpatch": "^0.3.11",
     "prop-types": "^15.7.2",
     "rc-slider": "^8.6.13",
     "rc-tooltip": "^3.7.3",
+    "react-html-parser": "^2.0.2",
     "react": "^16.9.0",
     "react-dom": "^16.9.0",
     "react-json-tree": "^0.11.2",

package.json

@@ -4,7 +4,6 @@
 /* eslint-disable react/no-string-refs */
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import '../styles/components/_d3Tree.scss';
 import * as d3 from 'd3';
 
 let root = {};

src/app/components/Chart.jsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { diff, formatters } from 'jsondiffpatch';
+import ReactHtmlParser from 'react-html-parser';
+
+import { useStoreContext } from '../store';
+
+function Diff({ snapshot, show }) {
+  const [mainState] = useStoreContext();
+  const { currentTab, tabs } = mainState;
+  const { snapshots, viewIndex, sliderIndex } = tabs[currentTab];
+  let previous;
+
+  // previous follows viewIndex or sliderIndex
+  if (viewIndex !== -1) {
+    previous = snapshots[viewIndex - 1];
+  } else {
+    previous = snapshots[sliderIndex - 1];
+  }
+
+  const delta = diff(previous, snapshot);
+  // returns html in string
+  const html = formatters.html.format(delta, previous);
+  if (show) formatters.html.showUnchanged();
+  else formatters.html.hideUnchanged();
+
+  if (previous === undefined) return <div> states are equal </div>;
+  return (
+    <div>
+      { ReactHtmlParser(html) }
+    </div>
+  );
+}
+
+Diff.propTypes = {
+  snapshot: PropTypes.shape({
+    state: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+    children: PropTypes.arrayOf(PropTypes.object),
+  }).isRequired,
+  show: PropTypes.bool.isRequired,
+};
+
+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,29 +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 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>
+
+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="/" render={() => <Tree snapshot={snapshot} />} />
-      </Switch>
-    </div>
-  </Router>
-);
+    </Router>
+  );
+};
 
 StateContainer.propTypes = {
   snapshot: PropTypes.shape({