Reworking song page and controls

frontend/src/app/album/[id]/page.tsx

@@ -1,19 +1,28 @@
 'use client'
 
-import { FormEvent, useState, useEffect } from 'react'
+import { FormEvent, MouseEvent, 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 { createSong, deleteSong, getAlbum, updateSong } from '@/app/actions';
 import Button from 'react-bootstrap/Button';
 import Modal from 'react-bootstrap/Modal';
+import { IconButton } from '@mui/material';
+import { AddCircleOutline, Delete, Edit } from '@mui/icons-material';
 
 export default function Page() {
   const [album, setAlbum] = useState<Album>();
   const [show, setShow] = useState(false);
   const handleClose = () => setShow(false);
   const handleShow = () => setShow(true);
+  const [formAlbumId, setFormAlbumId] = useState("");
+  const [formSongId, setFormSongId] = useState("");
+  const [formSongTitle, setFormSongTitle] = useState("");
+  const [formSongDuration, setFormSongDuration] = useState("");
+  const [formSongTrackNumber, setFormSongTrackNumber] = useState("");
+  const [formModalTitle, setFormModalTitle] = useState("Add Song");
+  const [formModalButtonLabel, setFormModalButtonLabel] = useState("Add");
 
   const params = useParams<{ id: string }>();
   const id = params.id;
@@ -36,10 +45,60 @@ export default function Page() {
 
     const formData = new FormData(event.currentTarget);
     try {
-      const data = await createSong(formData);
+      if (!formData.get('id')) {
-      console.log(data);
+        const data = await createSong(formData);
+        console.log(data);
+      } else {
+        const data = await updateSong(formData);
+        console.log(data);
+      }
     } catch (error) {
-      console.error('Error creating Song:', error);
+      console.error("Error creating Song: ", error);
+    }
+  }
+
+  const handleCreate = async () => {
+    setFormModalTitle("Add Song");
+    setFormModalButtonLabel("Add");
+    setFormAlbumId("");
+    setFormSongId("");
+    setFormSongTitle("");
+    setFormSongDuration("");
+    setFormSongTrackNumber("");
+    handleShow();
+  }
+
+  const handleEdit = async (event: MouseEvent<HTMLElement>) => {
+    const id = event.currentTarget.getAttribute('song-id');
+    if (id) {
+      try {
+        const data = await getAlbum(parseInt(id));
+        setFormModalTitle("Edit Song");
+        setFormModalButtonLabel("Save");
+        setFormSongId(data.id)
+        setFormAlbumId(data.albumId);
+        setFormSongTitle(data.title);
+        setFormSongDuration(data.duration);
+        setFormSongTrackNumber(data.trackNumber);
+        handleShow();
+      } catch (error) {
+        console.error(`Error getting song with ID ${id}:`, error);
+      }
+    } else {
+      console.error("Couldn't get ID of clicked element");
+    }
+  }
+
+  const handleDelete = async (event: MouseEvent<HTMLElement>) => {
+    const id = event.currentTarget.getAttribute('song-id');
+    if (id) {
+      try {
+        await deleteSong(parseInt(id));
+      } catch (error) {
+        console.error(`Error deleting song with ID ${id}:`, error);
+      }
+    } else {
+      console.error("Couldn't get ID of clicked element");
     }
   }
 
@@ -52,15 +111,16 @@ export default function Page() {
         <div>
           <em>{album.title}</em> by {album.artist} ({album.genre})
         </div>
-        <Button variant="primary" onClick={handleShow}>
+        <IconButton aria-label="Add Album" size="large" onClick={handleCreate}>
-          Add Song
+          <AddCircleOutline fontSize="inherit" color="success"/>
-        </Button>
+        </IconButton>
         <table className="u-full-width">
           <thead>
             <tr>
               <th>#</th>
               <th>Title</th>
               <th>Duration</th>
+              <th>Controls</th>
             </tr>
           </thead>
           <tbody>
@@ -69,6 +129,14 @@ export default function Page() {
               <td>{song.trackNumber}</td>
               <td>{song.title}</td>
               <td>{TimeUtils.fancyTimeFormat(song.duration)}</td>
+              <td>
+                <IconButton aria-label="Edit Song" size="small" album-id={song.id.toString()} onClick={handleEdit}>
+                  <Edit fontSize="inherit" color="success"/>
+                </IconButton>
+                <IconButton aria-label="Delete Song" size="small" album-id={song.id.toString()} onClick={handleDelete}>
+                  <Delete fontSize="inherit" color="success"/>
+                </IconButton>
+              </td>
             </tr>
           ))}
           </tbody>
@@ -83,25 +151,27 @@ export default function Page() {
       keyboard={false}
     >
       <Modal.Header closeButton>
-        <Modal.Title>Create Song</Modal.Title>
+        <Modal.Title>{formModalTitle}</Modal.Title>
       </Modal.Header>
       <Modal.Body>
         <div>
           <form onSubmit={handleSubmit}>
+            <input name="id" id="song-id" value={formSongId} type="hidden" />
+            <input name="albumId" id="album-id" value={formAlbumId} type="hidden" />
             <div className="row">
               <div className="six columns">
-                <label htmlFor="album-title">Song Title</label><input type="text" name="title" id="song-title" />
+                <label htmlFor="song-title">Song Title</label><input type="text" name="title" id="song-title" defaultValue={formSongTitle} />
               </div>
               <div className="six columns">
-                <label htmlFor="album-artist">Duration (seconds)</label><input type="text" name="artist" id="song-duration" />
+                <label htmlFor="song-duration">Duration (seconds)</label><input type="text" name="duration" id="song-duration" defaultValue={formSongDuration} />
               </div>
             </div>
             <div className="row">
               <div className="six columns">
-                <label htmlFor="album-title">Track Number</label><input type="text" name="trackNumber" id="song-trackNumber" />
+                <label htmlFor="song-trackNumber">Track Number</label><input type="text" name="trackNumber" id="song-trackNumber" defaultValue={formSongTrackNumber} />
               </div>
             </div>
-            <Button variant="primary" type="submit">Create</Button>
+            <Button variant="primary" type="submit">{formModalButtonLabel}</Button>
           </form>
         </div>
       </Modal.Body>