You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
// we wrap our application with the <Router> tag so that all components that are nested will have the react-router context
24
-
<Router>
25
-
{/* we wrap our MainContainer with the provider so that we will be able to use the store context. We create our store by using useReducer and passing it into the value property */}
<Router>{/* we wrap our application with the <Router> tag so that all components that are nested will have the react-router context */}
24
+
<StoreContext.Providervalue={useReducer(mainReducer,initialState)}>{/* we wrap our MainContainer with the provider so that we will be able to use the store context. We create our store by using useReducer and passing it into the value property */}
// we use the evaluated result (string) of 'parseError' and match it to the case so that an appropriate error message will be displayed to the user
31
-
switch(parseError(loadingArray,status)){
30
+
switch(parseError(loadingArray,status)){// parseError returns a string based on the loadingArray and status. The returned string is matched to a case so that an appropriate error message will be displayed to the user
<ClipLoadercolor='#123abc'size={30}loading={loading}/>// if the loadingArray value is true, we display a loading icon
31
28
) : (
32
-
// else we display a component produced by handleResult depending on if the result parameter (which takes an argument from the status object in ErrorContainer) is true or false
33
-
handleResult(result)
29
+
handleResult(result)// else we display a component produced by 'handleResult' depending on if the result parameter (which takes an argument from the status object in 'ErrorContainer') is true or false
const{ snapshotsLength }=props;// destructure props to get our total number of snapshots
32
+
const[{ tabs, currentTab },dispatch]=useStoreContext();// we destructure the returned context object from the invocation of the useStoreContext function. Properties not found on the initialState object (dispatch) are from the useReducer function invocation in the App component
33
+
const{ currLocation }=tabs[currentTab];// we destructure the currentTab object
34
+
const[sliderIndex,setSliderIndex]=useState(0);// create a local state 'sliderIndex' and set it to 0.
32
35
33
36
useEffect(()=>{
34
-
if(currLocation){
35
-
setSliderIndex(currLocation.index);
37
+
if(currLocation){// if we have a 'currLocation'
38
+
setSliderIndex(currLocation.index);// set our slider thumb position to the 'currLocation.index'
36
39
}else{
37
-
setSliderIndex(0);
40
+
setSliderIndex(0);// just set the thumb position to the beginning
38
41
}
39
-
},[currLocation]);
42
+
},[currLocation]);// if currLocation changes, rerun useEffect
40
43
41
44
return(
42
45
<Slider
43
-
min={0}
44
-
max={snapshotsLength-1}
45
-
value={sliderIndex}
46
-
onChange={(index: any)=>{
47
-
setSliderIndex(index);
46
+
min={0}// index of our first snapshot
47
+
max={snapshotsLength-1}// index of our last snapshot
48
+
value={sliderIndex}// currently slider thumb position
49
+
onChange={(index: any)=>{// when the slider position changes
50
+
setSliderIndex(index);// update the sliderIndex
48
51
}}
49
-
onAfterChange={()=>{
50
-
dispatch(changeSlider(sliderIndex));
51
-
dispatch(pause());
52
+
onAfterChange={()=>{// after updating the sliderIndex
53
+
dispatch(changeSlider(sliderIndex));// updates currentTab's 'sliderIndex' and replaces our snapshot with the appropriate snapshot[sliderIndex]
54
+
dispatch(pause());// pauses playing and sets currentTab object'a intervalId to null
Copy file name to clipboardExpand all lines: src/app/containers/ActionContainer.tsx
+32-55Lines changed: 32 additions & 55 deletions
Original file line number
Diff line number
Diff line change
@@ -26,25 +26,15 @@ const resetSlider = () => {
26
26
27
27
28
28
functionActionContainer(props): JSX.Element{
29
-
// we destructure the returned context object from the invocation of the useStoreContext function. Properties not found on the initialState object (dispatch) are from the useReducer function invocation in the App component
30
-
const[{ tabs, currentTab, port },dispatch]=useStoreContext();
// we create an array 'actionsArr' that will hold elements we create later on
42
-
letactionsArr: JSX.Element[]=[];
29
+
const[{ tabs, currentTab, port },dispatch]=useStoreContext();// we destructure the returned context object from the invocation of the useStoreContext function. Properties not found on the initialState object (dispatch) are from the useReducer function invocation in the App component
30
+
const{ currLocation, hierarchy, sliderIndex, viewIndex }=tabs[currentTab];// we destructure the currentTab object
31
+
const{ toggleActionContainer, actionView, setActionView }=props;// we destructure our props object
32
+
const[recordingActions,setRecordingActions]=useState(true);// We create a local state 'recordingActions' and set it to true
33
+
letactionsArr: JSX.Element[]=[];// we create an array 'actionsArr' that will hold elements we create later on
43
34
// we create an array 'hierarchyArr' that will hold objects and numbers
44
35
consthierarchyArr: (number|{})[]=[];
45
36
46
37
/*
47
-
48
38
function to traverse state from hierarchy and also getting information on display name and component name
49
39
50
40
the obj parameter is an object with the following structure:
@@ -58,22 +48,16 @@ function ActionContainer(props): JSX.Element {
58
48
index: number;
59
49
children?: [];
60
50
}
61
-
62
51
*/
63
52
64
53
constdisplayArray=(obj: Obj): void=>{
65
54
if(
66
-
// if the 'stateSnapshot' has a non-empty 'children' array
67
-
obj.stateSnapshot.children.length>0&&
68
-
// and there is an element
69
-
obj.stateSnapshot.children[0]&&
70
-
// with a 'state'
71
-
obj.stateSnapshot.children[0].state&&
72
-
// and a 'name'
73
-
obj.stateSnapshot.children[0].name
55
+
obj.stateSnapshot.children.length>0&&// if the 'stateSnapshot' has a non-empty 'children' array
56
+
obj.stateSnapshot.children[0]&&// and there is an element
57
+
obj.stateSnapshot.children[0].state&&// with a 'state'
58
+
obj.stateSnapshot.children[0].name// and a 'name'
74
59
){
75
-
// we create a new Record object (whose property keys are Keys and whose property values are Type. This utility can be used to map the properties of a type to another type) and populate it's properties with relevant values from our argument 'obj'.
76
-
constnewObj: Record<string,unknown>={
60
+
constnewObj: Record<string,unknown>={// we create a new Record object (whose property keys are Keys and whose property values are Type. This utility can be used to map the properties of a type to another type) and populate it's properties with relevant values from our argument 'obj'.
77
61
index: obj.index,
78
62
displayName: `${obj.name}.${obj.branch}`,
79
63
state: obj.stateSnapshot.children[0].state,
@@ -84,39 +68,36 @@ function ActionContainer(props): JSX.Element {
84
68
? ''
85
69
: obj.stateSnapshot.children[0].componentData,
86
70
};
87
-
// we push our record object into 'hiearchyArr' defined on line 41
88
-
hierarchyArr.push(newObj);
71
+
hierarchyArr.push(newObj);// we push our record object into 'hiearchyArr' defined on line 35
89
72
}
90
-
// if argument has a 'children' array, we iterate through it and run 'displayArray' on each element
91
-
if(obj.children){
73
+
74
+
if(obj.children){// if argument has a 'children' array, we iterate through it and run 'displayArray' on each element
92
75
obj.children.forEach((element): void=>{
93
76
displayArray(element);
94
77
});
95
78
}
96
79
};
97
80
98
81
// the hierarchy gets set on the first click in the page
99
-
// when page in refreshed we may not have a hierarchy so we need to check if hierarchy was initialized
100
-
// if true invoke displayArray to display the hierarchy
101
-
if(hierarchy)displayArray(hierarchy);
82
+
if(hierarchy)displayArray(hierarchy);// when page is refreshed we may not have a hierarchy so we need to check if hierarchy was initialized. If it was initialized, invoke displayArray to display the hierarchy
102
83
103
84
// This function allows us to use our arrow keys to jump between snapshots. It passes an event and the index of each action-component. Using the arrow keys allows us to highligh snapshots and the enter key jumps to the selected snapshot
const{ index }=snapshot;// destructure index from snapshot
121
+
constselected=index===viewIndex;// boolean on whether the current index is the same as the viewIndex
122
+
constlast=viewIndex===-1&&index===hierarchyArr.length-1;// boolean on whether the view index is less than 0 and if the index is the same as the last snapshot's index value in hierarchyArr
@@ -172,6 +151,7 @@ function ActionContainer(props): JSX.Element {
172
151
useEffect(()=>{
173
152
setActionView(true);
174
153
// !!!! Why is the dependency array the function being called within the useEffect? !!!!
154
+
// may not call an infinite loop since it involves a setter function
175
155
},[setActionView]);
176
156
177
157
// Function sends message to background.js which sends message to the content script
@@ -180,23 +160,20 @@ function ActionContainer(props): JSX.Element {
180
160
action: 'toggleRecord',
181
161
tabId: currentTab,
182
162
});
183
-
// Record button's icon is being togggled on click
184
-
setRecordingActions(!recordingActions);
163
+
setRecordingActions(!recordingActions);// Record button's icon is being togggled on click
185
164
};
186
165
187
-
// Logic to create the route description components
188
166
typeroutes={
189
167
[route: string]: [];
190
168
};
191
169
192
-
constroutes: {}={};
193
-
// iterate through our actionsArr
194
-
for(leti=0;i<actionsArr.length;i+=1){
195
-
// if 'routes' doesn't have a property key that is the same as the current component at index[i] routePath we create an array with the first element being the component at index [i]. If it does exist, we push the component at index [i] to the apporpriate routes[routePath]
170
+
constroutes: {}={};// Logic to create the route description components begin
171
+
172
+
for(leti=0;i<actionsArr.length;i+=1){// iterate through our actionsArr
routes[actionsArr[i].props.routePath]=[actionsArr[i]];// if 'routes' doesn't have a property key that is the same as the current component at index[i] routePath we create an array with the first element being the component at index [i].
175
+
}else{
176
+
routes[actionsArr[i].props.routePath].push(actionsArr[i]);// If it does exist, we push the component at index [i] to the apporpriate routes[routePath]
0 commit comments