adds track loading example

frontend/next.config.js

@@ -0,0 +1,7 @@
+const nextConfig = {
+  images: {
+    remotePatterns: [new URL("https://i.scdn.co/**")],
+  },
+};
+
+export default nextConfig;

frontend/src/app/voting/page.tsx

@@ -4,6 +4,7 @@ import { Nunito } from "next/font/google";
 import users from "muzak/data/users.json";
 import Image from "next/image";
 import Link from "next/link";
+import { api, Track } from "muzak/data/fetcher";
 
 const nunito = Nunito({
   weight: "900",
@@ -16,15 +17,25 @@ export default function Lobby() {
   const [yesVoteList, setYesVoteList] = useState([]);
   const [noVoteList, setNoVoteList] = useState([]);
 
-  const [currentSong, setCurrentSong] = useState({
-    artist: "The Meowls",
-    title: "The Owls Are Not What They Seem",
-  });
+  const [currentSong, setCurrentSong] = useState<Track>();
+  const [songLoading, setSongLoading] = useState(false);
 
   useEffect(() => {
     populateUserList();
   }, [partySize]);
 
+  async function getTrack() {
+    setSongLoading(true);
+    const { data: track } = await api.tracks.vote({});
+    setCurrentSong(track);
+    console.log("I got a track!", track.name);
+    setSongLoading(false);
+  }
+
+  useEffect(() => {
+    if (!currentSong && !songLoading) getTrack();
+  }, []);
+
   function populateUserList() {
     const mappedUsers = users.slice(0, partySize).map((user) => ({
       id: user.id,
@@ -50,7 +61,7 @@ export default function Lobby() {
         <div className="flex flex-1 items-center justify-center">
           <div className="flex h-[170px] w-[170px] items-center justify-center rounded-full border-2 bg-orange-400">
             <div className="text-5xl text-white drop-shadow-sm drop-shadow-black">
-              30
+              <button onClick={getTrack}>30</button>
             </div>
           </div>
         </div>
@@ -86,10 +97,25 @@ export default function Lobby() {
               </div>
             ))}{" "}
           </div>
-
-          <div className="rounded-md bg-black p-2">
-            <Image src="/meowl.png" alt="meowl" width={500} height={500} />
-          </div>
+          {!songLoading && currentSong ? (
+            <div className="rounded-md bg-black p-2">
+              <Image
+                src={currentSong.album_cover}
+                alt={currentSong.name}
+                width={500}
+                height={500}
+              />
+            </div>
+          ) : (
+            <div className="rounded-md bg-black p-2">
+              <Image
+                src="/meowl.png"
+                alt="Loading.."
+                width={500}
+                height={500}
+              />
+            </div>
+          )}
           <div className="grid min-w-52 grid-flow-row grid-cols-3 items-start justify-start gap-4 rounded bg-blue-950/80 p-4">
             {userList.map((user) => (
               <div
@@ -104,18 +130,20 @@ export default function Lobby() {
             ))}{" "}
           </div>
         </div>
-        <div className="flex flex-col items-center justify-start">
-          <h2
-            className={`${nunito.className} text-outline text-[42px] tracking-tighter text-yellow-500`}
-          >
-            {currentSong.artist}
-          </h2>
-          <h2
-            className={`${nunito.className} text-outline text-[42px] tracking-tighter text-yellow-500`}
-          >
-            {currentSong.title}
-          </h2>
-        </div>
+        {!songLoading && currentSong && (
+          <div className="flex flex-col items-center justify-start">
+            <h2
+              className={`${nunito.className} text-outline text-[42px] tracking-tighter text-yellow-500`}
+            >
+              {currentSong.artist}
+            </h2>
+            <h2
+              className={`${nunito.className} text-outline text-[42px] tracking-tighter text-yellow-500`}
+            >
+              {currentSong.name}
+            </h2>
+          </div>
+        )}
       </div>
 
       <div className="flex flex-row items-start justify-start gap-10 rounded bg-blue-950/80 p-4">

frontend/src/data/fetcher.ts

@@ -49,6 +49,7 @@ export const api = {
   tracks: {
     list: fetcher.path("/api/track/").method("get").create(),
     detail: fetcher.path("/api/track/{id}").method("get").create(),
+    vote: fetcher.path("/api/track/vote").method("get").create(),
   },
   artists: {
     list: fetcher.path("/api/artist").method("get").create(),