From 0d263c3c36139792d74afe447c69e466784c96d0 Mon Sep 17 00:00:00 2001 From: Rayane Djouah <77965000+rayane-djouah@users.noreply.github.com> Date: Tue, 7 Jan 2025 19:48:26 +0100 Subject: [PATCH 1/7] Fix: Reports - "Customize your search" tooltip reappears while creating an expense --- src/pages/Search/SearchTypeMenuNarrow.tsx | 19 +++++++++++++++++-- 1 file changed, 17 insertions(+), 2 deletions(-) diff --git a/src/pages/Search/SearchTypeMenuNarrow.tsx b/src/pages/Search/SearchTypeMenuNarrow.tsx index 25725486d7c99..6ba2d1089e781 100644 --- a/src/pages/Search/SearchTypeMenuNarrow.tsx +++ b/src/pages/Search/SearchTypeMenuNarrow.tsx @@ -1,4 +1,4 @@ -import React, {useCallback, useMemo, useRef, useState} from 'react'; +import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react'; import {Animated, View} from 'react-native'; import type {TextStyle, ViewStyle} from 'react-native'; import {useOnyx} from 'react-native-onyx'; @@ -24,7 +24,7 @@ import useThemeStyles from '@hooks/useThemeStyles'; import useWindowDimensions from '@hooks/useWindowDimensions'; import * as SearchActions from '@libs/actions/Search'; import getPlatform from '@libs/getPlatform'; -import Navigation from '@libs/Navigation/Navigation'; +import Navigation, {navigationRef} from '@libs/Navigation/Navigation'; import {getAllTaxRates} from '@libs/PolicyUtils'; import * as SearchQueryUtils from '@libs/SearchQueryUtils'; import * as SearchUIUtils from '@libs/SearchUIUtils'; @@ -33,6 +33,7 @@ import * as Expensicons from '@src/components/Icon/Expensicons'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; +import SCREENS from '@src/SCREENS'; import type {SearchTypeMenuItem} from './SearchTypeMenu'; type SavedSearchMenuItem = MenuItemWithLink & { @@ -77,8 +78,22 @@ function SearchTypeMenuNarrow({typeMenuItems, activeItemIndex, queryJSON, title, const openMenu = useCallback(() => setIsPopoverVisible(true), []); const closeMenu = useCallback(() => setIsPopoverVisible(false), []); + const [currentScreen, setCurrentScreen] = useState(); + const removeListener = useRef<() => void>(); + + useEffect(() => { + Navigation.isNavigationReady().then(() => { + const initialRoute = navigationRef.current?.getCurrentRoute(); + setCurrentScreen(initialRoute?.name); + removeListener.current = navigationRef.current?.addListener('state', (event) => { + setCurrentScreen(Navigation.getRouteNameFromStateEvent(event)); + }); + }); + }, []); + const {renderProductTrainingTooltip, shouldShowProductTrainingTooltip, hideProductTrainingTooltip} = useProductTrainingContext( CONST.PRODUCT_TRAINING_TOOLTIP_NAMES.SEARCH_FILTER_BUTTON_TOOLTIP, + currentScreen === SCREENS.SEARCH.CENTRAL_PANE, ); const onPress = () => { From 0a7f69cccc1aa06865bc062ab19621d574fda003 Mon Sep 17 00:00:00 2001 From: Rayane Djouah <77965000+rayane-djouah@users.noreply.github.com> Date: Tue, 7 Jan 2025 19:51:39 +0100 Subject: [PATCH 2/7] Clean up navigation listener --- src/pages/Search/SearchTypeMenuNarrow.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/pages/Search/SearchTypeMenuNarrow.tsx b/src/pages/Search/SearchTypeMenuNarrow.tsx index 6ba2d1089e781..69c24b52ed2e2 100644 --- a/src/pages/Search/SearchTypeMenuNarrow.tsx +++ b/src/pages/Search/SearchTypeMenuNarrow.tsx @@ -83,6 +83,7 @@ function SearchTypeMenuNarrow({typeMenuItems, activeItemIndex, queryJSON, title, useEffect(() => { Navigation.isNavigationReady().then(() => { + removeListener.current?.(); const initialRoute = navigationRef.current?.getCurrentRoute(); setCurrentScreen(initialRoute?.name); removeListener.current = navigationRef.current?.addListener('state', (event) => { From fecf2a1fa4dbccea034bc7e37e47adcf2bb3fc32 Mon Sep 17 00:00:00 2001 From: Rayane Djouah <77965000+rayane-djouah@users.noreply.github.com> Date: Tue, 7 Jan 2025 19:52:48 +0100 Subject: [PATCH 3/7] reorder --- src/pages/Search/SearchTypeMenuNarrow.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/Search/SearchTypeMenuNarrow.tsx b/src/pages/Search/SearchTypeMenuNarrow.tsx index 69c24b52ed2e2..29c872d2cf9a3 100644 --- a/src/pages/Search/SearchTypeMenuNarrow.tsx +++ b/src/pages/Search/SearchTypeMenuNarrow.tsx @@ -82,8 +82,8 @@ function SearchTypeMenuNarrow({typeMenuItems, activeItemIndex, queryJSON, title, const removeListener = useRef<() => void>(); useEffect(() => { + removeListener.current?.(); Navigation.isNavigationReady().then(() => { - removeListener.current?.(); const initialRoute = navigationRef.current?.getCurrentRoute(); setCurrentScreen(initialRoute?.name); removeListener.current = navigationRef.current?.addListener('state', (event) => { From 9446444d6199de8e523b5b23a735d74706d5aae1 Mon Sep 17 00:00:00 2001 From: Rayane Djouah <77965000+rayane-djouah@users.noreply.github.com> Date: Tue, 7 Jan 2025 20:02:39 +0100 Subject: [PATCH 4/7] Refactor --- src/pages/Search/SearchTypeMenuNarrow.tsx | 17 +++++++++++------ 1 file changed, 11 insertions(+), 6 deletions(-) diff --git a/src/pages/Search/SearchTypeMenuNarrow.tsx b/src/pages/Search/SearchTypeMenuNarrow.tsx index 29c872d2cf9a3..41137420f3739 100644 --- a/src/pages/Search/SearchTypeMenuNarrow.tsx +++ b/src/pages/Search/SearchTypeMenuNarrow.tsx @@ -78,23 +78,28 @@ function SearchTypeMenuNarrow({typeMenuItems, activeItemIndex, queryJSON, title, const openMenu = useCallback(() => setIsPopoverVisible(true), []); const closeMenu = useCallback(() => setIsPopoverVisible(false), []); - const [currentScreen, setCurrentScreen] = useState(); + const [isScreenFocused, setIsScreenFocused] = useState(false); const removeListener = useRef<() => void>(); useEffect(() => { - removeListener.current?.(); + if (removeListener.current !== undefined) { + removeListener.current?.(); + removeListener.current = undefined; + } Navigation.isNavigationReady().then(() => { - const initialRoute = navigationRef.current?.getCurrentRoute(); - setCurrentScreen(initialRoute?.name); removeListener.current = navigationRef.current?.addListener('state', (event) => { - setCurrentScreen(Navigation.getRouteNameFromStateEvent(event)); + if (Navigation.getRouteNameFromStateEvent(event) === SCREENS.SEARCH.CENTRAL_PANE) { + setIsScreenFocused(true); + return; + } + setIsScreenFocused(false); }); }); }, []); const {renderProductTrainingTooltip, shouldShowProductTrainingTooltip, hideProductTrainingTooltip} = useProductTrainingContext( CONST.PRODUCT_TRAINING_TOOLTIP_NAMES.SEARCH_FILTER_BUTTON_TOOLTIP, - currentScreen === SCREENS.SEARCH.CENTRAL_PANE, + isScreenFocused, ); const onPress = () => { From ec5245b6416fe258dcf85b498dc2851ab842e683 Mon Sep 17 00:00:00 2001 From: Rayane Djouah <77965000+rayane-djouah@users.noreply.github.com> Date: Tue, 7 Jan 2025 21:03:59 +0100 Subject: [PATCH 5/7] check initial route --- src/pages/Search/SearchTypeMenuNarrow.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/pages/Search/SearchTypeMenuNarrow.tsx b/src/pages/Search/SearchTypeMenuNarrow.tsx index 41137420f3739..d47831bea26df 100644 --- a/src/pages/Search/SearchTypeMenuNarrow.tsx +++ b/src/pages/Search/SearchTypeMenuNarrow.tsx @@ -87,6 +87,8 @@ function SearchTypeMenuNarrow({typeMenuItems, activeItemIndex, queryJSON, title, removeListener.current = undefined; } Navigation.isNavigationReady().then(() => { + const initialRoute = navigationRef.current?.getCurrentRoute(); + setIsScreenFocused(initialRoute?.name === SCREENS.SEARCH.CENTRAL_PANE); removeListener.current = navigationRef.current?.addListener('state', (event) => { if (Navigation.getRouteNameFromStateEvent(event) === SCREENS.SEARCH.CENTRAL_PANE) { setIsScreenFocused(true); From efaca97fd079935d7674f7d32078a710b3bc1b7e Mon Sep 17 00:00:00 2001 From: Rayane Djouah <77965000+rayane-djouah@users.noreply.github.com> Date: Tue, 7 Jan 2025 21:13:56 +0100 Subject: [PATCH 6/7] refactor --- src/pages/Search/SearchTypeMenuNarrow.tsx | 26 +++++++++-------------- 1 file changed, 10 insertions(+), 16 deletions(-) diff --git a/src/pages/Search/SearchTypeMenuNarrow.tsx b/src/pages/Search/SearchTypeMenuNarrow.tsx index d47831bea26df..091120a98aaea 100644 --- a/src/pages/Search/SearchTypeMenuNarrow.tsx +++ b/src/pages/Search/SearchTypeMenuNarrow.tsx @@ -1,3 +1,4 @@ +import type {EventArg, NavigationContainerEventMap} from '@react-navigation/native'; import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react'; import {Animated, View} from 'react-native'; import type {TextStyle, ViewStyle} from 'react-native'; @@ -79,24 +80,17 @@ function SearchTypeMenuNarrow({typeMenuItems, activeItemIndex, queryJSON, title, const closeMenu = useCallback(() => setIsPopoverVisible(false), []); const [isScreenFocused, setIsScreenFocused] = useState(false); - const removeListener = useRef<() => void>(); useEffect(() => { - if (removeListener.current !== undefined) { - removeListener.current?.(); - removeListener.current = undefined; - } - Navigation.isNavigationReady().then(() => { - const initialRoute = navigationRef.current?.getCurrentRoute(); - setIsScreenFocused(initialRoute?.name === SCREENS.SEARCH.CENTRAL_PANE); - removeListener.current = navigationRef.current?.addListener('state', (event) => { - if (Navigation.getRouteNameFromStateEvent(event) === SCREENS.SEARCH.CENTRAL_PANE) { - setIsScreenFocused(true); - return; - } - setIsScreenFocused(false); - }); - }); + const listener = (event: EventArg<'state', false, NavigationContainerEventMap['state']['data']>) => { + if (Navigation.getRouteNameFromStateEvent(event) === SCREENS.SEARCH.CENTRAL_PANE) { + setIsScreenFocused(true); + return; + } + setIsScreenFocused(false); + }; + navigationRef.addListener('state', listener); + return () => navigationRef.removeListener('state', listener); }, []); const {renderProductTrainingTooltip, shouldShowProductTrainingTooltip, hideProductTrainingTooltip} = useProductTrainingContext( From d8171c4437b084adbad2dcbb2102413b8c2eb803 Mon Sep 17 00:00:00 2001 From: Rayane Djouah <77965000+rayane-djouah@users.noreply.github.com> Date: Tue, 7 Jan 2025 23:05:11 +0100 Subject: [PATCH 7/7] Fix: inbox button tooltip appears while creating an expense from search page --- src/hooks/useBottomTabIsFocused.ts | 19 ++++++++++++++++++- 1 file changed, 18 insertions(+), 1 deletion(-) diff --git a/src/hooks/useBottomTabIsFocused.ts b/src/hooks/useBottomTabIsFocused.ts index f996d535a651c..90b74097ecd86 100644 --- a/src/hooks/useBottomTabIsFocused.ts +++ b/src/hooks/useBottomTabIsFocused.ts @@ -1,12 +1,29 @@ +import type {EventArg, NavigationContainerEventMap} from '@react-navigation/native'; import {useIsFocused, useNavigationState} from '@react-navigation/native'; +import {useEffect, useState} from 'react'; import CENTRAL_PANE_SCREENS from '@libs/Navigation/AppNavigator/CENTRAL_PANE_SCREENS'; import getTopmostCentralPaneRoute from '@libs/Navigation/getTopmostCentralPaneRoute'; import getTopmostFullScreenRoute from '@libs/Navigation/getTopmostFullScreenRoute'; +import Navigation, {navigationRef} from '@libs/Navigation/Navigation'; import type {CentralPaneName, FullScreenName, NavigationPartialRoute, RootStackParamList} from '@libs/Navigation/types'; import SCREENS from '@src/SCREENS'; import useResponsiveLayout from './useResponsiveLayout'; const useBottomTabIsFocused = () => { + const [isScreenFocused, setIsScreenFocused] = useState(false); + useEffect(() => { + const listener = (event: EventArg<'state', false, NavigationContainerEventMap['state']['data']>) => { + const routName = Navigation.getRouteNameFromStateEvent(event); + if (routName === SCREENS.SEARCH.CENTRAL_PANE || routName === SCREENS.SETTINGS_CENTRAL_PANE || routName === SCREENS.HOME) { + setIsScreenFocused(true); + return; + } + setIsScreenFocused(false); + }; + navigationRef.addListener('state', listener); + return () => navigationRef.removeListener('state', listener); + }, []); + const {shouldUseNarrowLayout} = useResponsiveLayout(); const isFocused = useIsFocused(); const topmostFullScreenName = useNavigationState | undefined>(getTopmostFullScreenRoute); @@ -18,7 +35,7 @@ const useBottomTabIsFocused = () => { } // On the Search screen, isFocused returns false, but it is actually focused if (shouldUseNarrowLayout) { - return isFocused || topmostCentralPane?.name === SCREENS.SEARCH.CENTRAL_PANE; + return isFocused || isScreenFocused; } // On desktop screen sizes, isFocused always returns false, so we cannot rely on it alone to determine if the bottom tab is focused return isFocused || Object.keys(CENTRAL_PANE_SCREENS).includes(topmostCentralPane?.name ?? '');