move songs.ts to be entirely server side

1 files changed, 16 insertions, 4 deletions

diff --git a/src/components/Search/index.tsx b/src/components/Search/index.tsx
index c999f97..7f9d502 100644
--- a/src/components/Search/index.tsx
+++ b/src/components/Search/index.tsx
@@ -15,11 +15,23 @@ export function Search({ currentTry, setSelectedSong }: Props) {
   const [results, setResults] = React.useState<Song[]>([]);
 
   React.useEffect(() => {
-    if (value) {
-      setResults(searchSong(value));
-    } else if (value === "") {
-      setResults([]);
+    let cancelled = false;
+
+    async function runSearch() {
+      if (!value) {
+        setResults([]);
+        return;
+      }
+      const songs = await searchSong(value);
+
+      if (!cancelled) {
+        setResults(songs);
+      }
     }
+    runSearch();
+    return () => {
+      cancelled = true;
+    };
   }, [value]);
 
   // clear value on selection