From f6e852c97dc2a724830fb8af43ee5430f8a4a727 Mon Sep 17 00:00:00 2001 From: Rohan Sasne Date: Thu, 21 Mar 2024 23:14:07 +0530 Subject: [PATCH 1/6] Don't call api when no edits are made & add category validation --- .../workspace/categories/CategoryForm.tsx | 7 ++++-- .../workspace/categories/EditCategoryPage.tsx | 23 ++++++++++++++++++- src/pages/workspace/tags/EditTagPage.tsx | 3 +++ 3 files changed, 30 insertions(+), 3 deletions(-) diff --git a/src/pages/workspace/categories/CategoryForm.tsx b/src/pages/workspace/categories/CategoryForm.tsx index 304f4153df8c..d9166c691372 100644 --- a/src/pages/workspace/categories/CategoryForm.tsx +++ b/src/pages/workspace/categories/CategoryForm.tsx @@ -25,9 +25,11 @@ type CategoryFormProps = { /** Function to call when the form is submitted */ onSubmit: (values: FormOnyxValues) => void; + + validateEdit?: (values: FormOnyxValues) => FormInputErrors; }; -function CategoryForm({onSubmit, policyCategories, categoryName}: CategoryFormProps) { +function CategoryForm({onSubmit, policyCategories, categoryName, validateEdit}: CategoryFormProps) { const styles = useThemeStyles(); const {translate} = useLocalize(); const {inputCallbackRef} = useAutoFocusInput(); @@ -67,7 +69,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 index 0e5ed0589934..38134cc6b479 100644 --- a/src/pages/workspace/categories/EditCategoryPage.tsx +++ b/src/pages/workspace/categories/EditCategoryPage.tsx @@ -2,8 +2,8 @@ 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 HeaderWithBackButton from '@components/HeaderWithBackButton'; +import type {FormInputErrors, FormOnyxValues} from '@components/Form/types'; import ScreenWrapper from '@components/ScreenWrapper'; import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; @@ -32,9 +32,29 @@ function EditCategoryPage({route, policyCategories}: EditCategoryPageProps) { const {translate} = useLocalize(); const currentCategoryName = route.params.categoryName; + const validate = useCallback( + (values: FormOnyxValues) => { + const errors: FormInputErrors = {}; + 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) => { + const newCategoryName = values.categoryName.trim(); + 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) { /> diff --git a/src/pages/workspace/tags/EditTagPage.tsx b/src/pages/workspace/tags/EditTagPage.tsx index 92d7c0a11ac9..ebf5855b759c 100644 --- a/src/pages/workspace/tags/EditTagPage.tsx +++ b/src/pages/workspace/tags/EditTagPage.tsx @@ -57,7 +57,10 @@ function EditTagPage({route, policyTags}: EditTagPageProps) { const editTag = useCallback( (values: FormOnyxValues) => { + const tagName = values.tagName.trim(); + if (currentTagName !== tagName) { Policy.renamePolicyTag(route.params.policyID, {oldName: currentTagName, newName: values.tagName.trim()}); + } Keyboard.dismiss(); Navigation.dismissModal(); }, From 98c17344308f8fe83ad0b79a3197c1650ab79005 Mon Sep 17 00:00:00 2001 From: Rohan Sasne Date: Thu, 21 Mar 2024 23:16:42 +0530 Subject: [PATCH 2/6] Fix prettier --- src/pages/workspace/categories/EditCategoryPage.tsx | 5 ++--- src/pages/workspace/tags/EditTagPage.tsx | 2 +- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/src/pages/workspace/categories/EditCategoryPage.tsx b/src/pages/workspace/categories/EditCategoryPage.tsx index 38134cc6b479..873b150013ac 100644 --- a/src/pages/workspace/categories/EditCategoryPage.tsx +++ b/src/pages/workspace/categories/EditCategoryPage.tsx @@ -2,8 +2,8 @@ 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 HeaderWithBackButton from '@components/HeaderWithBackButton'; import type {FormInputErrors, FormOnyxValues} from '@components/Form/types'; +import HeaderWithBackButton from '@components/HeaderWithBackButton'; import ScreenWrapper from '@components/ScreenWrapper'; import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; @@ -36,7 +36,6 @@ function EditCategoryPage({route, policyCategories}: EditCategoryPageProps) { (values: FormOnyxValues) => { const errors: FormInputErrors = {}; const newCategoryName = values.categoryName.trim(); - if (!newCategoryName) { errors.categoryName = 'workspace.categories.categoryRequiredError'; @@ -53,7 +52,7 @@ function EditCategoryPage({route, policyCategories}: EditCategoryPageProps) { (values: FormOnyxValues) => { const newCategoryName = values.categoryName.trim(); if (currentCategoryName !== newCategoryName) { - Policy.renamePolicyCategory(route.params.policyID, {oldName: currentCategoryName, newName: values.categoryName}); + Policy.renamePolicyCategory(route.params.policyID, {oldName: currentCategoryName, newName: values.categoryName}); } }, [currentCategoryName, route.params.policyID], diff --git a/src/pages/workspace/tags/EditTagPage.tsx b/src/pages/workspace/tags/EditTagPage.tsx index ebf5855b759c..bb8cca238e75 100644 --- a/src/pages/workspace/tags/EditTagPage.tsx +++ b/src/pages/workspace/tags/EditTagPage.tsx @@ -59,7 +59,7 @@ function EditTagPage({route, policyTags}: EditTagPageProps) { (values: FormOnyxValues) => { const tagName = values.tagName.trim(); if (currentTagName !== tagName) { - Policy.renamePolicyTag(route.params.policyID, {oldName: currentTagName, newName: values.tagName.trim()}); + Policy.renamePolicyTag(route.params.policyID, {oldName: currentTagName, newName: values.tagName.trim()}); } Keyboard.dismiss(); Navigation.dismissModal(); From 954778339a1a5fe179a8621fcc6b783166fa6380 Mon Sep 17 00:00:00 2001 From: GandalfGwaihir Date: Tue, 26 Mar 2024 20:38:10 +0530 Subject: [PATCH 3/6] Add documentation --- src/pages/workspace/categories/CategoryForm.tsx | 2 +- src/pages/workspace/categories/EditCategoryPage.tsx | 1 + src/pages/workspace/tags/EditTagPage.tsx | 1 + 3 files changed, 3 insertions(+), 1 deletion(-) diff --git a/src/pages/workspace/categories/CategoryForm.tsx b/src/pages/workspace/categories/CategoryForm.tsx index d9166c691372..1aee71e11a65 100644 --- a/src/pages/workspace/categories/CategoryForm.tsx +++ b/src/pages/workspace/categories/CategoryForm.tsx @@ -25,7 +25,7 @@ type CategoryFormProps = { /** Function to call when the form is submitted */ onSubmit: (values: FormOnyxValues) => void; - + /** Function to validate the edited values of the form */ validateEdit?: (values: FormOnyxValues) => FormInputErrors; }; diff --git a/src/pages/workspace/categories/EditCategoryPage.tsx b/src/pages/workspace/categories/EditCategoryPage.tsx index 873b150013ac..3a7e0f518657 100644 --- a/src/pages/workspace/categories/EditCategoryPage.tsx +++ b/src/pages/workspace/categories/EditCategoryPage.tsx @@ -51,6 +51,7 @@ function EditCategoryPage({route, policyCategories}: EditCategoryPageProps) { const editCategory = useCallback( (values: FormOnyxValues) => { const newCategoryName = values.categoryName.trim(); + // Do not call the API if the new category name is the same as the current category name if (currentCategoryName !== newCategoryName) { Policy.renamePolicyCategory(route.params.policyID, {oldName: currentCategoryName, newName: values.categoryName}); } diff --git a/src/pages/workspace/tags/EditTagPage.tsx b/src/pages/workspace/tags/EditTagPage.tsx index bb8cca238e75..19660cde4153 100644 --- a/src/pages/workspace/tags/EditTagPage.tsx +++ b/src/pages/workspace/tags/EditTagPage.tsx @@ -58,6 +58,7 @@ function EditTagPage({route, policyTags}: EditTagPageProps) { const editTag = useCallback( (values: FormOnyxValues) => { const tagName = values.tagName.trim(); + // Do not call the API if the new tag name is the same as the current tag name if (currentTagName !== tagName) { Policy.renamePolicyTag(route.params.policyID, {oldName: currentTagName, newName: values.tagName.trim()}); } From ff40c19ca33186cd6a057fc1c50c95a9b59c8b66 Mon Sep 17 00:00:00 2001 From: GandalfGwaihir Date: Tue, 26 Mar 2024 20:39:57 +0530 Subject: [PATCH 4/6] Add documentation --- src/pages/workspace/categories/CategoryForm.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/pages/workspace/categories/CategoryForm.tsx b/src/pages/workspace/categories/CategoryForm.tsx index 1aee71e11a65..39042e97d181 100644 --- a/src/pages/workspace/categories/CategoryForm.tsx +++ b/src/pages/workspace/categories/CategoryForm.tsx @@ -25,6 +25,7 @@ type CategoryFormProps = { /** Function to call when the form is submitted */ onSubmit: (values: FormOnyxValues) => void; + /** Function to validate the edited values of the form */ validateEdit?: (values: FormOnyxValues) => FormInputErrors; }; From ea101830b27f2651af841522fb413f93594dbc3c Mon Sep 17 00:00:00 2001 From: GandalfGwaihir Date: Tue, 26 Mar 2024 20:42:47 +0530 Subject: [PATCH 5/6] Add documentation --- src/pages/workspace/categories/EditCategoryPage.tsx | 2 +- src/pages/workspace/tags/EditTagPage.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/workspace/categories/EditCategoryPage.tsx b/src/pages/workspace/categories/EditCategoryPage.tsx index 3a7e0f518657..dbf7c8913515 100644 --- a/src/pages/workspace/categories/EditCategoryPage.tsx +++ b/src/pages/workspace/categories/EditCategoryPage.tsx @@ -51,7 +51,7 @@ function EditCategoryPage({route, policyCategories}: EditCategoryPageProps) { const editCategory = useCallback( (values: FormOnyxValues) => { const newCategoryName = values.categoryName.trim(); - // Do not call the API if the new category name is the same as the current category name + // 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}); } diff --git a/src/pages/workspace/tags/EditTagPage.tsx b/src/pages/workspace/tags/EditTagPage.tsx index 19660cde4153..fbde96eb2b91 100644 --- a/src/pages/workspace/tags/EditTagPage.tsx +++ b/src/pages/workspace/tags/EditTagPage.tsx @@ -58,7 +58,7 @@ function EditTagPage({route, policyTags}: EditTagPageProps) { const editTag = useCallback( (values: FormOnyxValues) => { const tagName = values.tagName.trim(); - // Do not call the API if the new tag name is the same as the current tag name + // 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()}); } From 28bb598bde4c76bfa9509627ebbfc177d2495b1f Mon Sep 17 00:00:00 2001 From: GandalfGwaihir Date: Tue, 26 Mar 2024 22:48:09 +0530 Subject: [PATCH 6/6] fix lint --- src/pages/workspace/categories/CategoryForm.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/workspace/categories/CategoryForm.tsx b/src/pages/workspace/categories/CategoryForm.tsx index 39042e97d181..30e30b29b216 100644 --- a/src/pages/workspace/categories/CategoryForm.tsx +++ b/src/pages/workspace/categories/CategoryForm.tsx @@ -25,7 +25,7 @@ type CategoryFormProps = { /** Function to call when the form is submitted */ onSubmit: (values: FormOnyxValues) => void; - + /** Function to validate the edited values of the form */ validateEdit?: (values: FormOnyxValues) => FormInputErrors; };