From 813b00a79d7d7637278bef493f347a8bd2899d90 Mon Sep 17 00:00:00 2001
From: "[poww10s]" <[theironminer@gmail.com]>
Date: Tue, 17 Nov 2020 23:14:32 -0500
Subject: [PATCH] implement test VCO redux state and actions

---
 src/App.js                            | 18 +++++++-----
 src/app/store.js                      |  8 +++--
 src/features/timbre/Timbre.js         |  6 ++++
 src/features/timbre/parameters/VCO.js | 42 +++++++++++++++++++++++++++
 src/features/timbre/timbreSlice.js    | 32 ++++++++++++++++++++
 5 files changed, 95 insertions(+), 11 deletions(-)
 create mode 100644 src/features/timbre/Timbre.js
 create mode 100644 src/features/timbre/parameters/VCO.js
 create mode 100644 src/features/timbre/timbreSlice.js

diff --git a/src/App.js b/src/App.js
index adc228f..ae8c435 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,17 +1,19 @@
 import React from 'react';
 import logo from './logo.svg';
 import { Counter } from './features/counter/Counter';
+import { Timbre } from './features/timbre/Timbre';
 import './App.css';
 
 function App() {
-  return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <Counter />
-      </header>
-    </div>
-  );
+    return (
+        <div className="App">
+            <header className="App-header">
+                <img src={logo} className="App-logo" alt="logo" />
+                <Counter />
+                <Timbre />
+            </header>
+        </div>
+    );
 }
 
 export default App;
diff --git a/src/app/store.js b/src/app/store.js
index 5e2834d..30c0c5a 100644
--- a/src/app/store.js
+++ b/src/app/store.js
@@ -1,8 +1,10 @@
 import { configureStore } from '@reduxjs/toolkit';
 import counterReducer from '../features/counter/counterSlice';
+import timbreReducer from '../features/timbre/timbreSlice';
 
 export default configureStore({
-  reducer: {
-    counter: counterReducer,
-  },
+    reducer: {
+        counter: counterReducer,
+        timbre: timbreReducer,
+    },
 });
diff --git a/src/features/timbre/Timbre.js b/src/features/timbre/Timbre.js
new file mode 100644
index 0000000..e34a769
--- /dev/null
+++ b/src/features/timbre/Timbre.js
@@ -0,0 +1,6 @@
+import React from 'react';
+import VCO from './parameters/VCO';
+
+export function Timbre(props) {
+    return <VCO id="vco1" />;
+}
diff --git a/src/features/timbre/parameters/VCO.js b/src/features/timbre/parameters/VCO.js
new file mode 100644
index 0000000..469d390
--- /dev/null
+++ b/src/features/timbre/parameters/VCO.js
@@ -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>
+    );
+}
diff --git a/src/features/timbre/timbreSlice.js b/src/features/timbre/timbreSlice.js
new file mode 100644
index 0000000..365322c
--- /dev/null
+++ b/src/features/timbre/timbreSlice.js
@@ -0,0 +1,32 @@
+import { createSlice, createEntityAdapter } from '@reduxjs/toolkit';
+
+const timbreAdapter = createEntityAdapter({});
+
+const timbreSlice = createSlice({
+    name: 'timbre',
+    initialState: timbreAdapter.getInitialState({
+        ids: ['vco1'],
+        entities: {
+            vco1: {
+                id: 'vco1',
+                waveform: 'Saw',
+                mod: 0,
+            },
+        },
+    }),
+    reducers: {
+        parameterAdded: timbreAdapter.addOne,
+        parameterUpdated: timbreAdapter.updateOne,
+    },
+});
+
+export const {
+    selectById,
+    selectAll,
+    selectEntities,
+    selectIds,
+} = timbreAdapter.getSelectors((state) => state.timbre);
+
+export const { parameterAdded, parameterUpdated } = timbreSlice.actions;
+
+export default timbreSlice.reducer;