Skip to content

Commit 5012baf

Browse files
jrosengrantjrosengrant
committed
Merge branch 'builddifferent' into dev
Merging diff route back into dev
2 parents 16654be + af35037 commit 5012baf

File tree

7 files changed

+177
-141
lines changed

7 files changed

+177
-141
lines changed

‎demo-app/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@
1919
"copy-webpack-plugin": "^10.2.0",
2020
"css-loader": "^6.5.1",
2121
"html-webpack-plugin": "^5.5.0",
22+
"node": "^16.0.0",
2223
"nodemon": "^2.0.15",
2324
"ts-loader": "^9.2.6",
2425
"typescript": "^4.5.4",

‎src/app/components/DiffRoute/Diff.tsx

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react';
22
import { diff, formatters } from 'jsondiffpatch';
3-
const jsondiffpatch = require('jsondiffpatch');
4-
import ReactHtmlParser from 'html-react-parser';
3+
// const jsondiffpatch = require('jsondiffpatch');
4+
import Parse from 'html-react-parser';
55
import {
66
CurrentTab,
77
DiffProps,
@@ -91,11 +91,12 @@ function Diff(props: DiffProps): JSX.Element {
9191

9292
const delta = diff(previousDisplay, snapshot); // diff function from 'jsondiffpatch' returns the difference in state between 'previousDisplay' and 'snapshot'
9393

94-
const html = jsondiffpatch.formatters.format(delta, previousDisplay); // formatters function from 'jsondiffpatch' returns an html string that shows the difference between delta and the previousDisplay
94+
const html = formatters.html.format(delta, previousDisplay); // formatters function from 'jsondiffpatch' returns an html string that shows the difference between delta and the previousDisplay
95+
console.log(html);
9596

9697
if (show)
97-
jsondiffpatch.formatters.showUnchanged(); // shows unchanged values if we're on the '/diffRaw' path
98-
else jsondiffpatch.formatters.hideUnchanged(); // hides unchanged values
98+
formatters.html.showUnchanged(); // shows unchanged values if we're on the '/diffRaw' path
99+
else formatters.html.hideUnchanged(); // hides unchanged values
99100

100101
if (previous === undefined || delta === undefined) {
101102
// if there has been no state changes on the target/hooked application, previous and delta would be undefined.
@@ -107,7 +108,7 @@ function Diff(props: DiffProps): JSX.Element {
107108
</div>
108109
);
109110
}
110-
return <div>{ReactHtmlParser(html)}</div>; // ReactHTMLParser from 'react-html-parser' package converts the HTML string into a react component.
111+
return <div>{Parse(html)}</div>; // HTMLReactParser from 'html-react-parser' package converts the HTML string into a react component.
111112
}
112113

113114
export default Diff;

‎src/app/components/DiffRoute/DiffRoute.tsx

Lines changed: 14 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -11,17 +11,25 @@ import { DiffRouteProps } from '../../FrontendTypes';
1111
const DiffRoute = (props: DiffRouteProps): JSX.Element => (
1212
<div className='diff-container'>
1313
<div className='navbar'>
14-
<NavLink className='router-link' to='/'>
14+
<NavLink
15+
className={(navData) => (navData.isActive ? 'is-active router-link' : 'router-link')}
16+
to='/diff/tree'
17+
>
1518
Tree
1619
</NavLink>
17-
<NavLink className='router-link' to='/diffRaw'>
20+
<NavLink
21+
className={(navData) => (navData.isActive ? 'is-active router-link' : 'router-link')}
22+
to='/diff/diffRaw'
23+
>
1824
Raw
1925
</NavLink>
2026
</div>
21-
<Routes>
22-
<Route path='/diffRaw' element={<Diff snapshot={props.snapshot} show />} />
23-
<Route path='/' element={<Diff snapshot={props.snapshot} show={false} />} />
24-
</Routes>
27+
<div>
28+
<Routes>
29+
<Route path='/diffRaw' element={<Diff snapshot={props.snapshot} show />} />
30+
<Route path='/tree' element={<Diff snapshot={props.snapshot} show={false} />} />
31+
</Routes>
32+
</div>
2533
</div>
2634
);
2735

‎src/app/components/StateRoute/PerformanceVisx/PerformanceVisx.tsx

Lines changed: 16 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -253,17 +253,30 @@ const PerformanceVisx = (props: PerformanceVisxProps): JSX.Element => {
253253
return (
254254
<>
255255
<div className='performance-nav-bar-container'>
256-
<NavLink className='router-link-performance' end to='/performance/'>
256+
<NavLink
257+
className={(navData) =>
258+
navData.isActive ? 'is-active router-link-performance' : 'router-link-performance'
259+
}
260+
end
261+
to='/performance/'
262+
>
257263
Snapshots View
258264
</NavLink>
259265
<NavLink
260-
className='router-link-performance'
266+
className={(navData) =>
267+
navData.isActive ? 'is-active router-link-performance' : 'router-link-performance'
268+
}
261269
id='router-link-performance-comparison'
262270
to='/performance/comparison'
263271
>
264272
Comparison View
265273
</NavLink>
266-
<NavLink className='router-link-performance' to='/performance/componentdetails'>
274+
<NavLink
275+
className={(navData) =>
276+
navData.isActive ? 'is-active router-link-performance' : 'router-link-performance'
277+
}
278+
to='/performance/componentdetails'
279+
>
267280
Component Details
268281
</NavLink>
269282
</div>

‎src/app/containers/StateContainer.tsx

Lines changed: 47 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import React, { useState } from 'react';
55
*/
66
import { MemoryRouter as Router, Route, NavLink, Routes, Outlet } from 'react-router-dom';
77
import StateRoute from '../components/StateRoute/StateRoute';
8-
// import DiffRoute from '../components/DiffRoute/DiffRoute';
8+
import DiffRoute from '../components/DiffRoute/DiffRoute';
99
import { StateContainerProps } from '../FrontendTypes';
1010
import { Outlet } from 'react-router';
1111

@@ -22,40 +22,54 @@ const StateContainer = (props: StateContainerProps): JSX.Element => {
2222

2323
return (
2424
<div className='state-container'>
25-
{/* <div className='main-navbar-container'>
26-
<div className='main-navbar-text' />
27-
<div className='main-navbar'>
28-
<NavLink className='main-router-link' to='/'>
29-
State
30-
</NavLink>
31-
<NavLink className='main-router-link' to='/diff'>
32-
Diff
33-
</NavLink>
34-
</div>
35-
</div>
36-
<Routes>
37-
<Route path='/diff/*' element={
25+
<div className='main-navbar-container'>
26+
<div className='main-navbar-text' />
27+
<div className='main-navbar'>
28+
<NavLink
29+
className={(navData) =>
30+
navData.isActive ? 'is-active main-router-link' : 'main-router-link'
31+
}
32+
to='/'
33+
>
34+
State
35+
</NavLink>
36+
<NavLink
37+
className={(navData) =>
38+
navData.isActive ? 'is-active main-router-link' : 'main-router-link'
39+
}
40+
to='/diff'
41+
>
42+
Diff
43+
</NavLink>
44+
</div>
45+
</div>
46+
<Routes>
47+
<Route
48+
path='/diff/*'
49+
element={
3850
<div>
3951
<DiffRoute snapshot={snapshot} />
40-
<Outlet/>
41-
</div>} />
42-
<Route
43-
path='*'
44-
element={
45-
<div>*/}
46-
<StateRoute
47-
webMetrics={webMetrics}
48-
viewIndex={viewIndex}
49-
snapshot={snapshot}
50-
hierarchy={hierarchy}
51-
snapshots={snapshots}
52-
currLocation={currLocation}
53-
/>
54-
{/* <Outlet/> */}
55-
{/*</div>
56-
}
57-
/>
58-
</Routes> */}
52+
{/* <Outlet/> */}
53+
</div>
54+
}
55+
/>
56+
<Route
57+
path='/*'
58+
element={
59+
<div style={{ height: '100%' }}>
60+
<StateRoute
61+
webMetrics={webMetrics}
62+
viewIndex={viewIndex}
63+
snapshot={snapshot}
64+
hierarchy={hierarchy}
65+
snapshots={snapshots}
66+
currLocation={currLocation}
67+
/>
68+
{/* <Outlet/> */}
69+
</div>
70+
}
71+
/>
72+
</Routes>
5973
</div>
6074
);
6175
};

0 commit comments

Comments
 (0)