Refactor advanced filters definition

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<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`
@@ -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 (
  <View>
  {advancedFilters.map((item) => {
- const filterValue = getFilterDisplayTitle({}, item.fieldName);
  const onPress = singleExecution(waitForNavigate(() => Navigation.navigate(item.route)));
 
  return (
  <MenuItemWithTopDescription
  key={item.description}
- title={filterValue}
+ title={item.title}
  description={translate(item.description)}
  shouldShowRightIcon
  onPress={onPress}