Making dynamic and adding individual album page

frontend/src/app/album/[id]/page.tsx

@@ -0,0 +1,29 @@
+'use client'
+
+import { useState, useEffect } from 'react'
+import { Album } from '@/common/album.entity';
+import { useParams } from 'next/navigation'
+
+export default function Page() {
+  const [album, setAlbum] = useState<Album>();
+
+  const params = useParams<{ id: string }>();
+  const id = params.id;
+
+  useEffect(() => {
+    async function fetchAlbum(id: string) {
+      const response = await fetch(`https://api.anatid.net/album/${id}`);
+      const data = await response.json();
+      setAlbum(data);
+    }
+    fetchAlbum(id);
+  }, [id]);
+
+  if (!album) return <div>Loading...</div>
+
+  return (
+    <ul>
+        <li key={album.id}>{album.title} by {album.artist} ({album.genre})</li>
+    </ul>
+  );
+}

frontend/src/app/album/page.tsx

@@ -1,13 +1,27 @@
+'use client'
+
+import { useState, useEffect } from 'react'
 import { Album } from '@/common/album.entity';
 
-export default async function Page() {
-  const data = await fetch('https://api.anatid.net/album')
-  const albums = await data.json()
+export default function Page() {
+  const [albums, setAlbums] = useState<Album[]>([]);
+
+  useEffect(() => {
+    async function fetchAlbums() {
+      const response = await fetch('https://api.anatid.net/album');
+      const data = await response.json();
+      setAlbums(data);
+    }
+    fetchAlbums()
+  }, []);
+
+  if (!albums) return <div>Loading...</div>
+
   return (
     <ul>
       {albums.map((album: Album) => (
-        <li key={album.id}>{album.title} by {album.artist} ({album.genre})</li>
+        <li key={album.id}><a href="">{album.title}</a> by {album.artist} ({album.genre})</li>
       ))}
     </ul>
-  )
+  );
 }