Reworking actions

frontend/src/app/actions.tsx

@@ -57,6 +57,20 @@ export async function deleteAlbum(formData: FormData) {
   });
 }
 
+export async function getSongs() {
+  return await fetch(`https://api.anatid.net/song/`, {
+    method: "GET",
+    headers: { "Content-Type": "application/json" },
+  });
+}
+
+export async function getSong(id: number) {
+  return await fetch(`https://api.anatid.net/song/${id}`, {
+    method: "GET",
+    headers: { "Content-Type": "application/json" },
+  });
+}
+
 export async function createSong(formData: FormData) {
   const albumId = formData.get('album-id');
   const title = formData.get('title');

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

@@ -5,7 +5,7 @@ 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 } from '@/app/actions';
+import { createSong, getAlbum } from '@/app/actions';
 import Button from 'react-bootstrap/Button';
 import Modal from 'react-bootstrap/Modal';
 
@@ -20,7 +20,7 @@ export default function Page() {
 
   useEffect(() => {
     async function fetchAlbum(id: string) {
-      const response = await fetch(`https://api.anatid.net/album/${id}`);
+      const response = await getAlbum(parseInt(id));
       const data = await response.json();
       setAlbum(data);
     }

frontend/src/app/album/page.tsx

@@ -52,7 +52,7 @@ export default function Page() {
     const id = event.currentTarget.getAttribute('id');
     if (id) {
       try {
-        const response = await getAlbum(id);
+        const response = await getAlbum(parseInt(id));
         const data = await response.json();
         setFormAlbumTitle(data.title);
         setFormAlbumArtist(data.artist);
@@ -71,8 +71,8 @@ export default function Page() {
   return (
     <>
     <div className="container">
-      <IconButton aria-label="Add Album" size="small" onClick={handleCreate}>
-        <AddCircleOutline fontSize="small" />
+      <IconButton aria-label="Add Album" size="large" onClick={handleCreate}>
+        <AddCircleOutline/>
       </IconButton>
       <table className="u-full-width">
         <thead>
@@ -101,10 +101,10 @@ export default function Page() {
             </td>
             <td>
               <IconButton aria-label="Edit Album" size="small" id={album.id.toString()} onClick={handleEdit}>
-                <Edit fontSize="small" />
+                <Edit/>
               </IconButton>
               <IconButton aria-label="Delete Album" size="small" id={album.id.toString()} onClick={handleEdit}>
-                <Delete fontSize="small" />
+                <Delete/>
               </IconButton>
             </td>
           </tr>