update: add the text input to disable after submit

apps/frontend/src/modules/aspectManagement/modals/AspectFormModal.tsx

@@ -4,7 +4,7 @@ import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { getRouteApi } from "@tanstack/react-router";
 import { createAspect, updateAspect, getAspectByIdQueryOptions } from "../queries/aspectQueries";
 import { TbDeviceFloppy } from "react-icons/tb";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { notifications } from "@mantine/notifications";
 import FormResponseError from "@/errors/FormResponseError";
 import { createId } from "@paralleldrive/cuid2";
@@ -91,11 +91,17 @@ export default function AspectFormModal() {
         subAspects?: string;
     };
 
+    const [isSubmitting, setIsSubmitting] = useState(false);
+
     const handleSubmit = async (values: typeof form.values) => {
         try {
+            // Start submit process
+            setIsSubmitting(true);
+
             // Name field validation
             if (values.name.trim() === "") {
                 form.setErrors({ name: "Nama aspek harus diisi" });
+                setIsSubmitting(false);
                 return;
             }
 
@@ -114,7 +120,6 @@ export default function AspectFormModal() {
                 };
                 await createAspect(payload);
             } else if (formType === "edit") {
-                // Add validation for aspect name here
                 payload = {
                     id: values.id,
                     name: values.name,
@@ -154,6 +159,8 @@ export default function AspectFormModal() {
                     color: "red",
                 });
             }
+        } finally {
+            setIsSubmitting(false);
         }
     };
 
@@ -165,12 +172,12 @@ export default function AspectFormModal() {
             scrollAreaComponent={ScrollArea.Autosize}
             size="md"
         >
-            <form onSubmit={form.onSubmit((values) => handleSubmit(values))}>
+            <form onSubmit={formType !== "detail" ? form.onSubmit(handleSubmit) : undefined}>
                 <TextInput
                     type="text"
                     label="Nama"
                     {...form.getInputProps("name")}
-                    disabled={formType === "detail"}
+                    disabled={formType === "detail" || isSubmitting}
                     error={form.errors.name}
                 />
 
@@ -185,15 +192,13 @@ export default function AspectFormModal() {
                                 newSubAspects[index] = { ...newSubAspects[index], name: event.target.value };
                                 form.setValues({ subAspects: newSubAspects });
                             }}
-                        disabled={formType === "detail"}
+                            disabled={formType === "detail" || isSubmitting}
                             style={{ flex: 1 }}
                         />
-                    {formType === "detail" && (
+                        {formType === "detail" ? (
                             <Text>Jumlah Soal: {field.questionCount}</Text>
-                    )}
-                    {formType !== "detail" && (
+                        ) : (
                             <Button
-                        className="mt-6"
                                 variant="outline"
                                 onClick={() => {
                                     const newSubAspects = form.values.subAspects.filter((_, i) => i !== index);
@@ -227,7 +232,7 @@ export default function AspectFormModal() {
                     <Button
                         variant="outline"
                         onClick={() => navigate({ search: {} })}
-                        disabled={mutation.isPending}
+                        disabled={isSubmitting}
                     >
                         Tutup
                     </Button>
@@ -236,7 +241,7 @@ export default function AspectFormModal() {
                             variant="filled"
                             leftSection={<TbDeviceFloppy size={20} />}
                             type="submit"
-                            loading={mutation.isPending}
+                            loading={isSubmitting}
                         >
                             Simpan
                         </Button>