tabris/music-collection
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Adding songs output on album page
All checks were successful
Music Collection CI Workflow / test (./backend) (push) Successful in 22s
Details
Music Collection CI Workflow / test (./frontend) (push) Successful in 19s
Details
Music Collection CI Workflow / build-and-push-images (./backend/Dockerfile, git.anatid.net/tabris/msuic-collection-backend, ./backend) (push) Successful in 50s
Details
Music Collection CI Workflow / build-and-push-images (./frontend/Dockerfile, git.anatid.net/tabris/music-collection-frontend, ./frontend) (push) Successful in 1m12s
Details
Music Collection CI Workflow / deploy (push) Successful in 22s
Details

Browse Source
This commit is contained in:
Phill Pover 2025-04-03 10:55:32 +01:00
parent 627b419a97
commit 9f8c6236b5
3 changed files with 22 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
frontend/src/app/album/[id]/page.tsx
View File

@ -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>
);
}

4
frontend/src/common/album.entity.tsx
View File

@ -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[];
}

8
frontend/src/common/song.entity.tsx Normal file
View File

@ -0,0 +1,8 @@
import { Album } from '@/common/album.entity';
export interface Song {
id: number;
title: string;
duration: number;
album: Album;
}