From 9f8c6236b59460f703f8c276dff73d1e86a6082c Mon Sep 17 00:00:00 2001
From: Phill Pover <phill@anatid.net>
Date: Thu, 3 Apr 2025 10:55:32 +0100
Subject: [PATCH] Adding songs output on album page

---
 frontend/src/app/album/[id]/page.tsx | 14 +++++++++++---
 frontend/src/common/album.entity.tsx |  4 +++-
 frontend/src/common/song.entity.tsx  |  8 ++++++++
 3 files changed, 22 insertions(+), 4 deletions(-)
 create mode 100644 frontend/src/common/song.entity.tsx

diff --git a/frontend/src/app/album/[id]/page.tsx b/frontend/src/app/album/[id]/page.tsx
index 8803179..2636eea 100644
--- a/frontend/src/app/album/[id]/page.tsx
+++ b/frontend/src/app/album/[id]/page.tsx
@@ -2,6 +2,7 @@
 
 import { useState, useEffect } from 'react'
 import { Album } from '@/common/album.entity';
+import { Song } from '@/common/song.entity';
 import { useParams } from 'next/navigation'
 
 export default function Page() {
@@ -22,8 +23,15 @@ export default function Page() {
   if (!album) return <div>Loading...</div>
 
   return (
-    <ul>
-        <li key={album.id}>{album.title} by {album.artist} ({album.genre})</li>
-    </ul>
+    <div>
+      <div>
+        <em>{album.title}</em> by {album.artist} ({album.genre})
+      </div>
+      <ul>
+        {album.songs.map((song: Song) => (
+          <li key={song.id}>{song.title} ({song.duration})</li>
+        ))}
+      </ul>
+    </div>
   );
 }
diff --git a/frontend/src/common/album.entity.tsx b/frontend/src/common/album.entity.tsx
index 9925560..0dffb64 100644
--- a/frontend/src/common/album.entity.tsx
+++ b/frontend/src/common/album.entity.tsx
@@ -1,7 +1,9 @@
+import { Song } from '@/common/song.entity';
+
 export interface Album {
     id: number;
     title: string;
     artist: string;
     genre: string;
-    songs: string[];
+    songs: Song[];
 }
diff --git a/frontend/src/common/song.entity.tsx b/frontend/src/common/song.entity.tsx
new file mode 100644
index 0000000..63e7bbe
--- /dev/null
+++ b/frontend/src/common/song.entity.tsx
@@ -0,0 +1,8 @@
+import { Album } from '@/common/album.entity';
+
+export interface Song {
+    id: number;
+    title: string;
+    duration: number;
+    album: Album;
+}