From f9475953f4a58957f01b6a2f5cf6d4f21dd4a969 Mon Sep 17 00:00:00 2001 From: Mateusz Titz Date: Mon, 15 Jul 2024 17:18:27 +0200 Subject: [PATCH 01/13] Add basic skeleton for AdvancedFilters view --- src/ROUTES.ts | 5 +++ src/SCREENS.ts | 2 + src/languages/en.ts | 1 + src/languages/es.ts | 1 + .../ModalStackNavigators/index.tsx | 7 ++++ .../Navigators/RightModalNavigator.tsx | 4 ++ .../CENTRAL_PANE_TO_RHP_MAPPING.ts | 2 +- src/libs/Navigation/linkingConfig/config.ts | 5 +++ src/libs/Navigation/types.ts | 8 ++++ .../Search/SearchAdvancedFiltersPage.tsx | 39 +++++++++++++++++++ src/pages/Search/SearchFilters.tsx | 1 + 11 files changed, 74 insertions(+), 1 deletion(-) create mode 100644 src/pages/Search/SearchAdvancedFiltersPage.tsx diff --git a/src/ROUTES.ts b/src/ROUTES.ts index 1e99e2132203c..3189affe7c333 100644 --- a/src/ROUTES.ts +++ b/src/ROUTES.ts @@ -49,6 +49,11 @@ const ROUTES = { }, }, + SEARCH_ADVANCED_FILTERS: { + route: '/search/:query/filters', + getRoute: (query: string) => `search/${query}/filters` as const, + }, + SEARCH_REPORT: { route: '/search/:query/view/:reportID', getRoute: (query: string, reportID: string) => `search/${query}/view/${reportID}` as const, diff --git a/src/SCREENS.ts b/src/SCREENS.ts index 8a71030dff448..60760d655f221 100644 --- a/src/SCREENS.ts +++ b/src/SCREENS.ts @@ -30,6 +30,7 @@ const SCREENS = { SEARCH: { CENTRAL_PANE: 'Search_Central_Pane', REPORT_RHP: 'Search_Report_RHP', + ADVANCED_FILTERS_RHP: 'Search_Advanced_Filters_RHP', TRANSACTION_HOLD_REASON_RHP: 'Search_Transaction_Hold_Reason_RHP', BOTTOM_TAB: 'Search_Bottom_Tab', }, @@ -145,6 +146,7 @@ const SCREENS = { TRANSACTION_DUPLICATE: 'TransactionDuplicate', TRAVEL: 'Travel', SEARCH_REPORT: 'SearchReport', + SEARCH_ADVANCED_FILTERS: 'SearchAdvancedFilters', SETTINGS_CATEGORIES: 'SettingsCategories', RESTRICTED_ACTION: 'RestrictedAction', }, diff --git a/src/languages/en.ts b/src/languages/en.ts index 098b72973cf7b..01313d9ec0fdf 100755 --- a/src/languages/en.ts +++ b/src/languages/en.ts @@ -3478,6 +3478,7 @@ export default { unhold: 'Unhold', noOptionsAvailable: 'No options available for the selected group of expenses.', }, + filtersHeader: 'Filters', }, genericErrorPage: { title: 'Uh-oh, something went wrong!', diff --git a/src/languages/es.ts b/src/languages/es.ts index bc4a9b3871faf..72128b43842aa 100644 --- a/src/languages/es.ts +++ b/src/languages/es.ts @@ -3529,6 +3529,7 @@ export default { unhold: 'Desbloquear', noOptionsAvailable: 'No hay opciones disponibles para el grupo de gastos seleccionado.', }, + filtersHeader: 'Filtros', }, genericErrorPage: { title: '¡Oh-oh, algo salió mal!', diff --git a/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx b/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx index 7a6701de1a2d5..ac6b104465ad5 100644 --- a/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx +++ b/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx @@ -20,6 +20,7 @@ import type { ReportSettingsNavigatorParamList, RoomInviteNavigatorParamList, RoomMembersNavigatorParamList, + SearchAdvancedFiltersParamList, SearchReportParamList, SettingsNavigatorParamList, SignInNavigatorParamList, @@ -30,6 +31,7 @@ import type { TravelNavigatorParamList, WalletStatementNavigatorParamList, } from '@navigation/types'; +import SearchAdvancedFiltersPage from '@pages/Search/SearchAdvancedFiltersPage'; import type {ThemeStyles} from '@styles/index'; import type {Screen} from '@src/SCREENS'; import SCREENS from '@src/SCREENS'; @@ -490,6 +492,10 @@ const SearchReportModalStackNavigator = createModalStackNavigator require('../../../../pages/Search/SearchHoldReasonPage').default, }); +const SearchAdvancedFiltersModalStackNavigator = createModalStackNavigator({ + [SCREENS.SEARCH.ADVANCED_FILTERS_RHP]: () => require('../../../../pages/Search/SearchAdvancedFiltersPage').default, +}); + const RestrictedActionModalStackNavigator = createModalStackNavigator({ [SCREENS.RESTRICTED_ACTION_ROOT]: () => require('../../../../pages/RestrictedAction/Workspace/WorkspaceRestrictedActionPage').default, }); @@ -524,4 +530,5 @@ export { TransactionDuplicateStackNavigator, SearchReportModalStackNavigator, RestrictedActionModalStackNavigator, + SearchAdvancedFiltersModalStackNavigator, }; diff --git a/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.tsx b/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.tsx index 6b83c19976932..c32e94d659627 100644 --- a/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.tsx +++ b/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.tsx @@ -165,6 +165,10 @@ function RightModalNavigator({navigation}: RightModalNavigatorProps) { name={SCREENS.RIGHT_MODAL.RESTRICTED_ACTION} component={ModalStackNavigators.RestrictedActionModalStackNavigator} /> + diff --git a/src/libs/Navigation/linkingConfig/CENTRAL_PANE_TO_RHP_MAPPING.ts b/src/libs/Navigation/linkingConfig/CENTRAL_PANE_TO_RHP_MAPPING.ts index 83929b7e7d02c..c6f3aa2f17b53 100755 --- a/src/libs/Navigation/linkingConfig/CENTRAL_PANE_TO_RHP_MAPPING.ts +++ b/src/libs/Navigation/linkingConfig/CENTRAL_PANE_TO_RHP_MAPPING.ts @@ -38,7 +38,7 @@ const CENTRAL_PANE_TO_RHP_MAPPING: Partial> = [SCREENS.SETTINGS.ABOUT]: [SCREENS.SETTINGS.APP_DOWNLOAD_LINKS], [SCREENS.SETTINGS.SAVE_THE_WORLD]: [SCREENS.I_KNOW_A_TEACHER, SCREENS.INTRO_SCHOOL_PRINCIPAL, SCREENS.I_AM_A_TEACHER], [SCREENS.SETTINGS.TROUBLESHOOT]: [SCREENS.SETTINGS.CONSOLE], - [SCREENS.SEARCH.CENTRAL_PANE]: [SCREENS.SEARCH.REPORT_RHP, SCREENS.SEARCH.TRANSACTION_HOLD_REASON_RHP], + [SCREENS.SEARCH.CENTRAL_PANE]: [SCREENS.SEARCH.REPORT_RHP, SCREENS.SEARCH.TRANSACTION_HOLD_REASON_RHP, SCREENS.SEARCH.ADVANCED_FILTERS_RHP], [SCREENS.SETTINGS.SUBSCRIPTION.ROOT]: [ SCREENS.SETTINGS.SUBSCRIPTION.ADD_PAYMENT_CARD, SCREENS.SETTINGS.SUBSCRIPTION.SIZE, diff --git a/src/libs/Navigation/linkingConfig/config.ts b/src/libs/Navigation/linkingConfig/config.ts index b8ee325763651..aea87f40e6e04 100644 --- a/src/libs/Navigation/linkingConfig/config.ts +++ b/src/libs/Navigation/linkingConfig/config.ts @@ -956,6 +956,11 @@ const config: LinkingOptions['config'] = { [SCREENS.SEARCH.TRANSACTION_HOLD_REASON_RHP]: ROUTES.TRANSACTION_HOLD_REASON_RHP.route, }, }, + [SCREENS.RIGHT_MODAL.SEARCH_ADVANCED_FILTERS]: { + screens: { + [SCREENS.SEARCH.ADVANCED_FILTERS_RHP]: ROUTES.SEARCH_ADVANCED_FILTERS.route, + }, + }, [SCREENS.RIGHT_MODAL.RESTRICTED_ACTION]: { screens: { [SCREENS.RESTRICTED_ACTION_ROOT]: ROUTES.RESTRICTED_ACTION.route, diff --git a/src/libs/Navigation/types.ts b/src/libs/Navigation/types.ts index 82a5be980a1d5..9844db40407b6 100644 --- a/src/libs/Navigation/types.ts +++ b/src/libs/Navigation/types.ts @@ -1035,6 +1035,7 @@ type RightModalNavigatorParamList = { [SCREENS.RIGHT_MODAL.TRAVEL]: NavigatorScreenParams; [SCREENS.RIGHT_MODAL.SEARCH_REPORT]: NavigatorScreenParams; [SCREENS.RIGHT_MODAL.RESTRICTED_ACTION]: NavigatorScreenParams; + [SCREENS.RIGHT_MODAL.SEARCH_ADVANCED_FILTERS]: NavigatorScreenParams<{}>; }; type TravelNavigatorParamList = { @@ -1226,6 +1227,12 @@ type SearchReportParamList = { }; }; +type SearchAdvancedFiltersParamList = { + [SCREENS.SEARCH.ADVANCED_FILTERS_RHP]: { + query: string; + }; +}; + type RestrictedActionParamList = { [SCREENS.RESTRICTED_ACTION_ROOT]: { policyID: string; @@ -1303,5 +1310,6 @@ export type { WelcomeVideoModalNavigatorParamList, TransactionDuplicateNavigatorParamList, SearchReportParamList, + SearchAdvancedFiltersParamList, RestrictedActionParamList, }; diff --git a/src/pages/Search/SearchAdvancedFiltersPage.tsx b/src/pages/Search/SearchAdvancedFiltersPage.tsx new file mode 100644 index 0000000000000..0148ddc0060b2 --- /dev/null +++ b/src/pages/Search/SearchAdvancedFiltersPage.tsx @@ -0,0 +1,39 @@ +import type {StackScreenProps} from '@react-navigation/stack'; +import React from 'react'; +import {Text, View} from 'react-native'; +import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView'; +import HeaderWithBackButton from '@components/HeaderWithBackButton'; +import ScreenWrapper from '@components/ScreenWrapper'; +import useLocalize from '@hooks/useLocalize'; +import useThemeStyles from '@hooks/useThemeStyles'; +import type {AuthScreensParamList} from '@libs/Navigation/types'; +import type SCREENS from '@src/SCREENS'; + +type SearchPageProps = StackScreenProps; + +// Todo finish this page, fix route params and add Form provider +function SearchAdvancedFiltersPage() { + const styles = useThemeStyles(); + const {translate} = useLocalize(); + + // add advanced filters + + return ( + + + + + Search advanced filters + + + + ); +} + +SearchAdvancedFiltersPage.displayName = 'SearchAdvancedFiltersPage'; + +export default SearchAdvancedFiltersPage; diff --git a/src/pages/Search/SearchFilters.tsx b/src/pages/Search/SearchFilters.tsx index bbb861364f00b..0728743c1875b 100644 --- a/src/pages/Search/SearchFilters.tsx +++ b/src/pages/Search/SearchFilters.tsx @@ -25,6 +25,7 @@ type SearchMenuFilterItem = { route: Route; }; +// Because we will add have AdvancedFilters, in future rename this component to `SearchTypeMenu|Tabs|Filters` to avoid confusion function SearchFilters({query}: SearchFiltersProps) { const styles = useThemeStyles(); const {isSmallScreenWidth} = useWindowDimensions(); From 44dccfcfd26e3644a32be6a36d193fea73f8db61 Mon Sep 17 00:00:00 2001 From: Mateusz Titz Date: Tue, 16 Jul 2024 15:20:42 +0200 Subject: [PATCH 02/13] Add AdvancedSearchFilters component with sample static filters --- .../Search/TransactionListItemRow.tsx | 4 +- src/pages/Search/AdvancedSearchFilters.tsx | 53 +++++++++++++++++++ .../Search/SearchAdvancedFiltersPage.tsx | 14 +---- 3 files changed, 57 insertions(+), 14 deletions(-) create mode 100644 src/pages/Search/AdvancedSearchFilters.tsx diff --git a/src/components/SelectionList/Search/TransactionListItemRow.tsx b/src/components/SelectionList/Search/TransactionListItemRow.tsx index a4d567d5f8ab7..5731f47297be5 100644 --- a/src/components/SelectionList/Search/TransactionListItemRow.tsx +++ b/src/components/SelectionList/Search/TransactionListItemRow.tsx @@ -304,7 +304,7 @@ function TransactionListItemRow({ showTooltip={showTooltip} isLargeScreenWidth={false} /> - {item.category && ( + {item.category ? ( - )} + ) : null} , fieldName: string) { + // This is temporary because the full parsing of search query is not yet done + // The actual value will be `filters[fieldName].value` to be updated later + return fieldName; +} + +function AdvancedSearchFilters() { + const {singleExecution} = useSingleExecution(); + const {translate} = useLocalize(); + + return ( + + {advancedFilters.map((item) => { + const filterValue = getFilterDisplayTitle({}, item.fieldName); + const onPress = singleExecution(() => Navigation.navigate(item.route)); + + return ( + + ); + })} + + ); +} + +AdvancedSearchFilters.displayName = 'AdvancedSearchFilters'; + +export default AdvancedSearchFilters; diff --git a/src/pages/Search/SearchAdvancedFiltersPage.tsx b/src/pages/Search/SearchAdvancedFiltersPage.tsx index 0148ddc0060b2..9d4864bce8eba 100644 --- a/src/pages/Search/SearchAdvancedFiltersPage.tsx +++ b/src/pages/Search/SearchAdvancedFiltersPage.tsx @@ -1,23 +1,15 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import React from 'react'; -import {Text, View} from 'react-native'; import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; import ScreenWrapper from '@components/ScreenWrapper'; import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; -import type {AuthScreensParamList} from '@libs/Navigation/types'; -import type SCREENS from '@src/SCREENS'; +import AdvancedSearchFilters from './AdvancedSearchFilters'; -type SearchPageProps = StackScreenProps; - -// Todo finish this page, fix route params and add Form provider function SearchAdvancedFiltersPage() { const styles = useThemeStyles(); const {translate} = useLocalize(); - // add advanced filters - return ( - - Search advanced filters - + ); From e4027360b7323b8f6e54b8a2f71db2e300abf4a3 Mon Sep 17 00:00:00 2001 From: Mateusz Titz Date: Tue, 16 Jul 2024 15:33:35 +0200 Subject: [PATCH 03/13] Fix lint for AdvancedFilters --- src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx b/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx index ac6b104465ad5..53daad9ae4be3 100644 --- a/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx +++ b/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx @@ -31,7 +31,6 @@ import type { TravelNavigatorParamList, WalletStatementNavigatorParamList, } from '@navigation/types'; -import SearchAdvancedFiltersPage from '@pages/Search/SearchAdvancedFiltersPage'; import type {ThemeStyles} from '@styles/index'; import type {Screen} from '@src/SCREENS'; import SCREENS from '@src/SCREENS'; From 7646837466de4860c35715ebb0bf520f07ef111d Mon Sep 17 00:00:00 2001 From: Mateusz Titz Date: Tue, 16 Jul 2024 15:55:21 +0200 Subject: [PATCH 04/13] Update route for SearchAdvancedFiltersPage --- src/ROUTES.ts | 4 ++-- src/libs/Navigation/types.ts | 4 +--- 2 files changed, 3 insertions(+), 5 deletions(-) diff --git a/src/ROUTES.ts b/src/ROUTES.ts index 3189affe7c333..f653395a3de7a 100644 --- a/src/ROUTES.ts +++ b/src/ROUTES.ts @@ -50,8 +50,8 @@ const ROUTES = { }, SEARCH_ADVANCED_FILTERS: { - route: '/search/:query/filters', - getRoute: (query: string) => `search/${query}/filters` as const, + route: '/search/filters', + getRoute: () => `search/filters` as const, }, SEARCH_REPORT: { diff --git a/src/libs/Navigation/types.ts b/src/libs/Navigation/types.ts index 9844db40407b6..628cf30d59484 100644 --- a/src/libs/Navigation/types.ts +++ b/src/libs/Navigation/types.ts @@ -1228,9 +1228,7 @@ type SearchReportParamList = { }; type SearchAdvancedFiltersParamList = { - [SCREENS.SEARCH.ADVANCED_FILTERS_RHP]: { - query: string; - }; + [SCREENS.SEARCH.ADVANCED_FILTERS_RHP]: Record; }; type RestrictedActionParamList = { From 8fd23a6da23d051a537500d77cc88428beae63ac Mon Sep 17 00:00:00 2001 From: Wiktor Gut Date: Wed, 17 Jul 2024 14:27:50 +0200 Subject: [PATCH 05/13] date advanced filter rhp, empty --- src/ROUTES.ts | 5 +++ src/SCREENS.ts | 1 + src/languages/en.ts | 7 ++++ src/languages/es.ts | 7 ++++ .../ModalStackNavigators/index.tsx | 2 +- src/libs/Navigation/linkingConfig/config.ts | 1 + src/pages/Search/SearchAdvancedFilterDate.tsx | 32 +++++++++++++++++++ 7 files changed, 54 insertions(+), 1 deletion(-) create mode 100644 src/pages/Search/SearchAdvancedFilterDate.tsx diff --git a/src/ROUTES.ts b/src/ROUTES.ts index 3189affe7c333..9ed1505372637 100644 --- a/src/ROUTES.ts +++ b/src/ROUTES.ts @@ -54,6 +54,11 @@ const ROUTES = { getRoute: (query: string) => `search/${query}/filters` as const, }, + SEARCH_ADVANCED_FILTERS_DATE: { + route: '/search/filters/date', + getRoute: () => `search/filters/date` as const, + }, + SEARCH_REPORT: { route: '/search/:query/view/:reportID', getRoute: (query: string, reportID: string) => `search/${query}/view/${reportID}` as const, diff --git a/src/SCREENS.ts b/src/SCREENS.ts index 60760d655f221..c188e57f862a0 100644 --- a/src/SCREENS.ts +++ b/src/SCREENS.ts @@ -147,6 +147,7 @@ const SCREENS = { TRAVEL: 'Travel', SEARCH_REPORT: 'SearchReport', SEARCH_ADVANCED_FILTERS: 'SearchAdvancedFilters', + SEARCH_ADVANCES_FILTER_DATE: 'SearchAdvancedFilterDate', SETTINGS_CATEGORIES: 'SettingsCategories', RESTRICTED_ACTION: 'RestrictedAction', }, diff --git a/src/languages/en.ts b/src/languages/en.ts index 01313d9ec0fdf..15fa37b88f056 100755 --- a/src/languages/en.ts +++ b/src/languages/en.ts @@ -3479,6 +3479,13 @@ export default { noOptionsAvailable: 'No options available for the selected group of expenses.', }, filtersHeader: 'Filters', + filters: { + date: { + header: 'Date', + before: 'Before', + after: 'After', + }, + }, }, genericErrorPage: { title: 'Uh-oh, something went wrong!', diff --git a/src/languages/es.ts b/src/languages/es.ts index 72128b43842aa..e65019ab42758 100644 --- a/src/languages/es.ts +++ b/src/languages/es.ts @@ -3530,6 +3530,13 @@ export default { noOptionsAvailable: 'No hay opciones disponibles para el grupo de gastos seleccionado.', }, filtersHeader: 'Filtros', + filters: { + date: { + header: 'Fecha', + before: 'Antes', + after: 'Después', + }, + }, }, genericErrorPage: { title: '¡Oh-oh, algo salió mal!', diff --git a/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx b/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx index ac6b104465ad5..af2412600aa69 100644 --- a/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx +++ b/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx @@ -31,7 +31,6 @@ import type { TravelNavigatorParamList, WalletStatementNavigatorParamList, } from '@navigation/types'; -import SearchAdvancedFiltersPage from '@pages/Search/SearchAdvancedFiltersPage'; import type {ThemeStyles} from '@styles/index'; import type {Screen} from '@src/SCREENS'; import SCREENS from '@src/SCREENS'; @@ -494,6 +493,7 @@ const SearchReportModalStackNavigator = createModalStackNavigator({ [SCREENS.SEARCH.ADVANCED_FILTERS_RHP]: () => require('../../../../pages/Search/SearchAdvancedFiltersPage').default, + [SCREENS.RIGHT_MODAL.SEARCH_ADVANCES_FILTER_DATE]: () => require('../../../../pages/Search/SearchAdvancedFilterDate').default, }); const RestrictedActionModalStackNavigator = createModalStackNavigator({ diff --git a/src/libs/Navigation/linkingConfig/config.ts b/src/libs/Navigation/linkingConfig/config.ts index aea87f40e6e04..5cdfb146831a7 100644 --- a/src/libs/Navigation/linkingConfig/config.ts +++ b/src/libs/Navigation/linkingConfig/config.ts @@ -959,6 +959,7 @@ const config: LinkingOptions['config'] = { [SCREENS.RIGHT_MODAL.SEARCH_ADVANCED_FILTERS]: { screens: { [SCREENS.SEARCH.ADVANCED_FILTERS_RHP]: ROUTES.SEARCH_ADVANCED_FILTERS.route, + [SCREENS.RIGHT_MODAL.SEARCH_ADVANCES_FILTER_DATE]: ROUTES.SEARCH_ADVANCED_FILTERS_DATE.route, }, }, [SCREENS.RIGHT_MODAL.RESTRICTED_ACTION]: { diff --git a/src/pages/Search/SearchAdvancedFilterDate.tsx b/src/pages/Search/SearchAdvancedFilterDate.tsx new file mode 100644 index 0000000000000..30d7ddd95eec0 --- /dev/null +++ b/src/pages/Search/SearchAdvancedFilterDate.tsx @@ -0,0 +1,32 @@ +import React from 'react'; +import {View} from 'react-native'; +import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView'; +import HeaderWithBackButton from '@components/HeaderWithBackButton'; +import ScreenWrapper from '@components/ScreenWrapper'; +import useLocalize from '@hooks/useLocalize'; +import useThemeStyles from '@hooks/useThemeStyles'; +import Text from '@src/components/Text'; + +function SearchAdvancedFilterDate() { + const styles = useThemeStyles(); + const {translate} = useLocalize(); + + return ( + + + + + Here will be search advanced filter: Date + + + + ); +} + +SearchAdvancedFilterDate.displayName = 'SearchAdvancedFilterDate'; + +export default SearchAdvancedFilterDate; From a141d0eb742141f4ed33cbb651f394afc2fffc2d Mon Sep 17 00:00:00 2001 From: Wiktor Gut Date: Wed, 17 Jul 2024 16:04:14 +0200 Subject: [PATCH 06/13] updating pr with resolving comments --- src/SCREENS.ts | 2 +- src/languages/en.ts | 1 - src/languages/es.ts | 1 - .../AppNavigator/ModalStackNavigators/index.tsx | 2 +- src/libs/Navigation/linkingConfig/config.ts | 9 +++++---- ...dvancedFilterDate.tsx => SearchFiltersDatePage.tsx} | 10 +++++----- tsconfig.json | 1 + 7 files changed, 13 insertions(+), 13 deletions(-) rename src/pages/Search/{SearchAdvancedFilterDate.tsx => SearchFiltersDatePage.tsx} (75%) diff --git a/src/SCREENS.ts b/src/SCREENS.ts index c188e57f862a0..5844cb2a58e99 100644 --- a/src/SCREENS.ts +++ b/src/SCREENS.ts @@ -31,6 +31,7 @@ const SCREENS = { CENTRAL_PANE: 'Search_Central_Pane', REPORT_RHP: 'Search_Report_RHP', ADVANCED_FILTERS_RHP: 'Search_Advanced_Filters_RHP', + ADVANCED_FILTERS_DATE_RHP: 'SearchFiltersDatePage', TRANSACTION_HOLD_REASON_RHP: 'Search_Transaction_Hold_Reason_RHP', BOTTOM_TAB: 'Search_Bottom_Tab', }, @@ -147,7 +148,6 @@ const SCREENS = { TRAVEL: 'Travel', SEARCH_REPORT: 'SearchReport', SEARCH_ADVANCED_FILTERS: 'SearchAdvancedFilters', - SEARCH_ADVANCES_FILTER_DATE: 'SearchAdvancedFilterDate', SETTINGS_CATEGORIES: 'SettingsCategories', RESTRICTED_ACTION: 'RestrictedAction', }, diff --git a/src/languages/en.ts b/src/languages/en.ts index 15fa37b88f056..7c525563de6f5 100755 --- a/src/languages/en.ts +++ b/src/languages/en.ts @@ -3481,7 +3481,6 @@ export default { filtersHeader: 'Filters', filters: { date: { - header: 'Date', before: 'Before', after: 'After', }, diff --git a/src/languages/es.ts b/src/languages/es.ts index e65019ab42758..084ecd64d6635 100644 --- a/src/languages/es.ts +++ b/src/languages/es.ts @@ -3532,7 +3532,6 @@ export default { filtersHeader: 'Filtros', filters: { date: { - header: 'Fecha', before: 'Antes', after: 'Después', }, diff --git a/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx b/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx index af2412600aa69..4d2f970a967a9 100644 --- a/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx +++ b/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx @@ -493,7 +493,7 @@ const SearchReportModalStackNavigator = createModalStackNavigator({ [SCREENS.SEARCH.ADVANCED_FILTERS_RHP]: () => require('../../../../pages/Search/SearchAdvancedFiltersPage').default, - [SCREENS.RIGHT_MODAL.SEARCH_ADVANCES_FILTER_DATE]: () => require('../../../../pages/Search/SearchAdvancedFilterDate').default, + [SCREENS.SEARCH.ADVANCED_FILTERS_DATE_RHP]: () => require('../../../../pages/Search/SearchFiltersDatePage').default, }); const RestrictedActionModalStackNavigator = createModalStackNavigator({ diff --git a/src/libs/Navigation/linkingConfig/config.ts b/src/libs/Navigation/linkingConfig/config.ts index 5cdfb146831a7..30c89cc9a62dc 100644 --- a/src/libs/Navigation/linkingConfig/config.ts +++ b/src/libs/Navigation/linkingConfig/config.ts @@ -1,10 +1,11 @@ /* eslint-disable @typescript-eslint/naming-convention */ -import type {LinkingOptions} from '@react-navigation/native'; -import type {RootStackParamList} from '@navigation/types'; +import type { LinkingOptions } from '@react-navigation/native'; +import type { RootStackParamList } from '@navigation/types'; import NAVIGATORS from '@src/NAVIGATORS'; import ROUTES from '@src/ROUTES'; import SCREENS from '@src/SCREENS'; + // Moved to a separate file to avoid cyclic dependencies. const config: LinkingOptions['config'] = { initialRouteName: NAVIGATORS.BOTTOM_TAB_NAVIGATOR, @@ -959,7 +960,7 @@ const config: LinkingOptions['config'] = { [SCREENS.RIGHT_MODAL.SEARCH_ADVANCED_FILTERS]: { screens: { [SCREENS.SEARCH.ADVANCED_FILTERS_RHP]: ROUTES.SEARCH_ADVANCED_FILTERS.route, - [SCREENS.RIGHT_MODAL.SEARCH_ADVANCES_FILTER_DATE]: ROUTES.SEARCH_ADVANCED_FILTERS_DATE.route, + [SCREENS.SEARCH.ADVANCED_FILTERS_DATE_RHP]: ROUTES.SEARCH_ADVANCED_FILTERS_DATE.route, }, }, [SCREENS.RIGHT_MODAL.RESTRICTED_ACTION]: { @@ -1026,4 +1027,4 @@ const config: LinkingOptions['config'] = { }, }; -export default config; +export default config; \ No newline at end of file diff --git a/src/pages/Search/SearchAdvancedFilterDate.tsx b/src/pages/Search/SearchFiltersDatePage.tsx similarity index 75% rename from src/pages/Search/SearchAdvancedFilterDate.tsx rename to src/pages/Search/SearchFiltersDatePage.tsx index 30d7ddd95eec0..570de3ab54818 100644 --- a/src/pages/Search/SearchAdvancedFilterDate.tsx +++ b/src/pages/Search/SearchFiltersDatePage.tsx @@ -7,18 +7,18 @@ import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; import Text from '@src/components/Text'; -function SearchAdvancedFilterDate() { +function SearchFiltersDatePage() { const styles = useThemeStyles(); const {translate} = useLocalize(); return ( - + Here will be search advanced filter: Date @@ -27,6 +27,6 @@ function SearchAdvancedFilterDate() { ); } -SearchAdvancedFilterDate.displayName = 'SearchAdvancedFilterDate'; +SearchFiltersDatePage.displayName = 'SearchFiltersDatePage'; -export default SearchAdvancedFilterDate; +export default SearchFiltersDatePage; diff --git a/tsconfig.json b/tsconfig.json index 16497c29b8cbe..2967e0f3154b1 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -2,6 +2,7 @@ "$schema": "https://json.schemastore.org/tsconfig", "extends": "expo/tsconfig.base", "compilerOptions": { + "jsx": "react", "module": "commonjs", "types": ["react-native", "jest"], "lib": ["DOM", "DOM.Iterable", "ESNext"], From 27b47692aed88e56e148f3a271dd958e6c101f72 Mon Sep 17 00:00:00 2001 From: Wiktor Gut Date: Wed, 17 Jul 2024 16:13:48 +0200 Subject: [PATCH 07/13] undo the tsconfig.json change --- tsconfig.json | 1 - 1 file changed, 1 deletion(-) diff --git a/tsconfig.json b/tsconfig.json index 2967e0f3154b1..16497c29b8cbe 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -2,7 +2,6 @@ "$schema": "https://json.schemastore.org/tsconfig", "extends": "expo/tsconfig.base", "compilerOptions": { - "jsx": "react", "module": "commonjs", "types": ["react-native", "jest"], "lib": ["DOM", "DOM.Iterable", "ESNext"], From 1e617f6ccf985b2e09914e0c69b07c2720b79eca Mon Sep 17 00:00:00 2001 From: Mateusz Titz Date: Wed, 17 Jul 2024 16:20:40 +0200 Subject: [PATCH 08/13] fix prettier on linkingConfig --- src/libs/Navigation/linkingConfig/config.ts | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/src/libs/Navigation/linkingConfig/config.ts b/src/libs/Navigation/linkingConfig/config.ts index 30c89cc9a62dc..976990787301e 100644 --- a/src/libs/Navigation/linkingConfig/config.ts +++ b/src/libs/Navigation/linkingConfig/config.ts @@ -1,11 +1,10 @@ /* eslint-disable @typescript-eslint/naming-convention */ -import type { LinkingOptions } from '@react-navigation/native'; -import type { RootStackParamList } from '@navigation/types'; +import type {LinkingOptions} from '@react-navigation/native'; +import type {RootStackParamList} from '@navigation/types'; import NAVIGATORS from '@src/NAVIGATORS'; import ROUTES from '@src/ROUTES'; import SCREENS from '@src/SCREENS'; - // Moved to a separate file to avoid cyclic dependencies. const config: LinkingOptions['config'] = { initialRouteName: NAVIGATORS.BOTTOM_TAB_NAVIGATOR, @@ -1027,4 +1026,4 @@ const config: LinkingOptions['config'] = { }, }; -export default config; \ No newline at end of file +export default config; From 91df1af8e667e425243f28f6a8e663fadfa4bb70 Mon Sep 17 00:00:00 2001 From: Mateusz Titz Date: Wed, 17 Jul 2024 16:39:40 +0200 Subject: [PATCH 09/13] cleanup basic skeleton for advanced filters --- src/ROUTES.ts | 5 +++ src/SCREENS.ts | 1 + .../ModalStackNavigators/index.tsx | 1 + src/libs/Navigation/linkingConfig/config.ts | 1 + src/libs/Navigation/types.ts | 2 +- src/pages/Search/AdvancedSearchFilters.tsx | 9 ++++-- src/pages/Search/SearchFiltersDatePage.tsx | 4 +-- src/pages/Search/SearchFiltersTypePage.tsx | 32 +++++++++++++++++++ 8 files changed, 49 insertions(+), 6 deletions(-) create mode 100644 src/pages/Search/SearchFiltersTypePage.tsx diff --git a/src/ROUTES.ts b/src/ROUTES.ts index ddcc0f964b931..9bcb6084e96ec 100644 --- a/src/ROUTES.ts +++ b/src/ROUTES.ts @@ -59,6 +59,11 @@ const ROUTES = { getRoute: () => `search/filters/date` as const, }, + SEARCH_ADVANCED_FILTERS_TYPE: { + route: '/search/filters/type', + getRoute: () => `search/filters/type` as const, + }, + SEARCH_REPORT: { route: '/search/:query/view/:reportID', getRoute: (query: string, reportID: string) => `search/${query}/view/${reportID}` as const, diff --git a/src/SCREENS.ts b/src/SCREENS.ts index 5844cb2a58e99..193b8ee535e54 100644 --- a/src/SCREENS.ts +++ b/src/SCREENS.ts @@ -32,6 +32,7 @@ const SCREENS = { REPORT_RHP: 'Search_Report_RHP', ADVANCED_FILTERS_RHP: 'Search_Advanced_Filters_RHP', ADVANCED_FILTERS_DATE_RHP: 'SearchFiltersDatePage', + ADVANCED_FILTERS_TYPE_RHP: 'SearchFiltersTypePage', TRANSACTION_HOLD_REASON_RHP: 'Search_Transaction_Hold_Reason_RHP', BOTTOM_TAB: 'Search_Bottom_Tab', }, diff --git a/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx b/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx index 4d2f970a967a9..f6f5cc627254a 100644 --- a/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx +++ b/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx @@ -494,6 +494,7 @@ const SearchReportModalStackNavigator = createModalStackNavigator({ [SCREENS.SEARCH.ADVANCED_FILTERS_RHP]: () => require('../../../../pages/Search/SearchAdvancedFiltersPage').default, [SCREENS.SEARCH.ADVANCED_FILTERS_DATE_RHP]: () => require('../../../../pages/Search/SearchFiltersDatePage').default, + [SCREENS.SEARCH.ADVANCED_FILTERS_TYPE_RHP]: () => require('../../../../pages/Search/SearchFiltersTypePage').default, }); const RestrictedActionModalStackNavigator = createModalStackNavigator({ diff --git a/src/libs/Navigation/linkingConfig/config.ts b/src/libs/Navigation/linkingConfig/config.ts index 976990787301e..460208670cef9 100644 --- a/src/libs/Navigation/linkingConfig/config.ts +++ b/src/libs/Navigation/linkingConfig/config.ts @@ -960,6 +960,7 @@ const config: LinkingOptions['config'] = { screens: { [SCREENS.SEARCH.ADVANCED_FILTERS_RHP]: ROUTES.SEARCH_ADVANCED_FILTERS.route, [SCREENS.SEARCH.ADVANCED_FILTERS_DATE_RHP]: ROUTES.SEARCH_ADVANCED_FILTERS_DATE.route, + [SCREENS.SEARCH.ADVANCED_FILTERS_TYPE_RHP]: ROUTES.SEARCH_ADVANCED_FILTERS_TYPE.route, }, }, [SCREENS.RIGHT_MODAL.RESTRICTED_ACTION]: { diff --git a/src/libs/Navigation/types.ts b/src/libs/Navigation/types.ts index 628cf30d59484..84d9276631962 100644 --- a/src/libs/Navigation/types.ts +++ b/src/libs/Navigation/types.ts @@ -1035,7 +1035,7 @@ type RightModalNavigatorParamList = { [SCREENS.RIGHT_MODAL.TRAVEL]: NavigatorScreenParams; [SCREENS.RIGHT_MODAL.SEARCH_REPORT]: NavigatorScreenParams; [SCREENS.RIGHT_MODAL.RESTRICTED_ACTION]: NavigatorScreenParams; - [SCREENS.RIGHT_MODAL.SEARCH_ADVANCED_FILTERS]: NavigatorScreenParams<{}>; + [SCREENS.RIGHT_MODAL.SEARCH_ADVANCED_FILTERS]: NavigatorScreenParams; }; type TravelNavigatorParamList = { diff --git a/src/pages/Search/AdvancedSearchFilters.tsx b/src/pages/Search/AdvancedSearchFilters.tsx index ea566155bde4f..6a1c8b178e1f1 100644 --- a/src/pages/Search/AdvancedSearchFilters.tsx +++ b/src/pages/Search/AdvancedSearchFilters.tsx @@ -10,12 +10,12 @@ const advancedFilters = [ { fieldName: 'type', description: 'common.type' as const, - route: '/search/filter/type' as Route, + route: '/search/filters/type' as Route, }, { fieldName: 'date', description: 'common.date' as const, - route: '/search/filter/date' as Route, + route: '/search/filters/date' as Route, }, ]; @@ -33,7 +33,10 @@ function AdvancedSearchFilters() { {advancedFilters.map((item) => { const filterValue = getFilterDisplayTitle({}, item.fieldName); - const onPress = singleExecution(() => Navigation.navigate(item.route)); + const onPress = singleExecution(() => { + console.log(`navigating to: ${item.route}`); + Navigation.navigate(item.route); + }); return ( - - Here will be search advanced filter: Date + + Advanced filters Date form diff --git a/src/pages/Search/SearchFiltersTypePage.tsx b/src/pages/Search/SearchFiltersTypePage.tsx new file mode 100644 index 0000000000000..d10c74d56698a --- /dev/null +++ b/src/pages/Search/SearchFiltersTypePage.tsx @@ -0,0 +1,32 @@ +import React from 'react'; +import {View} from 'react-native'; +import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView'; +import HeaderWithBackButton from '@components/HeaderWithBackButton'; +import ScreenWrapper from '@components/ScreenWrapper'; +import useLocalize from '@hooks/useLocalize'; +import useThemeStyles from '@hooks/useThemeStyles'; +import Text from '@src/components/Text'; + +function SearchFiltersTypePage() { + const styles = useThemeStyles(); + const {translate} = useLocalize(); + + return ( + + + + + Advanced filters Type form + + + + ); +} + +SearchFiltersTypePage.displayName = 'SearchFiltersTypePage'; + +export default SearchFiltersTypePage; From 4d061b069d25b5f93e83df4ca1bc255f40633c04 Mon Sep 17 00:00:00 2001 From: Mateusz Titz Date: Wed, 17 Jul 2024 17:04:48 +0200 Subject: [PATCH 10/13] Remove consolelog --- src/pages/Search/AdvancedSearchFilters.tsx | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/src/pages/Search/AdvancedSearchFilters.tsx b/src/pages/Search/AdvancedSearchFilters.tsx index 6a1c8b178e1f1..9eaed523cb0d9 100644 --- a/src/pages/Search/AdvancedSearchFilters.tsx +++ b/src/pages/Search/AdvancedSearchFilters.tsx @@ -33,10 +33,7 @@ function AdvancedSearchFilters() { {advancedFilters.map((item) => { const filterValue = getFilterDisplayTitle({}, item.fieldName); - const onPress = singleExecution(() => { - console.log(`navigating to: ${item.route}`); - Navigation.navigate(item.route); - }); + const onPress = singleExecution(() => Navigation.navigate(item.route)); return ( Date: Wed, 17 Jul 2024 17:11:11 +0200 Subject: [PATCH 11/13] add small naming fixes --- src/SCREENS.ts | 4 ++-- src/pages/Search/AdvancedSearchFilters.tsx | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/SCREENS.ts b/src/SCREENS.ts index efb424d5feeac..53828d5b36d2d 100644 --- a/src/SCREENS.ts +++ b/src/SCREENS.ts @@ -31,8 +31,8 @@ const SCREENS = { CENTRAL_PANE: 'Search_Central_Pane', REPORT_RHP: 'Search_Report_RHP', ADVANCED_FILTERS_RHP: 'Search_Advanced_Filters_RHP', - ADVANCED_FILTERS_DATE_RHP: 'SearchFiltersDatePage', - ADVANCED_FILTERS_TYPE_RHP: 'SearchFiltersTypePage', + ADVANCED_FILTERS_DATE_RHP: 'Search_Advanced_Filters_Date_RHP', + ADVANCED_FILTERS_TYPE_RHP: 'Search_Advanced_Filters_Type_RHP', TRANSACTION_HOLD_REASON_RHP: 'Search_Transaction_Hold_Reason_RHP', BOTTOM_TAB: 'Search_Bottom_Tab', }, diff --git a/src/pages/Search/AdvancedSearchFilters.tsx b/src/pages/Search/AdvancedSearchFilters.tsx index 9eaed523cb0d9..40a31e1511126 100644 --- a/src/pages/Search/AdvancedSearchFilters.tsx +++ b/src/pages/Search/AdvancedSearchFilters.tsx @@ -30,7 +30,7 @@ function AdvancedSearchFilters() { const {translate} = useLocalize(); return ( - + {advancedFilters.map((item) => { const filterValue = getFilterDisplayTitle({}, item.fieldName); const onPress = singleExecution(() => Navigation.navigate(item.route)); From d5d84d0a8e1abad406c68a844d87993fbb56ed43 Mon Sep 17 00:00:00 2001 From: Mateusz Titz Date: Thu, 18 Jul 2024 13:56:42 +0200 Subject: [PATCH 12/13] Add fixes after review to new search filters --- src/ROUTES.ts | 19 +++++-------------- src/languages/es.ts | 4 ++-- src/libs/Navigation/linkingConfig/config.ts | 6 +++--- src/libs/Navigation/types.ts | 2 +- src/pages/Search/AdvancedSearchFilters.tsx | 15 +++++++++------ src/pages/Search/SearchFiltersDatePage.tsx | 1 + src/pages/Search/SearchFiltersTypePage.tsx | 1 + 7 files changed, 22 insertions(+), 26 deletions(-) diff --git a/src/ROUTES.ts b/src/ROUTES.ts index e8a3fb2e2f325..5e3b45b103792 100644 --- a/src/ROUTES.ts +++ b/src/ROUTES.ts @@ -49,28 +49,19 @@ const ROUTES = { }, }, - SEARCH_ADVANCED_FILTERS: { - route: '/search/filters', - getRoute: () => `search/filters` as const, - }, + SEARCH_ADVANCED_FILTERS: 'search/filters', - SEARCH_ADVANCED_FILTERS_DATE: { - route: '/search/filters/date', - getRoute: () => `search/filters/date` as const, - }, + SEARCH_ADVANCED_FILTERS_DATE: 'search/filters/date', - SEARCH_ADVANCED_FILTERS_TYPE: { - route: '/search/filters/type', - getRoute: () => `search/filters/type` as const, - }, + SEARCH_ADVANCED_FILTERS_TYPE: 'search/filters/type', SEARCH_REPORT: { - route: '/search/:query/view/:reportID', + route: 'search/:query/view/:reportID', getRoute: (query: string, reportID: string) => `search/${query}/view/${reportID}` as const, }, TRANSACTION_HOLD_REASON_RHP: { - route: '/search/:query/hold/:transactionID', + route: 'search/:query/hold/:transactionID', getRoute: (query: string, transactionID: string) => `search/${query}/hold/${transactionID}` as const, }, diff --git a/src/languages/es.ts b/src/languages/es.ts index 141a578fec4b7..5060d7e01dbfa 100644 --- a/src/languages/es.ts +++ b/src/languages/es.ts @@ -3563,8 +3563,8 @@ export default { filtersHeader: 'Filtros', filters: { date: { - before: 'Antes', - after: 'Después', + before: 'Antes de', + after: 'Después de', }, }, }, diff --git a/src/libs/Navigation/linkingConfig/config.ts b/src/libs/Navigation/linkingConfig/config.ts index 1d9dea27cdec7..95291e26cbbc8 100644 --- a/src/libs/Navigation/linkingConfig/config.ts +++ b/src/libs/Navigation/linkingConfig/config.ts @@ -964,9 +964,9 @@ const config: LinkingOptions['config'] = { }, [SCREENS.RIGHT_MODAL.SEARCH_ADVANCED_FILTERS]: { screens: { - [SCREENS.SEARCH.ADVANCED_FILTERS_RHP]: ROUTES.SEARCH_ADVANCED_FILTERS.route, - [SCREENS.SEARCH.ADVANCED_FILTERS_DATE_RHP]: ROUTES.SEARCH_ADVANCED_FILTERS_DATE.route, - [SCREENS.SEARCH.ADVANCED_FILTERS_TYPE_RHP]: ROUTES.SEARCH_ADVANCED_FILTERS_TYPE.route, + [SCREENS.SEARCH.ADVANCED_FILTERS_RHP]: ROUTES.SEARCH_ADVANCED_FILTERS, + [SCREENS.SEARCH.ADVANCED_FILTERS_DATE_RHP]: ROUTES.SEARCH_ADVANCED_FILTERS_DATE, + [SCREENS.SEARCH.ADVANCED_FILTERS_TYPE_RHP]: ROUTES.SEARCH_ADVANCED_FILTERS_TYPE, }, }, [SCREENS.RIGHT_MODAL.RESTRICTED_ACTION]: { diff --git a/src/libs/Navigation/types.ts b/src/libs/Navigation/types.ts index 0180a2dc89a41..3fd2e9dd02bfd 100644 --- a/src/libs/Navigation/types.ts +++ b/src/libs/Navigation/types.ts @@ -1059,7 +1059,7 @@ type RightModalNavigatorParamList = { [SCREENS.RIGHT_MODAL.TRAVEL]: NavigatorScreenParams; [SCREENS.RIGHT_MODAL.SEARCH_REPORT]: NavigatorScreenParams; [SCREENS.RIGHT_MODAL.RESTRICTED_ACTION]: NavigatorScreenParams; - [SCREENS.RIGHT_MODAL.SEARCH_ADVANCED_FILTERS]: NavigatorScreenParams; + [SCREENS.RIGHT_MODAL.SEARCH_ADVANCED_FILTERS]: NavigatorScreenParams; }; type TravelNavigatorParamList = { diff --git a/src/pages/Search/AdvancedSearchFilters.tsx b/src/pages/Search/AdvancedSearchFilters.tsx index 40a31e1511126..7b6bb64cc6b5b 100644 --- a/src/pages/Search/AdvancedSearchFilters.tsx +++ b/src/pages/Search/AdvancedSearchFilters.tsx @@ -3,40 +3,43 @@ import {View} from 'react-native'; import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription'; import useLocalize from '@hooks/useLocalize'; import useSingleExecution from '@hooks/useSingleExecution'; +import useWaitForNavigation from '@hooks/useWaitForNavigation'; import Navigation from '@libs/Navigation/Navigation'; -import type {Route} from '@src/ROUTES'; +import ROUTES from '@src/ROUTES'; const advancedFilters = [ { fieldName: 'type', description: 'common.type' as const, - route: '/search/filters/type' as Route, + route: ROUTES.SEARCH_ADVANCED_FILTERS_TYPE, }, { fieldName: 'date', description: 'common.date' as const, - route: '/search/filters/date' as Route, + route: ROUTES.SEARCH_ADVANCED_FILTERS_DATE, }, ]; function getFilterDisplayTitle(filters: Record, fieldName: string) { // This is temporary because the full parsing of search query is not yet done - // The actual value will be `filters[fieldName].value` to be updated later + // TODO once we have values from query, this value should be `filters[fieldName].value` return fieldName; } function AdvancedSearchFilters() { - const {singleExecution} = useSingleExecution(); const {translate} = useLocalize(); + const {singleExecution} = useSingleExecution(); + const waitForNavigate = useWaitForNavigation(); return ( {advancedFilters.map((item) => { const filterValue = getFilterDisplayTitle({}, item.fieldName); - const onPress = singleExecution(() => Navigation.navigate(item.route)); + const onPress = singleExecution(waitForNavigate(() => Navigation.navigate(item.route))); return ( + {/* temporary placeholder, will be implemented in https://github.com/Expensify/App/issues/45026 */} Advanced filters Date form diff --git a/src/pages/Search/SearchFiltersTypePage.tsx b/src/pages/Search/SearchFiltersTypePage.tsx index d10c74d56698a..e18b865f20ef6 100644 --- a/src/pages/Search/SearchFiltersTypePage.tsx +++ b/src/pages/Search/SearchFiltersTypePage.tsx @@ -20,6 +20,7 @@ function SearchFiltersTypePage() { + {/* temporary placeholder, will be implemented in https://github.com/Expensify/App/issues/45026 */} Advanced filters Type form From 45e3484b008ec25e421033d4e5d2707667169d31 Mon Sep 17 00:00:00 2001 From: Mateusz Titz Date: Thu, 18 Jul 2024 15:22:21 +0200 Subject: [PATCH 13/13] Refactor advanced filters definition --- src/pages/Search/AdvancedSearchFilters.tsx | 34 ++++++++++++---------- 1 file changed, 18 insertions(+), 16 deletions(-) diff --git a/src/pages/Search/AdvancedSearchFilters.tsx b/src/pages/Search/AdvancedSearchFilters.tsx index 7b6bb64cc6b5b..171e2c45dbd76 100644 --- a/src/pages/Search/AdvancedSearchFilters.tsx +++ b/src/pages/Search/AdvancedSearchFilters.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, {useMemo} from 'react'; import {View} from 'react-native'; import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription'; import useLocalize from '@hooks/useLocalize'; @@ -7,19 +7,6 @@ import useWaitForNavigation from '@hooks/useWaitForNavigation'; import Navigation from '@libs/Navigation/Navigation'; import ROUTES from '@src/ROUTES'; -const advancedFilters = [ - { - fieldName: 'type', - description: 'common.type' as const, - route: ROUTES.SEARCH_ADVANCED_FILTERS_TYPE, - }, - { - fieldName: 'date', - description: 'common.date' as const, - route: ROUTES.SEARCH_ADVANCED_FILTERS_DATE, - }, -]; - function getFilterDisplayTitle(filters: Record, fieldName: string) { // This is temporary because the full parsing of search query is not yet done // TODO once we have values from query, this value should be `filters[fieldName].value` @@ -31,16 +18,31 @@ function AdvancedSearchFilters() { const {singleExecution} = useSingleExecution(); const waitForNavigate = useWaitForNavigation(); + const advancedFilters = useMemo( + () => [ + { + title: getFilterDisplayTitle({}, 'title'), + description: 'common.type' as const, + route: ROUTES.SEARCH_ADVANCED_FILTERS_TYPE, + }, + { + title: getFilterDisplayTitle({}, 'date'), + description: 'common.date' as const, + route: ROUTES.SEARCH_ADVANCED_FILTERS_DATE, + }, + ], + [], + ); + return ( {advancedFilters.map((item) => { - const filterValue = getFilterDisplayTitle({}, item.fieldName); const onPress = singleExecution(waitForNavigate(() => Navigation.navigate(item.route))); return (