Reworking create form

frontend/src/app/actions.tsx

@@ -4,7 +4,7 @@ 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", {
+  return await fetch("https://api.anatid.net/album", {
     method: "POST",
     headers: { "Content-Type": "application/json" },
     body: JSON.stringify({

frontend/src/app/album/page.tsx

@@ -1,12 +1,15 @@
 'use client';
 
-import { useState, useEffect } from 'react';
+import { FormEvent, useState, useEffect } from 'react';
 import Link from 'next/link';
 import { Album } from '@/entities/album.entity';
-import { CreateAlbumForm } from '@/app/ui/form';
+// import { CreateAlbumForm } from '@/app/ui/form';
+import { createAlbum } from '@/app/actions';
+// import { useRouter } from 'next/navigation';
 
 export default function Page() {
   const [albums, setAlbums] = useState<Album[]>([]);
+  // const router = useRouter();
 
   useEffect(() => {
     async function fetchAlbums() {
@@ -19,6 +22,16 @@ export default function Page() {
 
   if (!albums) return <div>Loading...</div>
 
+  async function onSubmit(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault()
+
+    const formData = new FormData(event.currentTarget);
+    const response = await createAlbum(formData);
+
+    const data = await response.json()
+    setAlbums(data);
+  }
+
   return (
     <div>
       <ul>
@@ -32,7 +45,12 @@ export default function Page() {
             </Link> by {album.artist} ({album.genre})</li>
         ))}
       </ul>
-      {CreateAlbumForm()}
+      <form onSubmit={onSubmit}>
+        <span>Album Title</span><input type="text" name="title" /><br/>
+        <span>Artist</span><input type="text" name="artist" /><br/>
+        <span>Genre</span><input type="text" name="genre" /><br/>
+        <button type="submit">Create</button>
+      </form>
     </div>
   );
 }

frontend/src/app/ui/button.tsx

@@ -1,7 +0,0 @@
-'use client'
-
-import { createAlbum } from '@/app/actions'
-
-export function CreateAlbumButton() {
-  return <button formAction={createAlbum}>Create</button>
-}

frontend/src/app/ui/form.tsx

@@ -1,8 +1,6 @@
-import { createAlbum } from '@/app/actions'
+export function CreateAlbumForm(formAction: string) {
-
-export function CreateAlbumForm() {
   return (
-    <form action={createAlbum}>
+    <form action={formAction}>
       <input type="text" name="title" />
       <input type="text" name="artist" />
       <input type="text" name="genre" />