Skip to content

Commit 902536b

Browse files
jrosengrantjrosengrant
committed
merged remove-diff with dependencies
2 parents 73952ee + 69622a7 commit 902536b

File tree

3 files changed

+145
-144
lines changed

3 files changed

+145
-144
lines changed

‎src/app/components/Diff.tsx

Lines changed: 91 additions & 92 deletions
Original file line numberDiff line numberDiff line change
@@ -1,107 +1,106 @@
1-
import React from 'react';
2-
import { diff } from 'jsondiffpatch';
3-
import formatters from 'jsondiffpatch/build/formatters';
4-
import HtmlReactParser from 'html-react-parser';
5-
import { CurrentTab, DiffProps, MainState, RootState, StatelessCleaning } from '../FrontendTypes';
6-
import { useSelector } from 'react-redux';
1+
// import React from 'react';
2+
// import { diff, formatters } from 'jsondiffpatch';
3+
// import ReactHtmlParser from 'react-html-parser';
4+
// import { CurrentTab, DiffProps, MainState, RootState, StatelessCleaning } from '../FrontendTypes';
5+
// import { useSelector } from 'react-redux';
76

8-
/**
9-
* Displays tree showing two specific versions of tree:
10-
* one with specific state changes, the other the whole tree
11-
* @param props props from maincontainer
12-
* @returns a diff tree or a string stating no state changes have happened
13-
*/
7+
// /**
8+
// * Displays tree showing two specific versions of tree:
9+
// * one with specific state changes, the other the whole tree
10+
// * @param props props from maincontainer
11+
// * @returns a diff tree or a string stating no state changes have happened
12+
// */
1413

