implement test VCO redux state and actions

2020-11-17 23:14:32 -05:00
parent 021734f6e1
commit 813b00a79d
5 changed files with 95 additions and 11 deletions
@@ -0,0 +1,42 @@
+import React from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+import { selectById, parameterUpdated } from '../timbreSlice.js';
+
+export default function VCO(props) {
+    const parameters = useSelector((state) => selectById(state, props.id));
+
+    const dispatch = useDispatch();
+    return (
+        <div>
+            <span>Current Waveform {parameters.waveform} </span>
+            <button
+                aria-label="Increment value"
+                onClick={() =>
+                    dispatch(
+                        parameterUpdated({
+                            id: 'vco1',
+                            changes: { waveform: 'Triangle' },
+                        })
+                    )
+                }>
+                {' '}
+                Set Waveform to Triangle{' '}
+            </button>
+            <span>Current Mod Value {parameters.mod} </span>
+            <input
+                type="range"
+                min="0"
+                max="100"
+                value={parameters.mod}
+                onChange={(e) =>
+                    dispatch(
+                        parameterUpdated({
+                            id: 'vco1',
+                            changes: { mod: e.target.value },
+                        })
+                    )
+                }
+            />
+        </div>
+    );
+}