From b666cdd9c18e84f9df0c1faf392d900c72212320 Mon Sep 17 00:00:00 2001 From: Carlos Martins Date: Fri, 9 Aug 2024 19:15:19 +0300 Subject: [PATCH 01/31] create buildCannedSearchQuery --- .../createCustomBottomTabNavigator/BottomTabBar.tsx | 6 +++--- src/libs/Navigation/switchPolicyID.ts | 3 ++- src/libs/SearchUtils.ts | 5 +++++ src/pages/Search/SearchPage.tsx | 8 +++----- src/pages/Search/SearchPageBottomTab.tsx | 7 +++---- src/pages/Search/SearchStatusMenu.tsx | 9 ++++----- .../settings/Subscription/CardSection/CardSection.tsx | 3 ++- 7 files changed, 22 insertions(+), 19 deletions(-) diff --git a/src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/BottomTabBar.tsx b/src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/BottomTabBar.tsx index 95d6446aaf1e..7aed5d65fec0 100644 --- a/src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/BottomTabBar.tsx +++ b/src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/BottomTabBar.tsx @@ -17,7 +17,7 @@ import getAdaptedStateFromPath from '@libs/Navigation/linkingConfig/getAdaptedSt import Navigation, {navigationRef} from '@libs/Navigation/Navigation'; import type {RootStackParamList, State} from '@libs/Navigation/types'; import {isCentralPaneName} from '@libs/NavigationUtils'; -import {getCurrentSearchParams} from '@libs/SearchUtils'; +import * as SearchUtils from '@libs/SearchUtils'; import {getChatTabBrickRoad} from '@libs/WorkspacesSettingsUtils'; import BottomTabAvatar from '@pages/home/sidebar/BottomTabAvatar'; import BottomTabBarFloatingActionButton from '@pages/home/sidebar/BottomTabBarFloatingActionButton'; @@ -81,13 +81,13 @@ function BottomTabBar({selectedTab}: BottomTabBarProps) { return; } interceptAnonymousUser(() => { - const currentSearchParams = getCurrentSearchParams(); + const currentSearchParams = SearchUtils.getCurrentSearchParams(); if (currentSearchParams) { const {q, ...rest} = currentSearchParams; Navigation.navigate(ROUTES.SEARCH_CENTRAL_PANE.getRoute({query: q, ...rest})); return; } - Navigation.navigate(ROUTES.SEARCH_CENTRAL_PANE.getRoute({query: CONST.SEARCH.TAB.EXPENSE.ALL})); + Navigation.navigate(ROUTES.SEARCH_CENTRAL_PANE.getRoute({query: SearchUtils.buildCannedSearchQuery()})); }); }, [selectedTab]); diff --git a/src/libs/Navigation/switchPolicyID.ts b/src/libs/Navigation/switchPolicyID.ts index 28de413b0904..a37ccb0c2506 100644 --- a/src/libs/Navigation/switchPolicyID.ts +++ b/src/libs/Navigation/switchPolicyID.ts @@ -4,6 +4,7 @@ import {getPathFromState} from '@react-navigation/native'; import type {Writable} from 'type-fest'; import getIsNarrowLayout from '@libs/getIsNarrowLayout'; import {isCentralPaneName} from '@libs/NavigationUtils'; +import * as SearchUtils from '@libs/SearchUtils'; import CONST from '@src/CONST'; import type {Route} from '@src/ROUTES'; import ROUTES from '@src/ROUTES'; @@ -84,7 +85,7 @@ export default function switchPolicyID(navigation: NavigationContainerRef>; const action: StackNavigationAction = getActionFromState(stateFromPath, linkingConfig.config); diff --git a/src/libs/SearchUtils.ts b/src/libs/SearchUtils.ts index 8e5c39dd33b3..1e9108be18aa 100644 --- a/src/libs/SearchUtils.ts +++ b/src/libs/SearchUtils.ts @@ -546,6 +546,10 @@ function getSearchHeaderTitle(queryJSON: SearchQueryJSON) { return title; } +function buildCannedSearchQuery(type: SearchDataTypes = CONST.SEARCH.DATA_TYPES.EXPENSE, status: SearchStatus = CONST.SEARCH.STATUS.EXPENSE.ALL): string { + return normalizeQuery(`type:${type} status:${status}`); +} + export { buildQueryStringFromFilters, buildSearchQueryJSON, @@ -564,4 +568,5 @@ export { isTransactionListItemType, normalizeQuery, shouldShowYear, + buildCannedSearchQuery, }; diff --git a/src/pages/Search/SearchPage.tsx b/src/pages/Search/SearchPage.tsx index e2495c02d44f..d5725c2d40a2 100644 --- a/src/pages/Search/SearchPage.tsx +++ b/src/pages/Search/SearchPage.tsx @@ -7,8 +7,7 @@ import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useThemeStyles from '@hooks/useThemeStyles'; import Navigation from '@libs/Navigation/Navigation'; import type {AuthScreensParamList} from '@libs/Navigation/types'; -import {buildSearchQueryJSON} from '@libs/SearchUtils'; -import CONST from '@src/CONST'; +import * as SearchUtils from '@libs/SearchUtils'; import ROUTES from '@src/ROUTES'; import type SCREENS from '@src/SCREENS'; @@ -19,9 +18,8 @@ function SearchPage({route}: SearchPageProps) { const styles = useThemeStyles(); const {policyIDs, q, isCustomQuery} = route.params; - const queryJSON = useMemo(() => buildSearchQueryJSON(q, policyIDs), [q, policyIDs]); - - const handleOnBackButtonPress = () => Navigation.goBack(ROUTES.SEARCH_CENTRAL_PANE.getRoute({query: CONST.SEARCH.TAB.EXPENSE.ALL})); + const queryJSON = useMemo(() => SearchUtils.buildSearchQueryJSON(q, policyIDs), [q, policyIDs]); + const handleOnBackButtonPress = () => Navigation.goBack(ROUTES.SEARCH_CENTRAL_PANE.getRoute({query: SearchUtils.buildCannedSearchQuery()})); // On small screens this page is not displayed, the configuration is in the file: src/libs/Navigation/AppNavigator/createCustomStackNavigator/index.tsx // To avoid calling hooks in the Search component when this page isn't visible, we return null here. diff --git a/src/pages/Search/SearchPageBottomTab.tsx b/src/pages/Search/SearchPageBottomTab.tsx index 1b9e81c8a035..286939ac3382 100644 --- a/src/pages/Search/SearchPageBottomTab.tsx +++ b/src/pages/Search/SearchPageBottomTab.tsx @@ -12,9 +12,8 @@ import useThemeStyles from '@hooks/useThemeStyles'; import {turnOffMobileSelectionMode} from '@libs/actions/MobileSelectionMode'; import Navigation from '@libs/Navigation/Navigation'; import type {AuthScreensParamList} from '@libs/Navigation/types'; -import {buildSearchQueryJSON} from '@libs/SearchUtils'; +import * as SearchUtils from '@libs/SearchUtils'; import TopBar from '@navigation/AppNavigator/createCustomBottomTabNavigator/TopBar'; -import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; import SCREENS from '@src/SCREENS'; @@ -37,13 +36,13 @@ function SearchPageBottomTab() { const searchParams = activeCentralPaneRoute.params as AuthScreensParamList[typeof SCREENS.SEARCH.CENTRAL_PANE]; return { - queryJSON: buildSearchQueryJSON(searchParams.q, searchParams.policyIDs), + queryJSON: SearchUtils.buildSearchQueryJSON(searchParams.q, searchParams.policyIDs), policyIDs: searchParams.policyIDs, isCustomQuery: searchParams.isCustomQuery, }; }, [activeCentralPaneRoute]); - const handleOnBackButtonPress = () => Navigation.goBack(ROUTES.SEARCH_CENTRAL_PANE.getRoute({query: CONST.SEARCH.TAB.EXPENSE.ALL})); + const handleOnBackButtonPress = () => Navigation.goBack(ROUTES.SEARCH_CENTRAL_PANE.getRoute({query: SearchUtils.buildCannedSearchQuery()})); return ( item.status === status); diff --git a/src/pages/settings/Subscription/CardSection/CardSection.tsx b/src/pages/settings/Subscription/CardSection/CardSection.tsx index 25a201bf6887..3fb8507cf14c 100644 --- a/src/pages/settings/Subscription/CardSection/CardSection.tsx +++ b/src/pages/settings/Subscription/CardSection/CardSection.tsx @@ -14,6 +14,7 @@ import useSubscriptionPlan from '@hooks/useSubscriptionPlan'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import * as User from '@libs/actions/User'; +import * as SearchUtils from '@libs/SearchUtils'; import DateUtils from '@libs/DateUtils'; import Navigation from '@libs/Navigation/Navigation'; import {getPaymentMethodDescription} from '@libs/PaymentUtils'; @@ -148,7 +149,7 @@ function CardSection() { wrapperStyle={styles.sectionMenuItemTopDescription} title={translate('subscription.cardSection.viewPaymentHistory')} titleStyle={styles.textStrong} - onPress={() => Navigation.navigate(ROUTES.SEARCH_CENTRAL_PANE.getRoute({query: CONST.SEARCH.TAB.EXPENSE.ALL}))} + onPress={() => Navigation.navigate(ROUTES.SEARCH_CENTRAL_PANE.getRoute({query: SearchUtils.buildCannedSearchQuery()}))} hoverAndPressStyle={styles.hoveredComponentBG} /> )} From 22aa4c8d432f0c47026aac04f14836b740b2f38f Mon Sep 17 00:00:00 2001 From: Carlos Martins Date: Fri, 9 Aug 2024 19:15:33 +0300 Subject: [PATCH 02/31] rm const --- src/CONST.ts | 8 -------- 1 file changed, 8 deletions(-) diff --git a/src/CONST.ts b/src/CONST.ts index 434e92b4bd1e..08d29b8eb933 100755 --- a/src/CONST.ts +++ b/src/CONST.ts @@ -5285,14 +5285,6 @@ const CONST = { PAID: 'paid', }, }, - TAB: { - EXPENSE: { - ALL: 'type:expense status:all', - SHARED: 'type:expense status:shared', - DRAFTS: 'type:expense status:drafts', - FINISHED: 'type:expense status:finished', - }, - }, TABLE_COLUMNS: { RECEIPT: 'receipt', DATE: 'date', From d19b0c454e269bc12d98b1e2885a438e2eb5f29a Mon Sep 17 00:00:00 2001 From: Carlos Martins Date: Fri, 9 Aug 2024 19:45:44 +0300 Subject: [PATCH 03/31] rename components --- src/languages/en.ts | 1 + src/languages/es.ts | 1 + src/pages/Search/SearchPageBottomTab.tsx | 4 +- ...earchStatusMenu.tsx => SearchTypeMenu.tsx} | 55 +++++++++---------- ...enuNarrow.tsx => SearchTypeMenuNarrow.tsx} | 14 ++--- 5 files changed, 36 insertions(+), 39 deletions(-) rename src/pages/Search/{SearchStatusMenu.tsx => SearchTypeMenu.tsx} (61%) rename src/pages/Search/{SearchStatusMenuNarrow.tsx => SearchTypeMenuNarrow.tsx} (91%) diff --git a/src/languages/en.ts b/src/languages/en.ts index 22b6cf5a820d..336ac793cbee 100755 --- a/src/languages/en.ts +++ b/src/languages/en.ts @@ -2059,6 +2059,7 @@ export default { viewTrip: 'View trip', viewTripDetails: 'View trip details', trip: 'Trip', + trips: 'Trips', tripSummary: 'Trip summary', departs: 'Departs', errorMessage: 'Something went wrong. Please try again later.', diff --git a/src/languages/es.ts b/src/languages/es.ts index 7adc2a688019..7c3bb15a4b8d 100644 --- a/src/languages/es.ts +++ b/src/languages/es.ts @@ -2094,6 +2094,7 @@ export default { viewTrip: 'Ver viaje', viewTripDetails: 'Ver detalles del viaje', trip: 'Viaje', + trips: 'Viajes', tripSummary: 'Resumen del viaje', departs: 'Sale', errorMessage: 'Ha ocurrido un error. Por favor, inténtalo mas tarde.', diff --git a/src/pages/Search/SearchPageBottomTab.tsx b/src/pages/Search/SearchPageBottomTab.tsx index 286939ac3382..029407026dc8 100644 --- a/src/pages/Search/SearchPageBottomTab.tsx +++ b/src/pages/Search/SearchPageBottomTab.tsx @@ -17,7 +17,7 @@ import TopBar from '@navigation/AppNavigator/createCustomBottomTabNavigator/TopB import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; import SCREENS from '@src/SCREENS'; -import SearchStatusMenu from './SearchStatusMenu'; +import SearchTypeMenu from './SearchTypeMenu'; function SearchPageBottomTab() { const {translate} = useLocalize(); @@ -62,7 +62,7 @@ function SearchPageBottomTab() { breadcrumbLabel={translate('common.search')} shouldDisplaySearch={false} /> - diff --git a/src/pages/Search/SearchStatusMenu.tsx b/src/pages/Search/SearchTypeMenu.tsx similarity index 61% rename from src/pages/Search/SearchStatusMenu.tsx rename to src/pages/Search/SearchTypeMenu.tsx index 59e868977d62..a2d84209114b 100644 --- a/src/pages/Search/SearchStatusMenu.tsx +++ b/src/pages/Search/SearchTypeMenu.tsx @@ -1,7 +1,7 @@ import React from 'react'; import {View} from 'react-native'; import MenuItem from '@components/MenuItem'; -import type {SearchQueryJSON, SearchStatus} from '@components/Search/types'; +import type {SearchQueryJSON} from '@components/Search/types'; import useLocalize from '@hooks/useLocalize'; import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useSingleExecution from '@hooks/useSingleExecution'; @@ -13,62 +13,57 @@ import * as Expensicons from '@src/components/Icon/Expensicons'; import CONST from '@src/CONST'; import type {Route} from '@src/ROUTES'; import ROUTES from '@src/ROUTES'; +import type {SearchDataTypes} from '@src/types/onyx/SearchResults'; import type IconAsset from '@src/types/utils/IconAsset'; -import SearchStatusMenuNarrow from './SearchStatusMenuNarrow'; +import SearchTypeMenuNarrow from './SearchTypeMenuNarrow'; -type SearchStatusMenuProps = { +type SearchTypeMenuProps = { queryJSON: SearchQueryJSON; isCustomQuery: boolean; }; -type SearchStatusMenuItem = { +type SearchTypeMenuItem = { title: string; - status: SearchStatus; + type: SearchDataTypes; icon: IconAsset; route?: Route; }; -function SearchStatusMenu({queryJSON, isCustomQuery}: SearchStatusMenuProps) { - const {status} = queryJSON; +function SearchTypeMenu({queryJSON, isCustomQuery}: SearchTypeMenuProps) { + const {type} = queryJSON; const styles = useThemeStyles(); const {shouldUseNarrowLayout} = useResponsiveLayout(); const {singleExecution} = useSingleExecution(); const {translate} = useLocalize(); - const statusMenuItems: SearchStatusMenuItem[] = [ + const typeMenuItems: SearchTypeMenuItem[] = [ { title: translate('common.expenses'), - status: CONST.SEARCH.STATUS.EXPENSE.ALL, + type: CONST.SEARCH.DATA_TYPES.EXPENSE, icon: Expensicons.Receipt, route: ROUTES.SEARCH_CENTRAL_PANE.getRoute({query: SearchUtils.buildCannedSearchQuery()}), }, { - title: translate('common.shared'), - status: CONST.SEARCH.STATUS.EXPENSE.SHARED, - icon: Expensicons.Send, - route: ROUTES.SEARCH_CENTRAL_PANE.getRoute({query: SearchUtils.buildCannedSearchQuery(CONST.SEARCH.DATA_TYPES.EXPENSE, CONST.SEARCH.STATUS.EXPENSE.SHARED)}), + title: translate('workspace.common.invoices'), + type: CONST.SEARCH.DATA_TYPES.INVOICE, + icon: Expensicons.InvoiceGeneric, + route: ROUTES.SEARCH_CENTRAL_PANE.getRoute({query: SearchUtils.buildCannedSearchQuery(CONST.SEARCH.DATA_TYPES.INVOICE, CONST.SEARCH.STATUS.INVOICE.ALL)}), }, { - title: translate('common.drafts'), - status: CONST.SEARCH.STATUS.EXPENSE.DRAFTS, - icon: Expensicons.Pencil, - route: ROUTES.SEARCH_CENTRAL_PANE.getRoute({query: SearchUtils.buildCannedSearchQuery(CONST.SEARCH.DATA_TYPES.EXPENSE, CONST.SEARCH.STATUS.EXPENSE.DRAFTS)}), - }, - { - title: translate('common.finished'), - status: CONST.SEARCH.STATUS.EXPENSE.FINISHED, - icon: Expensicons.CheckCircle, - route: ROUTES.SEARCH_CENTRAL_PANE.getRoute({query: SearchUtils.buildCannedSearchQuery(CONST.SEARCH.DATA_TYPES.EXPENSE, CONST.SEARCH.STATUS.EXPENSE.FINISHED)}), + title: translate('travel.trips'), + type: CONST.SEARCH.DATA_TYPES.TRIP, + icon: Expensicons.Suitcase, + route: ROUTES.SEARCH_CENTRAL_PANE.getRoute({query: SearchUtils.buildCannedSearchQuery(CONST.SEARCH.DATA_TYPES.TRIP, CONST.SEARCH.STATUS.TRIP.ALL)}), }, ]; - const activeItemIndex = statusMenuItems.findIndex((item) => item.status === status); + const activeItemIndex = typeMenuItems.findIndex((item) => item.type === type); if (shouldUseNarrowLayout) { const title = isCustomQuery ? SearchUtils.getSearchHeaderTitle(queryJSON) : undefined; return ( - @@ -77,7 +72,7 @@ function SearchStatusMenu({queryJSON, isCustomQuery}: SearchStatusMenuProps) { return ( - {statusMenuItems.map((item, index) => { + {typeMenuItems.map((item, index) => { const onPress = singleExecution(() => Navigation.navigate(item.route)); return ( @@ -101,7 +96,7 @@ function SearchStatusMenu({queryJSON, isCustomQuery}: SearchStatusMenuProps) { ); } -SearchStatusMenu.displayName = 'SearchStatusMenu'; +SearchTypeMenu.displayName = 'SearchTypeMenu'; -export default SearchStatusMenu; -export type {SearchStatusMenuItem}; +export default SearchTypeMenu; +export type {SearchTypeMenuItem}; diff --git a/src/pages/Search/SearchStatusMenuNarrow.tsx b/src/pages/Search/SearchTypeMenuNarrow.tsx similarity index 91% rename from src/pages/Search/SearchStatusMenuNarrow.tsx rename to src/pages/Search/SearchTypeMenuNarrow.tsx index 8850b0fb2b0f..08c7852cb037 100644 --- a/src/pages/Search/SearchStatusMenuNarrow.tsx +++ b/src/pages/Search/SearchTypeMenuNarrow.tsx @@ -10,15 +10,15 @@ import useThemeStyles from '@hooks/useThemeStyles'; import useWindowDimensions from '@hooks/useWindowDimensions'; import Navigation from '@libs/Navigation/Navigation'; import * as Expensicons from '@src/components/Icon/Expensicons'; -import type {SearchStatusMenuItem} from './SearchStatusMenu'; +import type {SearchTypeMenuItem} from './SearchTypeMenu'; -type SearchStatusMenuNarrowProps = { - statusMenuItems: SearchStatusMenuItem[]; +type SearchTypeMenuNarrowProps = { + typeMenuItems: SearchTypeMenuItem[]; activeItemIndex: number; title?: string; }; -function SearchStatusMenuNarrow({statusMenuItems, activeItemIndex, title}: SearchStatusMenuNarrowProps) { +function SearchTypeMenuNarrow({typeMenuItems, activeItemIndex, title}: SearchTypeMenuNarrowProps) { const theme = useTheme(); const styles = useThemeStyles(); const {singleExecution} = useSingleExecution(); @@ -30,7 +30,7 @@ function SearchStatusMenuNarrow({statusMenuItems, activeItemIndex, title}: Searc const openMenu = () => setIsPopoverVisible(true); const closeMenu = () => setIsPopoverVisible(false); - const popoverMenuItems = statusMenuItems.map((item, index) => { + const popoverMenuItems = typeMenuItems.map((item, index) => { const isSelected = title ? false : index === activeItemIndex; return { @@ -105,6 +105,6 @@ function SearchStatusMenuNarrow({statusMenuItems, activeItemIndex, title}: Searc ); } -SearchStatusMenuNarrow.displayName = 'SearchStatusMenuNarrow'; +SearchTypeMenuNarrow.displayName = 'SearchTypeMenuNarrow'; -export default SearchStatusMenuNarrow; +export default SearchTypeMenuNarrow; From cb6a8159bfa505a193b78b6dfcbfbf1d574c0fe4 Mon Sep 17 00:00:00 2001 From: Carlos Martins Date: Fri, 9 Aug 2024 19:56:29 +0300 Subject: [PATCH 04/31] update header --- src/components/Search/SearchPageHeader.tsx | 21 +++++++++++---------- src/components/Search/SearchStatusBar.tsx | 14 ++++++++++++++ src/components/Search/types.ts | 3 ++- 3 files changed, 27 insertions(+), 11 deletions(-) create mode 100644 src/components/Search/SearchStatusBar.tsx diff --git a/src/components/Search/SearchPageHeader.tsx b/src/components/Search/SearchPageHeader.tsx index 7e4b69c39596..be0749149a78 100644 --- a/src/components/Search/SearchPageHeader.tsx +++ b/src/components/Search/SearchPageHeader.tsx @@ -27,11 +27,11 @@ import CONST from '@src/CONST'; import type {TranslationPaths} from '@src/languages/types'; import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; -import type {SearchReport} from '@src/types/onyx/SearchResults'; +import type {SearchDataTypes, SearchReport} from '@src/types/onyx/SearchResults'; import type DeepValueOf from '@src/types/utils/DeepValueOf'; import type IconAsset from '@src/types/utils/IconAsset'; import {useSearchContext} from './SearchContext'; -import type {SearchQueryJSON, SearchStatus} from './types'; +import type {SearchQueryJSON} from './types'; type HeaderWrapperProps = Pick & { subtitleStyles?: StyleProp; @@ -100,11 +100,12 @@ type SearchPageHeaderProps = { type SearchHeaderOptionValue = DeepValueOf | undefined; -const headerContent: {[key in SearchStatus]: {icon: IconAsset; titleText: TranslationPaths}} = { - all: {icon: Illustrations.MoneyReceipts, titleText: 'common.expenses'}, - shared: {icon: Illustrations.SendMoney, titleText: 'common.shared'}, - drafts: {icon: Illustrations.Pencil, titleText: 'common.drafts'}, - finished: {icon: Illustrations.CheckmarkCircle, titleText: 'common.finished'}, +const headerContent: {[key in SearchDataTypes]: {icon: IconAsset; titleText: TranslationPaths}} = { + transaction: {icon: Illustrations.MoneyReceipts, titleText: 'common.expenses'}, + report: {icon: Illustrations.MoneyReceipts, titleText: 'common.expenses'}, + expense: {icon: Illustrations.MoneyReceipts, titleText: 'common.expenses'}, + invoice: {icon: Illustrations.MoneyEnvelopeBlue, titleText: 'workspace.common.invoices'}, + trip: {icon: Illustrations.Pencil, titleText: 'travel.trips'}, }; function SearchPageHeader({queryJSON, hash, onSelectDeleteOption, setOfflineModalOpen, setDownloadErrorModalOpen, isCustomQuery, data}: SearchPageHeaderProps) { @@ -131,10 +132,10 @@ function SearchPageHeader({queryJSON, hash, onSelectDeleteOption, setOfflineModa .map((item) => item.reportID), [data, selectedTransactions], ); - const {status} = queryJSON; - const headerSubtitle = isCustomQuery ? SearchUtils.getSearchHeaderTitle(queryJSON) : translate(headerContent[status]?.titleText); + const {status, type} = queryJSON; + const headerSubtitle = isCustomQuery ? SearchUtils.getSearchHeaderTitle(queryJSON) : translate(headerContent[type]?.titleText); const headerTitle = isCustomQuery ? translate('search.filtersHeader') : ''; - const headerIcon = isCustomQuery ? Illustrations.Filters : headerContent[status]?.icon; + const headerIcon = isCustomQuery ? Illustrations.Filters : headerContent[type]?.icon; const subtitleStyles = isCustomQuery ? {} : styles.textHeadlineH2; diff --git a/src/components/Search/SearchStatusBar.tsx b/src/components/Search/SearchStatusBar.tsx new file mode 100644 index 000000000000..3982cf09d1d0 --- /dev/null +++ b/src/components/Search/SearchStatusBar.tsx @@ -0,0 +1,14 @@ +import React from 'react'; + +type SearchStatusBarProps = { +}; + +function SearchStatusBar({}: SearchStatusBarProps) { + return ( + <> + ); +} + +SearchStatusBar.displayName = 'SearchStatusBar'; + +export default SearchStatusBar; diff --git a/src/components/Search/types.ts b/src/components/Search/types.ts index 54b26ea6bac4..69104a33c7bc 100644 --- a/src/components/Search/types.ts +++ b/src/components/Search/types.ts @@ -1,5 +1,6 @@ import type {ValueOf} from 'react-native-gesture-handler/lib/typescript/typeUtils'; import type CONST from '@src/CONST'; +import type {SearchDataTypes} from '@src/types/onyx/SearchResults'; /** Model of the selected transaction */ type SelectedTransactionInfo = { @@ -55,7 +56,7 @@ type QueryFilters = { type SearchQueryString = string; type SearchQueryAST = { - type: string; + type: SearchDataTypes; status: SearchStatus; sortBy: SearchColumnType; sortOrder: SortOrder; From 350d2c134c99a782b5b3486ec8ba23a370e62f2a Mon Sep 17 00:00:00 2001 From: Carlos Martins Date: Fri, 9 Aug 2024 20:23:21 +0300 Subject: [PATCH 05/31] create SearchStatusBar --- src/components/Search/SearchStatusBar.tsx | 63 ++++++++++++++++++++++- 1 file changed, 61 insertions(+), 2 deletions(-) diff --git a/src/components/Search/SearchStatusBar.tsx b/src/components/Search/SearchStatusBar.tsx index 3982cf09d1d0..a8261efe644a 100644 --- a/src/components/Search/SearchStatusBar.tsx +++ b/src/components/Search/SearchStatusBar.tsx @@ -1,11 +1,70 @@ import React from 'react'; +import {View} from 'react-native'; +import Button from '@components/Button'; +import * as Expensicons from '@components/Icon/Expensicons'; +import useSingleExecution from '@hooks/useSingleExecution'; +import Navigation from '@libs/Navigation/Navigation'; +import * as SearchUtils from '@libs/SearchUtils'; +import CONST from '@src/CONST'; +import type {TranslationPaths} from '@src/languages/types'; +import type {SearchDataTypes} from '@src/types/onyx/SearchResults'; +import type IconAsset from '@src/types/utils/IconAsset'; +import type {SearchQueryString} from './types'; type SearchStatusBarProps = { + type: SearchDataTypes; }; -function SearchStatusBar({}: SearchStatusBarProps) { +const statusMenuOptions: {[key in SearchDataTypes]: Array<{icon: IconAsset; text: TranslationPaths; query: SearchQueryString}>} = { + [CONST.SEARCH.DATA_TYPES.TRANSACTION]: [ + {icon: Expensicons.Inbox, text: 'common.expenses', query: SearchUtils.buildCannedSearchQuery()}, + {icon: Expensicons.Inbox, text: 'common.expenses', query: SearchUtils.buildCannedSearchQuery()}, + {icon: Expensicons.Inbox, text: 'common.expenses', query: SearchUtils.buildCannedSearchQuery()}, + {icon: Expensicons.Inbox, text: 'common.expenses', query: SearchUtils.buildCannedSearchQuery()}, + ], + [CONST.SEARCH.DATA_TYPES.REPORT]: [ + {icon: Expensicons.Inbox, text: 'common.expenses', query: SearchUtils.buildCannedSearchQuery()}, + {icon: Expensicons.Inbox, text: 'common.expenses', query: SearchUtils.buildCannedSearchQuery()}, + {icon: Expensicons.Inbox, text: 'common.expenses', query: SearchUtils.buildCannedSearchQuery()}, + {icon: Expensicons.Inbox, text: 'common.expenses', query: SearchUtils.buildCannedSearchQuery()}, + ], + [CONST.SEARCH.DATA_TYPES.EXPENSE]: [ + {icon: Expensicons.Inbox, text: 'common.expenses', query: SearchUtils.buildCannedSearchQuery()}, + {icon: Expensicons.Inbox, text: 'common.expenses', query: SearchUtils.buildCannedSearchQuery()}, + {icon: Expensicons.Inbox, text: 'common.expenses', query: SearchUtils.buildCannedSearchQuery()}, + {icon: Expensicons.Inbox, text: 'common.expenses', query: SearchUtils.buildCannedSearchQuery()}, + ], + [CONST.SEARCH.DATA_TYPES.INVOICE]: [ + {icon: Expensicons.Inbox, text: 'common.expenses', query: SearchUtils.buildCannedSearchQuery()}, + {icon: Expensicons.Inbox, text: 'common.expenses', query: SearchUtils.buildCannedSearchQuery()}, + {icon: Expensicons.Inbox, text: 'common.expenses', query: SearchUtils.buildCannedSearchQuery()}, + {icon: Expensicons.Inbox, text: 'common.expenses', query: SearchUtils.buildCannedSearchQuery()}, + ], + [CONST.SEARCH.DATA_TYPES.TRIP]: [ + {icon: Expensicons.Inbox, text: 'common.expenses', query: SearchUtils.buildCannedSearchQuery()}, + {icon: Expensicons.Inbox, text: 'common.expenses', query: SearchUtils.buildCannedSearchQuery()}, + {icon: Expensicons.Inbox, text: 'common.expenses', query: SearchUtils.buildCannedSearchQuery()}, + {icon: Expensicons.Inbox, text: 'common.expenses', query: SearchUtils.buildCannedSearchQuery()}, + ], +}; + +function SearchStatusBar({type}: SearchStatusBarProps) { + const {singleExecution} = useSingleExecution(); return ( - <> + + {statusMenuOptions[type].map((item) => { + const onPress = singleExecution(() => Navigation.setParams({q: item.query})); + + return ( +