diff --git a/src/hooks/useCleanupSelectedOptions/index.ts b/src/hooks/useCleanupSelectedOptions/index.ts new file mode 100644 index 000000000000..7451e85aef23 --- /dev/null +++ b/src/hooks/useCleanupSelectedOptions/index.ts @@ -0,0 +1,21 @@ +import {NavigationContainerRefContext, useIsFocused} from '@react-navigation/native'; +import {useContext, useEffect} from 'react'; +import NAVIGATORS from '@src/NAVIGATORS'; + +const useCleanupSelectedOptions = (cleanupFunction?: () => void) => { + const navigationContainerRef = useContext(NavigationContainerRefContext); + const state = navigationContainerRef?.getState(); + const lastRoute = state?.routes.at(-1); + const isRightModalOpening = lastRoute?.name === NAVIGATORS.RIGHT_MODAL_NAVIGATOR; + + const isFocused = useIsFocused(); + + useEffect(() => { + if (isFocused || isRightModalOpening) { + return; + } + cleanupFunction?.(); + }, [isFocused, cleanupFunction, isRightModalOpening]); +}; + +export default useCleanupSelectedOptions; diff --git a/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx b/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx index 56ba8a5440b8..3a588176ef4d 100644 --- a/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx +++ b/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx @@ -1,4 +1,4 @@ -import {useFocusEffect, useIsFocused} from '@react-navigation/native'; +import {useFocusEffect} from '@react-navigation/native'; import lodashSortBy from 'lodash/sortBy'; import React, {useCallback, useEffect, useMemo, useState} from 'react'; import {ActivityIndicator, View} from 'react-native'; @@ -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 useCleanupSelectedOptions from '@hooks/useCleanupSelectedOptions'; import useEnvironment from '@hooks/useEnvironment'; import useLocalize from '@hooks/useLocalize'; import useMobileSelectionMode from '@hooks/useMobileSelectionMode'; @@ -70,7 +71,6 @@ function WorkspaceCategoriesPage({route}: WorkspaceCategoriesPageProps) { const [selectedCategories, setSelectedCategories] = useState>({}); const [isDownloadFailureModalVisible, setIsDownloadFailureModalVisible] = useState(false); const [deleteCategoriesConfirmModalVisible, setDeleteCategoriesConfirmModalVisible] = useState(false); - const isFocused = useIsFocused(); const {environmentURL} = useEnvironment(); const policyId = route.params.policyID ?? '-1'; const backTo = route.params?.backTo; @@ -98,12 +98,8 @@ function WorkspaceCategoriesPage({route}: WorkspaceCategoriesPageProps) { }, [fetchCategories]), ); - useEffect(() => { - if (isFocused) { - return; - } - setSelectedCategories({}); - }, [isFocused]); + const cleanupSelectedOption = useCallback(() => setSelectedCategories({}), []); + useCleanupSelectedOptions(cleanupSelectedOption); const categoryList = useMemo( () => @@ -151,6 +147,10 @@ function WorkspaceCategoriesPage({route}: WorkspaceCategoriesPageProps) { }; const navigateToCategorySettings = (category: PolicyOption) => { + if (isSmallScreenWidth && selectionMode?.isEnabled) { + toggleCategory(category); + return; + } Navigation.navigate( isQuickSettingsFlow ? ROUTES.SETTINGS_CATEGORY_SETTINGS.getRoute(policyId, category.keyForList, backTo) diff --git a/src/pages/workspace/tags/WorkspaceTagsPage.tsx b/src/pages/workspace/tags/WorkspaceTagsPage.tsx index d5c72048f8a4..756f402b9182 100644 --- a/src/pages/workspace/tags/WorkspaceTagsPage.tsx +++ b/src/pages/workspace/tags/WorkspaceTagsPage.tsx @@ -1,6 +1,6 @@ -import {useFocusEffect, useIsFocused} from '@react-navigation/native'; +import {useFocusEffect} from '@react-navigation/native'; import lodashSortBy from 'lodash/sortBy'; -import React, {useCallback, useEffect, useMemo, useState} from 'react'; +import React, {useCallback, useMemo, useState} from 'react'; import {ActivityIndicator, View} from 'react-native'; import {useOnyx} from 'react-native-onyx'; import Button from '@components/Button'; @@ -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 useCleanupSelectedOptions from '@hooks/useCleanupSelectedOptions'; import useEnvironment from '@hooks/useEnvironment'; import useLocalize from '@hooks/useLocalize'; import useMobileSelectionMode from '@hooks/useMobileSelectionMode'; @@ -64,7 +65,6 @@ function WorkspaceTagsPage({route}: WorkspaceTagsPageProps) { const [isDownloadFailureModalVisible, setIsDownloadFailureModalVisible] = useState(false); const [isDeleteTagsConfirmModalVisible, setIsDeleteTagsConfirmModalVisible] = useState(false); const [isOfflineModalVisible, setIsOfflineModalVisible] = useState(false); - const isFocused = useIsFocused(); const policyID = route.params.policyID ?? '-1'; const backTo = route.params.backTo; const policy = usePolicy(policyID); @@ -87,12 +87,8 @@ function WorkspaceTagsPage({route}: WorkspaceTagsPageProps) { useFocusEffect(fetchTags); - useEffect(() => { - if (isFocused) { - return; - } - setSelectedTags({}); - }, [isFocused]); + const cleanupSelectedOption = useCallback(() => setSelectedTags({}), []); + useCleanupSelectedOptions(cleanupSelectedOption); const getPendingAction = (policyTagList: PolicyTagList): PendingAction | undefined => { if (!policyTagList) { @@ -176,6 +172,10 @@ function WorkspaceTagsPage({route}: WorkspaceTagsPageProps) { }; const navigateToTagSettings = (tag: TagListItem) => { + if (isSmallScreenWidth && selectionMode?.isEnabled) { + toggleTag(tag); + return; + } if (tag.orderWeight !== undefined) { Navigation.navigate( isQuickSettingsFlow ? ROUTES.SETTINGS_TAG_LIST_VIEW.getRoute(policyID, tag.orderWeight, backTo) : ROUTES.WORKSPACE_TAG_LIST_VIEW.getRoute(policyID, tag.orderWeight), diff --git a/src/pages/workspace/taxes/WorkspaceTaxesPage.tsx b/src/pages/workspace/taxes/WorkspaceTaxesPage.tsx index 9dbe739ae1db..94831f8dc8f5 100644 --- a/src/pages/workspace/taxes/WorkspaceTaxesPage.tsx +++ b/src/pages/workspace/taxes/WorkspaceTaxesPage.tsx @@ -1,5 +1,5 @@ -import {useFocusEffect, useIsFocused} from '@react-navigation/native'; -import React, {useCallback, useEffect, useMemo, useState} from 'react'; +import {useFocusEffect} from '@react-navigation/native'; +import React, {useCallback, useMemo, useState} from 'react'; import {ActivityIndicator, View} from 'react-native'; import {useOnyx} from 'react-native-onyx'; import Button from '@components/Button'; @@ -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 useCleanupSelectedOptions from '@hooks/useCleanupSelectedOptions'; import useEnvironment from '@hooks/useEnvironment'; import useLocalize from '@hooks/useLocalize'; import useMobileSelectionMode from '@hooks/useMobileSelectionMode'; @@ -51,7 +52,8 @@ function WorkspaceTaxesPage({ params: {policyID}, }, }: WorkspaceTaxesPageProps) { - const {shouldUseNarrowLayout} = useResponsiveLayout(); + // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth + const {shouldUseNarrowLayout, isSmallScreenWidth} = useResponsiveLayout(); const styles = useThemeStyles(); const theme = useTheme(); const {translate} = useLocalize(); @@ -61,7 +63,6 @@ function WorkspaceTaxesPage({ const {selectionMode} = useMobileSelectionMode(); const defaultExternalID = policy?.taxRates?.defaultExternalID; const foreignTaxDefault = policy?.taxRates?.foreignTaxDefault; - const isFocused = useIsFocused(); const hasAccountingConnections = PolicyUtils.hasAccountingConnections(policy); const [connectionSyncProgress] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY_CONNECTION_SYNC_PROGRESS}${policy?.id}`); const isSyncInProgress = isConnectionInProgress(connectionSyncProgress, policy); @@ -86,12 +87,8 @@ function WorkspaceTaxesPage({ }, [fetchTaxes]), ); - useEffect(() => { - if (isFocused) { - return; - } - setSelectedTaxesIDs([]); - }, [isFocused]); + const cleanupSelectedOption = useCallback(() => setSelectedTaxesIDs([]), []); + useCleanupSelectedOptions(cleanupSelectedOption); const textForDefault = useCallback( (taxID: string, taxRate: TaxRate): string => { @@ -192,6 +189,10 @@ function WorkspaceTaxesPage({ if (!taxRate.keyForList) { return; } + if (isSmallScreenWidth && selectionMode?.isEnabled) { + toggleTax(taxRate); + return; + } Navigation.navigate(ROUTES.WORKSPACE_TAX_EDIT.getRoute(policyID, taxRate.keyForList)); };