clean up code

src/App.js

@@ -1,62 +1,58 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import logo from "./logo.svg";
 import "./App.css";
-import { makeStyles } from "@material-ui/styles";
-import Slider from "@material-ui/core/Slider";
 
+import FileIOComponent from "./components/FileIOComponent";
 import MidiComponent from "./components/MidiComponent";
+import EditorComponent from "./components/EditorComponent";
 
-const useStyles = makeStyles({
-  root: {
-    width: 127,
-  },
-});
+function PatchEditor() {
+    const defaultPatch = {
+        name: "",
+        arpeggio: { length: 8, pattern: [0, 0, 0, 0, 0, 0, 0, 0] },
+        arpeggio2: {},
+        voiceMode: 0,
+        scaleKey: 0, // C
+        scaleType: 0, // Equal Temperment
+        delayFX: { sync: false, timeBase: 5, delayTime: 0, depth: 0, type: 0 },
+        modFX: { lfoSpeed: 0, depth: 0, type: 0 },
+        eq: { hiFreq: 0, hiGain: 0, lowFreq: 0, lowGain: 0 },
+        octave: 0, // this is a 7 bit number so -1 is 127 and -3 is 125
+        synthParameter1: {}, // only use this one in single voice mode
+        synthParameter2: {}, // use this and the previous in multi voice mode
+        synthParameter3: {}, // this is for vocoder mode
+    };
 
-function valuetext(value) {
-  return `${value}`;
-}
+    const [patch, updatePatch] = useState(defaultPatch);
 
-function SettingSlider() {
-  const classes = useStyles();
-  const [value, setValue] = React.useState(0);
-  const handleEvent = (event, newValue) => {
-    setValue(newValue);
-  };
-
-  return (
-    <div className={classes.root}>
-      <Slider
-        value={value}
-        getAriaValueText={valuetext}
-        valueLabelDisplay="auto"
-        onChange={handleEvent}
-        min={0}
-        max={127}
-      />
-    </div>
-  );
+    return (
+        <div>
+            <FileIOComponent />
+            <EditorComponent />
+            <MidiComponent />
+        </div>
+    );
 }
 
 function App() {
-  return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <div>
-          <SettingSlider />
-          <MidiComponent />
+    return (
+        <div className="App">
+            <header className="App-header">
+                <img src={logo} className="App-logo" alt="logo" />
+                <div>
+                    <MidiComponent />
+                </div>
+                <a
+                    className="App-link"
+                    href="https://reactjs.org"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                >
+                    Learn React
+                </a>
+            </header>
         </div>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
-  );
+    );
 }
 
 export default App;

src/components/EditorComponent.js

@@ -0,0 +1,39 @@
+import React from "react";
+import { NameInput } from "./InputComponents.js";
+import { createMuiTheme, ThemeProvider } from "@material-ui/styles";
+import Box from "@material-ui/core/Box";
+import { deepPurple } from "@material-ui/core/colors";
+
+const theme = createMuiTheme({
+    palette: {
+        primary: {
+            main: deepPurple[400],
+        },
+        secondary: {},
+    },
+});
+
+function EditorComponent(props) {
+    const patch = props.patch;
+
+    if (!props.show) {
+        return null;
+    }
+
+    return (
+        // placeholder div
+        <ThemeProvider theme={theme}>
+            <Box bgcolor="primary">
+                <NameInput
+                    returnName={(name) => {
+                        let copyPatch = JSON.parse(JSON.stringify(patch));
+                        copyPatch.name = name;
+                        props.updatePatch(copyPatch);
+                    }}
+                />
+            </Box>
+        </ThemeProvider>
+    );
+}
+
+export default EditorComponent;

src/components/FileIOComponent.js

