music-collection/frontend/src/app/album/[id]/page.tsx

'use client'

import { useState, useEffect } from 'react'
import { useParams } from 'next/navigation'
import { Album } from '@/entities/album.entity';
import { Song } from '@/entities/song.entity';
import { TimeUtils } from '@/utils/time.util';

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 (
    <div>
      <div>
        <em>{album.title}</em> by {album.artist} ({album.genre})
      </div>
      <ul>
        {album.songs.map((song: Song) => (
          <li key={song.id}>{song.title} ({TimeUtils.fancyTimeFormat(song.duration)})</li>
        ))}
      </ul>
    </div>
  );
}