Moving create form to modal

frontend/src/app/album/page.tsx

@@ -1,14 +1,13 @@
 'use client';
 
-import { FormEvent, useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
 import Link from 'next/link';
 import { Album } from '@/entities/album.entity';
-import { createAlbum } from '@/app/actions';
+import CreateAlbumModal from "@/app/components/modals/create-album";
-import { useRouter } from 'next/navigation';
+import { Suspense } from "react";
 
 export default function Page() {
   const [albums, setAlbums] = useState<Album[]>([]);
-  const router = useRouter();
 
   useEffect(() => {
     async function fetchAlbums() {
@@ -21,18 +20,11 @@ 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);
-
-    await response.json();
-    router.refresh();
-  }
-
   return (
     <div className="container">
+      <Link href="?modal=true">
+          <button type="button" className="bg-blue-500 text-white p-2">Open Modal</button>
+      </Link>
       <table className="u-full-width">
         <thead>
           <tr>
@@ -63,26 +55,9 @@ export default function Page() {
         ))}
         </tbody>
       </table>
-      <form onSubmit={onSubmit}>
+      <Suspense>
-        <div className="row">
+        <CreateAlbumModal/>
-          <div className="six columns">
+      </Suspense>
-            <label htmlFor="album-title">Album Title</label><input type="text" name="title" id="album-title" />
-          </div>
-          <div className="six columns">
-            <label htmlFor="album-artist">Artist</label><input type="text" name="artist" id="album-artist" />
-          </div>
-        </div>
-        <div className="row">
-          <div className="six columns">
-            <label htmlFor="album-genre">Genre</label><input type="text" name="genre" id="album-genre" />
-          </div>
-        </div>
-        <div className="row">
-          <div className="six columns">
-            <button type="submit">Create</button>
-          </div>
-        </div>
-      </form>
     </div>
   );
 }

frontend/src/app/components/modals/create-album.tsx

@@ -0,0 +1,61 @@
+"use client";
+
+import { FormEvent } from 'react';
+import {useSearchParams, usePathname} from "next/navigation";
+import Link from "next/link";
+import { createAlbum } from '@/app/actions';
+import { useRouter } from 'next/navigation';
+
+function CreateAlbumModal() {
+    const searchParams = useSearchParams();
+    const modal = searchParams.get("modal");
+    const pathname = usePathname();
+    const router = useRouter();
+
+    async function onSubmit(event: FormEvent<HTMLFormElement>) {
+      event.preventDefault();
+
+      const formData = new FormData(event.currentTarget);
+      const response = await createAlbum(formData);
+
+      await response.json();
+      router.refresh();
+    }
+
+    return (
+        <>
+            {modal &&
+                <dialog
+                    className="fixed left-0 top-0 w-full h-full bg-black bg-opacity-50 z-50 overflow-auto backdrop-blur flex justify-center items-center">
+                    <div className="container">
+                      <form onSubmit={onSubmit}>
+                        <div className="row">
+                          <div className="six columns">
+                            <label htmlFor="album-title">Album Title</label><input type="text" name="title" id="album-title" />
+                          </div>
+                          <div className="six columns">
+                            <label htmlFor="album-artist">Artist</label><input type="text" name="artist" id="album-artist" />
+                          </div>
+                        </div>
+                        <div className="row">
+                          <div className="six columns">
+                            <label htmlFor="album-genre">Genre</label><input type="text" name="genre" id="album-genre" />
+                          </div>
+                        </div>
+                        <div className="row">
+                          <div className="six columns">
+                            <button type="submit">Create</button>
+                          </div>
+                        </div>
+                      </form>
+                        <Link href={pathname}>
+                            <button type="button" className="bg-red-500 text-white p-2">Close Modal</button>
+                        </Link>
+                    </div>
+                </dialog>
+            }
+        </>
+    );
+}
+
+export default CreateAlbumModal;