From 9397c41c7ab4c28b0ea8e6a511bd9281c8dd81ba Mon Sep 17 00:00:00 2001
From: Phill Pover <phill@anatid.net>
Date: Thu, 3 Apr 2025 10:26:15 +0100
Subject: [PATCH] Making dynamic and adding individual album page

---
 frontend/src/app/album/[id]/page.tsx | 29 ++++++++++++++++++++++++++++
 frontend/src/app/album/page.tsx      | 24 ++++++++++++++++++-----
 2 files changed, 48 insertions(+), 5 deletions(-)
 create mode 100644 frontend/src/app/album/[id]/page.tsx

diff --git a/frontend/src/app/album/[id]/page.tsx b/frontend/src/app/album/[id]/page.tsx
new file mode 100644
index 0000000..8803179
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/frontend/src/app/album/page.tsx b/frontend/src/app/album/page.tsx
index c5b8468..be15206 100644
--- a/frontend/src/app/album/page.tsx
+++ b/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>
-  )
+  );
 }