refactor: use async/await for createJob submission flow

Author: sunjay-dev

frontend/src/components/common/ConfirmMenu.tsx

@@ -16,7 +16,7 @@ export default function ConfirmMenu({
   confirmColor,
 }: ConfirmMenuProps) {
   return (
-    <div className="fixed inset-0 items-center justify-center z-50 bg-black/50 flex">
+    <div className="fixed top-0 left-0 h-dvh w-screen items-center justify-center z-50 bg-black/50 flex">
       <div className="bg-white rounded-lg shadow-lg p-6 w-11/12 max-w-md">
         <h2 className="text-lg font-semibold mb-4">{title}</h2>
 

frontend/src/pages/CreateJob.tsx

@@ -57,31 +57,35 @@ export default function CreateJob() {
   useConfirmExit(isDirty, !isSubmitted && !isSubmitting);
 
   const submitJob = async (job: JobDetails) => {
-    fetch(`${import.meta.env.VITE_BACKEND_URL}/api/jobs`, {
-      method: "POST",
-      credentials: "include",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify(job),
-    })
-      .then(async (res) => {
-        const data = await res.json();
-        if (!res.ok) throw new Error(data.message || "Something went wrong, please try again.");
-        return data;
-      })
-      .then((data) => {
-        setMessage({ type: "success", text: data.message });
-        dispatch(addJob(data.job));
-        navigate("/jobs");
-      })
-      .catch((err) => {
-        setMessage({ type: "error", text: err.message });
-      })
-      .finally(() => {
-        setTimeout(() => setMessage(null), 8000);
+    try {
+      const res = await fetch(`${import.meta.env.VITE_BACKEND_URL}/api/jobs`, {
+        method: "POST",
+        credentials: "include",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(job),
       });
+
+      const data = await res.json();
+
+      if (!res.ok) {
+        throw new Error(data.message || "Something went wrong.");
+      }
+
+      setMessage({ type: "success", text: data.message });
+      dispatch(addJob(data.job));
+      navigate("/jobs");
+    } catch (err) {
+      if (err instanceof Error) {
+        setMessage({ type: "error", text: err.message });
+      } else {
+        setMessage({ type: "error", text: "Something went wrong, Please try again later." });
+      }
+    } finally {
+      setTimeout(() => setMessage(null), 8000);
+    }
   };
 
-  const onSubmit = (job: JobDetails) => {
+  const onSubmit = async (job: JobDetails) => {
     const allowBody = ["POST", "PUT", "PATCH"].includes(job.method?.toUpperCase());
     if (allowBody && job.body.trim()) {
       try {
@@ -100,7 +104,7 @@ export default function CreateJob() {
       }
     }
 
-    submitJob(job);
+    await submitJob(job);
   };
 
   return (