@@ -0,0 +1,118 @@
+import React, { useState, useEffect } from "React";
+
+function isValidSysex(data) {
+    if (data.length !== 297) {
+        console.log("incorrect file length");
+        return false;
+    }
+    if (data[0] !== 0xf0) {
+        console.log("first byte is not SYSEX byte");
+        return false;
+    }
+    if (data[1] !== 0x42) {
+        console.log("manufacturer code is not KORG");
+        return false;
+    }
+    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");
+        return false;
+    }
+
+    return true;
+}
+
+function loadSysex(input) {
+    let file = input.current.files[0];
+    console.log(file);
+    let reader = new FileReader();
+    reader.onload = (e) => {
+        let data = new Uint8ClampedArray(e.target.result);
+        console.log(data);
+        if (isValidSysex(data)) {
+            console.log("read in as valid sysex file");
+            return data;
+        } 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);
+    // quick test for verification;
+    if (dump[0] !== 0x00) {
+        console.log("incorrect byte");
+        return;
+    }
+    console.log("trimmed file", dump);
+    // convert from 291 bytes to 254 (ala the implementation)
+    dump = dump.filter(function (num, index, array) {
+        return index % 8;
+    });
+    console.log("dump format", dump);
+    return dump;
+}
+
+function LoadSYSEXFile(props) {
+    const fileInput = React.useRef();
+    const [data, updateData] = useState(new Uint8ClampedArray());
+
+    // make sure data is updating correctly
+    useEffect(() => {
+        console.log(data);
+    }, [data]);
+
+    // on file load, verify correct file format
+    const getFile = (event) => {
+        event.preventDefault();
+        if (loadSysex(fileInput) !== null) {
+            let reader = new FileReader();
+            reader.onload = (e) => {
+                // here we load the file into a clamped byte array and trim and convert it to the dump format (see implementation)
+                let l_data = new Uint8ClampedArray(e.target.result);
+                // updata state with dump format
+                updateData(dumpBufferFromSysexFile(l_data));
+            };
+            reader.readAsArrayBuffer(fileInput.current.files[0]);
+        } else {
+            alert("Please load a SYSEX File");
+            return null;
+        }
+    };
+
+    // on submit button press, pass the file to the parent component
+    const handleInput = (event) => {
+        event.preventDefault();
+        if (fileLoaded()) {
+            props.sendFileData(data);
+        }
+    };
+
+    const fileLoaded = () => {
+        console.log(data.length);
+        return data.length === 254;
+    };
+
+    return (
+        <form onSubmit={handleInput}>
+            <label>
+                Upload a Sysex File:
+                <input type="file" ref={fileInput} onChange={getFile} />
+            </label>
+            <br />
+            <button disabled={!fileLoaded()} type="submit">
+                Submit
+            </button>
+        </form>
+    );
+}
+
+export default LoadSYSEXFile;

src/components/InputComponents.js

@@ -5,6 +5,7 @@ import MenuItem from "@material-ui/core/MenuItem";
 import InputLabel from "@material-ui/core/InputLabel";
 import FormControl from "@material-ui/core/FormControl";
 import TextField from "@material-ui/core/TextField";
