Actualiser src/features/menu/index.jsx

src/features/menu/index.jsx

@@ -1,6 +1,5 @@
-import React, { useState, useEffect } from 'react';
+import React, { useRef, useState, useEffect } from 'react';
 import { initWebMidi, changeSelectedMidiPort } from '../../utils/midiHelper';
-import { useRef, useState, useEffect } from 'react';
 import { Select } from '../utils/components';
 import { useDispatch, useSelector } from 'react-redux';
 import {
@@ -9,38 +8,37 @@ import {
   parameterFromFile,
   parameterRefreshAll,
   selectEntities,
-} from '../editor/parameters/parameterSlice'; // probably temporarily here
+} from '../editor/parameters/parameterSlice'; 
 import { return_store_from_file, return_file_from_store } from '../io';
 import download from 'downloadjs';
 
 export default function Menu() {
-
-// À insérer juste au début de votre fonction export default function Menu() {
-const [midiDevices, setMidiDevices] = useState([]);
-const [activePortId, setActivePortId] = useState('');
-
-useEffect(() => {
-  // Charge la liste des ports physiques au démarrage
-  initWebMidi().then(devices => {
-    setMidiDevices(devices);
-    if (devices.length > 0) {
-      setActivePortId(devices[0].id);
-    }
-  });
-}, []);
-
-const handleMidiChange = (e) => {
-  const portId = e.target.value;
-  setActivePortId(portId);
-  changeSelectedMidiPort(portId); // Alerte notre helper du changement de câble
-};
-
+  const [midiDevices, setMidiDevices] = useState([]);
+  const [activePortId, setActivePortId] = useState('');
   const [file, setFile] = useState(null);
   const fileRef = useRef(null);
+  
   const state = useSelector((state) => selectEntities(state));
   const activeTab = useSelector((state) => state.parameters.activeTab);
   const dispatch = useDispatch();
   const reader = new FileReader();
+
+  // Chargement initial des périphériques MIDI
+  useEffect(() => {
+    initWebMidi().then(devices => {
+      setMidiDevices(devices);
+      if (devices.length > 0) {
+        setActivePortId(devices[0].id);
+      }
+    });
+  }, []);
+
+  const handleMidiChange = (e) => {
+    const portId = e.target.value;
+    setActivePortId(portId);
+    changeSelectedMidiPort(portId);
+  };
+
   const loadFile = (f) => {
     reader.onloadend = (e) => {
       setFile(new Uint8Array(e.target.result));
@@ -68,7 +66,7 @@ const handleMidiChange = (e) => {
       <div className="menu-patch-container">
         <div className="patch-name">
           <input
-            className="block w-full rounded-md rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
+            className="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
             placeholder="Patch Name"
             type="text"
             maxLength="12"
@@ -84,23 +82,26 @@ const handleMidiChange = (e) => {
           />
         </div>
 
-<div class="flex items-center space-x-2 bg-gray-800 p-2 rounded border border-gray-700">
-  <label for="midi-select" class="text-xs font-bold text-gray-400 uppercase">Port MIDI :</label>
-  <select 
-    id="midi-select"
-    value={activePortId}
-    onChange={handleMidiChange}
-    class="bg-gray-900 text-sm text-white px-2 py-1 rounded border border-gray-600 focus:outline-none focus:border-indigo-500"
-  >
-    {midiDevices.length === 0 ? (
-      <option value="">Aucune interface trouvée</option>
-    ) : (
-      midiDevices.map(device => (
-        <option key={device.id} value={device.id}>{device.name}</option>
-      ))
-    )}
-  </select>
-</div>
+        {/* Sélecteur de Port MIDI Corrigé pour React (className) */}
+        <div className="my-3 flex flex-col space-y-1 bg-gray-100 p-2 rounded border border-gray-300">
+          <label htmlFor="midi-select" className="text-xs font-bold text-gray-500 uppercase">
+            Port de sortie MIDI :
+          </label>
+          <select 
+            id="midi-select"
+            value={activePortId}
+            onChange={handleMidiChange}
+            className="w-full bg-white text-sm text-gray-800 px-2 py-1 rounded border border-gray-400 focus:outline-none focus:border-indigo-500"
+          >
+            {midiDevices.length === 0 ? (
+              <option value="">Aucun câble trouvé</option>
+            ) : (
+              midiDevices.map(device => (
+                <option key={device.id} value={device.id}>{device.name}</option>
+              ))
+            )}
+          </select>
+        </div>
 
         <div className="my-3 flex flex-col items-center space-y-2">
           <button
@@ -204,4 +205,4 @@ const handleMidiChange = (e) => {
       </div>
     </div>
   );
-}
+}