From 1efdb9fb5c5937345d1998e9f22d70bceefc1e82 Mon Sep 17 00:00:00 2001
From: aarbit <aarbit@gmail.com>
Date: Wed, 12 Feb 2025 22:37:14 -0600
Subject: [PATCH] Saves MIDI channel, bank, and patch in local storage

---
 src/App.tsx | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 7949bd8..41a09e4 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -5,11 +5,14 @@ import PatchSquare from "./PatchSquare.tsx";
 import {WebMidi, Output} from "webmidi";
 
 function App() {
-  const [bankNumber, setBankNumber] = useState(0)
-  const [patchNumber, setPatchNumber] = useState(0)
+  let initBankNumber = parseInt(localStorage.getItem("bank-number")??"0")
+  let initPatchNumber = parseInt(localStorage.getItem("patch-number")??"0")
+  let initMidiChannel = parseInt(localStorage.getItem("midi-channel")??"1")
+  const [bankNumber, setBankNumber] = useState(initBankNumber)
+  const [patchNumber, setPatchNumber] = useState(initPatchNumber)
   const [midiDeviceMap, setMidiDeviceMap] = useState<Map<string, Output>>(new Map())
   const [selectedMidiDevice, setSelectedMidiDevice] = useState<string>()
-  const [selectedMidiChannel, setSelectedMidiChannel] = useState<number>(1)
+  const [selectedMidiChannel, setSelectedMidiChannel] = useState<number>(initMidiChannel)
 
   function connect() {
     WebMidi.enable()
@@ -47,10 +50,12 @@ function App() {
 
   function handleBankSelect(selection: number) {
     setBankNumber(selection)
+    localStorage.setItem("bank-number", selection.toString())
   }
 
   function handlePatchSelect(selection: number) {
     setPatchNumber(selection)
+    localStorage.setItem("patch-number", selection.toString())
   }
 
   function sendPatchNumber() {
@@ -112,6 +117,7 @@ function App() {
 
   function handleMidiChannelSelect(e: ChangeEvent<HTMLSelectElement>) {
     setSelectedMidiChannel(parseInt(e.target.value))
+    localStorage.setItem("midi-channel", e.target.value)
   }
 
   return (
@@ -123,7 +129,9 @@ function App() {
           <select onChange={handleMidiDeviceSelect}>{midiDeviceOptions()}</select>
         </div>
         <div>
-          <select onChange={handleMidiChannelSelect}>{midiChannelOptions()}</select>
+          <select value={selectedMidiChannel} onChange={handleMidiChannelSelect}>
+            {midiChannelOptions()}
+          </select>
         </div>
       </div>
       <div>