Skip to content

Commit 7ae6b46

Browse files
Solodt55Solodt55
committed
Co-authored-by: Liam Donaher <[email protected]>
Co-authored-by: Jesse Rosengrant <[email protected]>
2 parents 402c3d3 + 902536b commit 7ae6b46

File tree

7 files changed

+193
-179
lines changed

7 files changed

+193
-179
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 HtmlReactParser from 'html-react-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>{HtmlReactParser(html)}</div>; // ReactHTMLParser from 'html-react-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, 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/components/StateRoute/StateRoute.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,8 @@ const StateRoute = (props: StateRouteProps) => {
3535

3636
const { tabs, currentTab }: MainState = useSelector((state: RootState) => state.main);
3737
const { hierarchy, sliderIndex, viewIndex } = tabs[currentTab];
38+
// const hierarchy = propsHierarchy || tabsHierarchy; JR: RETURN TO THIS: alias to deconstruct from props and tab with the same name, aliases were deleted above
39+
// const viewIndex = propsViewIndex || tabsViewIndex;
3840

3941
const renderComponentMap = () => {
4042
if (hierarchy) {
@@ -235,8 +237,7 @@ const StateRoute = (props: StateRouteProps) => {
235237
<NavLink className='router-link history-tab' to='/history'>
236238
History
237239
</NavLink>
238-
<NavLink
239-
className='router-link web-metrics-tab' to='/webMetrics'>
240+
<NavLink className='router-link web-metrics-tab' to='/webMetrics'>
240241
Web Metrics
241242
</NavLink>
242243
<NavLink className='router-link tree-tab' to='/tree'>

‎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

‎src/backend/controllers/throttle.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
* @returns A function that limits input function, `callback`, from being called more than once every `MIN_TIME_BETWEEN_UPDATE` milliseconds
66
*
77
*/
8-
export default function throttle<T extends (...args: any) => any>(
8+
export default function throttle<T extends (...args: any[]) => any>(
99
callback: T,
1010
MIN_TIME_BETWEEN_UPDATE: number,
1111
): (...arg: Parameters<T>) => ReturnType<T> {

‎src/extension/background.js

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ function createTabObj(title) {
5555
// In practice, new Nodes are passed the following arguments:
5656
// 1. param 'obj' : arg request.payload, which is an object containing a tree from snapShot.ts and a route property
5757
// 2. param tabObj: arg tabsObj[tabId], which is an object that holds info about a specific tab. Should change the name of tabObj to tabCollection or something
58-
class Node {
58+
class HistoryNode {
5959
constructor(obj, tabObj) {
6060
// continues the order of number of total state changes
6161
this.index = tabObj.index;
@@ -291,7 +291,7 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
291291

292292
switch (action) {
293293
case 'attemptReconnect': {
294-
const success = portSuccessfullyConnected;
294+
const success = 'portSuccessfullyConnected';
295295
sendResponse({ success });
296296
break;
297297
}
@@ -337,7 +337,7 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
337337

338338
chrome.scripting.executeScript({
339339
target: { tabId },
340-
function: injectScript,
340+
func: injectScript,
341341
args: [chrome.runtime.getURL('bundles/backend.bundle.js'), tabId],
342342
});
343343
break;
@@ -350,7 +350,7 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
350350
reloaded[tabId] = false;
351351
tabsObj[tabId].webMetrics = metrics;
352352
tabsObj[tabId].snapshots.push(request.payload);
353-
sendToHierarchy(tabsObj[tabId], new Node(request.payload, tabsObj[tabId]));
353+
sendToHierarchy(tabsObj[tabId], new HistoryNode(request.payload, tabsObj[tabId]));
354354
if (portsArr.length > 0) {
355355
portsArr.forEach((bg) =>
356356
bg.postMessage({
@@ -378,7 +378,7 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
378378
tabsObj[tabId].snapshots.push(request.payload);
379379
// INVOKING buildHierarchy FIGURE OUT WHAT TO PASS IN
380380
if (!tabsObj[tabId][index]) {
381-
sendToHierarchy(tabsObj[tabId], new Node(request.payload, tabsObj[tabId]));
381+
sendToHierarchy(tabsObj[tabId], new HistoryNode(request.payload, tabsObj[tabId]));
382382
}
383383
}
384384
// sends new tabs obj to devtools

0 commit comments

Comments
 (0)