feat: implement real-time updates for credits and sound play counts using custom events

src/components/sidebar/NavPlan.tsx

@@ -1,6 +1,5 @@
 import type { User } from "@/services/auth"
 import { SidebarMenu, SidebarMenuButton, SidebarMenuItem } from "../ui/sidebar"
-import { useSocket } from "@/contexts/SocketContext"
 import NumberFlow from '@number-flow/react'
 import { useEffect, useState } from "react"
 
@@ -10,7 +9,6 @@ interface NavPlanProps {
 
 export function NavPlan({ user }: NavPlanProps) {
   const [credits, setCredits] = useState(0)
-  const { socket, isConnected } = useSocket()
   
   useEffect(() => {
     setCredits(user.credits)
@@ -18,19 +16,19 @@ export function NavPlan({ user }: NavPlanProps) {
 
   // Listen for real-time credits updates
   useEffect(() => {
-    if (!socket || !isConnected) return
+    const handleCreditsChanged = (/*data: { credits: number }*/ event: CustomEvent) => {
-
+      const { credits } = event.detail
-    const handleCreditsChanged = (data: { credits: number }) => {
+      setCredits(credits)
-      setCredits(data.credits)
     }
 
-    socket.on("credits_changed", handleCreditsChanged)
+    // Listen for the custom event
+    window.addEventListener('credits_changed', handleCreditsChanged as EventListener);
 
-    // Cleanup listener on unmount
+    // Cleanup
     return () => {
-      socket.off("credits_changed", handleCreditsChanged)
+      window.removeEventListener('credits_changed', handleCreditsChanged as EventListener);
-    }
+    };
-  }, [socket, isConnected])
+  }, [])
 
   return (
     <SidebarMenu>

src/contexts/SocketContext.tsx

@@ -68,13 +68,22 @@ export const SocketProvider: React.FC<SocketProviderProps> = ({ children }) => {
       setIsConnected(false);
     });
 
-    // Global socket event listeners for toasts
+    // Global events
+    newSocket.on("error", (data) => {
+      toast.error(data.message || "An error occurred");
+    });
+
     newSocket.on("credits_required", (data) => {
       toast.error(`Insufficient credits. Need ${data.credits_needed} credits.`);
     });
 
-    newSocket.on("error", (data) => {
+    // Page or component events
-      toast.error(data.message || "An error occurred");
+    newSocket.on("credits_changed", (data) => {
+      window.dispatchEvent(new CustomEvent('credits_changed', { detail: data }));
+    });
+
+    newSocket.on("sound_play_count_changed", (data) => {
+      window.dispatchEvent(new CustomEvent('sound_play_count_changed', { detail: data }));
     });
 
     setSocket(newSocket);

src/pages/AdminSoundsPage.tsx

@@ -53,8 +53,7 @@ export function AdminSoundsPage() {
 
   return (
     <div className="space-y-6">
-      <div className="flex items-center justify-between">
+      <div className="flex items-center">
-        <h1 className="text-2xl font-bold">Sound Management</h1>
         <div className="flex gap-2">
           <Button 
             onClick={handleScanSounds} 

src/pages/DashboardPage.tsx

@@ -6,6 +6,6 @@ export function DashboardPage() {
   if (!user) return null
 
   return (
-    <div>Dashboard</div>
+    <div></div>
   )
 }

src/pages/SoundboardPage.tsx

@@ -115,6 +115,30 @@ export function SoundboardPage() {
     fetchSounds()
   }, [])
 
+  // Listen for sound_play_count_changed events from socket
+  useEffect(() => {
+    const handleSoundPlayCountChanged = (event: CustomEvent) => {
+      const { sound_id, play_count } = event.detail;
+      
+      // Update the sound in the local state
+      setSounds(prevSounds => 
+        prevSounds.map(sound => 
+          sound.id === sound_id 
+            ? { ...sound, play_count }
+            : sound
+        )
+      );
+    };
+
+    // Listen for the custom event
+    window.addEventListener('sound_play_count_changed', handleSoundPlayCountChanged as EventListener);
+
+    // Cleanup
+    return () => {
+      window.removeEventListener('sound_play_count_changed', handleSoundPlayCountChanged as EventListener);
+    };
+  }, []);
+
   const { theme } = useTheme()
 
   useEffect(() => {
@@ -203,8 +227,7 @@ export function SoundboardPage() {
 
   return (
     <div className="space-y-6">
-      <div className="flex items-center justify-between">
+      <div className="flex items-center">
-        <h1 className="text-2xl font-bold">Soundboard</h1>
         <div className="flex gap-2">
           <Button
             onClick={() => setAddUrlDialogOpen(true)}