Merge pull request #38757 from GandalfGwaihir/issue38668

[FIX]: Inconsistent behavior when saving existing name without edit and unnecessary `API` calls
Expensify · Mar 26, 2024 · d888ffc · d888ffc
2 parents 50ac88d + 28bb598
commit d888ffc
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 5 deletions.
diff --git a/src/pages/workspace/categories/CategoryForm.tsx b/src/pages/workspace/categories/CategoryForm.tsx
@@ -25,9 +25,12 @@ type CategoryFormProps = {
 
     /** Function to call when the form is submitted */
     onSubmit: (values: FormOnyxValues<typeof ONYXKEYS.FORMS.WORKSPACE_CATEGORY_FORM>) => void;
+
+    /** Function to validate the edited values of the form */
+    validateEdit?: (values: FormOnyxValues<typeof ONYXKEYS.FORMS.WORKSPACE_CATEGORY_FORM>) => FormInputErrors<typeof ONYXKEYS.FORMS.WORKSPACE_CATEGORY_FORM>;
 };
 
-function CategoryForm({onSubmit, policyCategories, categoryName}: CategoryFormProps) {
+function CategoryForm({onSubmit, policyCategories, categoryName, validateEdit}: CategoryFormProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const {inputCallbackRef} = useAutoFocusInput();
@@ -67,7 +70,8 @@ function CategoryForm({onSubmit, policyCategories, categoryName}: CategoryFormPr
             formID={ONYXKEYS.FORMS.WORKSPACE_CATEGORY_FORM}
             onSubmit={submit}
             submitButtonText={translate('common.save')}
-            validate={validate}
+            // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+            validate={validateEdit || validate}
             style={[styles.mh5, styles.flex1]}
             enabledWhenOffline
         >

diff --git a/src/pages/workspace/categories/EditCategoryPage.tsx b/src/pages/workspace/categories/EditCategoryPage.tsx
@@ -2,7 +2,7 @@ import type {StackScreenProps} from '@react-navigation/stack';
 import React, {useCallback} from 'react';
 import {withOnyx} from 'react-native-onyx';
 import type {OnyxEntry} from 'react-native-onyx';
-import type {FormOnyxValues} from '@components/Form/types';
+import type {FormInputErrors, FormOnyxValues} from '@components/Form/types';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import ScreenWrapper from '@components/ScreenWrapper';
 import useLocalize from '@hooks/useLocalize';
@@ -32,9 +32,29 @@ function EditCategoryPage({route, policyCategories}: EditCategoryPageProps) {
     const {translate} = useLocalize();
     const currentCategoryName = route.params.categoryName;
 
+    const validate = useCallback(
+        (values: FormOnyxValues<typeof ONYXKEYS.FORMS.WORKSPACE_CATEGORY_FORM>) => {
+            const errors: FormInputErrors<typeof ONYXKEYS.FORMS.WORKSPACE_CATEGORY_FORM> = {};
+            const newCategoryName = values.categoryName.trim();
+
+            if (!newCategoryName) {
+                errors.categoryName = 'workspace.categories.categoryRequiredError';
+            } else if (policyCategories?.[newCategoryName] && currentCategoryName !== newCategoryName) {
+                errors.categoryName = 'workspace.categories.existingCategoryError';
+            }
+
+            return errors;
+        },
+        [policyCategories, currentCategoryName],
+    );
+
     const editCategory = useCallback(
         (values: FormOnyxValues<typeof ONYXKEYS.FORMS.WORKSPACE_CATEGORY_FORM>) => {
-            Policy.renamePolicyCategory(route.params.policyID, {oldName: currentCategoryName, newName: values.categoryName});
+            const newCategoryName = values.categoryName.trim();
+            // Do not call the API if the edited category name is the same as the current category name
+            if (currentCategoryName !== newCategoryName) {
+                Policy.renamePolicyCategory(route.params.policyID, {oldName: currentCategoryName, newName: values.categoryName});
+            }
         },
         [currentCategoryName, route.params.policyID],
     );
@@ -58,6 +78,7 @@ function EditCategoryPage({route, policyCategories}: EditCategoryPageProps) {
                         />
                         <CategoryForm
                             onSubmit={editCategory}
+                            validateEdit={validate}
                             categoryName={currentCategoryName}
                             policyCategories={policyCategories}
                         />

diff --git a/src/pages/workspace/tags/EditTagPage.tsx b/src/pages/workspace/tags/EditTagPage.tsx
@@ -57,7 +57,11 @@ function EditTagPage({route, policyTags}: EditTagPageProps) {
 
     const editTag = useCallback(
         (values: FormOnyxValues<typeof ONYXKEYS.FORMS.WORKSPACE_TAG_FORM>) => {
-            Policy.renamePolicyTag(route.params.policyID, {oldName: currentTagName, newName: values.tagName.trim()});
+            const tagName = values.tagName.trim();
+            // Do not call the API if the edited tag name is the same as the current tag name
+            if (currentTagName !== tagName) {
+                Policy.renamePolicyTag(route.params.policyID, {oldName: currentTagName, newName: values.tagName.trim()});
+            }
             Keyboard.dismiss();
             Navigation.dismissModal();
         },