fix: update the selected option once the data changes

Expensify · Dec 25, 2024 · e7977e2 · e7977e2
1 parent 918488a
commit e7977e2
Show file tree

Hide file tree

Showing 4 changed files with 79 additions and 1 deletion.
diff --git a/src/hooks/useAutoUpdateSelectedOptions/index.ts b/src/hooks/useAutoUpdateSelectedOptions/index.ts
@@ -0,0 +1,15 @@
+import isEmpty from 'lodash/isEmpty';
+import {useEffect} from 'react';
+
+const useAutoUpdateSelectedOptions = (availableOptions: string[], selectedOptions: Record<string, boolean> | string[], setSelectedOptions: (newSelectedOptions: string[]) => void) => {
+    useEffect(() => {
+        if (isEmpty(selectedOptions)) {
+            return;
+        }
+        const originalSelectedOptions = Array.isArray(selectedOptions) ? selectedOptions : Object.keys(selectedOptions).filter((key) => selectedOptions[key]);
+        const newSelectedOptions = originalSelectedOptions.filter((o) => availableOptions.includes(o));
+        setSelectedOptions(newSelectedOptions);
+        // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
+    }, [availableOptions]);
+};
+export default useAutoUpdateSelectedOptions;
diff --git a/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx b/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx
@@ -23,6 +23,7 @@ import TableListItemSkeleton from '@components/Skeletons/TableRowSkeleton';
 import Text from '@components/Text';
 import TextLink from '@components/TextLink';
 import useAutoTurnSelectionModeOffWhenHasNoActiveOption from '@hooks/useAutoTurnSelectionModeOffWhenHasNoActiveOption';
+import useAutoUpdateSelectedOptions from '@hooks/useAutoUpdateSelectedOptions';
 import useCleanupSelectedOptions from '@hooks/useCleanupSelectedOptions';
 import useEnvironment from '@hooks/useEnvironment';
 import useLocalize from '@hooks/useLocalize';
@@ -100,6 +101,24 @@ function WorkspaceCategoriesPage({route}: WorkspaceCategoriesPageProps) {
 
     const cleanupSelectedOption = useCallback(() => setSelectedCategories({}), []);
     useCleanupSelectedOptions(cleanupSelectedOption);
+    const updateNewSelectedOptions = useCallback((newSelectedOptions: string[]) => {
+        setSelectedCategories(
+            newSelectedOptions.reduce((acc: Record<string, boolean>, key: string) => {
+                acc[key] = true;
+                return acc;
+            }, {} as Record<string, boolean>),
+        );
+    }, []);
+    const availableOptions = useMemo(
+        () =>
+            canSelectMultiple
+                ? Object.values(policyCategories ?? {})
+                      ?.filter((category) => category.pendingAction !== CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE)
+                      .map((o) => o.name)
+                : [],
+        [policyCategories, canSelectMultiple],
+    );
+    useAutoUpdateSelectedOptions(availableOptions, canSelectMultiple ? selectedCategories : {}, updateNewSelectedOptions);
 
     const categoryList = useMemo<PolicyOption[]>(
         () =>

diff --git a/src/pages/workspace/tags/WorkspaceTagsPage.tsx b/src/pages/workspace/tags/WorkspaceTagsPage.tsx
@@ -22,6 +22,7 @@ import CustomListHeader from '@components/SelectionListWithModal/CustomListHeade
 import TableListItemSkeleton from '@components/Skeletons/TableRowSkeleton';
 import Text from '@components/Text';
 import TextLink from '@components/TextLink';
+import useAutoUpdateSelectedOptions from '@hooks/useAutoUpdateSelectedOptions';
 import useCleanupSelectedOptions from '@hooks/useCleanupSelectedOptions';
 import useEnvironment from '@hooks/useEnvironment';
 import useLocalize from '@hooks/useLocalize';
@@ -89,6 +90,30 @@ function WorkspaceTagsPage({route}: WorkspaceTagsPageProps) {
 
     const cleanupSelectedOption = useCallback(() => setSelectedTags({}), []);
     useCleanupSelectedOptions(cleanupSelectedOption);
+    const updateNewSelectedOptions = useCallback(
+        (newSelectedOptions: string[]) => {
+            if (!canSelectMultiple) {
+                return;
+            }
+            setSelectedTags(
+                newSelectedOptions.reduce((acc: Record<string, boolean>, key: string) => {
+                    acc[key] = true;
+                    return acc;
+                }, {} as Record<string, boolean>),
+            );
+        },
+        [canSelectMultiple],
+    );
+    const availableOptions = useMemo(
+        () =>
+            canSelectMultiple && policyTagLists
+                ? Object.values(policyTagLists.at(0)?.tags ?? {})
+                      ?.filter((tag) => tag.pendingAction !== CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE)
+                      .map((o) => o.name)
+                : [],
+        [policyTagLists, canSelectMultiple],
+    );
+    useAutoUpdateSelectedOptions(availableOptions, canSelectMultiple ? selectedTags : {}, updateNewSelectedOptions);
 
     const getPendingAction = (policyTagList: PolicyTagList): PendingAction | undefined => {
         if (!policyTagList) {

diff --git a/src/pages/workspace/taxes/WorkspaceTaxesPage.tsx b/src/pages/workspace/taxes/WorkspaceTaxesPage.tsx
@@ -17,6 +17,7 @@ import SelectionListWithModal from '@components/SelectionListWithModal';
 import CustomListHeader from '@components/SelectionListWithModal/CustomListHeader';
 import Text from '@components/Text';
 import TextLink from '@components/TextLink';
+import useAutoUpdateSelectedOptions from '@hooks/useAutoUpdateSelectedOptions';
 import useCleanupSelectedOptions from '@hooks/useCleanupSelectedOptions';
 import useEnvironment from '@hooks/useEnvironment';
 import useLocalize from '@hooks/useLocalize';
@@ -89,6 +90,25 @@ function WorkspaceTaxesPage({
 
     const cleanupSelectedOption = useCallback(() => setSelectedTaxesIDs([]), []);
     useCleanupSelectedOptions(cleanupSelectedOption);
+    const updateNewSelectedOptions = useCallback(
+        (newSelectedOptions: string[]) => {
+            if (!canSelectMultiple) {
+                return;
+            }
+            setSelectedTaxesIDs(newSelectedOptions);
+        },
+        [canSelectMultiple],
+    );
+    const availableOptions = useMemo(
+        () =>
+            canSelectMultiple && policy
+                ? Object.keys(policy?.taxRates?.taxes ?? {})?.filter(
+                      (key) => (policy?.taxRates?.taxes ?? {})?.[key].pendingAction !== CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE && PolicyUtils.canEditTaxRate(policy, key),
+                  )
+                : [],
+        [policy, canSelectMultiple],
+    );
+    useAutoUpdateSelectedOptions(availableOptions, canSelectMultiple ? selectedTaxesIDs : {}, updateNewSelectedOptions);
 
     const textForDefault = useCallback(
         (taxID: string, taxRate: TaxRate): string => {
@@ -126,7 +146,6 @@ function WorkspaceTaxesPage({
             }))
             .sort((a, b) => (a.text ?? a.keyForList ?? '').localeCompare(b.text ?? b.keyForList ?? ''));
     }, [policy, textForDefault, selectedTaxesIDs, canSelectMultiple, translate]);
-
     const isLoading = !isOffline && taxesList === undefined;
 
     const toggleTax = (tax: ListItem) => {