started on diff

Author: Solodt55

demo-app/package.json

@@ -19,6 +19,7 @@
     "copy-webpack-plugin": "^10.2.0",
     "css-loader": "^6.5.1",
     "html-webpack-plugin": "^5.5.0",
+    "node": "^16.0.0",
     "nodemon": "^2.0.15",
     "ts-loader": "^9.2.6",
     "typescript": "^4.5.4",

src/app/components/DiffRoute/Diff.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { diff, formatters } from 'jsondiffpatch';
-const jsondiffpatch = require('jsondiffpatch');
+// const jsondiffpatch = require('jsondiffpatch');
 import ReactHtmlParser from 'html-react-parser';
 import {
   CurrentTab,
@@ -91,11 +91,11 @@ function Diff(props: DiffProps): JSX.Element {
 
   const delta = diff(previousDisplay, snapshot); // diff function from 'jsondiffpatch' returns the difference in state between 'previousDisplay' and 'snapshot'
 
-  const html = jsondiffpatch.formatters.format(delta, previousDisplay); // formatters function from 'jsondiffpatch' returns an html string that shows the difference between delta and the previousDisplay
+  const html = formatters.format(delta, previousDisplay); // formatters function from 'jsondiffpatch' returns an html string that shows the difference between delta and the previousDisplay
 
   if (show)
-    jsondiffpatch.formatters.showUnchanged(); // shows unchanged values if we're on the '/diffRaw' path
-  else jsondiffpatch.formatters.hideUnchanged(); // hides unchanged values
+    formatters.showUnchanged(); // shows unchanged values if we're on the '/diffRaw' path
+  else formatters.hideUnchanged(); // hides unchanged values
 
   if (previous === undefined || delta === undefined) {
     // if there has been no state changes on the target/hooked application, previous and delta would be undefined.

src/app/components/DiffRoute/DiffRoute.tsx

@@ -11,16 +11,16 @@ import { DiffRouteProps } from '../../FrontendTypes';
 const DiffRoute = (props: DiffRouteProps): JSX.Element => (
   <div className='diff-container'>
     <div className='navbar'>
-      <NavLink className='router-link' to='/'>
+      <NavLink className='router-link' to='/diff'>
         Tree
       </NavLink>
-      <NavLink className='router-link' to='/diffRaw'>
+      <NavLink className='router-link' to='/diff/diffRaw'>
         Raw
       </NavLink>
     </div>
     <Routes>
-      <Route path='/diffRaw' element={<Diff snapshot={props.snapshot} show />} />
-      <Route path='/' element={<Diff snapshot={props.snapshot} show={false} />} />
+      <Route path='/diff/diffRaw' element={<Diff snapshot={props.snapshot} show />} />
+      <Route path='/diff' element={<Diff snapshot={props.snapshot} show={false} />} />
     </Routes>
   </div>
 );

src/app/containers/StateContainer.tsx

@@ -5,7 +5,7 @@ import React, { useState } from 'react';
 */
 import { MemoryRouter as Router, Route, NavLink, Routes, Outlet } from 'react-router-dom';
 import StateRoute from '../components/StateRoute/StateRoute';
-// import DiffRoute from '../components/DiffRoute/DiffRoute';
+import DiffRoute from '../components/DiffRoute/DiffRoute';
 import { StateContainerProps } from '../FrontendTypes';
 import { Outlet } from 'react-router';
 
@@ -22,7 +22,7 @@ const StateContainer = (props: StateContainerProps): JSX.Element => {
 
   return (
     <div className='state-container'>
-      {/* <div className='main-navbar-container'>
+      <div className='main-navbar-container'>
             <div className='main-navbar-text' />
             <div className='main-navbar'>
               <NavLink className='main-router-link' to='/'>
@@ -37,25 +37,24 @@ const StateContainer = (props: StateContainerProps): JSX.Element => {
             <Route path='/diff/*' element={
             <div>
               <DiffRoute snapshot={snapshot} />
-              <Outlet/>
+              {/* <Outlet/> */}
             </div>} />
             <Route
-              path='*'
+              path='/*'
               element={ 
-              <div>*/}
-      <StateRoute
-        webMetrics={webMetrics}
-        viewIndex={viewIndex}
-        snapshot={snapshot}
-        hierarchy={hierarchy}
-        snapshots={snapshots}
-        currLocation={currLocation}
-      />
-      {/* <Outlet/> */}
-      {/*</div>
-               }
-           />
-          </Routes> */}
+              <div height="100%">
+                <StateRoute
+                  webMetrics={webMetrics}
+                  viewIndex={viewIndex}
+                  snapshot={snapshot}
+                  hierarchy={hierarchy}
+                  snapshots={snapshots}
+                  currLocation={currLocation}
+                />
+                {/* <Outlet/> */}
+              </div>} 
+             />
+          </Routes>
     </div>
   );
 };