Disable save button while submitting form in settings (twentyhq#5352)

as per title
synapsenet-arena · May 10, 2024 · 72521d5 · 72521d5
1 parent ae0e31a
commit 72521d5
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 19 deletions.
diff --git a/packages/twenty-front/src/pages/settings/data-model/SettingsNewObject.tsx b/packages/twenty-front/src/pages/settings/data-model/SettingsNewObject.tsx
@@ -39,11 +39,12 @@ export const SettingsNewObject = () => {
     resolver: zodResolver(newObjectFormSchema),
   });
 
-  const canSave = formConfig.formState.isValid;
-
-  const handleSave = async () => {
-    const formValues = formConfig.getValues();
+  const canSave =
+    formConfig.formState.isValid && !formConfig.formState.isSubmitting;
 
+  const handleSave = async (
+    formValues: SettingsDataModelNewObjectFormValues,
+  ) => {
     try {
       const { data: response } = await createOneObjectMetadataItem(
         settingsCreateObjectInputSchema.parse(formValues),
@@ -81,7 +82,7 @@ export const SettingsNewObject = () => {
             <SaveAndCancelButtons
               isSaveDisabled={!canSave}
               onCancel={() => navigate(settingsObjectsPagePath)}
-              onSave={handleSave}
+              onSave={formConfig.handleSubmit(handleSave)}
             />
           </SettingsHeaderContainer>
           <Section>

diff --git a/packages/twenty-front/src/pages/settings/data-model/SettingsObjectEdit.tsx b/packages/twenty-front/src/pages/settings/data-model/SettingsObjectEdit.tsx
@@ -63,11 +63,12 @@ export const SettingsObjectEdit = () => {
 
   if (!activeObjectMetadataItem) return null;
 
-  const { isDirty, isValid } = formConfig.formState;
-  const canSave = isDirty && isValid;
+  const { isDirty, isValid, isSubmitting } = formConfig.formState;
+  const canSave = isDirty && isValid && !isSubmitting;
 
-  const handleSave = async () => {
-    const formValues = formConfig.getValues();
+  const handleSave = async (
+    formValues: SettingsDataModelObjectEditFormValues,
+  ) => {
     const dirtyFieldKeys = Object.keys(
       formConfig.formState.dirtyFields,
     ) as (keyof SettingsDataModelObjectEditFormValues)[];
@@ -121,7 +122,7 @@ export const SettingsObjectEdit = () => {
                 onCancel={() =>
                   navigate(`${settingsObjectsPagePath}/${objectSlug}`)
                 }
-                onSave={handleSave}
+                onSave={formConfig.handleSubmit(handleSave)}
               />
             )}
           </SettingsHeaderContainer>

diff --git a/packages/twenty-front/src/pages/settings/data-model/SettingsObjectFieldEdit.tsx b/packages/twenty-front/src/pages/settings/data-model/SettingsObjectFieldEdit.tsx
@@ -86,15 +86,19 @@ export const SettingsObjectFieldEdit = () => {
 
   if (!activeObjectMetadataItem || !activeMetadataField) return null;
 
-  const canSave = formConfig.formState.isValid && formConfig.formState.isDirty;
+  const canSave =
+    formConfig.formState.isValid &&
+    formConfig.formState.isDirty &&
+    !formConfig.formState.isSubmitting;
 
   const isLabelIdentifier = isLabelIdentifierField({
     fieldMetadataItem: activeMetadataField,
     objectMetadataItem: activeObjectMetadataItem,
   });
 
-  const handleSave = async () => {
-    const formValues = formConfig.getValues();
+  const handleSave = async (
+    formValues: SettingsDataModelFieldEditFormValues,
+  ) => {
     const { dirtyFields } = formConfig.formState;
 
     try {
@@ -166,7 +170,7 @@ export const SettingsObjectFieldEdit = () => {
               <SaveAndCancelButtons
                 isSaveDisabled={!canSave}
                 onCancel={() => navigate(`/settings/objects/${objectSlug}`)}
-                onSave={handleSave}
+                onSave={formConfig.handleSubmit(handleSave)}
               />
             )}
           </SettingsHeaderContainer>

diff --git a/...ront/src/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldStep2.tsx b/...ront/src/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldStep2.tsx
@@ -112,11 +112,12 @@ export const SettingsObjectNewFieldStep2 = () => {
 
   if (!activeObjectMetadataItem) return null;
 
-  const canSave = formConfig.formState.isValid;
-
-  const handleSave = async () => {
-    const formValues = formConfig.getValues();
+  const canSave =
+    formConfig.formState.isValid && !formConfig.formState.isSubmitting;
 
+  const handleSave = async (
+    formValues: SettingsDataModelNewFieldFormValues,
+  ) => {
     try {
       if (
         formValues.type === FieldMetadataType.Relation &&
@@ -294,7 +295,7 @@ export const SettingsObjectNewFieldStep2 = () => {
               <SaveAndCancelButtons
                 isSaveDisabled={!canSave}
                 onCancel={() => navigate(`/settings/objects/${objectSlug}`)}
-                onSave={handleSave}
+                onSave={formConfig.handleSubmit(handleSave)}
               />
             )}
           </SettingsHeaderContainer>