new typeahead

src/features/teams/components/team-form/song-search.tsx

@@ -1,7 +1,6 @@
-import { useState, useRef, useEffect } from "react";
-import { Text, TextInput, Group, Avatar, Loader, Paper, Stack, Box } from "@mantine/core";
+import { Text, Group, Avatar, Box } from "@mantine/core";
 import { SpotifyTrack } from "@/lib/spotify/types";
-import { useDebouncedCallback } from "@mantine/hooks";
+import Typeahead, { TypeaheadOption } from "@/components/typeahead";
 
 interface SongSearchProps {
   onChange: (track: SpotifyTrack) => void;
@@ -9,15 +8,7 @@ interface SongSearchProps {
 }
 
 const SongSearch = ({ onChange, placeholder = "Search for songs..." }: SongSearchProps) => {
-  const [searchQuery, setSearchQuery] = useState("");
-  const [searchResults, setSearchResults] = useState<SpotifyTrack[]>([]);
-  const [isLoading, setIsLoading] = useState(false);
-  const [isOpen, setIsOpen] = useState(false);
-  const [selectedIndex, setSelectedIndex] = useState(-1);
-  const containerRef = useRef<HTMLDivElement>(null);
-  const inputRef = useRef<HTMLInputElement>(null);
-
-  const searchSpotifyTracks = async (query: string): Promise<SpotifyTrack[]> => {
+  const searchSpotifyTracks = async (query: string): Promise<TypeaheadOption<SpotifyTrack>[]> => {
     if (!query.trim()) return [];
 
     try {
@@ -28,155 +19,62 @@ const SongSearch = ({ onChange, placeholder = "Search for songs..." }: SongSearc
       }
 
       const data = await response.json();
-      return data.tracks || [];
+      const tracks = data.tracks || [];
+
+      return tracks.map((track: SpotifyTrack) => ({
+        id: track.id,
+        data: track
+      }));
     } catch (error) {
       console.error('Failed to search tracks:', error);
       return [];
     }
   };
 
-  const debouncedSearch = useDebouncedCallback(async (query: string) => {
-    if (!query.trim()) {
-      setSearchResults([]);
-      setIsOpen(false);
-      return;
-    }
-
-    setIsLoading(true);
-    try {
-      const results = await searchSpotifyTracks(query);
-      setSearchResults(results);
-      setIsOpen(results.length > 0);
-      setSelectedIndex(-1);
-    } catch (error) {
-      console.error('Search failed:', error);
-      setSearchResults([]);
-      setIsOpen(false);
-    } finally {
-      setIsLoading(false);
-    }
-  }, 300);
-
-  const handleSearchChange = (value: string) => {
-    setSearchQuery(value);
-    debouncedSearch(value);
+  const handleSongSelect = (option: TypeaheadOption<SpotifyTrack>) => {
+    onChange(option.data);
   };
 
-  const handleSongSelect = (track: SpotifyTrack) => {
-    onChange(track);
-    setSearchQuery(`${track.name} - ${track.artists.map(a => a.name).join(', ')}`);
-    setIsOpen(false);
-    setSelectedIndex(-1);
+  const formatTrack = (option: TypeaheadOption<SpotifyTrack>) => {
+    const track = option.data;
+    return `${track.name} - ${track.artists.map(a => a.name).join(', ')}`;
   };
 
-  useEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
-        setIsOpen(false);
-      }
-    };
-
-    document.addEventListener('mousedown', handleClickOutside);
-    return () => document.removeEventListener('mousedown', handleClickOutside);
-  }, []);
-
-  const handleKeyDown = (e: React.KeyboardEvent) => {
-    if (!isOpen || searchResults.length === 0) return;
-
-    switch (e.key) {
-      case 'ArrowDown':
-        e.preventDefault();
-        setSelectedIndex(prev => (prev < searchResults.length - 1 ? prev + 1 : prev));
-        break;
-      case 'ArrowUp':
-        e.preventDefault();
-        setSelectedIndex(prev => (prev > 0 ? prev - 1 : prev));
-        break;
-      case 'Enter':
-        e.preventDefault();
-        if (selectedIndex >= 0 && searchResults[selectedIndex]) {
-          handleSongSelect(searchResults[selectedIndex]);
-        }
-        break;
-      case 'Escape':
-        setIsOpen(false);
-        setSelectedIndex(-1);
-        break;
-    }
+  const renderOption = (option: TypeaheadOption<SpotifyTrack>) => {
+    const track = option.data;
+    return (
+      <Box
+        p="sm"
+        style={{
+          borderBottom: '1px solid var(--mantine-color-dimmed)'
+        }}
+      >
+        <Group gap="sm">
+          {track.album.images[2] && (
+            <Avatar src={track.album.images[2].url} size={40} radius="sm" />
+          )}
+          <div>
+            <Text size="sm" fw={500}>
+              {track.name}
+            </Text>
+            <Text size="xs" c="dimmed">
+              {track.artists.map(a => a.name).join(', ')} • {track.album.name}
+            </Text>
+          </div>
+        </Group>
+      </Box>
+    );
   };
 
   return (
-    <Box ref={containerRef} pos="relative" w="100%">
-      <TextInput
-        ref={inputRef}
-        value={searchQuery}
-        onChange={(event) => handleSearchChange(event.currentTarget.value)}
-        onKeyDown={handleKeyDown}
-        onFocus={() => {
-          if (searchResults.length > 0) setIsOpen(true);
-        }}
-        placeholder={placeholder}
-        rightSection={isLoading ? <Loader size="xs" /> : null}
-      />
-
-      {isOpen && (
-        <Paper
-          shadow="md"
-          p={0}
-          style={{
-            position: 'absolute',
-            top: '100%',
-            left: 0,
-            right: 0,
-            zIndex: 9999,
-            maxHeight: '160px',
-            overflowY: 'auto',
-            WebkitOverflowScrolling: 'touch',
-            touchAction: 'pan-y'
-          }}
-          onTouchMove={(e) => e.stopPropagation()}
-        >
-          {searchResults.length > 0 ? (
-            <Stack gap={0}>
-              {searchResults.map((track, index) => (
-                <Box
-                  key={track.id}
-                  p="sm"
-                  style={{
-                    cursor: 'pointer',
-                    backgroundColor: selectedIndex === index ? 'var(--mantine-color-gray-1)' : 'transparent',
-                    borderBottom: index < searchResults.length - 1 ? '1px solid var(--mantine-color-gray-3)' : 'none'
-                  }}
-                  onClick={() => handleSongSelect(track)}
-                  onMouseEnter={() => setSelectedIndex(index)}
-                >
-                  <Group gap="sm">
-                    {track.album.images[2] && (
-                      <Avatar src={track.album.images[2].url} size={40} radius="sm" />
-                    )}
-                    <div>
-                      <Text size="sm" fw={500}>
-                        {track.name}
-                      </Text>
-                      <Text size="xs" c="dimmed">
-                        {track.artists.map(a => a.name).join(', ')} • {track.album.name}
-                      </Text>
-                    </div>
-                  </Group>
-                </Box>
-              ))}
-            </Stack>
-          ) : (
-            <Box p="md">
-              <Text size="sm" c="dimmed" ta="center">
-                {searchQuery.trim() ? 'No songs found' : 'Start typing to search...'}
-              </Text>
-            </Box>
-          )}
-        </Paper>
-      )}
-    </Box>
-  );
+    <Typeahead
+      onSelect={handleSongSelect}
+      searchFn={searchSpotifyTracks}
+      renderOption={renderOption}
+      format={formatTrack}
+      placeholder={placeholder}
+    />
+  )
 };
 
 export default SongSearch;