Skip to content

Commit

Permalink
Merge pull request #45407 from software-mansion-labs/kicu/45026-searc…
Browse files Browse the repository at this point in the history
…h-advanced-filters

Add basic version of AdvancedFilters Page
  • Loading branch information
luacmartins committed Jul 18, 2024
2 parents 5c5d059 + 45e3484 commit 58fc7e4
Show file tree
Hide file tree
Showing 14 changed files with 206 additions and 3 deletions.
10 changes: 8 additions & 2 deletions src/ROUTES.ts
Original file line number Diff line number Diff line change
Expand Up @@ -49,13 +49,19 @@ const ROUTES = {
},
},

SEARCH_ADVANCED_FILTERS: 'search/filters',

SEARCH_ADVANCED_FILTERS_DATE: 'search/filters/date',

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,
},

Expand Down
4 changes: 4 additions & 0 deletions src/SCREENS.ts
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,9 @@ const SCREENS = {
SEARCH: {
CENTRAL_PANE: 'Search_Central_Pane',
REPORT_RHP: 'Search_Report_RHP',
ADVANCED_FILTERS_RHP: 'Search_Advanced_Filters_RHP',
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',
},
Expand Down Expand Up @@ -145,6 +148,7 @@ const SCREENS = {
TRANSACTION_DUPLICATE: 'TransactionDuplicate',
TRAVEL: 'Travel',
SEARCH_REPORT: 'SearchReport',
SEARCH_ADVANCED_FILTERS: 'SearchAdvancedFilters',
SETTINGS_CATEGORIES: 'SettingsCategories',
RESTRICTED_ACTION: 'RestrictedAction',
REPORT_EXPORT: 'Report_Export',
Expand Down
7 changes: 7 additions & 0 deletions src/languages/en.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3525,6 +3525,13 @@ export default {
noOptionsAvailable: 'No options available for the selected group of expenses.',
},
offlinePrompt: "You can't take this action right now.",
filtersHeader: 'Filters',
filters: {
date: {
before: 'Before',
after: 'After',
},
},
},
genericErrorPage: {
title: 'Uh-oh, something went wrong!',
Expand Down
7 changes: 7 additions & 0 deletions src/languages/es.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3579,6 +3579,13 @@ export default {
noOptionsAvailable: 'No hay opciones disponibles para el grupo de gastos seleccionado.',
},
offlinePrompt: 'No puedes realizar esta acción ahora mismo.',
filtersHeader: 'Filtros',
filters: {
date: {
before: 'Antes de',
after: 'Después de',
},
},
},
genericErrorPage: {
title: '¡Oh-oh, algo salió mal!',
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ import type {
ReportSettingsNavigatorParamList,
RoomInviteNavigatorParamList,
RoomMembersNavigatorParamList,
SearchAdvancedFiltersParamList,
SearchReportParamList,
SettingsNavigatorParamList,
SignInNavigatorParamList,
Expand Down Expand Up @@ -496,6 +497,12 @@ const SearchReportModalStackNavigator = createModalStackNavigator<SearchReportPa
[SCREENS.SEARCH.TRANSACTION_HOLD_REASON_RHP]: () => require<ReactComponentModule>('../../../../pages/Search/SearchHoldReasonPage').default,
});

const SearchAdvancedFiltersModalStackNavigator = createModalStackNavigator<SearchAdvancedFiltersParamList>({
[SCREENS.SEARCH.ADVANCED_FILTERS_RHP]: () => require<ReactComponentModule>('../../../../pages/Search/SearchAdvancedFiltersPage').default,
[SCREENS.SEARCH.ADVANCED_FILTERS_DATE_RHP]: () => require<ReactComponentModule>('../../../../pages/Search/SearchFiltersDatePage').default,
[SCREENS.SEARCH.ADVANCED_FILTERS_TYPE_RHP]: () => require<ReactComponentModule>('../../../../pages/Search/SearchFiltersTypePage').default,
});

const RestrictedActionModalStackNavigator = createModalStackNavigator<SearchReportParamList>({
[SCREENS.RESTRICTED_ACTION_ROOT]: () => require<ReactComponentModule>('../../../../pages/RestrictedAction/Workspace/WorkspaceRestrictedActionPage').default,
});
Expand Down Expand Up @@ -530,4 +537,5 @@ export {
TransactionDuplicateStackNavigator,
SearchReportModalStackNavigator,
RestrictedActionModalStackNavigator,
SearchAdvancedFiltersModalStackNavigator,
};
Original file line number Diff line number Diff line change
Expand Up @@ -165,6 +165,10 @@ function RightModalNavigator({navigation}: RightModalNavigatorProps) {
name={SCREENS.RIGHT_MODAL.RESTRICTED_ACTION}
component={ModalStackNavigators.RestrictedActionModalStackNavigator}
/>
<Stack.Screen
name={SCREENS.RIGHT_MODAL.SEARCH_ADVANCED_FILTERS}
component={ModalStackNavigators.SearchAdvancedFiltersModalStackNavigator}
/>
</Stack.Navigator>
</View>
</NoDropZone>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ const CENTRAL_PANE_TO_RHP_MAPPING: Partial<Record<CentralPaneName, string[]>> =
[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,
Expand Down
7 changes: 7 additions & 0 deletions src/libs/Navigation/linkingConfig/config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -968,6 +968,13 @@ const config: LinkingOptions<RootStackParamList>['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,
[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]: {
screens: {
[SCREENS.RESTRICTED_ACTION_ROOT]: ROUTES.RESTRICTED_ACTION.route,
Expand Down
6 changes: 6 additions & 0 deletions src/libs/Navigation/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -1055,6 +1055,7 @@ type RightModalNavigatorParamList = {
[SCREENS.RIGHT_MODAL.TRAVEL]: NavigatorScreenParams<TravelNavigatorParamList>;
[SCREENS.RIGHT_MODAL.SEARCH_REPORT]: NavigatorScreenParams<SearchReportParamList>;
[SCREENS.RIGHT_MODAL.RESTRICTED_ACTION]: NavigatorScreenParams<RestrictedActionParamList>;
[SCREENS.RIGHT_MODAL.SEARCH_ADVANCED_FILTERS]: NavigatorScreenParams<SearchAdvancedFiltersParamList>;
};

type TravelNavigatorParamList = {
Expand Down Expand Up @@ -1246,6 +1247,10 @@ type SearchReportParamList = {
};
};

type SearchAdvancedFiltersParamList = {
[SCREENS.SEARCH.ADVANCED_FILTERS_RHP]: Record<string, never>;
};

type RestrictedActionParamList = {
[SCREENS.RESTRICTED_ACTION_ROOT]: {
policyID: string;
Expand Down Expand Up @@ -1323,5 +1328,6 @@ export type {
WelcomeVideoModalNavigatorParamList,
TransactionDuplicateNavigatorParamList,
SearchReportParamList,
SearchAdvancedFiltersParamList,
RestrictedActionParamList,
};
58 changes: 58 additions & 0 deletions src/pages/Search/AdvancedSearchFilters.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
import React, {useMemo} from 'react';
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 ROUTES from '@src/ROUTES';

function getFilterDisplayTitle(filters: Record<string, string>, 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`
return fieldName;
}

function AdvancedSearchFilters() {
const {translate} = useLocalize();
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 (
<View>
{advancedFilters.map((item) => {
const onPress = singleExecution(waitForNavigate(() => Navigation.navigate(item.route)));

return (
<MenuItemWithTopDescription
key={item.description}
title={item.title}
description={translate(item.description)}
shouldShowRightIcon
onPress={onPress}
/>
);
})}
</View>
);
}

AdvancedSearchFilters.displayName = 'AdvancedSearchFilters';

export default AdvancedSearchFilters;
29 changes: 29 additions & 0 deletions src/pages/Search/SearchAdvancedFiltersPage.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
import React from 'react';
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 AdvancedSearchFilters from './AdvancedSearchFilters';

function SearchAdvancedFiltersPage() {
const styles = useThemeStyles();
const {translate} = useLocalize();

return (
<ScreenWrapper
testID={SearchAdvancedFiltersPage.displayName}
shouldShowOfflineIndicatorInWideScreen
offlineIndicatorStyle={styles.mtAuto}
>
<FullPageNotFoundView shouldShow={false}>
<HeaderWithBackButton title={translate('search.filtersHeader')} />
<AdvancedSearchFilters />
</FullPageNotFoundView>
</ScreenWrapper>
);
}

SearchAdvancedFiltersPage.displayName = 'SearchAdvancedFiltersPage';

export default SearchAdvancedFiltersPage;
1 change: 1 addition & 0 deletions src/pages/Search/SearchFilters.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down
33 changes: 33 additions & 0 deletions src/pages/Search/SearchFiltersDatePage.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
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 SearchFiltersDatePage() {
const styles = useThemeStyles();
const {translate} = useLocalize();

return (
<ScreenWrapper
testID={SearchFiltersDatePage.displayName}
shouldShowOfflineIndicatorInWideScreen
offlineIndicatorStyle={styles.mtAuto}
>
<FullPageNotFoundView shouldShow={false}>
<HeaderWithBackButton title={translate('common.date')} />
<View style={[styles.flex1, styles.ph3]}>
{/* temporary placeholder, will be implemented in https://github.com/Expensify/App/issues/45026 */}
<Text>Advanced filters Date form</Text>
</View>
</FullPageNotFoundView>
</ScreenWrapper>
);
}

SearchFiltersDatePage.displayName = 'SearchFiltersDatePage';

export default SearchFiltersDatePage;
33 changes: 33 additions & 0 deletions src/pages/Search/SearchFiltersTypePage.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
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 (
<ScreenWrapper
testID={SearchFiltersTypePage.displayName}
shouldShowOfflineIndicatorInWideScreen
offlineIndicatorStyle={styles.mtAuto}
>
<FullPageNotFoundView shouldShow={false}>
<HeaderWithBackButton title={translate('common.type')} />
<View style={[styles.flex1, styles.ph3]}>
{/* temporary placeholder, will be implemented in https://github.com/Expensify/App/issues/45026 */}
<Text>Advanced filters Type form</Text>
</View>
</FullPageNotFoundView>
</ScreenWrapper>
);
}

SearchFiltersTypePage.displayName = 'SearchFiltersTypePage';

export default SearchFiltersTypePage;

0 comments on commit 58fc7e4

Please sign in to comment.