section switching added

src/App.js

@@ -1,15 +1,12 @@
 import React from 'react';
-import Timbre from './features/timbre/Timbre';
+import TimbreSwitcher from './features/timbre/timbreSwitcher';
-import Vocoder from './features/timbre/Vocoder';
 import './App.css';
 
 function App() {
     return (
         <div className="App">
             <header className="App-header">
-                <Timbre id="timbre1" />
+                <TimbreSwitcher />
-                {/*<Timbre id="timbre2" />
-                <Vocoder id="vocoder" />*/}
             </header>
         </div>
     );

src/features/timbre/Timbre.js

@@ -123,9 +123,9 @@ export default function Timbre(props) {
             <Mixer id={ids.mixer} />
             <Pitch id={ids.pitch} />
             <Filter id={ids.filter} />
+            <Amp id={ids.amp} />
             <div className="linebreak" style={lineBreak} />
             <EG id={ids.eg1} />
-            <Amp id={ids.amp} />
             <EG id={ids.eg2} />
             <LFO
                 id={ids.lfo1}

src/features/timbre/parameters/Levels.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+import { selectById, parameterUpdated } from './parameterSlice.js';
+import { Slider, SelectList } from '../../helpers/Helpers';
+import styles from './Parameters.module.css';
+
+export default function Levels(props) {
+    const parameters = useSelector((state) => selectById(state, props.id));
+    const dispatch = useDispatch();
+
+    return (
+        <div className={styles.horizontalContainer}>
+            <Slider />
+        </div>
+    );
+}

src/features/timbre/parameters/Parameters.module.css

@@ -26,7 +26,22 @@
     width: 420px;
     height: 214px;
 }
-.horizontalContainer > .container {
+
+.patchesContainer {
+    font-size: small;
+    display: inline-flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    padding: 16pt 8pt 16pt 8pt;
+    margin: 10pt;
+    border: solid 1pt black;
+    width: 680px;
+    height: 214px;
+}
+
+.horizontalContainer > .container,
+.patchesContainer > .container {
     padding: 0 16pt;
     width: 100%;
     margin: 10pt 0;

src/features/timbre/parameters/Patches.js

@@ -6,7 +6,7 @@ import styles from './Parameters.module.css';
 
 const Patch = (props) => {
     return (
-        <div>
+        <div className={styles.container}>
             Source
             <SelectList
                 value={props.patch.source}
@@ -71,7 +71,7 @@ export default function Patches(props) {
     const dispatch = useDispatch();
 
     return (
-        <div className={styles.horizontalContainer}>
+        <div id="patches" className={styles.patchesContainer}>
             <Patch
                 patch={parameters.patch1}
                 onChange={(value) =>

src/features/timbre/parameters/parameterSlice.js

@@ -273,7 +273,30 @@ const parametersSlice = createSlice({
                     modIntensity: 0,
                 },
                 patch2: {
-                    source: 'Amp EG',
+                    source: 'Filter EG',
+                    destination: 'Pitch',
+                    modIntensity: 0,
+                },
+                patch3: {
+                    source: 'LFO 1',
+                    destination: 'Pitch',
+                    modIntensity: 0,
+                },
+                patch4: {
+                    source: 'LFO 2',
+                    destination: 'Pitch',
+                    modIntensity: 0,
+                },
+            },
+            'patches2': {
+                id: 'patches2',
+                patch1: {
+                    source: 'Filter EG',
+                    destination: 'Pitch',
+                    modIntensity: 0,
+                },
+                patch2: {
+                    source: 'Filter EG',
                     destination: 'Pitch',
                     modIntensity: 0,
                 },

src/features/timbre/timbreSlice.js

@@ -49,8 +49,12 @@ const timbreSlice = createSlice({
                 lfo2: 'lfo6',
             },
         },
+        currentTimbre: 'timbre1',
     }),
     reducers: {
+        timbreCurrentUpdate(state, action) {
+            state.currentTimbre = action.payload;
+        },
         timbreAdded: timbreAdapter.addOne,
         timbreUpdated: timbreAdapter.updateOne,
     },
@@ -63,6 +67,10 @@ export const {
     selectIds,
 } = timbreAdapter.getSelectors((state) => state.timbres);
 
-export const { timbreAdded, timbreUpdated } = timbreSlice.actions;
+export const {
+    timbreCurrentUpdate,
+    timbreAdded,
+    timbreUpdated,
+} = timbreSlice.actions;
 
 export default timbreSlice.reducer;

src/features/timbre/timbreSwitcher.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import Timbre from './Timbre';
+import Vocoder from './Vocoder';
+import { useDispatch, useSelector } from 'react-redux';
+import { timbreCurrentUpdate } from './timbreSlice';
+
+export default function TimbreSwitcher(props) {
+    const currentTimbre = useSelector((state) => state.timbres.currentTimbre);
+    const dispatch = useDispatch();
+
+    function handleClick(e, value) {
+        e.preventDefault();
+        dispatch(timbreCurrentUpdate(value));
+    }
+
+    return (
+        <div>
+            <div>
+                <button onClick={(e) => handleClick(e, 'timbre1')}>
+                    set to timbre 1
+                </button>
+                <button onClick={(e) => handleClick(e, 'timbre2')}>
+                    set to timbre 2
+                </button>
+                <button onClick={(e) => handleClick(e, 'vocoder')}>
+                    set to vocoder
+                </button>
+            </div>
+            <div>
+                {currentTimbre === 'timbre1' ? (
+                    <Timbre id="timbre1" />
+                ) : currentTimbre === 'timbre2' ? (
+                    <Timbre id="timbre2" />
+                ) : (
+                    <Vocoder id="vocoder" />
+                )}
+            </div>
+        </div>
+    );
+}