From 27d2c1760cdfdea2eb2899c8eebdc8224aa19082 Mon Sep 17 00:00:00 2001
From: James Gentes <jgentes@gmail.com>
Date: Sun, 26 May 2024 16:54:29 -0700
Subject: [PATCH] clear appstate and fix for async state loader

---
 app/api/models/appState.client.ts        | 68 +++++++++++++-----------
 app/components/layout/SettingsButton.tsx | 19 ++++---
 app/components/tracks/TrackTable.tsx     |  1 -
 3 files changed, 47 insertions(+), 41 deletions(-)

diff --git a/app/api/models/appState.client.ts b/app/api/models/appState.client.ts
index ffe2a71..aae2fe7 100644
--- a/app/api/models/appState.client.ts
+++ b/app/api/models/appState.client.ts
@@ -32,42 +32,50 @@ const uiState = proxy<UiState>({
   modal: { openState: false },
 })
 
-// Pull latest persistent state from Dexie and populate Valtio store
-let seeded = false
-const initialMixState = (await db.appState.get('mixState')) as MixState
-const mixState = proxy<MixState>(initialMixState)
+let mixState = proxy<MixState>()
+let userState = proxy<UserState>()
 
-watch(async get => {
-  get(mixState)
-  //@ts-ignore dexie typescript failure
-  if (seeded) db.appState.put(snapshot(mixState), 'mixState')
-})
+const clearAppState = async () => await db.appState.clear()
 
-let initialUserState = (await db.appState.get('userState')) as UserState
-// ensure that we ref the stemsDirHandle
-if (initialUserState?.stemsDirHandle)
-  initialUserState = {
-    ...initialUserState,
-    stemsDirHandle: ref(initialUserState.stemsDirHandle),
+const initAudioState = async () => {
+  // Pull latest persistent state from Dexie and populate Valtio store
+  let seeded = false
+  const initialMixState = ((await db.appState.get('mixState')) as MixState) || {
+    tracks: [],
+    trackState: {},
   }
-const userState = proxy<UserState>(initialUserState)
+  mixState = proxy(initialMixState)
 
-watch(async get => {
-  get(userState)
-  //@ts-ignore dexie typescript failure
-  if (seeded) db.appState.put(snapshot(userState), 'userState')
-})
+  watch(async get => {
+    get(mixState)
+    //@ts-ignore dexie typescript failure
+    if (seeded) db.appState.put(snapshot(mixState), 'mixState')
+  })
 
-seeded = true
+  let initialUserState = (await db.appState.get('userState')) as UserState
+  // ensure that we ref the stemsDirHandle
+  if (initialUserState?.stemsDirHandle)
+    initialUserState = {
+      ...initialUserState,
+      stemsDirHandle: ref(initialUserState.stemsDirHandle),
+    }
+  userState = proxy(initialUserState)
 
-if (Env === 'development') {
-  devtools(uiState, { name: 'uiState', enable: true })
-  devtools(mixState, { name: 'mixState', enable: true })
-  devtools(userState, { name: 'userState', enable: true })
-  // audioState waveforms cause memory issues in devtools
-}
+  watch(async get => {
+    get(userState)
+    //@ts-ignore dexie typescript failure
+    if (seeded) db.appState.put(snapshot(userState), 'userState')
+  })
+
+  seeded = true
+
+  if (Env === 'development') {
+    devtools(uiState, { name: 'uiState', enable: true })
+    devtools(mixState, { name: 'mixState', enable: true })
+    devtools(userState, { name: 'userState', enable: true })
+    // audioState waveforms cause memory issues in devtools
+  }
 
-const initAudioState = async () => {
   // Start audioState init (if we have a mix in localstorage (valtio))
   const tracks = mixState.tracks
 
@@ -80,4 +88,4 @@ const initAudioState = async () => {
 
 initAudioState()
 
-export { uiState, audioState, mixState, userState }
+export { clearAppState, uiState, audioState, mixState, userState }
diff --git a/app/components/layout/SettingsButton.tsx b/app/components/layout/SettingsButton.tsx
index 3dcc83b..99b4f33 100644
--- a/app/components/layout/SettingsButton.tsx
+++ b/app/components/layout/SettingsButton.tsx
@@ -7,19 +7,18 @@ import {
   Tooltip
 } from '@nextui-org/react'
 import type { Key } from 'react'
-import { uiState } from '~/api/models/appState.client'
+import { clearAppState, uiState } from '~/api/models/appState.client'
 import { SettingsIcon } from '~/components/icons'
 
 const buttonAction = (key: Key) => {
-  const clearLocalStorage = () => {
-    localStorage.removeItem('mixState')
-    localStorage.removeItem('userState')
+  const clearLocalStorage = async () => {
+    await clearAppState()
     // refresh the page
     window.location.reload()
   }
 
   switch (key) {
-    case 'localstorage':
+    case 'appstate':
       clearLocalStorage()
       break
     case 'indexeddb':
@@ -27,7 +26,7 @@ const buttonAction = (key: Key) => {
         openState: true,
         headerText: 'Are you sure?',
         bodyText:
-          'Clearing IndexedDB will remove all tracks, resetting Mixpoint to a fresh state.',
+          'Clearing IndexedDB will remove all tracks, resetting Mixpoint to a fresh state. No files will be deleted from your computer.',
         confirmColor: 'danger',
         confirmText: 'Remove everything',
         onConfirm: async () => {
@@ -69,16 +68,16 @@ const SettingsButton = ({ className }: { className?: string }) => (
       aria-label="Settings dropdown"
       onAction={buttonAction}
     >
-      <DropdownItem key="localstorage" description="Fix issues with mix state">
-        Clear LocalStorage
+      <DropdownItem key="appstate" description="Fix issues with mix state">
+        Clear Mixpoint State
       </DropdownItem>
       <DropdownItem
         key="indexeddb"
         className="text-danger"
         color="danger"
-        description="Reset Mixpoint to starting state"
+        description="Remove Mixpoint data from IndexedDB"
       >
-        Clear IndexedDB
+        Clear Mixpoint Data
       </DropdownItem>
     </DropdownMenu>
   </Dropdown>
diff --git a/app/components/tracks/TrackTable.tsx b/app/components/tracks/TrackTable.tsx
index 4f4f191..620d6c6 100644
--- a/app/components/tracks/TrackTable.tsx
+++ b/app/components/tracks/TrackTable.tsx
@@ -53,7 +53,6 @@ const TrackTable = () => {
   const [dragOver, setDragOver] = useState(false)
 
   // Retrieve sort state from database
-
   const {
     sortDirection = 'descending',
     sortColumn = 'lastModified',