Implement individual song download

src/components/Album.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react'
-import { getTracks } from 'utils/search'
+import { getDownloadUrl, getTracks } from 'utils/search'
 
 import type { AlbumRow, TrackRow } from 'utils/types'
 import Loader from './Loader'
@@ -49,13 +49,13 @@ function TrackList(props: { url: string; open: boolean; lastReqRef: React.RefObj
       {tracks && open ? (
         <div className='track-list'>
           {tracks.map((t, i) => (
-            <div className='track'>
+            <div className='track' key={i}>
               <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} />
+              <TrackDownload url={t.url} lastReqRef={lastReqRef} />
             </div>
           ))}
         </div>
@@ -65,5 +65,27 @@ function TrackList(props: { url: string; open: boolean; lastReqRef: React.RefObj
 }
 
 function TrackDownload(props: { url: string; lastReqRef: React.RefObject<number> }) {
-  return <button className='download-btn'>Download</button>
+  const { url, lastReqRef } = props
+  const [downloadUrl, setDownloadUrl] = useState<string>()
+  const [loading, setLoading] = useState(false)
+
+  async function fetchUrl() {
+    try {
+      setLoading(true)
+      const dlUrl = await getDownloadUrl(url, lastReqRef)
+      setDownloadUrl(dlUrl)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return downloadUrl ? (
+    <a className='download-btn' href={downloadUrl} target='_blank' rel='noopener noreferrer' download>
+      Download
+    </a>
+  ) : (
+    <button className='download-btn' disabled={loading} onClick={fetchUrl}>
+      {loading ? <Loader show /> : 'Download'}
+    </button>
+  )
 }