policy pages: clear seleted options when focus is removed from page.

Signed-off-by: Krishna Gupta <belivethatkg@gmail.com>
Expensify · Apr 12, 2024 · 1826769 · 1826769
1 parent 45526c9
commit 1826769
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 23 deletions.
diff --git a/src/pages/workspace/WorkspaceMembersPage.tsx b/src/pages/workspace/WorkspaceMembersPage.tsx
@@ -1,4 +1,4 @@
-import {useFocusEffect, useIsFocused} from '@react-navigation/native';
+import {useIsFocused} from '@react-navigation/native';
 import type {StackScreenProps} from '@react-navigation/stack';
 import lodashIsEqual from 'lodash/isEqual';
 import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
@@ -138,18 +138,13 @@ function WorkspaceMembersPage({policyMembers, personalDetails, invitedEmailsToAc
     // useFocusEffect would make getWorkspaceMembers get called twice on fresh login because policyMember is a dependency of getWorkspaceMembers.
     useEffect(() => {
         if (!isFocused) {
+            setSelectedEmployees([]);
             return;
         }
         getWorkspaceMembers();
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [isFocused]);
 
-    useFocusEffect(
-        useCallback(() => {
-            setSelectedEmployees([]);
-        }, []),
-    );
-
     useEffect(() => {
         validateSelection();
     }, [preferredLocale, validateSelection]);

diff --git a/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx b/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx
@@ -1,6 +1,6 @@
-import {useFocusEffect} from '@react-navigation/native';
+import {useFocusEffect, useIsFocused} from '@react-navigation/native';
 import type {StackScreenProps} from '@react-navigation/stack';
-import React, {useCallback, useMemo, useRef, useState} from 'react';
+import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
 import {ActivityIndicator, View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import type {OnyxEntry} from 'react-native-onyx';
@@ -63,6 +63,7 @@ function WorkspaceCategoriesPage({policy, policyCategories, route}: WorkspaceCat
     const [selectedCategories, setSelectedCategories] = useState<Record<string, boolean>>({});
     const dropdownButtonRef = useRef(null);
     const [deleteCategoriesConfirmModalVisible, setDeleteCategoriesConfirmModalVisible] = useState(false);
+    const isFocused = useIsFocused();
 
     const fetchCategories = useCallback(() => {
         Policy.openPolicyCategoriesPage(route.params.policyID);
@@ -72,11 +73,17 @@ function WorkspaceCategoriesPage({policy, policyCategories, route}: WorkspaceCat
 
     useFocusEffect(
         useCallback(() => {
-            setSelectedCategories({});
             fetchCategories();
         }, [fetchCategories]),
     );
 
+    useEffect(() => {
+        if (isFocused) {
+            return;
+        }
+        setSelectedCategories({});
+    }, [isFocused]);
+
     const categoryList = useMemo<PolicyOption[]>(
         () =>
             Object.values(policyCategories ?? {})
@@ -120,7 +127,6 @@ function WorkspaceCategoriesPage({policy, policyCategories, route}: WorkspaceCat
     );
 
     const navigateToCategorySettings = (category: PolicyOption) => {
-        setSelectedCategories({});
         Navigation.navigate(ROUTES.WORKSPACE_CATEGORY_SETTINGS.getRoute(route.params.policyID, category.keyForList));
     };
 

diff --git a/src/pages/workspace/distanceRates/PolicyDistanceRatesPage.tsx b/src/pages/workspace/distanceRates/PolicyDistanceRatesPage.tsx
@@ -1,6 +1,6 @@
-import {useFocusEffect} from '@react-navigation/native';
+import {useFocusEffect, useIsFocused} from '@react-navigation/native';
 import type {StackScreenProps} from '@react-navigation/stack';
-import React, {useCallback, useMemo, useRef, useState} from 'react';
+import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
 import {ActivityIndicator, View} from 'react-native';
 import type {OnyxEntry} from 'react-native-onyx';
 import {withOnyx} from 'react-native-onyx';
@@ -56,6 +56,7 @@ function PolicyDistanceRatesPage({policy, route}: PolicyDistanceRatesPageProps)
     const [isDeleteModalVisible, setIsDeleteModalVisible] = useState(false);
     const dropdownButtonRef = useRef(null);
     const policyID = route.params.policyID;
+    const isFocused = useIsFocused();
 
     const customUnit: CustomUnit | undefined = useMemo(
         () => (policy?.customUnits !== undefined ? policy?.customUnits[Object.keys(policy?.customUnits)[0]] : undefined),
@@ -89,11 +90,17 @@ function PolicyDistanceRatesPage({policy, route}: PolicyDistanceRatesPageProps)
 
     useFocusEffect(
         useCallback(() => {
-            setSelectedDistanceRates([]);
             fetchDistanceRates();
         }, [fetchDistanceRates]),
     );
 
+    useEffect(() => {
+        if (isFocused) {
+            return;
+        }
+        setSelectedDistanceRates([]);
+    }, [isFocused]);
+
     const distanceRatesList = useMemo<RateForList[]>(
         () =>
             Object.values(customUnitRates).map((value) => ({
@@ -120,7 +127,6 @@ function PolicyDistanceRatesPage({policy, route}: PolicyDistanceRatesPageProps)
     };
 
     const openRateDetails = (rate: RateForList) => {
-        setSelectedDistanceRates([]);
         Navigation.navigate(ROUTES.WORKSPACE_DISTANCE_RATE_DETAILS.getRoute(policyID, rate.value));
     };
 

diff --git a/src/pages/workspace/tags/WorkspaceTagsPage.tsx b/src/pages/workspace/tags/WorkspaceTagsPage.tsx
@@ -1,7 +1,7 @@
-import {useFocusEffect} from '@react-navigation/native';
+import {useFocusEffect, useIsFocused} from '@react-navigation/native';
 import type {StackScreenProps} from '@react-navigation/stack';
 import lodashSortBy from 'lodash/sortBy';
-import React, {useCallback, useMemo, useRef, useState} from 'react';
+import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
 import {ActivityIndicator, View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import type {OnyxEntry} from 'react-native-onyx';
@@ -70,6 +70,7 @@ function WorkspaceTagsPage({policyTags, route}: WorkspaceTagsPageProps) {
     const [selectedTags, setSelectedTags] = useState<Record<string, boolean>>({});
     const dropdownButtonRef = useRef(null);
     const [deleteTagsConfirmModalVisible, setDeleteTagsConfirmModalVisible] = useState(false);
+    const isFocused = useIsFocused();
 
     const fetchTags = useCallback(() => {
         Policy.openPolicyTagsPage(route.params.policyID);
@@ -79,10 +80,17 @@ function WorkspaceTagsPage({policyTags, route}: WorkspaceTagsPageProps) {
 
     useFocusEffect(
         useCallback(() => {
-            setSelectedTags({});
             fetchTags();
         }, [fetchTags]),
     );
+
+    useEffect(() => {
+        if (isFocused) {
+            return;
+        }
+        setSelectedTags({});
+    }, [isFocused]);
+
     const policyTagLists = useMemo(() => PolicyUtils.getTagLists(policyTags), [policyTags]);
     const tagList = useMemo<PolicyForList[]>(
         () =>
@@ -141,7 +149,6 @@ function WorkspaceTagsPage({policyTags, route}: WorkspaceTagsPageProps) {
     };
 
     const navigateToTagSettings = (tag: PolicyOption) => {
-        setSelectedTags({});
         Navigation.navigate(ROUTES.WORKSPACE_TAG_SETTINGS.getRoute(route.params.policyID, tag.keyForList));
     };
 

diff --git a/src/pages/workspace/taxes/WorkspaceTaxesPage.tsx b/src/pages/workspace/taxes/WorkspaceTaxesPage.tsx
@@ -1,6 +1,6 @@
-import {useFocusEffect} from '@react-navigation/native';
+import {useFocusEffect, useIsFocused} from '@react-navigation/native';
 import type {StackScreenProps} from '@react-navigation/stack';
-import React, {useCallback, useMemo, useRef, useState} from 'react';
+import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
 import {ActivityIndicator, View} from 'react-native';
 import Button from '@components/Button';
 import ButtonWithDropdownMenu from '@components/ButtonWithDropdownMenu';
@@ -53,6 +53,7 @@ function WorkspaceTaxesPage({
     const defaultExternalID = policy?.taxRates?.defaultExternalID;
     const foreignTaxDefault = policy?.taxRates?.foreignTaxDefault;
     const dropdownButtonRef = useRef(null);
+    const isFocused = useIsFocused();
 
     const fetchTaxes = useCallback(() => {
         openPolicyTaxesPage(policyID);
@@ -62,11 +63,17 @@ function WorkspaceTaxesPage({
 
     useFocusEffect(
         useCallback(() => {
-            setSelectedTaxesIDs([]);
             fetchTaxes();
         }, [fetchTaxes]),
     );
 
+    useEffect(() => {
+        if (isFocused) {
+            return;
+        }
+        setSelectedTaxesIDs([]);
+    }, [isFocused]);
+
     const textForDefault = useCallback(
         (taxID: string): string => {
             if (taxID === defaultExternalID && taxID === foreignTaxDefault) {
@@ -160,7 +167,6 @@ function WorkspaceTaxesPage({
         if (!taxRate.keyForList) {
             return;
         }
-        setSelectedTaxesIDs([]);
         Navigation.navigate(ROUTES.WORKSPACE_TAX_EDIT.getRoute(policyID, taxRate.keyForList));
     };