fix double click in notification manager

src/pages/notification/blocks/AddDialog.tsx

@@ -36,6 +36,7 @@ const AddDialog = () => {
   const { reload } = useDataGrid();
   const { GetData, PostData } = useCallApi();
   const [alert, setAlert] = useState({ show: false, message: '' });
+  const isSubmittingRef = useRef(false);
 
   const initialState = {
     customers: [] as string[],
@@ -48,9 +49,11 @@ const AddDialog = () => {
 
   const [formField, setFormField] = useState(initialState);
   const [open, setOpen] = useState(false);
+  const [isSubmitting, setIsSubmitting] = useState(false);
   const [customers, setCustomers] = useState<CustomerProps[]>([]);
   const resetForm = () => {
-    setFormField(initialState);
+    setFormField({ ...initialState });
+    setIsSubmitting(false);
     setAlert({ show: false, message: '' });
   };
 
@@ -62,17 +65,13 @@ const AddDialog = () => {
     }
   };
 
-  const doCreateNotification = async (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
-
-    // const payload = {
-    //   ...formField,
-    //   subject:
-    //     formField.subject.trim() === '' && formField.via === 'sms'
-    //       ? 'SMS Notification'
-    //       : formField.subject
-    // };
+  const doCreateNotification = useCallback(
+    async (e: React.FormEvent<HTMLFormElement>) => {
+      if (isSubmittingRef.current) return;
+      isSubmittingRef.current = true;
+      setIsSubmitting(true);
 
+      try {
         const response = await PostData(`${API_URL_NOTIFICATION}/send`, formField);
         // console.log('send response :', response);
 
@@ -91,7 +90,16 @@ const AddDialog = () => {
           toast.error('Failed to create notification');
           setAlert({ show: true, message: 'Failed to create notification. Please Try Again.' });
         }
-  };
+      } catch (err) {
+        toast.error('Something went wrong');
+        console.log(err);
+      } finally {
+        isSubmittingRef.current = false;
+        setIsSubmitting(false);
+      }
+    },
+    [PostData, formField, handleAddDialog, reload]
+  );
 
   const getCustomerList = async (sorting: any) => {
     try {
@@ -113,6 +121,8 @@ const AddDialog = () => {
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
 
+    if (isSubmittingRef.current) return;
+
     if (
       formField.all_customer.trim() === '' ||
       formField.via.trim() === '' ||
@@ -132,6 +142,7 @@ const AddDialog = () => {
       return;
     }
 
+    setIsSubmitting(true);
     doCreateNotification(e);
     // console.log(formField);
     setAlert({ show: false, message: '' });
@@ -155,6 +166,7 @@ const AddDialog = () => {
           <DialogDescription></DialogDescription>
         </DialogHeader>
         <DialogBody className="scrollable">
+          <fieldset disabled={isSubmitting}>
             <form onSubmit={handleSubmit} className="space-y-6">
               {alert.show && (
                 <Alert variant="danger">
@@ -359,9 +371,18 @@ const AddDialog = () => {
                 <Button type="reset" variant="outline" onClick={() => setFormField(initialState)}>
                   Reset
                 </Button>
-              <Button type="submit">Create Notification</Button>
+                <div className="flex justify-end pt-2.5">
+                  <Button
+                    className={`btn btn-primary ${isSubmitting ? 'opacity-70 cursor-not-allowed' : ''}`}
+                    type="submit"
+                    disabled={isSubmitting}
+                  >
+                    {isSubmitting ? 'Creating...' : 'Create Notification'}
+                  </Button>
+                </div>
               </div>
             </form>
+          </fieldset>
         </DialogBody>
       </DialogContent>
     </Dialog>