Wire "send notes" and "auto swap octave" check boxes

Author: davidlukerice

electron/main.js

@@ -15,6 +15,14 @@ const store = new Store({
       type: 'string',
       default: '',
     },
+    sendNotes: {
+      type: 'boolean',
+      default: true,
+    },
+    autoSwapOctave: {
+      type: 'boolean',
+      default: true,
+    },
   },
 });
 let mainWindow;

package.json

@@ -39,11 +39,12 @@
     "@emotion/styled": "^10.0.27",
     "electron-store": "^5.2.0",
     "emotion-theming": "^10.0.27",
+    "lodash": "^4.17.15",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-scripts": "3.4.1",
-    "webmidi": "^2.5.1",
-    "robotjs": "git+https://github.com/octalmage/robotjs.git#master"
+    "robotjs": "git+https://github.com/octalmage/robotjs.git#master",
+    "webmidi": "^2.5.1"
   },
   "build": {
     "files": [

todo.txt renamed to roadmap.txt

@@ -1,10 +1,9 @@
 
-Current "roadmap" on upcoming changes
+Current "roadmap" of upcoming changes
 
 v0.1 release
 - checkbox to turn off sending notes (for practicing without it playing)
 - checkbox to turn off auto octave swap
-- update readme with disclaimer on use and some info on how it works
 
 v0.2 release
 - buttons for manually shifting the internal octave

src/react/components/MIDIControls/index.js

@@ -1,20 +1,41 @@
 import React from 'react';
 import { Checkbox } from '@chakra-ui/core';
 
+import { useConfig } from '../../hooks/useConfig.js';
+
 import MIDISelect from './MIDISelect';
 
 import styles from './styles.module.css';
 
 export default MIDIControls;
 
 function MIDIControls() {
+  const { config, setValue } = useConfig();
+
+  // TODO: Fix unselected checkbox styling
+
+  const onSendNotesChange = (e) => {
+    const { checked } = e.target;
+    setValue('sendNotes', checked);
+  };
+
+  const onAutoSwapOctaveChange = (e) => {
+    const { checked } = e.target;
+    setValue('autoSwapOctave', checked);
+  };
+
   return (
     <div className={styles.controlContainer}>
       <MIDISelect />
-      <Checkbox defaultIsChecked isDisabled>
+      <Checkbox isChecked={config.sendNotes} onChange={onSendNotesChange}>
         Send Notes
       </Checkbox>
-      <Checkbox isDisabled>Auto swap octave</Checkbox>
+      <Checkbox
+        isChecked={config.autoSwapOctave}
+        onChange={onAutoSwapOctaveChange}
+      >
+        Auto swap octave
+      </Checkbox>
     </div>
   );
 }

src/react/hooks/useConfig.js

@@ -1,4 +1,6 @@
 import React, { useEffect, useState, useContext } from 'react';
+import { set, cloneDeep } from 'lodash';
+
 import { channels } from '../../shared/constants';
 
 const { ipcRenderer } = window;
@@ -37,6 +39,14 @@ function ConfigContextProvider(props) {
   );
 
   function setValue(key, value) {
+    setState((curr) => {
+      const newConfig = set(cloneDeep(curr.config), key, value);
+      console.log('new config: ', newConfig);
+      return {
+        ...curr,
+        config: newConfig,
+      };
+    });
     ipcRenderer.send(channels.SET_CONFIG, key, value);
   }
 }

src/react/hooks/useKeySender.js

@@ -1,6 +1,7 @@
 import React, { useEffect, useContext, useState, useRef } from 'react';
 import { channels } from '../../shared/constants';
 import { useMIDI } from '../hooks/useMIDI';
+import { useConfig } from '../hooks/useConfig';
 
 const { ipcRenderer } = window;
 
@@ -52,6 +53,7 @@ const MULTIPLE_OCTAVE_SHIFT_DELAY = 75;
 
 function KeySenderProvider(props) {
   const { children } = props;
+  const { isLoading: configIsLoading, config } = useConfig();
 
   const internalState = useRef({
     octave: 1,
@@ -65,7 +67,13 @@ function KeySenderProvider(props) {
   const { selectedInput } = useMIDI();
 
   useEffect(() => {
-    if (!selectedInput) {
+    if (configIsLoading) {
+      return;
+    }
+
+    const { sendNotes, autoSwapOctave } = config;
+
+    if (!selectedInput || !sendNotes) {
       return;
     }
 
@@ -90,7 +98,10 @@ function KeySenderProvider(props) {
         return;
       }
 
-      const { useAltOctaveKey } = _handleOctaveShift({ note });
+      const { useAltOctaveKey } = autoSwapOctave
+        ? _handleOctaveShift({ note })
+        : { shiftedOctaves: false, useAltOctaveKey: false };
+
       const keyToSend = useAltOctaveKey ? note.altOctaveKey : note.key;
 
       setState((curr) => ({
@@ -189,7 +200,7 @@ function KeySenderProvider(props) {
 
       return { shiftedOctaves: true, useAltOctaveKey: false };
     }
-  }, [selectedInput]);
+  }, [configIsLoading, selectedInput, config]);
 
   return (
     <keySenderContext.Provider value={state}>