From 1c91adc18367dabfc2ce5905a3273e63830de266 Mon Sep 17 00:00:00 2001
From: Chris L <stylesuxx@gmail.com>
Date: Fri, 7 Jan 2022 13:01:07 +0100
Subject: [PATCH] Refactored Melody Editor to only use MUI components. #164

---
 src/Components/Input/LabeledSelect/index.jsx  |   7 +-
 .../MelodyEditor/MelodyElement/index.jsx      |  39 +--
 .../MelodyEditor/MelodyElement/style.scss     |  83 ++----
 .../MelodyEditor/__tests__/index.test.jsx     |   5 +-
 src/Components/MelodyEditor/index.jsx         | 245 +++++++++++-------
 src/Components/MelodyEditor/style.scss        | 135 ----------
 6 files changed, 198 insertions(+), 316 deletions(-)
 delete mode 100644 src/Components/MelodyEditor/style.scss

diff --git a/src/Components/Input/LabeledSelect/index.jsx b/src/Components/Input/LabeledSelect/index.jsx
index bee0a2495..c52cfd49e 100644
--- a/src/Components/Input/LabeledSelect/index.jsx
+++ b/src/Components/Input/LabeledSelect/index.jsx
@@ -54,9 +54,10 @@ function LabeledSelect({
         variant="standard"
       >
 
-        <InputLabel id={`${label}-select-label`}>
-          {label}
-        </InputLabel>
+        { label &&
+          <InputLabel id={`${label}-select-label`}>
+            {label}
+          </InputLabel>}
 
         <Select />
       </FormControl>
diff --git a/src/Components/MelodyEditor/MelodyElement/index.jsx b/src/Components/MelodyEditor/MelodyElement/index.jsx
index 07dd740ad..28abded0f 100644
--- a/src/Components/MelodyEditor/MelodyElement/index.jsx
+++ b/src/Components/MelodyEditor/MelodyElement/index.jsx
@@ -9,6 +9,13 @@ import React, {
   useImperativeHandle,
   forwardRef,
 } from 'react';
+
+import Button from '@mui/material/Button';
+import ButtonGroup from '@mui/material/ButtonGroup';
+import Divider from '@mui/material/Divider';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+
 import './style.scss';
 
 const MelodyElement = forwardRef(({
@@ -201,35 +208,33 @@ const MelodyElement = forwardRef(({
   }
 
   return (
-    <div className="esc-melody-wrapper">
-      <div className="esc-melody">
+    <div className="esc-melody">
+      <Stack spacing={1}>
         <header>
-          <div className="index">
-            <h4>
-              {label}
-            </h4>
-          </div>
-
-          <div className="default-btn">
-            <button
+          <Typography>
+            {label}
+          </Typography>
+
+          <ButtonGroup>
+            <Button
               className="play"
               disabled={!isPlayable || disabled}
               onClick={playing ? handleStopMelody : handlePlayMelody}
-              type="button"
+              variant='outlined'
             >
               {playing ? t('common:melodyEditorStop') : t('common:melodyEditorPlay')}
-            </button>
+            </Button>
 
             { !dummy &&
-              <button
+              <Button
                 className={`accept ${isAccepted ? 'accepted' : ''}`}
                 disabled={!isValid || playing || disabled}
                 onClick={handleAcceptMelody}
-                type="button"
+                variant='outlined'
               >
                 {t('common:melodyEditorAccept')}
-              </button>}
-          </div>
+              </Button>}
+          </ButtonGroup>
         </header>
 
         <div className="editor-wrapper">
@@ -243,7 +248,7 @@ const MelodyElement = forwardRef(({
             value={currentMelody}
           />
         </div>
-      </div>
+      </Stack>
     </div>
   );
 });
diff --git a/src/Components/MelodyEditor/MelodyElement/style.scss b/src/Components/MelodyEditor/MelodyElement/style.scss
index 9b4f084fe..30a490826 100644
--- a/src/Components/MelodyEditor/MelodyElement/style.scss
+++ b/src/Components/MelodyEditor/MelodyElement/style.scss
@@ -1,75 +1,36 @@
-.esc-melody-wrapper {
-  width: 50%;
+.esc-melody {
+  header {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+  }
 
-  .esc-melody {
-    flex: 1;
-    margin: 10px;
-    position: relative;
+  .editor-wrapper {
+    border: 1px solid silver;
+    padding: 5px;
+    display: flex;
 
-    header {
-      padding-bottom: 5px;
-      margin-bottom: 10px;
-      border-bottom: 1px solid silver;
-      display: flex;
-      justify-content: space-between;
+    .editor {
       width: 100%;
+      font-family: monospace;
 
-      .default-btn {
-        width: auto;
-        display: flex;
-
-        button {
-          margin-left: 10px;
-          width: 100px;
-        }
-
-        button.accepted {
-          background: var(--color-tertiary);
-          color: white;
-
-          &[disabled] {
-            cursor: default;
-            opacity: 0.5;
-          }
-        }
+      mark {
+        background: #FFCCCB;
       }
 
-      .index {
-        flex: 1;
-        h4 {
-          padding-top: 5px;
-          font-size: 1.17em;
+      &.playing {
+        mark {
+          background: #CCFFCB;
         }
       }
-    }
 
-    .editor-wrapper {
-      border: 1px solid silver;
-      padding: 5px;
-      display: flex;
-
-      .editor {
+      textarea {
         width: 100%;
-        font-family: monospace;
-
-        mark {
-          background: #FFCCCB;
-        }
-
-        &.playing {
-          mark {
-            background: #CCFFCB;
-          }
-        }
-
-        textarea {
-          width: 100%;
-          resize: none;
-          border: 0px;
+        resize: none;
+        border: 0px;
 
-          &[disabled] {
-            opacity: 0.75;
-          }
+        &[disabled] {
+          opacity: 0.75;
         }
       }
     }
diff --git a/src/Components/MelodyEditor/__tests__/index.test.jsx b/src/Components/MelodyEditor/__tests__/index.test.jsx
index 551c5a7ba..512201ca2 100644
--- a/src/Components/MelodyEditor/__tests__/index.test.jsx
+++ b/src/Components/MelodyEditor/__tests__/index.test.jsx
@@ -334,9 +334,10 @@ describe('MelodyEditor', () => {
     userEvent.click(screen.getByText(/common:melodyEditorSave/i));
     expect(onSave).not.toHaveBeenCalled();
 
-    expect(screen.getByTestId('saveMelodyName')).toBeInTheDocument();
+    const element = screen.getAllByRole('textbox')[0];
+    expect(element).toBeInTheDocument();
 
-    fireEvent.change(screen.getByTestId('saveMelodyName'), {
+    fireEvent.change(element, {
       target: {
         name: "",
         value: "TestName",
diff --git a/src/Components/MelodyEditor/index.jsx b/src/Components/MelodyEditor/index.jsx
index 5ca6f154c..8310a1c48 100644
--- a/src/Components/MelodyEditor/index.jsx
+++ b/src/Components/MelodyEditor/index.jsx
@@ -5,9 +5,12 @@ import React, {
   useRef,
 } from 'react';
 import { useTranslation } from 'react-i18next';
-import './style.scss';
 
+import Button from '@mui/material/Button';
+import ButtonGroup from '@mui/material/ButtonGroup';
+import Input from '@mui/material/Input';
 import Stack from '@mui/material/Stack';
+import Grid from '@mui/material/Grid';
 
 import Checkbox from '../Input/Checkbox';
 import LabeledSelect from '../Input/LabeledSelect';
@@ -27,27 +30,39 @@ function SaveMelody({ onSave }) {
   }
 
   return (
-    <div className="save-melody-wrapper">
-      <input
-        data-testid="saveMelodyName"
-        name="save-melody-name"
-        onChange={updateName}
-        placeholder={t('common:melodyEditorName')}
-        type="text"
-        value={name}
-      />
-
-      <div className="default-btn">
-
-        <button
+    <Grid
+      alignItems="end"
+      container
+      spacing={2}
+    >
+      <Grid
+        item
+        xs={4}
+      >
+        <Input
+          aria-label="save-melody"
+          fullWidth
+          name="save-melody-name"
+          onChange={updateName}
+          placeholder={t('common:melodyEditorName')}
+          value={name}
+        />
+      </Grid>
+
+      <Grid
+        item
+        xs={2}
+      >
+        <Button
           disabled={name === ''}
+          fullWidth
           onClick={handleSave}
-          type="button"
+          variant="outlined"
         >
           {t('common:melodyEditorSave')}
-        </button>
-      </div>
-    </div>
+        </Button>
+      </Grid>
+    </Grid>
   );
 }
 SaveMelody.propTypes = { onSave: PropTypes.func.isRequired };
@@ -138,24 +153,37 @@ function PresetSelect({
   ];
 
   return(
-    <div className="melody-selection-wrapper">
-      <LabeledSelect
-        firstLabel={t('melodyPresetsLabel')}
-        onChange={handleUpdate}
-        options={options}
-        selected={selectedPreset}
-      />
-
-      <div className="default-btn">
-        <button
+    <Grid
+      alignItems="end"
+      container
+      spacing={2}
+    >
+      <Grid
+        item
+        xs={4}
+      >
+        <LabeledSelect
+          firstLabel={t('melodyPresetsLabel')}
+          onChange={handleUpdate}
+          options={options}
+          selected={selectedPreset}
+        />
+      </Grid>
+
+      <Grid
+        item
+        xs={2}
+      >
+        <Button
           disabled={!canDelete}
+          fullWidth
           onClick={handleDelete}
-          type="button"
+          variant="outlined"
         >
           {t('melodyDelete')}
-        </button>
-      </div>
-    </div>
+        </Button>
+      </Grid>
+    </Grid>
   );
 }
 PresetSelect.defaultProps = { selected: -1 };
@@ -314,19 +342,26 @@ function MelodyEditor({
     }
 
     return (
-      <MelodyElement
-        accepted={acceptedMelodies[index] ? true : false}
-        disabled={writing}
-        dummy={dummy}
+      <Grid
+        item
         key={index}
-        label={`ESC ${index + 1}`}
-        melody={melody}
-        onAccept={handleAcceptMelody}
-        onPlay={handlePlay}
-        onStop={handleStop}
-        onUpdate={handleUpdate}
-        ref={references[index]}
-      />
+        md={6}
+        xs={12}
+      >
+        <MelodyElement
+          accepted={acceptedMelodies[index] ? true : false}
+          disabled={writing}
+          dummy={dummy}
+          key={index}
+          label={`ESC ${index + 1}`}
+          melody={melody}
+          onAccept={handleAcceptMelody}
+          onPlay={handlePlay}
+          onStop={handleStop}
+          onUpdate={handleUpdate}
+          ref={references[index]}
+        />
+      </Grid>
     );
   });
 
@@ -339,20 +374,16 @@ function MelodyEditor({
     >
       <div id="melody-editor">
         <Stack spacing={1}>
-          <div className="line-wrapper">
-            <div className="sync-wrapper">
-              <Checkbox
-                disabled={isAnyPlaying || writing}
-                hint={t("common:syncMelodiesHint")}
-                label={t("common:syncMelodies")}
-                name="syncMelodies"
-                onChange={toggleSync}
-                value={sync ? 1 : 0}
-              />
-            </div>
-          </div>
+          <Checkbox
+            disabled={isAnyPlaying || writing}
+            hint={t("common:syncMelodiesHint")}
+            label={t("common:syncMelodies")}
+            name="syncMelodies"
+            onChange={toggleSync}
+            value={sync ? 1 : 0}
+          />
 
-          <div className="line-wrapper">
+          <div>
             <PresetSelect
               customMelodies={customMelodies}
               defaultMelodies={defaultMelodies}
@@ -363,49 +394,67 @@ function MelodyEditor({
             />
           </div>
 
-          <SaveMelody
-            onSave={handleMelodiesSave}
-          />
-        </Stack>
+          <div>
+            <SaveMelody onSave={handleMelodiesSave} />
+          </div>
 
-        <div className={`melody-editor-escs ${sync ? 'all' : 'single'}`}>
-          {!sync && melodyElements}
-
-          {sync &&
-            <MelodyElement
-              accepted={acceptedMelodies[0] ? true : false}
-              disabled={writing}
-              dummy={dummy}
-              label={t("common:allEscs")}
-              melody={currentMelodies[0]}
-              onAccept={handleAcceptAll}
-              onPlay={handlePlay}
-              onStop={handleStop}
-              onUpdate={handleMelodiesUpdateAll}
-            />}
-        </div>
-
-        <div className="default-btn button-wrapper">
-          { !sync &&
-            <button
-              disabled={writing}
-              onClick={isAnyPlaying ? handleStopAll : handlePlayAll}
-              type="button"
-            >
-              {isAnyPlaying ? t('common:melodyEditorStopAll') : t('common:melodyEditorPlayAll')}
-            </button>}
-
-          { !dummy &&
-            <button
-              disabled={!allAccepted || isAnyPlaying || writing}
-              onClick={handleSave}
-              type="button"
-            >
-              {t('common:melodyEditorWrite')}
-            </button>}
-        </div>
-      </div>
+          <br />
+
+          <div className={`melody-editor-escs ${sync ? 'all' : 'single'}`}>
+            {!sync &&
+              <Grid
+                container
+                spacing={2}
+              >
+                {melodyElements}
+              </Grid>}
+
+            {sync &&
+              <Grid
+                item
+                md={12}
+                xs={12}
+              >
+                <MelodyElement
+                  accepted={acceptedMelodies[0] ? true : false}
+                  disabled={writing}
+                  dummy={dummy}
+                  label={t("common:allEscs")}
+                  melody={currentMelodies[0]}
+                  onAccept={handleAcceptAll}
+                  onPlay={handlePlay}
+                  onStop={handleStop}
+                  onUpdate={handleMelodiesUpdateAll}
+                />
+              </Grid>}
+          </div>
 
+          <Grid
+            container
+            justifyContent="end"
+          >
+            <ButtonGroup>
+              { !sync &&
+                <Button
+                  disabled={writing}
+                  onClick={isAnyPlaying ? handleStopAll : handlePlayAll}
+                  variant='outlined'
+                >
+                  {isAnyPlaying ? t('common:melodyEditorStopAll') : t('common:melodyEditorPlayAll')}
+                </Button>}
+
+              { !dummy &&
+                <Button
+                  disabled={!allAccepted || isAnyPlaying || writing}
+                  onClick={handleSave}
+                  variant='outlined'
+                >
+                  {t('common:melodyEditorWrite')}
+                </Button>}
+            </ButtonGroup>
+          </Grid>
+        </Stack>
+      </div>
     </Overlay>
   );
 }
diff --git a/src/Components/MelodyEditor/style.scss b/src/Components/MelodyEditor/style.scss
deleted file mode 100644
index 143236eb8..000000000
--- a/src/Components/MelodyEditor/style.scss
+++ /dev/null
@@ -1,135 +0,0 @@
-#melody-editor {
-  .overlay {
-    .overlay__wrapper {
-      max-width: 960px;
-      width: 80%;
-
-      @media screen and (max-width: 600px) {
-        width: 90%;
-      }
-    }
-  }
-
-  .line-wrapper {
-    display: flex;
-    flex-direction: row;
-
-    .info-wrapper-wrapper {
-      white-space: nowrap;
-    }
-
-    select {
-      margin-left: 10px;
-      height: 20px;
-      border: 1px solid silver;
-      border-radius: 3px;
-    }
-
-    .melody-selection-wrapper {
-      display: flex;
-      flex-direction: row;
-      margin-bottom: 6px;
-
-      .info-wrapper-wrapper {
-        display: none;
-      }
-
-      .default-btn {
-        margin-top: -2px;
-        margin-left: 10px;
-
-        button {
-          width: 100px;
-        }
-      }
-    }
-
-    @media screen and (max-width: 768px) {
-      flex-direction: column;
-
-      select {
-        margin-left: 0px;
-      }
-
-      .melody-selection-wrapper {
-        .default-btn button {
-          width: inherit;
-        }
-      }
-    }
-  }
-
-  .save-melody-wrapper {
-    display: flex;
-    flex-direction: row;
-
-    input {
-      border: 1px solid silver;
-      padding-left: 5px;
-      padding-right: 5px;
-      line-height: 23px;
-    }
-
-    .default-btn {
-      margin-left: 10px;
-
-      button {
-        width: 100px;
-
-        @media screen and (max-width: 768px) {
-          width: inherit;
-        }
-      }
-    }
-  }
-
-  .melody-editor-escs {
-    display: flex;
-    flex-wrap: wrap;
-    margin-left: -10px;
-    margin-right: -10px;
-
-    &.all {
-      .esc-melody-wrapper {
-        width: 100%;
-      }
-    }
-  }
-
-  .button-wrapper {
-    display: flex;
-    justify-content: flex-end;
-
-    button {
-      width: 100px;
-      margin-left: 15px;
-    }
-  }
-
-  @media screen and (max-width: 600px) {
-    .melody-editor-escs.single {
-      .esc-melody {
-        margin-top: 5px;
-        margin-bottom: 5px;
-
-        header {
-          flex-direction: column;
-          border: 0px;
-          padding-bottom: 0px;
-          margin-bottom: 4px;
-
-          .default-btn {
-            margin-top: 2px;
-            margin-left: -2px;
-            margin-right: -2px;
-
-            button {
-              margin-left: 2px;
-              margin-right: 2px;
-            }
-          }
-        }
-      }
-    }
-  }
-}