From de5d9dfddb5071a66ce32c1944be60c415631834 Mon Sep 17 00:00:00 2001
From: Aayush Shrestha <aayush6194@gmail.com>
Date: Tue, 10 Dec 2024 11:05:43 -0800
Subject: [PATCH] 1339: Used 'isSubmitting' to track the state of the API call

---
 .../components/patient/CreatePatientForm.js   | 23 +++++++++++++------
 frontend/src/components/utils/Utils.js        |  2 +-
 2 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/patient/CreatePatientForm.js b/frontend/src/components/patient/CreatePatientForm.js
index c7280ab03e..b83c4e0150 100644
--- a/frontend/src/components/patient/CreatePatientForm.js
+++ b/frontend/src/components/patient/CreatePatientForm.js
@@ -1,11 +1,7 @@
 import React, { useState, useRef, useEffect, useContext } from "react";
 import { FormattedMessage, injectIntl, useIntl } from "react-intl";
 import "../Style.css";
-import {
-  getFromOpenElisServer,
-  getFromOpenElisServerSync,
-  postToOpenElisServer,
-} from "../utils/Utils";
+import { getFromOpenElisServer, postToOpenElisServer } from "../utils/Utils";
 import { nationalityList } from "../data/countries";
 import format from "date-fns/format";
 import {
@@ -66,6 +62,9 @@ function CreatePatientForm(props) {
   const [subjectNo, setSubjectNo] = useState(
     props.selectedPatient.subjectNumber,
   );
+
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
   const handleNationalIdChange = (event) => {
     const newValue = event.target.value;
     setNationalId(newValue);
@@ -308,6 +307,13 @@ function CreatePatientForm(props) {
   };
 
   const handleSubmit = async (values, { resetForm }) => {
+    // Prevent multiple submissions.
+    if (isSubmitting) {
+      return;
+    }
+
+    setIsSubmitting(true);
+
     if ("years" in values) {
       delete values.years;
     }
@@ -330,7 +336,9 @@ function CreatePatientForm(props) {
           days: "",
         });
       },
-    );
+    ).then(() => {
+      setIsSubmitting(false);
+    });
   };
 
   const handlePost = (status) => {
@@ -1007,7 +1015,7 @@ function CreatePatientForm(props) {
               {props.showActionsButton && (
                 <>
                   <Column lg={4} md={4} sm={4}>
-                    <Button type="submit" id="submit">
+                    <Button type="submit" id="submit" disabled={isSubmitting}>
                       <FormattedMessage id="label.button.save" />
                     </Button>
                   </Column>
@@ -1015,6 +1023,7 @@ function CreatePatientForm(props) {
                     <Button
                       id="clear"
                       kind="danger"
+                      disabled={isSubmitting}
                       onClick={() => {
                         resetForm({ values: CreatePatientFormValues });
                         setHealthDistricts([]);
diff --git a/frontend/src/components/utils/Utils.js b/frontend/src/components/utils/Utils.js
index b59895d595..5335d0daab 100644
--- a/frontend/src/components/utils/Utils.js
+++ b/frontend/src/components/utils/Utils.js
@@ -35,7 +35,7 @@ export const postToOpenElisServer = (
   callback,
   extraParams,
 ) => {
-  fetch(
+  return fetch(
     config.serverBaseUrl + endPoint,
 
     {