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

'use client'

import { FormEvent, 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';
import { createSong, getAlbum } from '@/app/actions';
import Button from 'react-bootstrap/Button';
import Modal from 'react-bootstrap/Modal';

export default function Page() {
  const [album, setAlbum] = useState<Album>();
  const [show, setShow] = useState(false);
  const handleClose = () => setShow(false);
  const handleShow = () => setShow(true);

  const params = useParams<{ id: string }>();
  const id = params.id;

  useEffect(() => {
    async function fetchAlbum(id: string) {
      const response = await getAlbum(parseInt(id));
      const data = await response.json();
      setAlbum(data);
    }
    fetchAlbum(id);
  }, [id]);

  const handleSubmit = async (event: FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    handleClose();

    const formData = new FormData(event.currentTarget);
    try {
      const response = await createSong(formData);
      const data = response.json();
      console.log(data);
    } catch (error) {
      console.error('Error creating Song:', error);
    }
  }

  if (!album) return <div>Loading...</div>

  return (
    <>
    <div className="container">
      <div className="eight columns">
        <div>
          <em>{album.title}</em> by {album.artist} ({album.genre})
        </div>
        <Button variant="primary" onClick={handleShow}>
          Add Song
        </Button>
        <table className="u-full-width">
          <thead>
            <tr>
              <th>Title</th>
              <th>Duration</th>
            </tr>
          </thead>
          <tbody>
          {album.songs.map((song: Song) => (
            <tr key={song.id}>
              <td>{song.title}</td>
              <td>{TimeUtils.fancyTimeFormat(song.duration)}</td>
            </tr>
          ))}
          </tbody>
        </table>
      </div>
    </div>

    <Modal
      show={show}
      onHide={handleClose}
      backdrop="static"
      keyboard={false}
    >
      <Modal.Header closeButton>
        <Modal.Title>Create Song</Modal.Title>
      </Modal.Header>
      <Modal.Body>
        <div>
          <form onSubmit={handleSubmit}>
            <div className="row">
              <div className="six columns">
                <label htmlFor="album-title">Song Title</label><input type="text" name="title" id="song-title" />
              </div>
              <div className="six columns">
                <label htmlFor="album-artist">Duration (seconds)</label><input type="text" name="artist" id="song-duration" />
              </div>
            </div>
            <Button variant="primary" type="submit">Create</Button>
          </form>
        </div>
      </Modal.Body>
      <Modal.Footer>
        <Button variant="secondary" onClick={handleClose}>
          Close
        </Button>
      </Modal.Footer>
    </Modal>
    </>
  );
}