15-
function Diff(props: DiffProps): JSX.Element {
16-
const {
17-
snapshot, // snapshot from 'tabs[currentTab]' object in 'MainContainer'
18-
show, // boolean that is dependent on the 'Route' path; true if 'Route' path === '/diffRaw'
19-
} = props;
20-
const { currentTab, tabs }: MainState = useSelector((state: RootState) => state.main);
21-
const { snapshots, viewIndex, sliderIndex }: Partial<CurrentTab> = tabs[currentTab];
14+
// function Diff(props: DiffProps): JSX.Element {
15+
// const {
16+
// snapshot, // snapshot from 'tabs[currentTab]' object in 'MainContainer'
17+
// show, // boolean that is dependent on the 'Route' path; true if 'Route' path === '/diffRaw'
18+
// } = props;
19+
// const { currentTab, tabs }: MainState = useSelector((state: RootState) => state.main);
20+
// const { snapshots, viewIndex, sliderIndex }: Partial<CurrentTab> = tabs[currentTab];
2221

23-
let previous: unknown; // = (viewIndex !== -1) ? snapshots[viewIndex - 1] : previous = snapshots[sliderIndex - 1]
22+
// let previous: unknown; // = (viewIndex !== -1) ? snapshots[viewIndex - 1] : previous = snapshots[sliderIndex - 1]
2423

25-
if (viewIndex !== -1 && snapshots && viewIndex) {
26-
// snapshots should not have any property < 0. A viewIndex of '-1' means that we had a snapshot index that occurred before the initial snapshot of the application state... which is impossible. '-1' therefore means reset to the last/most recent snapshot.
27-
previous = snapshots[viewIndex - 1]; // set previous to the snapshot that is before the one we are currently viewing
28-
} else if (snapshots && sliderIndex) {
29-
previous = snapshots[sliderIndex - 1]; // if viewIndex was an impossible index, we will get our snapshots index using 'sliderIndex.' sliderIndex should have already been reset to the latest snapshot index. Previous is then set to the snapshot that occurred immediately before our most recent snapshot.
30-
}
24+
// if (viewIndex !== -1 && snapshots && viewIndex) {
25+
// // snapshots should not have any property < 0. A viewIndex of '-1' means that we had a snapshot index that occurred before the initial snapshot of the application state... which is impossible. '-1' therefore means reset to the last/most recent snapshot.
26+
// previous = snapshots[viewIndex - 1]; // set previous to the snapshot that is before the one we are currently viewing
27+
// } else if (snapshots && sliderIndex) {
28+
// previous = snapshots[sliderIndex - 1]; // if viewIndex was an impossible index, we will get our snapshots index using 'sliderIndex.' sliderIndex should have already been reset to the latest snapshot index. Previous is then set to the snapshot that occurred immediately before our most recent snapshot.
29+
// }
3130

32-
/*
33-
State snapshot objects have the following structure:
34-
{
35-
children: array of objects
36-
componentData: object
37-
isExpanded: Boolean
38-
name: string
39-
route: object
40-
state: string
41-
}
31+
// /*
32+
// State snapshot objects have the following structure:
33+
// {
34+
// children: array of objects
35+
// componentData: object
36+
// isExpanded: Boolean
37+
// name: string
38+
// route: object
39+
// state: string
40+
// }
4241

43-
// cleaning preview from stateless data
44-
*/
45-
const statelessCleaning = (obj: StatelessCleaning) => {
46-
const newObj = { ...obj }; // duplicate our input object into a new object
42+
// // cleaning preview from stateless data
43+
// */
44+
// const statelessCleaning = (obj: StatelessCleaning) => {
45+
// const newObj = { ...obj }; // duplicate our input object into a new object
4746

48-
if (newObj.name === 'nameless') {
49-
// if our new object's name is nameless
50-
delete newObj.name; // delete the name property
51-
}
52-
if (newObj.componentData) {
53-
// if our new object has a componentData property
54-
delete newObj.componentData; // delete the componentData property
55-
}
56-
if (newObj.state === 'stateless') {
57-
// if if our new object's state is stateless
58-
delete newObj.state; // delete the state property
59-
}
47+
// if (newObj.name === 'nameless') {
48+
// // if our new object's name is nameless
49+
// delete newObj.name; // delete the name property
50+
// }
51+
// if (newObj.componentData) {
52+
// // if our new object has a componentData property
53+
// delete newObj.componentData; // delete the componentData property
54+
// }
55+
// if (newObj.state === 'stateless') {
56+
// // if if our new object's state is stateless
57+
// delete newObj.state; // delete the state property
58+
// }
6059

61-
if (newObj.stateSnaphot) {
62-
// if our new object has a stateSnaphot property
63-
newObj.stateSnaphot = statelessCleaning(obj.stateSnaphot); // run statelessCleaning on the stateSnapshot
64-
}
60+
// if (newObj.stateSnaphot) {
61+
// // if our new object has a stateSnaphot property
62+
// newObj.stateSnaphot = statelessCleaning(obj.stateSnaphot); // run statelessCleaning on the stateSnapshot
63+
// }
6564

66-
if (newObj.children) {
67-
// if our new object has a children property
68-
newObj.children = [];
69-
if (obj.children.length > 0) {
70-
// and if our input object's children property is non-empty, go through each children object from our input object and determine, if the object being iterated on either has a stateless state or has a children array with a non-zero amount of objects. Objects that fulfill the above that need to be cleaned through statelessCleaning. Those that are cleaned through this process are then pushed to the new object's children array.
71-
obj.children.forEach(
72-
(element: { state?: Record<string, unknown> | string; children?: [] }) => {
73-
if (element.state !== 'stateless' || element.children.length > 0) {
74-
const clean = statelessCleaning(element);
75-
newObj.children.push(clean);
76-
}
77-
},
78-
);
79-
}
80-
}
81-
return newObj; // return the cleaned state snapshot(s)
82-
};
65+
// if (newObj.children) {
66+
// // if our new object has a children property
67+
// newObj.children = [];
68+
// if (obj.children.length > 0) {
69+
// // and if our input object's children property is non-empty, go through each children object from our input object and determine, if the object being iterated on either has a stateless state or has a children array with a non-zero amount of objects. Objects that fulfill the above that need to be cleaned through statelessCleaning. Those that are cleaned through this process are then pushed to the new object's children array.
70+
// obj.children.forEach(
71+
// (element: { state?: Record<string, unknown> | string; children?: [] }) => {
72+
// if (element.state !== 'stateless' || element.children.length > 0) {
73+
// const clean = statelessCleaning(element);
74+
// newObj.children.push(clean);
75+
// }
76+
// },
77+
// );
78+
// }
79+
// }
80+
// return newObj; // return the cleaned state snapshot(s)
81+
// };
8382

84-
const previousDisplay: StatelessCleaning = statelessCleaning(previous); // displays stateful data from the first snapshot that was taken before our current snapshot.
83+
// const previousDisplay: StatelessCleaning = statelessCleaning(previous); // displays stateful data from the first snapshot that was taken before our current snapshot.
8584

86-
const delta: StatelessCleaning = diff(previousDisplay, snapshot); // diff function from 'jsondiffpatch' returns the difference in state between 'previousDisplay' and 'snapshot'
85+
// const delta: StatelessCleaning = diff(previousDisplay, snapshot); // diff function from 'jsondiffpatch' returns the difference in state between 'previousDisplay' and 'snapshot'
8786

88-
const html: StatelessCleaning = formatters.html.format(delta, previousDisplay); // formatters function from 'jsondiffpatch' returns an html string that shows the difference between delta and the previousDisplay
87+
// const html: StatelessCleaning = formatters.html.format(delta, previousDisplay); // formatters function from 'jsondiffpatch' returns an html string that shows the difference between delta and the previousDisplay
8988

90-
if (show)
91-
formatters.html.showUnchanged(); // shows unchanged values if we're on the '/diffRaw' path
92-
else formatters.html.hideUnchanged(); // hides unchanged values
89+
// if (show)
90+
// formatters.html.showUnchanged(); // shows unchanged values if we're on the '/diffRaw' path
91+
// else formatters.html.hideUnchanged(); // hides unchanged values
9392

94-
if (previous === undefined || delta === undefined) {
95-
// if there has been no state changes on the target/hooked application, previous and delta would be undefined.
96-
return (
97-
<div className='no-data-message'>
98-
{' '}
99-
Make state changes and click on a Snapshot to see the difference between that snapshot and
100-
the previous one.{' '}
101-
</div>
102-
);
103-
}
104-
return <div>{HtmlReactParser(html)}</div>; // ReactHTMLParser from 'html-react-parser' package converts the HTML string into a react component.
105-
}
93+
// if (previous === undefined || delta === undefined) {
94+
// // if there has been no state changes on the target/hooked application, previous and delta would be undefined.
95+
// return (
96+
// <div className='no-data-message'>
97+
// {' '}
98+
// Make state changes and click on a Snapshot to see the difference between that snapshot and
99+
// the previous one.{' '}
100+
// </div>
101+
// );
102+
// }
103+
// return <div>{ReactHtmlParser(html)}</div>; // ReactHTMLParser from 'react-html-parser' package converts the HTML string into a react component.
104+
// }
106105

