Cache initialization fix

Author: rhyderswen

api/db/schema.rb

@@ -96,8 +96,6 @@
     t.datetime "created_at", null: false
     t.datetime "updated_at", null: false
     t.string "jti", null: false
-    t.string "provider"
-    t.string "uid"
     t.index ["email"], name: "index_users_on_email", unique: true
     t.index ["jti"], name: "index_users_on_jti", unique: true
     t.index ["reset_password_token"], name: "index_users_on_reset_password_token", unique: true

extension/src/entrypoints/popup/App.tsx

@@ -26,7 +26,7 @@ import { MicIcon, MicOffIcon, VideoIcon, VideoOffIcon } from "../../icons";
 import fuzzysort from "fuzzysort";
 
 function App() {
-  const [currentlyPlaying, setCurrentlyPlaying] = useState("");
+  const [currentlyPlaying, setCurrentlyPlaying] = useState(-1);
   const [searchInput, setSearchInput] = useState("");
   const [isMeet, setIsMeet] = useState<boolean>(false);
   const [soundButtons, setSoundButtons] = useState<any[]>([]);
@@ -130,7 +130,7 @@ function App() {
     }
     const success = await playLocalAudio(base64, fxVolume);
     if (success) {
-      setCurrentlyPlaying(id.toString());
+      setCurrentlyPlaying(id);
     }
   }
 
@@ -139,7 +139,7 @@ function App() {
       postMessage(CrossFunctions.STOP_AUDIO);
     }
     stopLocalAudio();
-    setCurrentlyPlaying("");
+    setCurrentlyPlaying(-1);
   }
 
   async function handleMicMute(muteMic: boolean) {
@@ -178,7 +178,7 @@ function App() {
     // TODO: Make it check if the audio is still playing on reopen
     const listener = (msg: any) => {
       if (msg.type === CrossFunctions.AUDIO_ENDED) {
-        setCurrentlyPlaying("");
+        setCurrentlyPlaying(-1);
       }
     };
 
@@ -394,7 +394,7 @@ function App() {
               <button
                 className="iconButton stopButton"
                 onClick={stopSound}
-                disabled={currentlyPlaying === ""}
+                disabled={currentlyPlaying === -1}
               >
                 <BoxIcon className="buttonIcon stopButtonIcon" />
               </button>
@@ -506,7 +506,7 @@ function App() {
               color={button.color}
               emoji={button.emoji}
               onClick={() => playSound(button.id)}
-              isPlaying={currentlyPlaying === button.name}
+              isPlaying={currentlyPlaying === button.id}
             />
           ))}
         </div>

extension/src/utils/api.ts

@@ -1,30 +1,30 @@
 export async function login(email: string, password: string) {
-  const res = await fetch('http://localhost:3001/login', {
-    method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
+  const res = await fetch("http://localhost:3001/login", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
     body: JSON.stringify({ user: { email, password } }),
   });
   const data = await res.json();
-  if (res.ok && res.headers.get('Authorization')) {
-    const jwt = res.headers.get('Authorization').replace('Bearer ', '');
+  if (res.ok && res.headers.get("Authorization")) {
+    const jwt = res.headers.get("Authorization")?.replace("Bearer ", "") ?? "";
     await browser.storage.local.set({ jwt });
     return jwt;
   }
-  throw new Error(data.status?.message || 'Login failed');
+  throw new Error(data.status?.message || "Login failed");
 }
 
 export async function getMySounds() {
-  const { jwt } = await browser.storage.local.get('jwt');
-  if (!jwt) throw new Error('Not logged in');
-  const res = await fetch('http://localhost:3001/my_sounds', {
-    headers: { Authorization: `Bearer ${jwt}` }
+  const { jwt } = await browser.storage.local.get("jwt");
+  if (!jwt) throw new Error("Not logged in");
+  const res = await fetch("http://localhost:3001/my_sounds", {
+    headers: { Authorization: `Bearer ${jwt}` },
   });
-  if (!res.ok) throw new Error('Failed to fetch sounds');
+  if (!res.ok) throw new Error("Failed to fetch sounds");
   return res.json();
 }
 
 export async function getDefaultSounds() {
-  const res = await fetch('http://localhost:3001/sounds')
-  if (!res.ok) throw new Error('Failed to fetch default sounds');
+  const res = await fetch("http://localhost:3001/sounds");
+  if (!res.ok) throw new Error("Failed to fetch default sounds");
   return res.json();
-}
+}

extension/src/utils/db.ts

@@ -1,29 +1,37 @@
-import { openDB } from 'idb';
+import { openDB } from "idb";
 export async function storeSound(id: string, blob: Blob) {
-  const db = await openDB('SoundCacheDB', 1, {
+  const db = await openDB("SoundCacheDB", 1, {
     upgrade(db) {
-      if (!db.objectStoreNames.contains('sounds')) {
-      db.createObjectStore('sounds');
-  }
+      if (!db.objectStoreNames.contains("sounds")) {
+        db.createObjectStore("sounds");
+      }
     },
   });
-  const existing = await db.get('sounds', id);
+  const existing = await db.get("sounds", id);
   if (!existing) {
     console.log("Storing sound in IndexedDB:", id);
-    await db.put('sounds', blob, id);
+    await db.put("sounds", blob, id);
   } else {
     console.log("Sound already cached:", id);
   }
 }
 
 export async function retrieveSound(id: number): Promise<Blob> {
-  const db = await openDB('SoundCacheDB', 1);
-  const blob = await db.get('sounds', id);
+  const db = await openDB("SoundCacheDB", 1);
+  const blob = await db.get("sounds", id);
   return blob;
 }
 
 export async function isSoundCached(id: string): Promise<boolean> {
-  const db = await openDB('SoundCacheDB', 1);
-  const sound = await db.get('sounds', id);
+  console.log("checking if sound is cached");
+  const db = await openDB("SoundCacheDB", 1, {
+    upgrade(db) {
+      console.log("in upgrade");
+      if (!db.objectStoreNames.contains("sounds")) {
+        db.createObjectStore("sounds");
+      }
+    },
+  });
+  const sound = await db.get("sounds", id);
   return !!sound;
 }