Rename timbre to editor, remove outdated tabs

src/features/editor/index.js

@@ -0,0 +1,20 @@
+import Timbre from './Timbre';
+import Vocoder from './Vocoder';
+import Effects from './Effects';
+import Arpeggio from './Arpeggio';
+import { useSelector } from 'react-redux';
+
+const Editor = () => {
+  const activeTab = useSelector((state) => state.parameters.activeTab);
+  return (
+    <div>
+      {activeTab === 'Timbre1' ? <Timbre id='timbre1' /> : null}
+      {activeTab === 'Timbre2' ? <Timbre id='timbre2' /> : null}
+      {activeTab === 'Vocoder' ? <Vocoder id='vocoder' /> : null}
+      {activeTab === 'Effects' ? <Effects id='effects' /> : null}
+      {activeTab === 'Arpeggio' ? <Arpeggio id='arpeggio' /> : null}
+    </div>
+  );
+};
+
+export default Editor;

src/features/editor/parameters/parameterSlice.js

@@ -425,7 +425,7 @@ const defaultState = {
     },
   },
   unsaved: false,
-  tabIndex: 0,
+  activeTab: 'Timbre1',
 };
 
 const parametersAdapter = createEntityAdapter({});
@@ -442,8 +442,8 @@ const parametersSlice = createSlice({
     parameterFlipUnsaved(state) {
       state.unsaved = !state.unsaved;
     },
-    parameterUpdateIndex(state, action) {
-      state.tabIndex = action.payload;
+    parameterUpdateTab(state, action) {
+      state.activeTab = action.payload;
     },
     parameterFromFile(state, action) {
       parametersAdapter.upsertMany(state, action.payload);
@@ -464,7 +464,7 @@ export const {
   parameterRefreshAll,
   parameterFlipUnsaved,
   parameterFromFile,
-  parameterUpdateIndex,
+  parameterUpdateTab,
 } = parametersSlice.actions;
 
 export default parametersSlice.reducer;

src/features/menu/index.js

@@ -2,12 +2,12 @@ import { useRef, useState, useEffect } from 'react';
 import { Select } from '../utils/components';
 import { useDispatch, useSelector } from 'react-redux';
 import {
-  parameterUpdateIndex,
+  parameterUpdateTab,
   parameterUpdated,
   parameterFromFile,
   parameterRefreshAll,
   selectEntities,
-} from '../timbre/parameters/parameterSlice'; // probably temporarily here
+} from '../editor/parameters/parameterSlice'; // probably temporarily here
 import { return_store_from_file, return_file_from_store } from '../io';
 
 export default function Menu() {
@@ -106,7 +106,7 @@ export default function Menu() {
           disabled={state.patch.mode === 'Vocoder'}
           className='btn'
           onClick={() => {
-            dispatch(parameterUpdateIndex(0));
+            dispatch(parameterUpdateTab('Timbre1'));
           }}>
           Timbre 1
         </button>
@@ -114,7 +114,7 @@ export default function Menu() {
           disabled={state.patch.mode !== 'Multiple'}
           className='btn'
           onClick={() => {
-            dispatch(parameterUpdateIndex(1));
+            dispatch(parameterUpdateTab('Timbre2'));
           }}>
           Timbre 2
         </button>
@@ -122,21 +122,21 @@ export default function Menu() {
           disabled={state.patch.mode !== 'Vocoder'}
           className='btn'
           onClick={() => {
-            dispatch(parameterUpdateIndex(2));
+            dispatch(parameterUpdateTab('Vocoder'));
           }}>
           Vocoder
         </button>
         <button
           className='btn'
           onClick={() => {
-            dispatch(parameterUpdateIndex(3));
+            dispatch(parameterUpdateTab('Effects'));
           }}>
           Effects
         </button>
         <button
           className='btn'
           onClick={() => {
-            dispatch(parameterUpdateIndex(4));
+            dispatch(parameterUpdateTab('Arpeggio'));
           }}>
           Arpeggio
         </button>

src/features/timbre/timbreSwitcher.js

@@ -1,40 +0,0 @@
-import React from 'react';
-import Timbre from './Timbre';
-import Vocoder from './Vocoder';
-import Effects from './Effects';
-import Arpeggio from './Arpeggio';
-import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
-import { useSelector } from 'react-redux';
-
-export default function TimbreSwitcher() {
-  const index = useSelector((state) => state.parameters.tabIndex);
-  return (
-    <div>
-      <Tabs selectedIndex={index} onSelect={() => {}}>
-        <TabList>
-          <Tab>Timbre 1</Tab>
-          <Tab>Timbre 2</Tab>
-          <Tab>Vocoder</Tab>
-          <Tab>Effects</Tab>
-          <Tab>Arpeggio</Tab>
-        </TabList>
-
-        <TabPanel>
-          <Timbre id='timbre1' />
-        </TabPanel>
-        <TabPanel>
-          <Timbre id='timbre2' />
-        </TabPanel>
-        <TabPanel>
-          <Vocoder id='vocoder' />
-        </TabPanel>
-        <TabPanel>
-          <Effects id='effects' />
-        </TabPanel>
-        <TabPanel>
-          <Arpeggio id='arpeggio' />
-        </TabPanel>
-      </Tabs>
-    </div>
-  );
-}