107-
export default Diff;
106+
// export default Diff;

‎src/app/components/DiffRoute.tsx

Lines changed: 25 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,28 @@
1-
import React from 'react';
2-
import { MemoryRouter as Router, Route, NavLink, Routes } from 'react-router-dom';
3-
import Diff from './Diff';
4-
import { DiffRouteProps } from '../FrontendTypes';
1+
// import React from 'react';
2+
// import { MemoryRouter as Router, Route, NavLink, Switch } from 'react-router-dom';
3+
// import Diff from './Diff';
4+
// import { DiffRouteProps } from '../FrontendTypes';
55

6-
/*
7-
Loads the appropriate DiffRoute view and renders the 'Tree' and 'Raw' navbar buttons after clicking on the 'Diff' button located near the top rightmost corner.
8-
*/
6+
// /*
7+
// Loads the appropriate DiffRoute view and renders the 'Tree' and 'Raw' navbar buttons after clicking on the 'Diff' button located near the top rightmost corner.
8+
// */
99

10-
// 'DiffRoute' only passed in prop is 'snapshot' from 'tabs[currentTab]' object in 'MainContainer'
11-
const DiffRoute = (props: DiffRouteProps): JSX.Element => (
12-
<Router>
13-
<div className='navbar'>
14-
<NavLink className='router-link' end to='/'>
15-
Tree
16-
</NavLink>
17-
<NavLink className='router-link' to='/diffRaw'>
18-
Raw
19-
</NavLink>
20-
</div>
21-
<Routes>
22-
<Route exact path='/diffRaw' render={() => <Diff snapshot={props.snapshot} show />} />
23-
<Route exact path='/' render={() => <Diff snapshot={props.snapshot} show={false} />} />
24-
</Routes>
25-
</Router>
26-
);
10+
// // 'DiffRoute' only passed in prop is 'snapshot' from 'tabs[currentTab]' object in 'MainContainer'
11+
// const DiffRoute = (props: DiffRouteProps): JSX.Element => (
12+
// <Router>
13+
// <div className='navbar'>
14+
// <NavLink className='router-link' activeClassName='is-active' exact to='/'>
15+
// Tree
16+
// </NavLink>
17+
// <NavLink className='router-link' activeClassName='is-active' to='/diffRaw'>
18+
// Raw
19+
// </NavLink>
20+
// </div>
21+
// <Switch>
22+
// <Route path='/diffRaw' render={() => <Diff snapshot={props.snapshot} show />} />
23+
// <Route path='/' render={() => <Diff snapshot={props.snapshot} show={false} />} />
24+
// </Switch>
25+
// </Router>
26+
// );
2727

