create SettingSelect Component

package-lock.json

@@ -10293,6 +10293,12 @@
       "resolved": "https://registry.npmjs.org/prepend-http/-/prepend-http-1.0.4.tgz",
       "integrity": "sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw="
     },
+    "prettier": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.1.1.tgz",
+      "integrity": "sha512-9bY+5ZWCfqj3ghYBLxApy2zf6m+NJo5GzmLTpr9FsApsfjriNnS2dahWReHMi7qNPhhHl9SYHJs2cHZLgexNIw==",
+      "dev": true
+    },
     "pretty-bytes": {
       "version": "5.4.0",
       "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.4.0.tgz",

package.json

@@ -31,5 +31,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "prettier": "2.1.1"
   }
 }

src/App.js

@@ -1,10 +1,10 @@
-import React from 'react';
+import React from "react";
-import logo from './logo.svg';
+import logo from "./logo.svg";
-import './App.css';
+import "./App.css";
-import { makeStyles } from '@material-ui/styles' 
+import { makeStyles } from "@material-ui/styles";
-import Slider from  '@material-ui/core/Slider'
+import Slider from "@material-ui/core/Slider";
 
-import MidiComponent from './components/MidiComponent'
+import MidiComponent from "./components/MidiComponent";
 
 const useStyles = makeStyles({
   root: {
@@ -17,16 +17,22 @@ function valuetext(value) {
 }
 
 function SettingSlider() {
-
   const classes = useStyles();
   const [value, setValue] = React.useState(0);
   const handleEvent = (event, newValue) => {
     setValue(newValue);
-  }
+  };
 
-  return(
+  return (
     <div className={classes.root}>
-      <Slider value={value} getAriaValueText={valuetext} valueLabelDisplay="auto" onChange={handleEvent} min={0} max={127}/> 
+      <Slider
+        value={value}
+        getAriaValueText={valuetext}
+        valueLabelDisplay="auto"
+        onChange={handleEvent}
+        min={0}
+        max={127}
+      />
     </div>
   );
 }
@@ -37,8 +43,8 @@ function App() {
       <header className="App-header">
         <img src={logo} className="App-logo" alt="logo" />
         <div>
-          <SettingSlider/>
+          <SettingSlider />
-          <MidiComponent/>
+          <MidiComponent />
         </div>
         <a
           className="App-link"

src/components/InputComponents.js

@@ -0,0 +1,39 @@
+import React, { useState, useEffect } from "react";
+import { makeStyles } from "@material-ui/styles";
+import Select from "@material-ui/core/Select";
+import MenuItem from "@material-ui/core/MenuItem";
+import InputLabel from "@material-ui/core/InputLabel";
+import FormControl from "@material-ui/core/FormControl";
+
+const useStyles = makeStyles((theme) => ({
+    formControl: {
+        margin: theme.spacing(1),
+        minWidth: 120,
+    },
+    selectEmpty: {
+        marginTop: theme.spacing(2),
+    },
+}));
+
+export default function SettingSelect(props) {
+    const classes = useStyles();
+    const [setting, updateSetting] = useState("");
+
+    const handleChange = (e) => {
+        updateSetting(e.target.value);
+    };
+
+    return (
+        <FormControl className={classes.formControl}>
+            <InputLabel id="simple-select-filled">{props.name}</InputLabel>
+            <Select
+                labelId="simple-select-filled"
+                id="simple-select-filled"
+                value={setting}
+                onChange={handleChange}
+            >
+                <MenuItem value={props.options}></MenuItem>
+            </Select>
+        </FormControl>
+    );
+}

src/components/MidiComponent.js

@@ -1,4 +1,4 @@
-import React, {useState, useEffect} from 'react';
+import React, { useState, useEffect } from "react";
 
 // this will pass true to enable SYSEX
 
@@ -12,7 +12,7 @@ function onMIDISuccess(access) {
 
 //Failure Callback
 function onMIDIFailure() {
-    console.log('Could not access MIDI devices!');
+    console.log("Could not access MIDI devices!");
 }
 
 function recieveMIDIMessage(message) {
@@ -24,7 +24,7 @@ function isValidSysex(data) {
         console.log("incorrect file length");
         return false;
     }
-    if (data[0] !== 0xF0) {
+    if (data[0] !== 0xf0) {
         console.log("first byte is not SYSEX byte");
         return false;
     }
@@ -32,12 +32,12 @@ function isValidSysex(data) {
         console.log("manufacturer code is not KORG");
         return false;
     }
-    if (data[data.length-1] !== 0xF7) {
+    if (data[data.length - 1] !== 0xf7) {
         console.log("last byte is does not end SYSEX message");
         return false;
     }
     if (data[4] !== 0x40) {
-        console.log("not a program dump")
+        console.log("not a program dump");
         return false;
     }
 
@@ -49,43 +49,39 @@ function loadSysex(input) {
     console.log(file);
     let reader = new FileReader();
     reader.onload = (e) => {
-        let data = new Uint8ClampedArray(e.target.result)
+        let data = new Uint8ClampedArray(e.target.result);
         console.log(data);
         if (isValidSysex(data)) {
             console.log("read in as valid sysex file");
             return data;
-        }
+        } else {
-        else {
             console.log("could not verify sysex");
             return null;
         }
-    }
+    };
     reader.readAsArrayBuffer(file);
 }
 
 // converts SYSEX file to the dump format the system uses (and the implementation refers to)
 function dumpBufferFromSysexFile(array) {
     // remove the header and footer bytes
-    let dump = array.slice(5, -1);    
+    let dump = array.slice(5, -1);
     // quick test for verification;
     if (dump[0] !== 0x00) {
         console.log("incorrect byte");
         return;
     }
-    console.log('trimmed file', dump);
+    console.log("trimmed file", dump);
     // convert from 291 bytes to 254 (ala the implementation)
-    dump = dump.filter(
+    dump = dump.filter(function (num, index, array) {
-        function(num, index, array) {
+        return index % 8;
-            return index % 8;
+    });
-        }
+    console.log("dump format", dump);
-    );
-    console.log('dump format', dump);
     return dump;
 }
 
-// load a SYSEX File into the MIDI component
+// Component to load a SYSEX File into the MIDI component
-function LoadSYSEXFile (props) {
+function LoadSYSEXFile(props) {
-
     const fileInput = React.useRef();
     const [data, updateData] = useState(new Uint8ClampedArray());
 
@@ -104,67 +100,64 @@ function LoadSYSEXFile (props) {
                 let l_data = new Uint8ClampedArray(e.target.result);
                 // updata state with dump format
                 updateData(dumpBufferFromSysexFile(l_data));
-            }
+            };
             reader.readAsArrayBuffer(fileInput.current.files[0]);
-        }
+        } else {
-        else {
             alert("Please load a SYSEX File");
             return null;
         }
-    }
+    };
 
-    // on submit button press, convert the file to correct Dump Format, as per microKORG MIDI Implementation Doc
+    // on submit button press, pass the file to the parent component
     const handleInput = (event) => {
         if (!fileLoaded()) {
             event.preventDefault();
-        }
+        } else {
-        else {
             event.preventDefault();
             props.sendFileData(data);
         }
-    }
+    };
 
     const fileLoaded = () => {
         console.log(data.length);
-        return (
+        return data.length === 254;
-            data.length === 254
+    };
-        );       
-    }
 
-    return(
+    return (
         <form onSubmit={handleInput}>
             <label>
                 Upload a Sysex File:
-                <input type='file' ref={fileInput} onChange={getFile}/>
+                <input type="file" ref={fileInput} onChange={getFile} />
             </label>
             <br />
-            <button disabled={!fileLoaded()} type="submit">Submit</button>
+            <button disabled={!fileLoaded()} type="submit">
+                Submit
+            </button>
         </form>
     );
 }
 
-function MIDIComponent () {
+function fileToObject() {}
 
+function MIDIComponent() {
     const [loadedFile, loadFile] = useState(null);
 
     // request midi access
     useEffect(() => {
-        navigator.requestMIDIAccess({sysex: true}).then(onMIDISuccess, onMIDIFailure);
+        navigator
+            .requestMIDIAccess({ sysex: true })
+            .then(onMIDISuccess, onMIDIFailure);
     }, []);
-    
+
     useEffect(() => {
         console.log(loadedFile);
     }, [loadedFile]);
 
     const getChildFile = (childData) => {
         loadFile(childData);
-    }
+    };
-
-    return(
-        <LoadSYSEXFile sendFileData={getChildFile} />
-    );
-
 
+    return <LoadSYSEXFile sendFileData={getChildFile} />;
 }
 
-export default MIDIComponent;
+export default MIDIComponent;