From ef0c7b0c47aef9748df1b1a863c230e390adae0e Mon Sep 17 00:00:00 2001
From: tscz <tscz@users.noreply.github.com>
Date: Tue, 7 Jan 2020 00:39:52 +0900
Subject: [PATCH] #12 Normalize state for measures

---
 .../audioManagement/audioManagement.tsx       |  8 ++---
 src/components/audioManagement/peaksConfig.ts | 31 +++++++++++++------
 src/states/analysisSlice.test.ts              |  6 ++--
 src/states/analysisSlice.ts                   | 12 +++----
 4 files changed, 35 insertions(+), 22 deletions(-)

diff --git a/src/components/audioManagement/audioManagement.tsx b/src/components/audioManagement/audioManagement.tsx
index c45f7be..d3404e6 100644
--- a/src/components/audioManagement/audioManagement.tsx
+++ b/src/components/audioManagement/audioManagement.tsx
@@ -27,7 +27,7 @@ interface PropsFromState {
   audioUrl: string;
   status: LoadingStatus;
   sections: NormalizedObjects<Section>;
-  measures: Measure[];
+  measures: NormalizedObjects<Measure>;
   zoomLevel: number;
   firstMeasureStart: number;
   syncFirstMeasureStart: boolean;
@@ -108,7 +108,7 @@ class AudioManagement extends React.Component<AllProps> {
         this.props.secondsPerMeasure,
         this.props.audioSampleRate,
         document.getElementById(ZOOMVIEW_CONTAINER)!.clientWidth,
-        this.props.measures.length
+        this.props.measures.allIds.length
       )
     );
   }
@@ -117,10 +117,10 @@ class AudioManagement extends React.Component<AllProps> {
     if (this.props.sections && this.peaks) {
       this.peaks.segments.removeAll();
       this.peaks.segments.add(
-        PeaksOptions.sectionsToSegment(this.props.sections)
+        PeaksOptions.sectionsToSegment(this.props.sections, this.props.measures)
       );
       this.peaks.points.removeAll();
-      this.peaks.points.add(this.props.measures);
+      this.peaks.points.add(PeaksOptions.measuresToPoints(this.props.measures));
       this.peaks.zoom.setZoom(this.props.zoomLevel);
     }
   }
diff --git a/src/components/audioManagement/peaksConfig.ts b/src/components/audioManagement/peaksConfig.ts
index 32cccb9..20a1e91 100644
--- a/src/components/audioManagement/peaksConfig.ts
+++ b/src/components/audioManagement/peaksConfig.ts
@@ -1,6 +1,6 @@
-import { SegmentAddOptions } from "peaks.js";
+import { PointAddOptions, SegmentAddOptions } from "peaks.js";
 
-import { Section, SectionType } from "../../states/analysisSlice";
+import { Measure, Section, SectionType } from "../../states/analysisSlice";
 import { NormalizedObjects } from "../../states/store";
 
 export const AUDIO_DOM_ELEMENT = "audio_dom_element";
@@ -31,19 +31,19 @@ class PeaksOptions {
     };
   };
 
-  static sectionsToSegment = (sections: NormalizedObjects<Section>) => {
+  static sectionsToSegment = (
+    sections: NormalizedObjects<Section>,
+    measures: NormalizedObjects<Measure>
+  ) => {
     let segments: SegmentAddOptions[] = [];
     sections.allIds.forEach(id => {
       const section = sections.byId[id];
 
       let segment: SegmentAddOptions = {
-        id:
-          section.type + "_" + section.firstMeasure + "-" + section.lastMeasure,
+        id,
         labelText: section.type,
-        startTime: PeaksOptions.measureStartToMilliseconds(
-          section.firstMeasure
-        ),
-        endTime: PeaksOptions.measureEndToMilliseconds(section.lastMeasure),
+        startTime: measures.byId[section.firstMeasure].time,
+        endTime: measures.byId[section.lastMeasure].time,
         color: PeaksOptions.SECTIONTYPE_TO_COLOR.get(section.type),
         editable: false
       };
@@ -54,6 +54,19 @@ class PeaksOptions {
     return segments;
   };
 
+  static measuresToPoints = (measures: NormalizedObjects<Measure>) => {
+    let points: PointAddOptions[] = [];
+    measures.allIds.forEach(id => {
+      const measure = measures.byId[id];
+
+      let point: PointAddOptions = measure;
+
+      points.push(point);
+    });
+
+    return points;
+  };
+
   static measureStartToMilliseconds = (measureStart: number) => measureStart;
   static measureEndToMilliseconds = (measureStart: number) => measureStart;
 
diff --git a/src/states/analysisSlice.test.ts b/src/states/analysisSlice.test.ts
index 773d02c..febeb90 100644
--- a/src/states/analysisSlice.test.ts
+++ b/src/states/analysisSlice.test.ts
@@ -20,7 +20,7 @@ const initialState: AnalysisState = {
   secondsPerMeasure: 2.423,
   audioLength: 180,
   audioSampleRate: 44400,
-  measures: [],
+  measures: { allIds: [], byId: {} },
   timeSignature: TimeSignatureType.FOUR_FOUR
 };
 
@@ -31,7 +31,7 @@ const persistedAnalysisState: AnalysisState = {
   secondsPerMeasure: 3,
   audioLength: 190,
   audioSampleRate: 48000,
-  measures: [],
+  measures: { allIds: [], byId: {} },
   timeSignature: TimeSignatureType.THREE_FOUR
 };
 
@@ -64,7 +64,7 @@ it("can reset an analysis from a persisted state", () => {
     secondsPerMeasure: 3,
     audioLength: 190,
     audioSampleRate: 48000,
-    measures: [],
+    measures: { allIds: [], byId: {} },
     timeSignature: TimeSignatureType.THREE_FOUR
   });
 });
diff --git a/src/states/analysisSlice.ts b/src/states/analysisSlice.ts
index 0dec88c..46121b8 100644
--- a/src/states/analysisSlice.ts
+++ b/src/states/analysisSlice.ts
@@ -11,7 +11,7 @@ export interface AnalysisState {
   readonly secondsPerMeasure: number;
   readonly timeSignature: TimeSignatureType;
   readonly bpm: number;
-  readonly measures: Measure[];
+  readonly measures: NormalizedObjects<Measure>;
 }
 
 export interface Section {
@@ -49,7 +49,7 @@ export const initialAnalysisState: AnalysisState = {
   secondsPerMeasure: 2,
   audioLength: 180,
   audioSampleRate: 44400,
-  measures: [],
+  measures: { allIds: [], byId: {} },
   timeSignature: TimeSignatureType.FOUR_FOUR
 };
 
@@ -124,8 +124,8 @@ const analysisSlice = createSlice({
 
       var lengthOfOneMeasure = (60 * timeSignature.beatsPerMeasure) / bpm;
 
-      var measures = new Array<Measure>(Math.floor(numberOfMeasures));
-
+      state.measures.allIds = new Array<string>(Math.floor(numberOfMeasures));
+      state.measures.byId = {};
       var index = 0;
 
       for (
@@ -133,7 +133,8 @@ const analysisSlice = createSlice({
         start < length;
         start += lengthOfOneMeasure
       ) {
-        measures[index] = {
+        state.measures.allIds.push("" + index);
+        state.measures.byId[index] = {
           time: start,
           color: "",
           editable: false,
@@ -143,7 +144,6 @@ const analysisSlice = createSlice({
         index++;
       }
 
-      state.measures = measures;
       state.bpm = bpm;
       state.timeSignature = timeSignatureType;
       state.firstMeasureStart = firstMeasureStart;