Fixing form submission

frontend/src/app/album/page.tsx

@@ -1,22 +1,18 @@
 'use client';
 
 import { FormEvent, useState, useEffect } from 'react';
-import { usePathname } from "next/navigation";
 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 Button from 'react-bootstrap/Button';
 import Modal from 'react-bootstrap/Modal';
-import { useRouter } from 'next/navigation';
 
 export default function Page() {
   const [albums, setAlbums] = useState<Album[]>([]);
   const [show, setShow] = useState(false);
   const handleClose = () => setShow(false);
   const handleShow = () => setShow(true);
-  const pathname = usePathname();
-  const router = useRouter();
 
   useEffect(() => {
     async function fetchAlbums() {
@@ -27,14 +23,14 @@ export default function Page() {
     fetchAlbums();
   }, []);
 
-  async function onSubmit(event: FormEvent<HTMLFormElement>) {
+  const handleSubmit = async (event: FormEvent<HTMLFormElement>) => {
     event.preventDefault();
 
     const formData = new FormData(event.currentTarget);
     const response = await createAlbum(formData);
 
     await response.json();
-    router.refresh();
+    handleClose();
   }
 
   if (!albums) return <div>Loading...</div>
@@ -89,7 +85,7 @@ export default function Page() {
       </Modal.Header>
       <Modal.Body>
         <div>
-          <form onSubmit={onSubmit}>
+          <form onSubmit={handleSubmit}>
             <div className="row">
               <div className="six columns">
                 <label htmlFor="album-title">Album Title</label><input type="text" name="title" id="album-title" />
@@ -108,17 +104,14 @@ export default function Page() {
                 <button type="submit">Create</button>
               </div>
             </div>
+            <Button variant="primary" type="submit">Create</Button>
           </form>
-            <Link href={pathname}>
-                <button type="button" className="bg-red-500 text-white p-2">Close Modal</button>
-            </Link>
         </div>
       </Modal.Body>
       <Modal.Footer>
         <Button variant="secondary" onClick={handleClose}>
           Close
         </Button>
-        <Button variant="primary">Create</Button>
       </Modal.Footer>
     </Modal>
     </>

frontend/src/app/globals.css

@@ -1079,4 +1079,5 @@ there.
 
 .has-docked-nav .navbar > .container {
   width: 80%;
+  max-height: 55px;
 }