diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/components/Search/index.tsx | 27 | ||||
| -rw-r--r-- | src/helpers/fetchSongs.ts | 52 | ||||
| -rw-r--r-- | src/helpers/searchSong.ts | 27 |
3 files changed, 22 insertions, 84 deletions
diff --git a/src/components/Search/index.tsx b/src/components/Search/index.tsx index 7f9d502..4d1ae83 100644 --- a/src/components/Search/index.tsx +++ b/src/components/Search/index.tsx @@ -11,30 +11,18 @@ interface Props { } export function Search({ currentTry, setSelectedSong }: Props) { - const [value, setValue] = React.useState<string>(""); + const [value, setValue] = React.useState(""); const [results, setResults] = React.useState<Song[]>([]); React.useEffect(() => { - let cancelled = false; - - async function runSearch() { - if (!value) { - setResults([]); - return; - } - const songs = await searchSong(value); - - if (!cancelled) { - setResults(songs); - } + if (!value.trim()) { + setResults([]); + return; } - runSearch(); - return () => { - cancelled = true; - }; + + setResults(searchSong(value)); }, [value]); - // clear value on selection React.useEffect(() => { setValue(""); }, [currentTry]); @@ -57,13 +45,14 @@ export function Search({ currentTry, setSelectedSong }: Props) { </Styled.Result> ))} </Styled.ResultsContainer> + <Styled.SearchContainer> <Styled.SearchPadding> <IoSearch size={20} /> <Styled.Input + value={value} onChange={(e) => setValue(e.currentTarget.value)} placeholder="Search" - value={value} /> </Styled.SearchPadding> </Styled.SearchContainer> diff --git a/src/helpers/fetchSongs.ts b/src/helpers/fetchSongs.ts deleted file mode 100644 index f2d91a2..0000000 --- a/src/helpers/fetchSongs.ts +++ /dev/null @@ -1,52 +0,0 @@ -import { Song } from "../types/song"; -let cachedSongs: Song[] | null = null; -function fuzzyMatch(input: string): string { - return input.toLowerCase().replace(/[^0-9a-z ]/gi, ''); -} - - -export async function fetchSongs(useCache=true): Promise<Song[]> { - const API_URL = import.meta.env.VITE_HEARDLE_API_URL || "http://localhost:3001"; - if (useCache && cachedSongs) { - return cachedSongs; - } - - try { - const response = await fetch(`${API_URL}/songs`); - if (!response.ok) { - throw new Error(`HTTP error! status: ${response.status}`); - } - const songsData: Song[] = await response.json(); - cachedSongs = songsData; - return songsData; - } catch (error) { - console.error("Failed to fetch songs:", error); - throw error; - } -} - -export async function searchSongs(searchTerm: string): Promise<Song[]> { - const songsToSearch = await fetchSongs(); - - const processedSearchTerm = fuzzyMatch(searchTerm); - - const matchingSongs = songsToSearch - .filter((song: Song) => { - const songName = fuzzyMatch(song.name); - const songArtist = fuzzyMatch(song.artist); - - if (songArtist.includes(processedSearchTerm) || songName.includes(processedSearchTerm)) { - return true; - } - return false; - }) - .sort((a, b) => - a.artist.toLowerCase().localeCompare(b.artist.toLocaleLowerCase()) - || a.name.toLowerCase().localeCompare(b.name.toLocaleLowerCase()) - ); - - return matchingSongs; -} -export function getCachedSongs(): Song[] | null { - return cachedSongs; -} diff --git a/src/helpers/searchSong.ts b/src/helpers/searchSong.ts index 9ce36cf..62091b6 100644 --- a/src/helpers/searchSong.ts +++ b/src/helpers/searchSong.ts @@ -1,25 +1,26 @@ -import { fetchSongs } from "./fetchSongs"; +import { songs } from "../../server/data/songs"; import { Song } from "../types/song"; -export async function searchSong(searchTerm: string): Promise<Song[]> { - function fuzzyMatch(input: string){ - return input.toLowerCase().replace(/[^0-9a-z ]/gi, ''); - } - searchTerm = fuzzyMatch(searchTerm); +function fuzzyMatch(input: string): string { + return input.toLowerCase().replace(/[^0-9a-z ]/gi, ""); +} - const songs = await fetchSongs(); +export function searchSong(searchTerm: string): Song[] { + const normalizedSearch = fuzzyMatch(searchTerm); return songs .filter((song: Song) => { const songName = fuzzyMatch(song.name); const songArtist = fuzzyMatch(song.artist); - if (songArtist.includes(searchTerm) || songName.includes(searchTerm)) { - return song; - } + return ( + songArtist.includes(normalizedSearch) || + songName.includes(normalizedSearch) + ); }) - .sort((a, b) => - a.artist.toLowerCase().localeCompare(b.artist.toLocaleLowerCase()) - || a.name.toLowerCase().localeCompare(b.name.toLocaleLowerCase()) + .sort( + (a, b) => + a.artist.toLowerCase().localeCompare(b.artist.toLowerCase()) || + a.name.toLowerCase().localeCompare(b.name.toLowerCase()) ); } |
