From 5b6a6004da5295349a561cd53b26aba578afae27 Mon Sep 17 00:00:00 2001
From: Phill Pover <phill@anatid.net>
Date: Mon, 7 Apr 2025 02:16:11 +0100
Subject: [PATCH] Adding a isblank check

---
 frontend/src/app/album/[id]/page.tsx | 68 ++++++++++++++--------------
 frontend/src/app/album/page.tsx      |  2 +-
 frontend/src/utils/string.util.tsx   |  2 +-
 3 files changed, 35 insertions(+), 37 deletions(-)

diff --git a/frontend/src/app/album/[id]/page.tsx b/frontend/src/app/album/[id]/page.tsx
index 028f935..585f7d0 100644
--- a/frontend/src/app/album/[id]/page.tsx
+++ b/frontend/src/app/album/[id]/page.tsx
@@ -46,7 +46,7 @@ export default function Page() {
 
     const formData = new FormData(event.currentTarget);
     try {
-      if (StringUtils.isBlank(formData.get('id'))) {
+      if (StringUtils.isBlank(formData.get('id') as string)) {
         const data = await createSong(formData);
         console.log(data);
       } else {
@@ -108,41 +108,39 @@ export default function Page() {
   return (
     <>
     <div className="container">
-      <div className="eight columns">
-        <div>
-          <em>{album.title}</em> by {album.artist} ({album.genre})
-        </div>
-        <IconButton aria-label="Add Album" size="large" onClick={handleCreate}>
-          <AddCircleOutline fontSize="inherit" color="success"/>
-        </IconButton>
-        <table className="u-full-width">
-          <thead>
-            <tr>
-              <th>#</th>
-              <th>Title</th>
-              <th>Duration</th>
-              <th>Controls</th>
-            </tr>
-          </thead>
-          <tbody>
-          {album.songs.map((song: Song) => (
-            <tr key={song.id}>
-              <td>{song.trackNumber}</td>
-              <td>{song.title}</td>
-              <td>{TimeUtils.fancyTimeFormat(song.duration)}</td>
-              <td>
-                <IconButton aria-label="Edit Song" size="small" song-id={song.id.toString()} onClick={handleEdit}>
-                  <Edit fontSize="inherit" color="success"/>
-                </IconButton>
-                <IconButton aria-label="Delete Song" size="small" song-id={song.id.toString()} onClick={handleDelete}>
-                  <Delete fontSize="inherit" color="success"/>
-                </IconButton>
-              </td>
-            </tr>
-          ))}
-          </tbody>
-        </table>
+      <div>
+        <em>{album.title}</em> by {album.artist} ({album.genre})
       </div>
+      <IconButton aria-label="Add Album" size="large" onClick={handleCreate}>
+        <AddCircleOutline fontSize="inherit" color="success"/>
+      </IconButton>
+      <table className="u-full-width">
+        <thead>
+          <tr>
+            <th>#</th>
+            <th>Title</th>
+            <th>Duration</th>
+            <th>Controls</th>
+          </tr>
+        </thead>
+        <tbody>
+        {album.songs.map((song: Song) => (
+          <tr key={song.id}>
+            <td>{song.trackNumber}</td>
+            <td>{song.title}</td>
+            <td>{TimeUtils.fancyTimeFormat(song.duration)}</td>
+            <td>
+              <IconButton aria-label="Edit Song" size="small" song-id={song.id.toString()} onClick={handleEdit}>
+                <Edit fontSize="inherit" color="success"/>
+              </IconButton>
+              <IconButton aria-label="Delete Song" size="small" song-id={song.id.toString()} onClick={handleDelete}>
+                <Delete fontSize="inherit" color="success"/>
+              </IconButton>
+            </td>
+          </tr>
+        ))}
+        </tbody>
+      </table>
     </div>
 
     <Modal
diff --git a/frontend/src/app/album/page.tsx b/frontend/src/app/album/page.tsx
index de2cd47..7dabae0 100644
--- a/frontend/src/app/album/page.tsx
+++ b/frontend/src/app/album/page.tsx
@@ -40,7 +40,7 @@ export default function Page() {
 
     const formData = new FormData(event.currentTarget);
     try {
-      if (StringUtils.isBlank(formData.get('id'))) {
+      if (StringUtils.isBlank(formData.get('id') as string)) {
         const data = await createAlbum(formData);
         console.log(data);
       } else {
diff --git a/frontend/src/utils/string.util.tsx b/frontend/src/utils/string.util.tsx
index c82cd75..4136577 100644
--- a/frontend/src/utils/string.util.tsx
+++ b/frontend/src/utils/string.util.tsx
@@ -1,5 +1,5 @@
 export class StringUtils {
-  static isBlank(str) {
+  static isBlank(str: string) {
       return (!str || /^\s*$/.test(str));
   }
 }