From 3e6acc1d1990f70cbbdced31708ee2a4bee6338a Mon Sep 17 00:00:00 2001
From: Peter Muriuki <pmuriuki98@gmail.com>
Date: Mon, 11 Dec 2023 11:21:09 +0300
Subject: [PATCH] Disable button when invalid form and submitting

---
 .../src/components/LocationForm/index.tsx     | 43 +++++++++++++++----
 .../tests/__snapshots__/index.test.tsx.snap   |  2 +-
 2 files changed, 35 insertions(+), 10 deletions(-)

diff --git a/packages/location-management/src/components/LocationForm/index.tsx b/packages/location-management/src/components/LocationForm/index.tsx
index 92ff619dc..1d13702b1 100644
--- a/packages/location-management/src/components/LocationForm/index.tsx
+++ b/packages/location-management/src/components/LocationForm/index.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Form, Input, Space, Button, Radio } from 'antd';
+import { Form, Input, Space, Button, Radio, FormInstance } from 'antd';
 import { sendErrorNotification, sendSuccessNotification } from '@opensrp/notifications';
 import { Redirect } from 'react-router';
 import { ExtraFields } from './ExtraFields';
@@ -175,6 +175,7 @@ const LocationForm = (props: LocationFormProps) => {
             is_jurisdiction: values.isJurisdiction,
           };
 
+          setSubmitting(true);
           postPutLocationUnit(payload, opensrpBaseURL, isEditMode, params)
             .then(() => {
               afterSubmit(payload);
@@ -353,14 +354,7 @@ const LocationForm = (props: LocationFormProps) => {
 
           <FormItem {...tailLayout}>
             <Space>
-              <Button
-                type="primary"
-                id="location-form-submit-button"
-                disabled={isSubmitting}
-                htmlType="submit"
-              >
-                {isSubmitting ? t('Saving') : t('Save')}
-              </Button>
+              <SubmitButton form={form} isSubmitting={isSubmitting} />
               <Button id="location-form-cancel-button" onClick={() => onCancel()}>
                 {t('Cancel')}
               </Button>
@@ -375,3 +369,34 @@ const LocationForm = (props: LocationFormProps) => {
 LocationForm.defaultProps = defaultProps;
 
 export { LocationForm };
+
+const SubmitButton = ({ form, isSubmitting }: { form: FormInstance; isSubmitting: boolean }) => {
+  const { t } = useTranslation();
+  const [submittable, setSubmittable] = React.useState(false);
+
+  // Watch all values
+  const values = Form.useWatch([], form);
+
+  React.useEffect(() => {
+    form.validateFields({ validateOnly: true }).then(
+      () => {
+        setSubmittable(true);
+      },
+      () => {
+        setSubmittable(false);
+      }
+    );
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [values]);
+
+  return (
+    <Button
+      type="primary"
+      id="location-form-submit-button"
+      disabled={isSubmitting || !submittable}
+      htmlType="submit"
+    >
+      {isSubmitting ? t('Saving') : t('Save')}
+    </Button>
+  );
+};
diff --git a/packages/location-management/src/components/LocationForm/tests/__snapshots__/index.test.tsx.snap b/packages/location-management/src/components/LocationForm/tests/__snapshots__/index.test.tsx.snap
index e3e5eaa36..94207e60c 100644
--- a/packages/location-management/src/components/LocationForm/tests/__snapshots__/index.test.tsx.snap
+++ b/packages/location-management/src/components/LocationForm/tests/__snapshots__/index.test.tsx.snap
@@ -461,7 +461,7 @@ exports[`LocationForm renders correctly: status label 1`] = `
 exports[`LocationForm renders correctly: submit button 1`] = `
 <button
   className="ant-btn css-dev-only-do-not-override-k7429z ant-btn-primary"
-  disabled={false}
+  disabled={true}
   id="location-form-submit-button"
   onClick={[Function]}
   type="submit"