First commit

src/components/Album.tsx

@@ -0,0 +1,53 @@
+import { useEffect, useState } from 'react'
+import { getTracks } from 'utils/search'
+
+import type { AlbumRow, TrackRow } from 'utils/types'
+
+export default function Album(props: { album: AlbumRow; lastReqRef: React.RefObject<number> }) {
+  const { album, lastReqRef } = props
+  const [open, setOpen] = useState(false)
+
+  return (
+    <div className='album' onClick={() => setOpen((o) => !o)}>
+      <h3>{album.name}</h3>
+      <TrackList url={album.url} open={open} lastReqRef={lastReqRef} />
+    </div>
+  )
+}
+
+function TrackList(props: { url: string; open: boolean; lastReqRef: React.RefObject<number> }) {
+  const { url, open, lastReqRef } = props
+  const [tracks, setTracks] = useState<TrackRow[] | null>(null)
+
+  async function fetchTracks() {
+    const tracks = await getTracks(url, lastReqRef)
+    setTracks(tracks)
+  }
+
+  useEffect(() => {
+    if (!tracks && open) fetchTracks()
+  }, [open])
+
+  if (!open) return null
+
+  return (
+    <div className='trackList'>
+      {tracks
+        ? tracks.map((t, i) => (
+            <div className='track'>
+              <span className='track-name'>
+                <span className='track-number'>{(i + 1).toString().padStart(2, '0').slice(-2)}.</span>
+                <span>{t.name}</span>
+              </span>
+              <span className='format-tag'>FLAC/MP3</span>
+              <TrackDownload url={url} lastReqRef={lastReqRef} />
+            </div>
+          ))
+        : null}
+    </div>
+  )
+}
+
+function TrackDownload(props: { url: string; lastReqRef: React.RefObject<number> }) {
+  return <button className='download-btn'>Download</button>
+}