Skip to content

Commit 45f69dc

Browse files
EivindDelFierroEivindDelFierro
committed
Revised more pseudocode
1 parent 0e463c5 commit 45f69dc

File tree

3 files changed

+47
-58
lines changed

3 files changed

+47
-58
lines changed

‎src/app/components/Action.tsx

Lines changed: 33 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -29,16 +29,16 @@ import { ActionProps, OptionsCursorTrueWithMargin } from '../FrontendTypes';
2929
const Action = (props: ActionProps): JSX.Element => {
3030
// We destructure the 'props' that were passed into this component
3131
const {
32-
selected,
33-
last,
34-
index,
35-
sliderIndex,
32+
selected, // boolean on whether the current index is the same as the viewIndex from 'ActionContainer'
33+
last, // 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) from 'ActionContainer'
34+
index, // from snapshot.index in "ActionContainer's" 'hierarchyArr'
35+
sliderIndex, // from tabs[currentTab] object from 'ActionContainer'
3636
dispatch,
37-
displayName,
38-
componentData,
39-
viewIndex,
37+
displayName, // from snapshot.displayName in "ActionContainer's" 'hierarchyArr'
38+
componentData, // from snapshot.componentData in "ActionContainer's" 'hierarchyArr'
39+
viewIndex, // from tabs[currentTab] object from 'ActionContainer'
4040
isCurrIndex,
41-
handleOnkeyDown,
41+
handleOnkeyDown, // function that allows arrows keys to jump between snapshots defined in 'ActionContainer.tsx'
4242
} = props;
4343

4444
/**
@@ -48,56 +48,42 @@ const Action = (props: ActionProps): JSX.Element => {
4848

4949

5050
const cleanTime = (): string => {
51-
// if there is no 'componentData' or 'componentData.actualDuration' return "NO TIME"
52-
if (!componentData || !componentData.actualDuration) {
51+
if (!componentData || !componentData.actualDuration) { // if there is no 'componentData' or 'componentData.actualDuration'
5352
return 'NO TIME';
5453
}
5554

56-
// seconds is undefined but can take a number or a string
57-
let seconds: number | string;
58-
// milliseconds is of any type and taken from the 'componentData.actualDuration'
59-
let milliseconds: any = componentData.actualDuration;
60-
61-
// if the milliseconds is greater than 60
62-
if (Math.floor(componentData.actualDuration) > 60) {
63-
// we divide our milliseconds by 60 to determine our seconds
64-
seconds = Math.floor(componentData.actualDuration / 60);
65-
// and we convert our seconds into a string
66-
seconds = JSON.stringify(seconds);
67-
// if the seconds string is only a single digit
68-
if (seconds.length < 2) {
69-
// we can add a 0 in front of it so that if 'seconds = "1"' it will come out as 'seconds = "01"'
70-
seconds = '0'.concat(seconds);
71-
}
72-
// Our true milliseconds then becomes the remainder of dividing our initial milliseconds by 60
73-
milliseconds = Math.floor(componentData.actualDuration % 60);
55+
let seconds: number | string; // seconds is undefined but can take a number or a string
56+
let milliseconds: any = componentData.actualDuration; // milliseconds is of any type and taken from the 'componentData.actualDuration'
57+
58+
if (Math.floor(componentData.actualDuration) > 60) { // if the milliseconds is greater than 60
59+
seconds = Math.floor(componentData.actualDuration / 60); // we divide our milliseconds by 60 to determine our seconds
60+
seconds = JSON.stringify(seconds); // and we convert our seconds into a string
61+
62+
if (seconds.length < 2) { // if the seconds string is only a single digit
63+
seconds = '0'.concat(seconds); // we can add a 0 in front of it so that if 'seconds = "1"' it will come out as 'seconds = "01"'
64+
}
65+
milliseconds = Math.floor(componentData.actualDuration % 60); // Our true milliseconds then becomes the remainder of dividing our initial milliseconds by 60
66+
7467
} else {
75-
// if we haven't even reached one second yet, our seconds are 00
76-
seconds = '00';
68+
seconds = '00'; // if we haven't even reached one second yet, our seconds are 00
7769
}
7870

79-
// we convert our milliseconds string into a floating point number that has up to two decimal places.
80-
milliseconds = Number.parseFloat(milliseconds as string).toFixed(2);
71+
milliseconds = Number.parseFloat(milliseconds as string).toFixed(2); // we convert our milliseconds string into a floating point number that has up to two decimal places.
72+
const arrayMilliseconds: string | number = milliseconds.split('.'); // we split our milliseconds using the decimal and come out with an array of two numbers
8173

82-
// we split our milliseconds using the decimal and come out with an array of two numbers
83-
const arrayMilliseconds: string | number = milliseconds.split('.');
84-
85-
// if our millisecond string only has one digit
86-
if (arrayMilliseconds[0].length < 2) {
87-
// we add a 0 in front of it so that in the a sample number of '1' becomes '01'
88-
arrayMilliseconds[0] = '0'.concat(arrayMilliseconds[0]);
74+
75+
if (arrayMilliseconds[0].length < 2) { // if our millisecond string only has one digit
76+
arrayMilliseconds[0] = '0'.concat(arrayMilliseconds[0]); // we add a 0 in front of it so that in the a sample number of '1' becomes '01'
8977
}
90-
// if this is the initial snapshot
91-
if (index === 0) {
92-
// we give it a timestamp
93-
return `${seconds}:${arrayMilliseconds[0]}.${arrayMilliseconds[1]}`;
78+
79+
if (index === 0) { // if this is the initial snapshot
80+
return `${seconds}:${arrayMilliseconds[0]}.${arrayMilliseconds[1]}`; // we give it a timestamp
9481
}
95-
// if these are succeeding snapshots, we add a '+' to the timestamp
96-
return `+${seconds}:${arrayMilliseconds[0]}.${arrayMilliseconds[1]}`;
82+
return `+${seconds}:${arrayMilliseconds[0]}.${arrayMilliseconds[1]}`; // if these are succeeding snapshots, we add a '+' to the timestamp
9783
};
9884

99-
// we run cleanTime on the creation of this component so that we can get the timestamp
100-
const displayTime: string = cleanTime();
85+
const displayTime: string = cleanTime(); // we run cleanTime on the creation of this component so that we can get the timestamp
86+
10187

10288
// creates an options object that 'ReactHover' component will use to modify it's behaviour
10389
const optionsCursorTrueWithMargin: OptionsCursorTrueWithMargin = {
@@ -109,7 +95,6 @@ const Action = (props: ActionProps): JSX.Element => {
10995
return (
11096
<div className='individual-action'>
11197
<div
112-
// Invoking keyboard functionality; functionality is in ActionContainer;
11398
onKeyDown={(e):void => handleOnkeyDown(e, viewIndex)}
11499
className={selected || last ? 'action-component selected' : 'action-component'}
115100
onClick={() => {

‎src/app/containers/ActionContainer.tsx

Lines changed: 6 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,11 @@ const resetSlider = () => {
2828
function ActionContainer(props): JSX.Element {
2929
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
3030
const { currLocation, hierarchy, sliderIndex, viewIndex } = tabs[currentTab]; // we destructure the currentTab object
31-
const { toggleActionContainer, actionView, setActionView } = props; // we destructure our props object
31+
const {
32+
toggleActionContainer, // function that handles Time Jump Sidebar view from MainContainer
33+
actionView, // local state declared in MainContainer
34+
setActionView // function to update actionView state declared in MainContainer
35+
} = props;
3236
const [recordingActions, setRecordingActions] = useState(true); // We create a local state 'recordingActions' and set it to true
3337
let actionsArr: JSX.Element[] = []; // we create an array 'actionsArr' that will hold elements we create later on
3438
// we create an array 'hierarchyArr' that will hold objects and numbers
@@ -104,7 +108,7 @@ function ActionContainer(props): JSX.Element {
104108
}
105109
}
106110

107-
// Sort hierarchyArr by index property of each object. This will be useful when later when we build our components so that our components will be displayed in index/chronological order
111+
// Sort hierarchyArr by index property of each object. This will be useful later when we render the components: components will be displayed in index/chronological order
108112
hierarchyArr.sort((a:Obj, b:Obj):number => a.index - b.index);
109113

110114
// we create a map of components that are constructed from "hierarchyArr's" elements/snapshots
@@ -120,13 +124,6 @@ function ActionContainer(props): JSX.Element {
120124
const { index } = snapshot; // destructure index from snapshot
121125
const selected = index === viewIndex; // boolean on whether the current index is the same as the viewIndex
122126
const last = 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
123-
124-
/*
125-
====================================================
126-
// boolean
127-
// Not sure what currLocation is at this time
128-
====================================================
129-
*/
130127
const isCurrIndex = index === currLocation.index;
131128
return (
132129
<Action

‎src/app/containers/StateContainer.tsx

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,14 @@ import { StateContainerProps } from '../FrontendTypes';
1010

1111
// eslint-disable-next-line react/prop-types
1212
const StateContainer = (props: StateContainerProps): JSX.Element => {
13-
const { snapshot, hierarchy, snapshots, viewIndex, webMetrics, currLocation } = props;
13+
const {
14+
snapshot, // from 'tabs[currentTab]' object from 'MainContainer'
15+
hierarchy, // from 'tabs[currentTab]' object from 'MainContainer'
16+
snapshots, // from 'tabs[currentTab].snapshotDisplay' object from 'MainContainer'
17+
viewIndex, // from 'tabs[currentTab]' object from 'MainContainer'
18+
webMetrics, // from 'tabs[currentTab]' object from 'MainContainer'
19+
currLocation // from 'tabs[currentTab]' object from 'MainContainer'
20+
} = props;
1421

1522
return (
1623
<Router>

0 commit comments

Comments
 (0)