Persistent settings

package.json

@@ -19,13 +19,13 @@
     "remixicon-react": "^1.0.0",
     "soundfont-player": "^0.12.0",
     "styled-components": "^5.3.5",
-    "tauri-plugin-store-api": "github:tauri-apps/tauri-plugin-store",
+    "tauri-plugin-store-api": "https://github.com/tauri-apps/tauri-plugin-store#dev",
     "typescript": "^4.7.4",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
-    "start": "GENERATE_SOURCEMAP=false cross-env BROWSER=none react-scripts start",
-    "build": "GENERATE_SOURCEMAP=false react-scripts build",
+    "start": "export GENERATE_SOURCEMAP=false; cross-env BROWSER=none react-scripts start",
+    "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
     "tauri": "tauri",

src-tauri/src/main.rs

@@ -58,13 +58,14 @@ fn open_midi_connection(
 
 fn main() {
   let context = tauri::generate_context!();
+
   tauri::Builder::default()
-    .plugin(PluginBuilder::default().build())
     .menu(if cfg!(target_os = "macos") {
       tauri::Menu::os_default(&context.package_info().name)
     } else {
       tauri::Menu::default()
     })
+    .plugin(PluginBuilder::default().build())
     .invoke_handler(tauri::generate_handler![open_midi_connection])
     .manage(MidiState {
       ..Default::default()

src/components/KVProvider/KVProvider.tsx

@@ -40,6 +40,29 @@ const KVProvider: FC<KVContextType> = ({ children }) => {
   const [showKeyboard, setShowKeyboard] = useState(true)
   const [muteSound, setMuteSound] = useState(false)
 
+  /**
+   * Map settings stored on-disk into the KVProvider's state
+   */
+  const loadSettingIntoState = useCallback(
+    (key: PTSettingsKeyType) => {
+      return store.get(key).then((value) => {
+        if (value === null) return
+        switch (key) {
+          case 'piano-sound':
+            setPianoSound(String(value))
+            break
+          case 'show-keyboard':
+            setShowKeyboard(Boolean(value))
+            break
+          case 'mute-sound':
+            setMuteSound(Boolean(value))
+            break
+        }
+      })
+    },
+    [setPianoSound, setShowKeyboard, setMuteSound, store]
+  )
+
   /**
    * Store value on-disk
    */
@@ -64,31 +87,6 @@ const KVProvider: FC<KVContextType> = ({ children }) => {
     saveSetting('mute-sound', muteSound)
   }, [muteSound, saveSetting])
 
-  /**
-   * Map settings stored on-disk into the KVProvider's state
-   */
-  const loadSettingIntoState = useCallback(
-    async (key: PTSettingsKeyType) => {
-      const value: string | boolean | null = await store.get(key)
-      if (!value) {
-        return
-      }
-
-      switch (key) {
-        case 'piano-sound':
-          setPianoSound(String(value))
-          break
-        case 'show-keyboard':
-          setShowKeyboard(Boolean(value))
-          break
-        case 'mute-sound':
-          setMuteSound(Boolean(value))
-          break
-      }
-    },
-    [setPianoSound, setShowKeyboard, setMuteSound, store]
-  )
-
   /**
    * We want to fetch all of the settings stored on-disk and
    * load them into the state when KVProvider is mounted
@@ -97,8 +95,8 @@ const KVProvider: FC<KVContextType> = ({ children }) => {
     store
       .load()
       .then(async () => {
-        for (const key in AVAILABLE_SETTINGS) {
-          await loadSettingIntoState(key as PTSettingsKeyType)
+        for (const setting of AVAILABLE_SETTINGS) {
+          await loadSettingIntoState(setting.key as PTSettingsKeyType)
         }
       })
       .catch((e) => console.error(e))

src/components/Quiz/Quiz.tsx

@@ -69,7 +69,6 @@ const Quiz = () => {
   )
   const firstNote = MidiNumbers.fromNote('c3')
   const lastNote = MidiNumbers.fromNote('c5')
-  const [isSidebarOpen, setIsSidebarOpen] = useState(false)
 
   // Get a random note that's appropriate for the question type
   const getRandomNote = useCallback(

src/components/SettingsSidebar/SettingsSidebar.tsx

@@ -1,6 +1,6 @@
 import styled from 'styled-components'
-import { AVAILABLE_SETTINGS } from '../../utils'
-import { useContext } from 'react'
+import { AVAILABLE_SETTINGS, PTSettingType } from '../../utils'
+import { useCallback, useContext } from 'react'
 import { KVContext } from '../KVProvider'
 import SettingRow from './SettingRow'
 import { SidebarContext } from '../SidebarProvider'
@@ -38,21 +38,24 @@ const SettingsSidebar = () => {
   const { showKeyboard, muteSound } = useContext(KVContext)
   const { setIsOpen } = useContext(SidebarContext)
 
+  const renderSettingRow = useCallback(
+    (s: PTSettingType) => {
+      switch (s.key) {
+        case 'show-keyboard':
+          return <SettingRow key={s.key} setting={s} value={showKeyboard} />
+        case 'mute-sound':
+          return <SettingRow key={s.key} setting={s} value={muteSound} />
+      }
+    },
+    [showKeyboard, muteSound]
+  )
+
   return (
     <CoverScreen>
       <FadeOut onClick={() => setIsOpen?.(false)} />
       <Sidebar>
         <h1>Settings</h1>
-        {AVAILABLE_SETTINGS.map((s) => (
-          <>
-            {s.key === 'show-keyboard' && (
-              <SettingRow key={s.key} setting={s} value={showKeyboard} />
-            )}
-            {s.key === 'mute-sound' && (
-              <SettingRow key={s.key} setting={s} value={muteSound} />
-            )}
-          </>
-        ))}
+        {AVAILABLE_SETTINGS.map((s) => renderSettingRow(s))}
       </Sidebar>
     </CoverScreen>
   )

yarn.lock

@@ -8891,6 +8891,13 @@ tapable@^2.0.0, tapable@^2.1.1, tapable@^2.2.0:
     "@tauri-apps/api" "1.0.1"
     tslib "2.4.0"
 
+"tauri-plugin-store-api@https://github.com/tauri-apps/tauri-plugin-store#dev":
+  version "0.1.0"
+  resolved "https://github.com/tauri-apps/tauri-plugin-store#9e3732e0cf53b72ced6903583660cd7c5f756781"
+  dependencies:
+    "@tauri-apps/api" "1.0.1"
+    tslib "2.4.0"
+
 temp-dir@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/temp-dir/-/temp-dir-2.0.0.tgz#bde92b05bdfeb1516e804c9c00ad45177f31321e"