feat: refactor fetchSounds to use useCallback and remove mock data for improved API integration

src/components/sequencer/SoundLibrary.tsx

@@ -19,7 +19,7 @@ import {
   Volume2,
   X 
 } from 'lucide-react'
-import { useEffect, useState } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 import { toast } from 'sonner'
 
 interface DraggableSoundProps {
@@ -114,70 +114,26 @@ export function SoundLibrary() {
     return () => clearTimeout(handler)
   }, [searchQuery])
 
-  const fetchSounds = async () => {
+  const fetchSounds = useCallback(async () => {
     try {
       setLoading(true)
       setError(null)
 
-      // Mock sounds for testing drag functionality
-      const mockSounds: Sound[] = [
-        {
-          id: 1,
-          filename: 'kick.mp3',
-          name: 'Kick Drum',
-          duration: 2000,
-          size: 48000,
-          type: 'SDB',
-          play_count: 5,
-          hash: 'mock-hash-1',
-          is_normalized: false,
-          created_at: new Date().toISOString(),
-          updated_at: new Date().toISOString()
-        },
-        {
-          id: 2,
-          filename: 'snare.wav',
-          name: 'Snare Hit',
-          duration: 1500,
-          size: 36000,
-          type: 'SDB',
-          play_count: 3,
-          hash: 'mock-hash-2',
-          is_normalized: false,
-          created_at: new Date().toISOString(),
-          updated_at: new Date().toISOString()
-        },
-        {
-          id: 3,
-          filename: 'hello.mp3',
-          name: 'Hello World',
-          duration: 3000,
-          size: 72000,
-          type: 'TTS',
-          play_count: 1,
-          hash: 'mock-hash-3',
-          is_normalized: false,
-          created_at: new Date().toISOString(),
-          updated_at: new Date().toISOString()
-        }
-      ]
-
-      // Filter by search query
-      let filteredSounds = mockSounds
-      if (debouncedSearchQuery.trim()) {
-        const query = debouncedSearchQuery.toLowerCase()
-        filteredSounds = mockSounds.filter(sound => 
-          sound.name.toLowerCase().includes(query) ||
-          sound.filename.toLowerCase().includes(query)
-        )
-      }
-
+      // Build API params
+      const params: { types?: string[]; search?: string } = {}
+      
       // Filter by type
       if (soundType !== 'all') {
-        filteredSounds = filteredSounds.filter(sound => sound.type === soundType)
+        params.types = [soundType]
       }
 
-      setSounds(filteredSounds)
+      // Filter by search query
+      if (debouncedSearchQuery.trim()) {
+        params.search = debouncedSearchQuery.trim()
+      }
+
+      const fetchedSounds = await soundsService.getSounds(params)
+      setSounds(fetchedSounds)
     } catch (err) {
       const errorMessage = err instanceof Error ? err.message : 'Failed to fetch sounds'
       setError(errorMessage)
@@ -185,11 +141,11 @@ export function SoundLibrary() {
     } finally {
       setLoading(false)
     }
-  }
+  }, [debouncedSearchQuery, soundType])
 
   useEffect(() => {
     fetchSounds()
-  }, [debouncedSearchQuery, soundType])
+  }, [fetchSounds])
 
   const renderContent = () => {
     if (loading) {