Adding create album action

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) {
+//
+// }

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>
   );
 }

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>
+}

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>
+  )
+}