From fbe5d54e818cb2fd353257a5521d1f50fc7574e9 Mon Sep 17 00:00:00 2001
From: Phill Pover <phill@anatid.net>
Date: Thu, 3 Apr 2025 12:36:34 +0100
Subject: [PATCH] Adding create album action

---
 frontend/src/app/actions.tsx    | 24 ++++++++++++++++++++++++
 frontend/src/app/album/page.tsx | 26 +++++++++++++++-----------
 frontend/src/app/ui/button.tsx  |  7 +++++++
 frontend/src/app/ui/form.tsx    | 12 ++++++++++++
 4 files changed, 58 insertions(+), 11 deletions(-)
 create mode 100644 frontend/src/app/actions.tsx
 create mode 100644 frontend/src/app/ui/button.tsx
 create mode 100644 frontend/src/app/ui/form.tsx

diff --git a/frontend/src/app/actions.tsx b/frontend/src/app/actions.tsx
new file mode 100644
index 0000000..38362ae
--- /dev/null
+++ b/frontend/src/app/actions.tsx
@@ -0,0 +1,24 @@
+'use server'
+
+export async function createAlbum(formData: FormData) {
+  const title = formData.get('title');
+  const artist = formData.get('artist');
+  const genre = formData.get('genre');
+  await fetch("https://api.anatid.net/album", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({
+      title: title,
+      artist: artist,
+      genre: genre,
+    }),
+  });
+}
+//
+// export async function updateAlbum(formData: FormData) {
+//
+// }
+//
+// export async function deleteAlbum(formData: FormData) {
+//
+// }
diff --git a/frontend/src/app/album/page.tsx b/frontend/src/app/album/page.tsx
index fe5ba66..3e8804d 100644
--- a/frontend/src/app/album/page.tsx
+++ b/frontend/src/app/album/page.tsx
@@ -3,6 +3,7 @@
 import { useState, useEffect } from 'react';
 import Link from 'next/link';
 import { Album } from '@/entities/album.entity';
+import { CreateAlbumButton } from '@/app/ui/button';
 
 export default function Page() {
   const [albums, setAlbums] = useState<Album[]>([]);
@@ -19,16 +20,19 @@ export default function Page() {
   if (!albums) return <div>Loading...</div>
 
   return (
-    <ul>
-      {albums.map((album: Album) => (
-        <li key={album.id}>
-          <Link
-            href={{
-              pathname: `/album/${album.id}`
-            }}
-          >{album.title}
-          </Link> by {album.artist} ({album.genre})</li>
-      ))}
-    </ul>
+    <div>
+      <ul>
+        {albums.map((album: Album) => (
+          <li key={album.id}>
+            <Link
+              href={{
+                pathname: `/album/${album.id}`
+              }}
+            >{album.title}
+            </Link> by {album.artist} ({album.genre})</li>
+        ))}
+      </ul>
+      {CreateAlbumButton()}
+    </div>
   );
 }
diff --git a/frontend/src/app/ui/button.tsx b/frontend/src/app/ui/button.tsx
new file mode 100644
index 0000000..aad9164
--- /dev/null
+++ b/frontend/src/app/ui/button.tsx
@@ -0,0 +1,7 @@
+'use client'
+
+import { createAlbum } from '@/app/actions'
+
+export function CreateAlbumButton() {
+  return <button formAction={createAlbum}>Create</button>
+}
diff --git a/frontend/src/app/ui/form.tsx b/frontend/src/app/ui/form.tsx
new file mode 100644
index 0000000..e4877f7
--- /dev/null
+++ b/frontend/src/app/ui/form.tsx
@@ -0,0 +1,12 @@
+import { createAlbum } from '@/app/actions'
+
+export function CreateAlbumForm() {
+  return (
+    <form action={createAlbum}>
+      <input type="text" name="title" />
+      <input type="text" name="artist" />
+      <input type="text" name="genre" />
+      <button type="submit">Create</button>
+    </form>
+  )
+}