28-
export default DiffRoute;
28+
// export default DiffRoute;

‎src/app/containers/StateContainer.tsx

Lines changed: 29 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -20,35 +20,37 @@ const StateContainer = (props: StateContainerProps): JSX.Element => {
2020
} = props;
2121

2222
return (
23+
// <Router>
2324
<div className='state-container'>
24-
<div className='main-navbar-container'>
25-
<div className='main-navbar-text' />
26-
<div className='main-navbar'>
27-
<NavLink className='main-router-link' end to='/'>
28-
State
29-
</NavLink>
30-
<NavLink className='main-router-link' to='/diff'>
31-
Diff
32-
</NavLink>
33-
</div>
34-
</div>
35-
<Routes>
36-
<Route exact path='/diff' render={() => <DiffRoute snapshot={snapshot} />} />
37-
<Route
38-
exact path='/'
39-
render={() => (
40-
<StateRoute
41-
webMetrics={webMetrics}
42-
viewIndex={viewIndex}
43-
snapshot={snapshot}
44-
hierarchy={hierarchy}
45-
snapshots={snapshots}
46-
currLocation={currLocation}
47-
/>
48-
)}
49-
/>
50-
</Routes>
25+
{/* <div className='main-navbar-container'>
26+
<div className='main-navbar-text' />
27+
<div className='main-navbar'>
28+
<NavLink className='main-router-link' activeClassName='is-active' exact to='/'>
29+
State
30+
</NavLink>
31+
<NavLink className='main-router-link' activeClassName='is-active' to='/diff'>
32+
Diff
33+
</NavLink>
34+
</div>
35+
</div>
36+
<Switch>
37+
<Route path='/diff' render={() => <DiffRoute snapshot={snapshot} />} />
38+
<Route
39+
path='/'
40+
render={() => ( */}
41+
<StateRoute
42+
webMetrics={webMetrics}
43+
viewIndex={viewIndex}
44+
snapshot={snapshot}
45+
hierarchy={hierarchy}
46+
snapshots={snapshots}
47+
currLocation={currLocation}
48+
/>
49+
{/* )}
50+
/>
51+
</Switch> */}
5152
</div>
53+
// </Router>
5254
);
5355
};
5456

0 commit comments

Comments
 (0)