Merge pull request #48243 from software-mansion-labs/@cdOut/search-re…

…set-filters Search - Add Reset filters button to Advanced Filters page
Expensify · Aug 29, 2024 · 6d70b10 · 6d70b10
2 parents 9c479d7 + ec716ad
commit 6d70b10
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 1 deletion.
diff --git a/src/languages/en.ts b/src/languages/en.ts
@@ -3770,6 +3770,7 @@ export default {
     search: {
         resultsAreLimited: 'Search results are limited.',
         viewResults: 'View results',
+        resetFilters: 'Reset filters',
         searchResults: {
             emptyResults: {
                 title: 'Nothing to show',

diff --git a/src/languages/es.ts b/src/languages/es.ts
@@ -3820,6 +3820,7 @@ export default {
     search: {
         resultsAreLimited: 'Los resultados de búsqueda están limitados.',
         viewResults: 'Ver resultados',
+        resetFilters: 'Restablecer filtros',
         searchResults: {
             emptyResults: {
                 title: 'No hay nada que ver aquí',

diff --git a/src/pages/Search/SearchAdvancedFiltersPage.tsx b/src/pages/Search/SearchAdvancedFiltersPage.tsx
@@ -1,22 +1,34 @@
 import React from 'react';
+import {useOnyx} from 'react-native-onyx';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import ScreenWrapper from '@components/ScreenWrapper';
+import TextLink from '@components/TextLink';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
+import * as SearchActions from '@userActions/Search';
+import ONYXKEYS from '@src/ONYXKEYS';
+import type {SearchAdvancedFiltersForm} from '@src/types/form';
 import AdvancedSearchFilters from './AdvancedSearchFilters';
 
 function SearchAdvancedFiltersPage() {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
 
+    const emptySearchFilters: SearchAdvancedFiltersForm = {} as SearchAdvancedFiltersForm;
+    const [searchAdvancedFilters = emptySearchFilters] = useOnyx(ONYXKEYS.FORMS.SEARCH_ADVANCED_FILTERS_FORM);
+
+    const shouldShowResetFilters = Object.values(searchAdvancedFilters).some((value) => (Array.isArray(value) ? value.length !== 0 : !!value));
+
     return (
         <ScreenWrapper
             testID={SearchAdvancedFiltersPage.displayName}
             shouldShowOfflineIndicatorInWideScreen
             offlineIndicatorStyle={styles.mtAuto}
             includeSafeAreaPaddingBottom={false}
         >
-            <HeaderWithBackButton title={translate('search.filtersHeader')} />
+            <HeaderWithBackButton title={translate('search.filtersHeader')}>
+                {shouldShowResetFilters && <TextLink onPress={SearchActions.clearAdvancedFilters}>{translate('search.resetFilters')}</TextLink>}
+            </HeaderWithBackButton>
             <AdvancedSearchFilters />
         </ScreenWrapper>
     );