From 4aade8adc8da38585e2b51820a8c873f2157b80b Mon Sep 17 00:00:00 2001
From: Phill Pover <phill@anatid.net>
Date: Sun, 6 Apr 2025 20:42:16 +0100
Subject: [PATCH] Fixing handlers

---
 frontend/src/app/actions.tsx    |  9 ++++++++-
 frontend/src/app/album/page.tsx | 16 ++++++++--------
 2 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/frontend/src/app/actions.tsx b/frontend/src/app/actions.tsx
index 57eea65..88b51df 100644
--- a/frontend/src/app/actions.tsx
+++ b/frontend/src/app/actions.tsx
@@ -1,6 +1,13 @@
 'use server'
 
-export async function getAlbum(id: string) {
+export async function getAlbums() {
+  return await fetch(`https://api.anatid.net/album/`, {
+    method: "GET",
+    headers: { "Content-Type": "application/json" },
+  });
+}
+
+export async function getAlbum(id: number) {
   return await fetch(`https://api.anatid.net/album/${id}`, {
     method: "GET",
     headers: { "Content-Type": "application/json" },
diff --git a/frontend/src/app/album/page.tsx b/frontend/src/app/album/page.tsx
index 577f26a..5156f0e 100644
--- a/frontend/src/app/album/page.tsx
+++ b/frontend/src/app/album/page.tsx
@@ -3,11 +3,11 @@
 import { FormEvent, MouseEvent, useState, useEffect } from 'react';
 import Link from 'next/link';
 import { Album } from '@/entities/album.entity';
-import { createAlbum, getAlbum } from '@/app/actions';
+import { createAlbum, getAlbum, getAlbums } from '@/app/actions';
 import Button from 'react-bootstrap/Button';
 import Modal from 'react-bootstrap/Modal';
 import { IconButton } from '@mui/material';
-import { Delete, Edit } from '@mui/icons-material';
+import { AddCircleOutline, Delete, Edit } from '@mui/icons-material';
 
 export default function Page() {
   const [albums, setAlbums] = useState<Album[]>([]);
@@ -20,7 +20,7 @@ export default function Page() {
 
   useEffect(() => {
     async function fetchAlbums() {
-      const response = await fetch('https://api.anatid.net/album');
+      const response = await getAlbums();
       const data = await response.json();
       setAlbums(data);
     }
@@ -71,9 +71,9 @@ export default function Page() {
   return (
     <>
     <div className="container">
-      <Button variant="primary" onClick={handleCreate}>
-        Add Album
-      </Button>
+      <IconButton aria-label="Add Album" size="small" onClick={handleCreate}>
+        <AddCircleOutline fontSize="small" />
+      </IconButton>
       <table className="u-full-width">
         <thead>
           <tr>
@@ -100,10 +100,10 @@ export default function Page() {
               {album.genre}
             </td>
             <td>
-              <IconButton aria-label="edit" size="small" id={album.id.toString()} onClick={handleEdit}>
+              <IconButton aria-label="Edit Album" size="small" id={album.id.toString()} onClick={handleEdit}>
                 <Edit fontSize="small" />
               </IconButton>
-              <IconButton aria-label="delete" size="small" id={album.id.toString()} onClick={handleEdit}>
+              <IconButton aria-label="Delete Album" size="small" id={album.id.toString()} onClick={handleEdit}>
                 <Delete fontSize="small" />
               </IconButton>
             </td>