change levels structure to array of levels rather than object with le…

…vel properties - MR
thoughtworksarts · Mar 20, 2018 · 014181a · 014181a
1 parent 0a32c10
commit 014181a
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 20 deletions.
diff --git a/app/components/container.js b/app/components/container.js
@@ -62,15 +62,15 @@ export default class Container extends React.Component {
         });
     }
 
-    handleLevelChange(levelId, name, value) {
+    handleLevelChange(levelIndex, name, value) {
         let levelsCopy = JSON.parse(JSON.stringify(this.state.levels));
 
         if (name === "range") {
-            levelsCopy[levelId].start = value[0];
-            levelsCopy[levelId].end = value[1];
+            levelsCopy[levelIndex].start = value[0];
+            levelsCopy[levelIndex].end = value[1];
         }
         else {
-            levelsCopy[levelId][name] = value;
+            levelsCopy[levelIndex][name] = value;
         }
 
         this.setState({
@@ -163,7 +163,7 @@ export default class Container extends React.Component {
                 </Collapsible>
                     <div>
                         { Object.keys(levels).map((levelId,_) =>
-                            <Level levelIndex={levels[levelId].index} numLevels={this.props.numLevels}
+                            <Level levelIndex={levelId} numLevels={this.props.numLevels}
                                    onChange={this.handleLevelChange}
                                    range={[levels[levelId].start, levels[levelId].end]}
                                    branches={levels[levelId].branches}

diff --git a/app/components/level.js b/app/components/level.js
@@ -13,9 +13,8 @@ export default class Level extends React.Component {
     }
 
     handleTimeRangeChange(name, value) {
-        const levelId = "level" + this.props.levelIndex;
 
-        this.props.onChange(levelId, name, value);
+        this.props.onChange(this.props.levelIndex, name, value);
     }
 
     handleBranchChange(emotion, name, value) {
@@ -29,18 +28,16 @@ export default class Level extends React.Component {
             branches[emotion][name] = value;
         }
 
-        const levelId = "level" + this.props.levelIndex;
-        this.props.onChange(levelId, "branches", branches);
+        this.props.onChange(this.props.levelIndex, "branches", branches);
     }
 
     render() {
         const levelIndex = this.props.levelIndex;
-        const levelId = "level" + levelIndex;
         const branches = this.props.branches;
         const triggerName = "Level " + levelIndex;
 
         return (
-                <div className="level" id={levelId}>
+                <div className="level" id={levelIndex}>
                     <Collapsible trigger={triggerName}>
                         <div className="content">
                             <TimeRange name="range" range={this.props.range} onChange={this.handleTimeRangeChange} numFrames={this.props.numFrames}/>

diff --git a/app/utilities/defaults.js b/app/utilities/defaults.js
@@ -26,14 +26,14 @@ export const createDefaultLevelsObject = (numLevels) => {
     const populatedLevels = {};
 
     for (let i = 1; i <= numLevels; i++) {
-        const levelId = "level" + i;
-
-        populatedLevels[levelId] =  {
-            index: i,
+        populatedLevels[i] =  {
+            level: i,
             start: defaultValues.time,
             end: defaultValues.time,
             branches: createDefaultBranchesObject()
         };
     }
+
+    console.log(populatedLevels);
     return populatedLevels;
 }
diff --git a/app/utilities/exportHelperFunctions.js b/app/utilities/exportHelperFunctions.js
@@ -23,17 +23,32 @@ const traverseAndConvertToMilliseconds = (state, numFrames) => {
 }
 
 const trimStateAndCopy = (state) => {
-    Object.keys(state.levels).map( function(levelId,_) {
+    let levels = state.levels;
 
-        Object.keys(state.levels[levelId].branches).map( function(emotion,_) {
+    Object.keys(levels).map( function(levelId,_) {
+
+        Object.keys(levels[levelId].branches).map( function(emotion,_) {
 
-            if (!state.levels[levelId].branches[emotion].enabled) {
-                state.levels[levelId].branches[emotion] = undefined;
+            if (!levels[levelId].branches[emotion].enabled) {
+                levels[levelId].branches[emotion] = undefined;
             } else {
-                state.levels[levelId].branches[emotion].enabled = undefined;
+                levels[levelId].branches[emotion].enabled = undefined;
             }
         });
     });
+
+
+    state.levels = arrayifyLevelsObject(levels);
+}
+
+const arrayifyLevelsObject = (levels) => {
+    let levelsArray = new Array(Object.keys(levels).length);
+
+    Object.keys(levels).map((levelIndex,_) => {
+        levelsArray[levelIndex-1] = levels[levelIndex];
+    });
+
+    return levelsArray;
 }
 
 export const convertToMillisecondsAndTrimState = (state, numFrames) => {