🐛 Fix looping behavior in PianoRoll/Sequencer preview modes (#98)

* Merge updated stepCount from props in PianoRoll/Sequencer, set stepCount data attribute for style mutation to loop properly

* Add keymirror package

* Fix off-by-one error in index style mutation (subtract 1 from stepCount for index)

Author: brandongregoryscott

package-lock.json

@@ -18,6 +18,7 @@
         "glamor": "2.20.40",
         "immutable": "4.0.0",
         "jotai": "1.5.2",
+        "keymirror": "0.1.1",
         "lodash": "4.17.21",
         "luxon": "2.0.2",
         "opus-media-recorder": "0.8.0",
@@ -45,6 +46,7 @@
         "@types/chalk": "2.2.0",
         "@types/dotenv": "8.2.0",
         "@types/jest": "26.0.24",
+        "@types/keymirror": "0.1.1",
         "@types/lodash": "4.14.172",
         "@types/luxon": "2.0.5",
         "@types/node": "12.20.19",

package.json

@@ -20,6 +20,7 @@ import { MidiNoteUtils } from "utils/midi-note-utils";
 import { MidiNote } from "types/midi-note";
 import { useToneAudio } from "utils/hooks/use-tone-audio";
 import { TrackRecord } from "models/track-record";
+import { toDataAttributes } from "utils/data-attribute-utils";
 
 interface PianoRollProps {
     file?: FileRecord;
@@ -58,7 +59,7 @@ const PianoRoll: React.FC<PianoRollProps> = (props: PianoRollProps) => {
         instruments: instrument != null ? List.of(instrument) : undefined,
         files: file != null ? List.of(file) : undefined,
         tracks: List.of(track),
-        trackSections: List.of(trackSection),
+        trackSections: List.of(trackSection.merge({ step_count: stepCount })),
         trackSectionSteps,
     });
 
@@ -72,7 +73,7 @@ const PianoRoll: React.FC<PianoRollProps> = (props: PianoRollProps) => {
     );
 
     return (
-        <React.Fragment>
+        <Pane {...toDataAttributes({ stepCount })}>
             <Pane marginBottom={majorScale(1)}>
                 <PlayButton
                     isLoading={isLoading}
@@ -112,7 +113,7 @@ const PianoRoll: React.FC<PianoRollProps> = (props: PianoRollProps) => {
                     viewableIndex={viewableIndex}
                 />
             </Pane>
-        </React.Fragment>
+        </Pane>
     );
 };
 

src/components/piano-roll/piano-roll.tsx

@@ -13,6 +13,7 @@ import { useBoolean } from "utils/hooks/use-boolean";
 import { PlayButton } from "components/workstation/play-button";
 import { useToneAudio } from "utils/hooks/use-tone-audio";
 import { TrackRecord } from "models/track-record";
+import { toDataAttributes } from "utils/data-attribute-utils";
 
 interface SequencerProps {
     files: List<FileRecord>;
@@ -60,17 +61,14 @@ const Sequencer: React.FC<SequencerProps> = (props: SequencerProps) => {
         isPlaying,
         files,
         tracks: List.of(track),
-        trackSections: List.of(trackSection),
+        trackSections: List.of(trackSection.merge({ step_count: stepCount })),
         trackSectionSteps,
     });
 
-    const sampleButtonText = `${selected.count()} ${pluralize(
-        "Sample",
-        selected.count()
-    )}`;
+    const sampleButtonText = pluralize("Sample", selected.count(), true);
 
     return (
-        <Pane>
+        <Pane {...toDataAttributes({ stepCount })}>
             <Pane marginBottom={majorScale(1)}>
                 <PlayButton
                     isLoading={isLoading}

src/components/sequencer/sequencer.tsx

@@ -1,6 +1,7 @@
 import { TrackTimeCard } from "components/tracks/track-time/track-time-card";
 import { Pane } from "evergreen-ui";
 import { range } from "lodash";
+import { toDataAttributes } from "utils/data-attribute-utils";
 import { useToneControls } from "utils/hooks/use-tone-controls";
 
 interface TrackTimeProps {
@@ -12,9 +13,11 @@ const TrackTime: React.FC<TrackTimeProps> = (props: TrackTimeProps) => {
     const { endIndex, startIndex } = useToneControls();
     return (
         <Pane
-            data-end-index={endIndex}
-            data-start-index={startIndex}
-            data-step-count={stepCount}
+            {...toDataAttributes({
+                endIndex,
+                startIndex,
+                stepCount,
+            })}
             display="flex"
             flexDirection="row">
             {range(0, stepCount).map((index: number) => (

src/components/tracks/track-time/track-time.tsx

@@ -0,0 +1,14 @@
+import { kebabCase, mapValues } from "lodash";
+import keyMirror from "keymirror";
+
+const DataAttributes = mapValues(
+    keyMirror({
+        endIndex: null,
+        index: null,
+        startIndex: null,
+        stepCount: null,
+    }),
+    (value: string) => `data-${kebabCase(value)}`
+);
+
+export { DataAttributes };

src/constants/data-attributes.ts

@@ -1,4 +1,4 @@
-import { keyMirror } from "../utils";
+import keyMirror from "keymirror";
 
 const AuditableColumns = keyMirror({
     created_on: null,

src/scripts/codegen/constants/auditable-columns.ts

@@ -1,4 +1,4 @@
-import { keyMirror } from "../utils";
+import keyMirror from "keymirror";
 
 const Variables = keyMirror({
     Auditable: null,

src/scripts/codegen/constants/variables.ts

@@ -89,18 +89,6 @@ const getTablesEnumValue = (property: PropertySignature): string =>
 const getTableName = (property: PropertySignature): string =>
     pluralize(getInterfaceName(property), 2);
 
-const keyMirror = <T extends Record<string, null>>(
-    object: T
-): Record<keyof T, string> => {
-    const keys = Object.keys(object);
-    const outputObject: Record<string, string> = {};
-    keys.forEach((key: string) => {
-        outputObject[key] = key;
-    });
-
-    return outputObject as Record<keyof T, string>;
-};
-
 const removeExt = (filename: string) => upath.removeExt(filename, ".ts");
 
 const snakeToTitleCase = (value: string) => {
@@ -148,7 +136,6 @@ export {
     getRecordSourceFile,
     getTablesEnumValue,
     getTableName,
-    keyMirror,
     stripQuotes,
     toKebabCase,
     withExt,

src/scripts/codegen/utils.ts

@@ -0,0 +1,26 @@
+import { DataAttributes } from "constants/data-attributes";
+import { Map } from "immutable";
+import { isEmpty, get } from "lodash";
+
+const toDataAttributes = (
+    values?: Partial<Record<keyof typeof DataAttributes, string | number>>
+): Record<string, unknown> => {
+    let props: Map<string, unknown> = Map();
+
+    if (isEmpty(values)) {
+        return props.toJS();
+    }
+
+    Object.entries(values!).forEach(([key, value]) => {
+        if (value == null) {
+            return;
+        }
+
+        // Get mapped data-attribute key
+        props = props.set(get(DataAttributes, key), value);
+    });
+
+    return props.toJS();
+};
+
+export { toDataAttributes };