client: add track retrieval from api to track page

Updates track page to fetch track info from API, and using returned value for
track metadata and audio playback url.

client/src/AudioPlayer.js

@@ -1,9 +1,7 @@
-const audioSource = "https://www.learningcontainer.com/wp-content/uploads/2020/02/Kalimba.mp3";
-
-export default function AudioPlayer() {
+export default function AudioPlayer({ url }) {
   return (
     <div>
-      <audio src={audioSource} controls preload="metadata" />
+      <audio src={url} controls preload="metadata" />
     </div>
   )
 }

client/src/routes/Track.js

@@ -1,14 +1,31 @@
+import { useState, useEffect } from 'react';
 import { Link, useRouteMatch } from 'react-router-dom';
+import axios from 'axios';
 
 import PageWrapper from '../PageWrapper';
 import AudioPlayer from '../AudioPlayer';
 
 function Track() {
   let match = useRouteMatch();
+  const { trackSlug } = match.params;
+  const [track, setTrack] = useState(null)
+
+  useEffect(() => {
+    async function fetchTrack() {
+      try {
+        const res = await axios.get(`/tracks/${trackSlug}`)
+        setTrack(res.data)
+      } catch(err) {
+        console.error("failed fetching track", err)
+      }
+    }
+    fetchTrack();
+  }, [trackSlug])
   return (
     <PageWrapper>
-      <h1>Track {match.params.trackSlug}</h1>
-      <AudioPlayer />
+      <h1>{track ? track.title : `Fetching ${trackSlug}...`}</h1>
+      <div>slug: {trackSlug}</div>
+      <AudioPlayer url={track?.url}/>
 
       {/* TODO: Restrict to only uploader of this track. */}
       <Link to={`${match.url}/feedback`}>View track feedback</Link>