From 1826769c69d2068c4d7f3c47c8632469732423fc Mon Sep 17 00:00:00 2001 From: Krishna Gupta Date: Fri, 12 Apr 2024 13:39:27 +0530 Subject: [PATCH] policy pages: clear seleted options when focus is removed from page. Signed-off-by: Krishna Gupta --- src/pages/workspace/WorkspaceMembersPage.tsx | 9 ++------- .../categories/WorkspaceCategoriesPage.tsx | 14 ++++++++++---- .../distanceRates/PolicyDistanceRatesPage.tsx | 14 ++++++++++---- src/pages/workspace/tags/WorkspaceTagsPage.tsx | 15 +++++++++++---- src/pages/workspace/taxes/WorkspaceTaxesPage.tsx | 14 ++++++++++---- 5 files changed, 43 insertions(+), 23 deletions(-) diff --git a/src/pages/workspace/WorkspaceMembersPage.tsx b/src/pages/workspace/WorkspaceMembersPage.tsx index e97f4359dff5..a66a8dd74cce 100644 --- 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 index df25ab254496..80394623dba8 100644 --- 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>({}); 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( () => 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 index 27e6611062e2..ea35526bcdfa 100644 --- 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( () => 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 index e4286eb9df0d..a46e32d5371e 100644 --- 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>({}); 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( () => @@ -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 index 0b9c1274c94c..ac2c3cb0a294 100644 --- 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)); };