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,16 +91,22 @@ 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;
             }
-    
+
             let payload: CreateAspectPayload | EditAspectPayload;
-    
+
             if (formType === "create") {
                 payload = {
                     name: values.name,
@@ -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,
@@ -132,17 +137,17 @@ export default function AspectFormModal() {
                 };
                 await updateAspect(payload);
             }
-    
+
             queryClient.invalidateQueries({ queryKey: ["management-aspect"] });
-    
+
             notifications.show({
                 message: `Aspek ${formType === "create" ? "berhasil dibuat" : "berhasil diedit"}`,
             });
-    
+
             navigate({ search: {} });
         } catch (error) {
             console.error("Error during submit:", error);
-            
+
             if (error instanceof Error && error.message === "Aspect name already exists") {
                 notifications.show({
                     message: "Nama aspek sudah ada. Silakan gunakan nama lain.",
@@ -154,8 +159,10 @@ export default function AspectFormModal() {
                     color: "red",
                 });
             }
+        } finally {
+            setIsSubmitting(false);
         }
-    };        
+    };
 
     return (
         <Modal
@@ -165,45 +172,43 @@ 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}
                 />
-    
+
                 {form.values.subAspects.map((field, index) => (
                     <Group key={index} mt="md" align="center">
-                    <TextInput
-                        type="text"
-                        label={`Sub Aspek ${index + 1}`}
-                        value={field.name}
-                        onChange={(event) => {
-                            const newSubAspects = [...form.values.subAspects];
-                            newSubAspects[index] = { ...newSubAspects[index], name: event.target.value };
-                            form.setValues({ subAspects: newSubAspects });
-                        }}
-                        disabled={formType === "detail"}
-                        style={{ flex: 1 }}
-                    />
-                    {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);
+                        <TextInput
+                            type="text"
+                            label={`Sub Aspek ${index + 1}`}
+                            value={field.name}
+                            onChange={(event) => {
+                                const newSubAspects = [...form.values.subAspects];
+                                newSubAspects[index] = { ...newSubAspects[index], name: event.target.value };
                                 form.setValues({ subAspects: newSubAspects });
                             }}
-                        >
-                            Hapus
-                        </Button>
-                    )}
-                </Group>                 
+                            disabled={formType === "detail" || isSubmitting}
+                            style={{ flex: 1 }}
+                        />
+                        {formType === "detail" ? (
+                            <Text>Jumlah Soal: {field.questionCount}</Text>
+                        ) : (
+                            <Button
+                                variant="outline"
+                                onClick={() => {
+                                    const newSubAspects = form.values.subAspects.filter((_, i) => i !== index);
+                                    form.setValues({ subAspects: newSubAspects });
+                                }}
+                            >
+                                Hapus
+                            </Button>
+                        )}
+                    </Group>
                 ))}
 
                 {formType !== "detail" && (
@@ -221,13 +226,13 @@ export default function AspectFormModal() {
                         Tambah Sub Aspek
                     </Button>
                 )}
-    
+
                 {/* Buttons */}
                 <Flex justify="flex-end" align="center" gap="lg" mt="lg">
                     <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>
@@ -244,5 +249,5 @@ export default function AspectFormModal() {
                 </Flex>
             </form>
         </Modal>
-    );    
+    );
 }