From 1b1f8de7654d883372ca1b1fe725576546a22120 Mon Sep 17 00:00:00 2001 From: dominictb Date: Thu, 19 Sep 2024 15:57:08 +0700 Subject: [PATCH 1/7] fix: dropdown title does not follow search name --- src/ROUTES.ts | 2 +- src/libs/Navigation/types.ts | 1 + src/pages/Search/SearchPageBottomTab.tsx | 6 +++++- src/pages/Search/SearchTypeMenu.tsx | 7 ++++--- 4 files changed, 11 insertions(+), 5 deletions(-) diff --git a/src/ROUTES.ts b/src/ROUTES.ts index 3238683379ea..3ebd854cef81 100644 --- a/src/ROUTES.ts +++ b/src/ROUTES.ts @@ -35,7 +35,7 @@ const ROUTES = { SEARCH_CENTRAL_PANE: { route: 'search', - getRoute: ({query}: {query: SearchQueryString}) => `search?q=${encodeURIComponent(query)}` as const, + getRoute: ({query, name}: {query: SearchQueryString; name?: string}) => `search?q=${encodeURIComponent(query)}${name ? `&name=${name}` : ''}` as const, }, SEARCH_SAVED_SEARCH_RENAME: { route: 'search/saved-search/rename', diff --git a/src/libs/Navigation/types.ts b/src/libs/Navigation/types.ts index a2e80454315a..127263a6659e 100644 --- a/src/libs/Navigation/types.ts +++ b/src/libs/Navigation/types.ts @@ -68,6 +68,7 @@ type CentralPaneScreensParamList = { [SCREENS.SEARCH.CENTRAL_PANE]: { q: SearchQueryString; + name?: string; }; [SCREENS.SETTINGS.SAVE_THE_WORLD]: undefined; [SCREENS.SETTINGS.SUBSCRIPTION.ROOT]: undefined; diff --git a/src/pages/Search/SearchPageBottomTab.tsx b/src/pages/Search/SearchPageBottomTab.tsx index 9226093154ae..9949c1861c9d 100644 --- a/src/pages/Search/SearchPageBottomTab.tsx +++ b/src/pages/Search/SearchPageBottomTab.tsx @@ -28,6 +28,7 @@ function SearchPageBottomTab() { const [selectionMode] = useOnyx(ONYXKEYS.MOBILE_SELECTION_MODE); const searchParams = activeCentralPaneRoute?.params as AuthScreensParamList[typeof SCREENS.SEARCH.CENTRAL_PANE]; const parsedQuery = SearchUtils.buildSearchQueryJSON(searchParams?.q); + const searchName = searchParams?.name; const policyIDFromSearchQuery = parsedQuery && SearchUtils.getPolicyIDFromSearchQuery(parsedQuery); const isActiveCentralPaneRoute = activeCentralPaneRoute?.name === SCREENS.SEARCH.CENTRAL_PANE; const queryJSON = isActiveCentralPaneRoute ? parsedQuery : undefined; @@ -54,7 +55,10 @@ function SearchPageBottomTab() { shouldDisplaySearch={false} isCustomSearchQuery={shouldUseNarrowLayout && !SearchUtils.isCannedSearchQuery(queryJSON)} /> - + ) : ( { SearchActions.clearAllFilters(); - Navigation.navigate(ROUTES.SEARCH_CENTRAL_PANE.getRoute({query: item?.query ?? ''})); + Navigation.navigate(ROUTES.SEARCH_CENTRAL_PANE.getRoute({query: item?.query ?? '', name: item?.name})); }, rightComponent: , styles: [styles.alignItemsCenter], @@ -202,7 +203,7 @@ function SearchTypeMenu({queryJSON}: SearchTypeMenuProps) { const activeItemIndex = isCannedQuery ? typeMenuItems.findIndex((item) => item.type === type) : -1; if (shouldUseNarrowLayout) { - const title = isCannedQuery ? undefined : SearchUtils.getSearchHeaderTitle(queryJSON, personalDetails, cardList, reports, taxRates); + const title = searchName ?? (isCannedQuery ? undefined : SearchUtils.getSearchHeaderTitle(queryJSON, personalDetails, cardList, reports, taxRates)); return ( Date: Thu, 19 Sep 2024 17:09:14 +0700 Subject: [PATCH 2/7] fix: add name param on rename --- src/pages/Search/SavedSearchRenamePage.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/pages/Search/SavedSearchRenamePage.tsx b/src/pages/Search/SavedSearchRenamePage.tsx index 0460ecae5317..d32bbafd9958 100644 --- a/src/pages/Search/SavedSearchRenamePage.tsx +++ b/src/pages/Search/SavedSearchRenamePage.tsx @@ -26,6 +26,7 @@ function SavedSearchRenamePage({route}: {route: {params: {q: string; name: strin Navigation.navigate( ROUTES.SEARCH_CENTRAL_PANE.getRoute({ query: q, + name: newName, }), ); }; From e958365eda4de01528abf007559412b86a6071cd Mon Sep 17 00:00:00 2001 From: dominictb Date: Mon, 23 Sep 2024 11:25:04 +0700 Subject: [PATCH 3/7] fix: remove filter icon --- src/pages/Search/SearchTypeMenuNarrow.tsx | 21 +++++++++++++++++++-- 1 file changed, 19 insertions(+), 2 deletions(-) diff --git a/src/pages/Search/SearchTypeMenuNarrow.tsx b/src/pages/Search/SearchTypeMenuNarrow.tsx index 0158a15bfc41..1d8c1497028c 100644 --- a/src/pages/Search/SearchTypeMenuNarrow.tsx +++ b/src/pages/Search/SearchTypeMenuNarrow.tsx @@ -1,6 +1,7 @@ import React, {useCallback, useMemo, useRef, useState} from 'react'; import {Animated, View} from 'react-native'; import type {TextStyle, ViewStyle} from 'react-native'; +import type {SvgProps} from 'react-native-svg'; import Button from '@components/Button'; import Icon from '@components/Icon'; import type {MenuItemBaseProps} from '@components/MenuItem'; @@ -24,6 +25,7 @@ import variables from '@styles/variables'; import * as Expensicons from '@src/components/Icon/Expensicons'; import CONST from '@src/CONST'; import ROUTES from '@src/ROUTES'; +import type IconAsset from '@src/types/utils/IconAsset'; import type {SearchTypeMenuItem} from './SearchTypeMenu'; type SavedSearchMenuItem = MenuItemBaseProps & { @@ -41,6 +43,22 @@ type SearchTypeMenuNarrowProps = { savedSearchesMenuItems: SavedSearchMenuItem[]; }; +type PopoverMenuItemType = { + text: string; + onSelected: () => void; + isSelected: boolean; + icon?: IconAsset; + iconFill: string; + iconRight: React.FC; + shouldShowRightIcon: boolean; + success: boolean; + containerStyle: + | { + backgroundColor: string; + }[] + | undefined; +}; + function SearchTypeMenuNarrow({typeMenuItems, activeItemIndex, queryJSON, title, savedSearchesMenuItems}: SearchTypeMenuNarrowProps) { const theme = useTheme(); const styles = useThemeStyles(); @@ -65,7 +83,7 @@ function SearchTypeMenuNarrow({typeMenuItems, activeItemIndex, queryJSON, title, const currentSavedSearch = savedSearchesMenuItems.find((item) => Number(item.hash) === hash); const popoverMenuItems = useMemo(() => { - const items = typeMenuItems.map((item, index) => { + const items: PopoverMenuItemType[] = typeMenuItems.map((item, index) => { const isSelected = title ? false : index === activeItemIndex; return { @@ -89,7 +107,6 @@ function SearchTypeMenuNarrow({typeMenuItems, activeItemIndex, queryJSON, title, text: title, onSelected: closeMenu, isSelected: !currentSavedSearch, - icon: Expensicons.Filters, iconFill: theme.iconSuccessFill, success: true, containerStyle: undefined, From baae9637590d3427bac1afd155bdbae563defd49 Mon Sep 17 00:00:00 2001 From: dominictb Date: Mon, 23 Sep 2024 11:29:16 +0700 Subject: [PATCH 4/7] fix: lint --- src/pages/Search/SearchTypeMenuNarrow.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/Search/SearchTypeMenuNarrow.tsx b/src/pages/Search/SearchTypeMenuNarrow.tsx index 1d8c1497028c..2523c4ea35af 100644 --- a/src/pages/Search/SearchTypeMenuNarrow.tsx +++ b/src/pages/Search/SearchTypeMenuNarrow.tsx @@ -53,9 +53,9 @@ type PopoverMenuItemType = { shouldShowRightIcon: boolean; success: boolean; containerStyle: - | { + | Array<{ backgroundColor: string; - }[] + }> | undefined; }; From a098f3b96ab788e4840124e23f8fbf0e9677ab9b Mon Sep 17 00:00:00 2001 From: dominictb Date: Mon, 23 Sep 2024 11:33:33 +0700 Subject: [PATCH 5/7] fix: remove canned menu when viewing saved search --- src/pages/Search/SearchTypeMenuNarrow.tsx | 33 +---------------------- 1 file changed, 1 insertion(+), 32 deletions(-) diff --git a/src/pages/Search/SearchTypeMenuNarrow.tsx b/src/pages/Search/SearchTypeMenuNarrow.tsx index 2523c4ea35af..6c1fb0f920c3 100644 --- a/src/pages/Search/SearchTypeMenuNarrow.tsx +++ b/src/pages/Search/SearchTypeMenuNarrow.tsx @@ -1,7 +1,6 @@ import React, {useCallback, useMemo, useRef, useState} from 'react'; import {Animated, View} from 'react-native'; import type {TextStyle, ViewStyle} from 'react-native'; -import type {SvgProps} from 'react-native-svg'; import Button from '@components/Button'; import Icon from '@components/Icon'; import type {MenuItemBaseProps} from '@components/MenuItem'; @@ -25,7 +24,6 @@ import variables from '@styles/variables'; import * as Expensicons from '@src/components/Icon/Expensicons'; import CONST from '@src/CONST'; import ROUTES from '@src/ROUTES'; -import type IconAsset from '@src/types/utils/IconAsset'; import type {SearchTypeMenuItem} from './SearchTypeMenu'; type SavedSearchMenuItem = MenuItemBaseProps & { @@ -43,22 +41,6 @@ type SearchTypeMenuNarrowProps = { savedSearchesMenuItems: SavedSearchMenuItem[]; }; -type PopoverMenuItemType = { - text: string; - onSelected: () => void; - isSelected: boolean; - icon?: IconAsset; - iconFill: string; - iconRight: React.FC; - shouldShowRightIcon: boolean; - success: boolean; - containerStyle: - | Array<{ - backgroundColor: string; - }> - | undefined; -}; - function SearchTypeMenuNarrow({typeMenuItems, activeItemIndex, queryJSON, title, savedSearchesMenuItems}: SearchTypeMenuNarrowProps) { const theme = useTheme(); const styles = useThemeStyles(); @@ -83,7 +65,7 @@ function SearchTypeMenuNarrow({typeMenuItems, activeItemIndex, queryJSON, title, const currentSavedSearch = savedSearchesMenuItems.find((item) => Number(item.hash) === hash); const popoverMenuItems = useMemo(() => { - const items: PopoverMenuItemType[] = typeMenuItems.map((item, index) => { + const items = typeMenuItems.map((item, index) => { const isSelected = title ? false : index === activeItemIndex; return { @@ -102,19 +84,6 @@ function SearchTypeMenuNarrow({typeMenuItems, activeItemIndex, queryJSON, title, }; }); - if (title) { - items.push({ - text: title, - onSelected: closeMenu, - isSelected: !currentSavedSearch, - iconFill: theme.iconSuccessFill, - success: true, - containerStyle: undefined, - iconRight: Expensicons.Checkmark, - shouldShowRightIcon: false, - }); - } - return items; }, [typeMenuItems, activeItemIndex, title, theme, singleExecution, closeMenu, currentSavedSearch]); From 611e352e725b57b3f3e682e1f021f73fcc40f503 Mon Sep 17 00:00:00 2001 From: dominictb Date: Mon, 23 Sep 2024 11:36:06 +0700 Subject: [PATCH 6/7] fix: lint --- 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 6c1fb0f920c3..7b52cd41279e 100644 --- a/src/pages/Search/SearchTypeMenuNarrow.tsx +++ b/src/pages/Search/SearchTypeMenuNarrow.tsx @@ -85,7 +85,7 @@ function SearchTypeMenuNarrow({typeMenuItems, activeItemIndex, queryJSON, title, }); return items; - }, [typeMenuItems, activeItemIndex, title, theme, singleExecution, closeMenu, currentSavedSearch]); + }, [typeMenuItems, activeItemIndex, title, theme, singleExecution]); const menuIcon = useMemo(() => (title ? Expensicons.Filters : popoverMenuItems[activeItemIndex]?.icon ?? Expensicons.Receipt), [activeItemIndex, popoverMenuItems, title]); const menuTitle = useMemo(() => title ?? popoverMenuItems[activeItemIndex]?.text, [activeItemIndex, popoverMenuItems, title]); From fa3f9f61a388e581c806c7ecf2a41c55005a913f Mon Sep 17 00:00:00 2001 From: dominictb Date: Mon, 23 Sep 2024 12:31:01 +0700 Subject: [PATCH 7/7] fix: remove saved search menu item when viewing saved search --- src/pages/Search/SearchTypeMenuNarrow.tsx | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/src/pages/Search/SearchTypeMenuNarrow.tsx b/src/pages/Search/SearchTypeMenuNarrow.tsx index 7b52cd41279e..d43449fec7c1 100644 --- a/src/pages/Search/SearchTypeMenuNarrow.tsx +++ b/src/pages/Search/SearchTypeMenuNarrow.tsx @@ -84,8 +84,22 @@ function SearchTypeMenuNarrow({typeMenuItems, activeItemIndex, queryJSON, title, }; }); + if (title && !currentSavedSearch) { + items.push({ + text: title, + onSelected: closeMenu, + isSelected: !currentSavedSearch, + icon: Expensicons.Filters, + iconFill: theme.iconSuccessFill, + success: true, + containerStyle: undefined, + iconRight: Expensicons.Checkmark, + shouldShowRightIcon: false, + }); + } + return items; - }, [typeMenuItems, activeItemIndex, title, theme, singleExecution]); + }, [typeMenuItems, activeItemIndex, title, theme, singleExecution, closeMenu, currentSavedSearch]); const menuIcon = useMemo(() => (title ? Expensicons.Filters : popoverMenuItems[activeItemIndex]?.icon ?? Expensicons.Receipt), [activeItemIndex, popoverMenuItems, title]); const menuTitle = useMemo(() => title ?? popoverMenuItems[activeItemIndex]?.text, [activeItemIndex, popoverMenuItems, title]);