+import Slider from "@material-ui/core/Slider";
 
 const useStyles = makeStyles((theme) => ({
     formControl: {
@@ -14,8 +15,37 @@ const useStyles = makeStyles((theme) => ({
     selectEmpty: {
         marginTop: theme.spacing(2),
     },
+    root: {
+        width: 127,
+    },
 }));
 
+function SettingSlider() {
+    const classes = useStyles();
+    const [value, setValue] = React.useState(0);
+
+    const handleEvent = (event, newValue) => {
+        setValue(newValue);
+    };
+
+    const valuetext = (value) => {
+        return `${value}`;
+    };
+
+    return (
+        <div className={classes.root}>
+            <Slider
+                value={value}
+                getAriaValueText={valuetext}
+                valueLabelDisplay="auto"
+                onChange={handleEvent}
+                min={0}
+                max={127}
+            />
+        </div>
+    );
+}
+
 function NameInput(props) {
     const [name, setName] = useState("init");
 
@@ -77,5 +107,6 @@ function SettingSelect(props) {
 
 export default {
     SettingSelect,
+    SettingSlider,
     NameInput,
 };

src/components/MidiComponent.js

@@ -15,125 +15,11 @@ function onMIDIFailure() {
     console.log("Could not access MIDI devices!");
 }
 
-function recieveMIDIMessage(message) {
-    console.log(message);
-}
-
-function isValidSysex(data) {
-    if (data.length !== 297) {
-        console.log("incorrect file length");
-        return false;
-    }
-    if (data[0] !== 0xf0) {
-        console.log("first byte is not SYSEX byte");
-        return false;
-    }
-    if (data[1] !== 0x42) {
-        console.log("manufacturer code is not KORG");
-        return false;
-    }
-    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");
-        return false;
-    }
-
-    return true;
-}
-
-function loadSysex(input) {
-    let file = input.current.files[0];
-    console.log(file);
-    let reader = new FileReader();
-    reader.onload = (e) => {
-        let data = new Uint8ClampedArray(e.target.result);
-        console.log(data);
-        if (isValidSysex(data)) {
-            console.log("read in as valid sysex file");
-            return data;
-        } 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);
-    // quick test for verification;
-    if (dump[0] !== 0x00) {
-        console.log("incorrect byte");
-        return;
-    }
-    console.log("trimmed file", dump);
-    // convert from 291 bytes to 254 (ala the implementation)
-    dump = dump.filter(function (num, index, array) {
-        return index % 8;
-    });
-    console.log("dump format", dump);
-    return dump;
-}
+// function recieveMIDIMessage(message) {
+//     console.log(message);
+// }
 
 // Component to load a SYSEX File into the MIDI component
-function LoadSYSEXFile(props) {
-    const fileInput = React.useRef();
-    const [data, updateData] = useState(new Uint8ClampedArray());
-
-    // make sure data is updating correctly
-    useEffect(() => {
-        console.log(data);
-    }, [data]);
-
-    // on file load, verify correct file format
-    const getFile = (event) => {
-        event.preventDefault();
-        if (loadSysex(fileInput) !== null) {
-            let reader = new FileReader();
-            reader.onload = (e) => {
-                // here we load the file into a clamped byte array and trim and convert it to the dump format (see implementation)
-                let l_data = new Uint8ClampedArray(e.target.result);
-                // updata state with dump format
-                updateData(dumpBufferFromSysexFile(l_data));
-            };
-            reader.readAsArrayBuffer(fileInput.current.files[0]);
-        } else {
-            alert("Please load a SYSEX File");
-            return null;
-        }
-    };
-
-    // on submit button press, pass the file to the parent component
-    const handleInput = (event) => {
-        event.preventDefault();
-        if (fileLoaded()) {
-            props.sendFileData(data);
-        }
-    };
-
-    const fileLoaded = () => {
-        console.log(data.length);
-        return data.length === 254;
-    };
-
-    return (
-        <form onSubmit={handleInput}>
-            <label>
-                Upload a Sysex File:
-                <input type="file" ref={fileInput} onChange={getFile} />
-            </label>
-            <br />
-            <button disabled={!fileLoaded()} type="submit">
-                Submit
-            </button>
-        </form>
-    );
-}
 
 function MIDIComponent() {
     const [loadedFile, loadFile] = useState(null);
@@ -153,7 +39,7 @@ function MIDIComponent() {
         loadFile(childData);
     };
 
-    return <LoadSYSEXFile sendFileData={getChildFile} />;
+    return; //<LoadSYSEXFile sendFileData={getChildFile} />;
 }
 
 export default MIDIComponent;

src/components/PatchEditorComponent.js

@@ -1,60 +0,0 @@
-import React, { useState, useEffect } from "react";
-import { NameInput } from "./InputComponents.js";
-import { createMuiTheme, makeStyles, ThemeProvider } from "@material-ui/styles";
-import Box from "@material-ui/core/Box";
-import { deepPurple } from "@material-ui/core/colors";
-
-const theme = createMuiTheme({
-    palette: {
-        primary: {
-            main: deepPurple[400],
-        },
-        secondary: {},
-    },
-});
-
-function PatchEditorComponent(props) {
-    const defaultPatch = {
-        name: "",
-        arpeggio: { length: 8, pattern: [0, 0, 0, 0, 0, 0, 0, 0] },
-        arpeggio2: {},
-        voiceMode: 0,
-        scaleKey: 0, // C
-        scaleType: 0, // Equal Temperment
-        delayFX: { sync: false, timeBase: 5, delayTime: 0, depth: 0, type: 0 },
-        modFX: { lfoSpeed: 0, depth: 0, type: 0 },
-        eq: { hiFreq: 0, hiGain: 0, lowFreq: 0, lowGain: 0 },
-        octave: 0, // this is a 7 bit number so -1 is 127 and -3 is 125
-        synthParameter1: {}, // only use this one in single voice mode
-        synthParameter2: {}, // use this and the previous in multi voice mode
-        synthParameter3: {}, // this is for vocoder mode
-    };
-
-    const [patch, updatePatch] = useState(defaultPatch);
-
-    useEffect(() => {
-        // update the dump and send out a sysex message to the system
-        console.log(patch);
-    }, [patch]);
-
-    if (!props.show) {
-        return null;
-    }
-
-    return (
-        // placeholder div
-        <ThemeProvider theme={theme}>
-            <Box bgcolor="primary">
-                <NameInput
-                    returnName={(name) => {
-                        let copyPatch = JSON.parse(JSON.stringify(patch));
-                        copyPatch.name = name;
-                        updatePatch(copyPatch);
-                    }}
-                />
-            </Box>
-        </ThemeProvider>
-    );
-}
-
-export default PatchEditorComponent;