Skip to content

Commit 69622a7

Browse files
jrosengrantjrosengrant
committed
commented out diff and diff route entirely
1 parent 5dd9e20 commit 69622a7

File tree

3 files changed

+146
-146
lines changed

3 files changed

+146
-146
lines changed

‎src/app/components/Diff.tsx

Lines changed: 91 additions & 91 deletions
Original file line numberDiff line numberDiff line change
@@ -1,106 +1,106 @@
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';
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';
66

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-
*/
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+
// */
1313

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];
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];
2121

22-
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]
2323

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-
}
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+
// }
3030

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-
}
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+
// }
4141

42-
// cleaning preview from stateless data
43-
*/
44-
const statelessCleaning = (obj: StatelessCleaning) => {
45-
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
4646

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-
}
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+
// }
5959

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-
}
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+
// }
6464

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-
};
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+
// };
8282

83-
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.
8484

85-
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'
8686

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
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
8888

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
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
9292

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-
}
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+
// }
105105

106-
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, Switch } 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' 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-
);
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: 30 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -20,37 +20,37 @@ const StateContainer = (props: StateContainerProps): JSX.Element => {
2020
} = props;
2121

2222
return (
23-
<Router>
24-
<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' activeClassName='is-active' exact to='/'>
29-
State
30-
</NavLink>
31-
<NavLink className='main-router-link' activeClassName='is-active' to='/diff'>
32-
Diff
33-
</NavLink>
23+
// <Router>
24+
<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' 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>
3435
</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>
52-
</div>
53-
</Router>
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> */}
52+
</div>
53+
// </Router>
5454
);
5555
};
5656

0 commit comments

Comments
 (0)