First commit

src/components/Downloader.tsx

@@ -0,0 +1,62 @@
+import { useRef, useState } from 'react'
+import * as cheerio from 'cheerio'
+
+import Album from './Album'
+import type { AlbumRow } from 'utils/types'
+import { politeFetch, searchAlbums } from 'utils/search'
+import Loader from './Loader'
+
+export default function Downloader() {
+  const [loading, setLoading] = useState(false)
+  const [results, setResults] = useState<AlbumRow[]>([])
+  const [lastQuery, setLastQuery] = useState<string | null>(null)
+  const lastReqRef = useRef(Date.now())
+
+  async function handleSearch(ev: React.FormEvent<HTMLFormElement>) {
+    ev.preventDefault()
+    setLoading(true)
+
+    const formData = new FormData(ev.target as HTMLFormElement)
+    const query = formData.get('query') as string
+    try {
+      const uniqueAlbums = await searchAlbums(query, lastReqRef)
+      setResults(uniqueAlbums)
+    } catch (error) {
+      // handle error
+    } finally {
+      setLoading(false)
+      setLastQuery(query)
+    }
+  }
+
+  return (
+    <>
+      <form className='search-container' onSubmit={handleSearch}>
+        <input
+          type='text'
+          name='query'
+          className='search-box'
+          placeholder='Search for soundtracks...'
+          min={3}
+          required
+        />
+        <input type='submit' className='search-btn' value='Search' />
+      </form>
+      <Loader show={loading} />
+      {!loading && lastQuery ? (
+        <div className='search-meta'>
+          {results.length > 0 ? (
+            <span className='result-count'>{`Found ${results.length} ${results.length === 1 ? 'album' : 'albums'}`}</span>
+          ) : (
+            <div className='no-results'>No albums found for "{lastQuery}"</div>
+          )}
+        </div>
+      ) : null}
+      <div className='results'>
+        {results.map((r) => (
+          <Album album={r} lastReqRef={lastReqRef} />
+        ))}
+      </div>
+    </>
+  )
+}