From 57dcdec471c12c3f226e6852836e8ccc9ede8863 Mon Sep 17 00:00:00 2001 From: Jack Senyitko Date: Mon, 22 Dec 2025 10:00:23 -0500 Subject: [PATCH 1/3] create a hook --- src/hooks/useFilterFormValues.tsx | 34 +++++++++++++++++++++++++++++++ src/pages/Search/SearchPage.tsx | 5 ++--- 2 files changed, 36 insertions(+), 3 deletions(-) create mode 100644 src/hooks/useFilterFormValues.tsx diff --git a/src/hooks/useFilterFormValues.tsx b/src/hooks/useFilterFormValues.tsx new file mode 100644 index 0000000000000..00c078025fda4 --- /dev/null +++ b/src/hooks/useFilterFormValues.tsx @@ -0,0 +1,34 @@ +import {usePersonalDetails} from '@components/OnyxListItemProvider'; +import type {SearchQueryJSON} from '@components/Search/types'; +import {mergeCardListWithWorkspaceFeeds} from '@libs/CardUtils'; +import {getAllTaxRates} from '@libs/PolicyUtils'; +import {buildFilterFormValuesFromQuery} from '@libs/SearchQueryUtils'; +import CONST from '@src/CONST'; +import ONYXKEYS from '@src/ONYXKEYS'; +import type {SearchAdvancedFiltersForm} from '@src/types/form'; +import type {CurrencyList} from '@src/types/onyx'; +import {getEmptyObject} from '@src/types/utils/EmptyObject'; +import useOnyx from './useOnyx'; + +const useFilterFormValues = (queryJSON: SearchQueryJSON) => { + const personalDetails = usePersonalDetails(); + + const [userCardList] = useOnyx(ONYXKEYS.CARD_LIST, {canBeMissing: true}); + const [policies] = useOnyx(ONYXKEYS.COLLECTION.POLICY, {canBeMissing: true}); + const [allReports] = useOnyx(ONYXKEYS.COLLECTION.REPORT, {canBeMissing: true}); + const [policyTagsLists] = useOnyx(ONYXKEYS.COLLECTION.POLICY_TAGS, {canBeMissing: true}); + const [policyCategories] = useOnyx(ONYXKEYS.COLLECTION.POLICY_CATEGORIES, {canBeMissing: true}); + const [workspaceCardFeeds] = useOnyx(ONYXKEYS.COLLECTION.WORKSPACE_CARDS_LIST, {canBeMissing: true}); + const [currencyList = getEmptyObject()] = useOnyx(ONYXKEYS.CURRENCY_LIST, {canBeMissing: true}); + + const taxRates = getAllTaxRates(policies); + const allCards = mergeCardListWithWorkspaceFeeds(workspaceCardFeeds ?? CONST.EMPTY_OBJECT, userCardList); + + const formValues = queryJSON + ? buildFilterFormValuesFromQuery(queryJSON, policyCategories, policyTagsLists, currencyList, personalDetails, allCards, allReports, taxRates) + : getEmptyObject>(); + + return formValues; +}; + +export default useFilterFormValues; diff --git a/src/pages/Search/SearchPage.tsx b/src/pages/Search/SearchPage.tsx index cf92aba356972..e940b3731f259 100644 --- a/src/pages/Search/SearchPage.tsx +++ b/src/pages/Search/SearchPage.tsx @@ -89,6 +89,7 @@ import type {SearchAdvancedFiltersForm} from '@src/types/form'; import type {CurrencyList, Policy, Report, SearchResults, Transaction} from '@src/types/onyx'; import type {FileObject} from '@src/types/utils/Attachment'; import {getEmptyObject} from '@src/types/utils/EmptyObject'; +import useFilterFormValues from '../../hooks/useFilterFormValues'; import SearchPageNarrow from './SearchPageNarrow'; import SearchPageWide from './SearchPageWide'; @@ -194,9 +195,7 @@ function SearchPage({route}: SearchPageProps) { formattedAmount: totalFormattedAmount, }); - const formValues = queryJSON - ? buildFilterFormValuesFromQuery(queryJSON, policyCategories, policyTagsLists, currencyList, personalDetails, allCards, allReports, taxRates) - : getEmptyObject>(); + const formValues = useFilterFormValues(queryJSON); // Sync the advanced filters form with the current query when it changes useEffect(() => { From 58c833e352810df89380f9467031450cc2441e27 Mon Sep 17 00:00:00 2001 From: Jack Senyitko Date: Mon, 22 Dec 2025 10:01:31 -0500 Subject: [PATCH 2/3] update searchpage to use hook --- src/hooks/useFilterFormValues.tsx | 2 +- src/pages/Search/SearchPage.tsx | 20 ++++---------------- 2 files changed, 5 insertions(+), 17 deletions(-) diff --git a/src/hooks/useFilterFormValues.tsx b/src/hooks/useFilterFormValues.tsx index 00c078025fda4..f26fa41f8d2c5 100644 --- a/src/hooks/useFilterFormValues.tsx +++ b/src/hooks/useFilterFormValues.tsx @@ -10,7 +10,7 @@ import type {CurrencyList} from '@src/types/onyx'; import {getEmptyObject} from '@src/types/utils/EmptyObject'; import useOnyx from './useOnyx'; -const useFilterFormValues = (queryJSON: SearchQueryJSON) => { +const useFilterFormValues = (queryJSON?: SearchQueryJSON) => { const personalDetails = usePersonalDetails(); const [userCardList] = useOnyx(ONYXKEYS.CARD_LIST, {canBeMissing: true}); diff --git a/src/pages/Search/SearchPage.tsx b/src/pages/Search/SearchPage.tsx index e940b3731f259..37520c942b3fb 100644 --- a/src/pages/Search/SearchPage.tsx +++ b/src/pages/Search/SearchPage.tsx @@ -12,7 +12,6 @@ import DropZoneUI from '@components/DropZone/DropZoneUI'; import HoldOrRejectEducationalModal from '@components/HoldOrRejectEducationalModal'; import HoldSubmitterEducationalModal from '@components/HoldSubmitterEducationalModal'; import type {PaymentMethodType} from '@components/KYCWall/types'; -import {usePersonalDetails} from '@components/OnyxListItemProvider'; import type {PopoverMenuItem} from '@components/PopoverMenu'; import {ScrollOffsetContext} from '@components/ScrollOffsetContextProvider'; import {useSearchContext} from '@components/Search/SearchContext'; @@ -23,6 +22,7 @@ import useAllTransactions from '@hooks/useAllTransactions'; import useBulkPayOptions from '@hooks/useBulkPayOptions'; import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails'; import useFilesValidation from '@hooks/useFilesValidation'; +import useFilterFormValues from '@hooks/useFilterFormValues'; import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset'; import useLocalize from '@hooks/useLocalize'; import useMobileSelectionMode from '@hooks/useMobileSelectionMode'; @@ -57,12 +57,11 @@ import { } from '@libs/actions/Search'; import {setTransactionReport} from '@libs/actions/Transaction'; import {setNameValuePair} from '@libs/actions/User'; -import {mergeCardListWithWorkspaceFeeds} from '@libs/CardUtils'; import {navigateToParticipantPage} from '@libs/IOUUtils'; import Navigation from '@libs/Navigation/Navigation'; import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types'; import type {SearchFullscreenNavigatorParamList} from '@libs/Navigation/types'; -import {getActiveAdminWorkspaces, getAllTaxRates, hasDynamicExternalWorkflow, hasOnlyPersonalPolicies as hasOnlyPersonalPoliciesUtil, isPaidGroupPolicy} from '@libs/PolicyUtils'; +import {getActiveAdminWorkspaces, hasDynamicExternalWorkflow, hasOnlyPersonalPolicies as hasOnlyPersonalPoliciesUtil, isPaidGroupPolicy} from '@libs/PolicyUtils'; import { generateReportID, getPolicyExpenseChat, @@ -73,7 +72,7 @@ import { isInvoiceReport, isIOUReport as isIOUReportUtil, } from '@libs/ReportUtils'; -import {buildFilterFormValuesFromQuery, buildSearchQueryJSON} from '@libs/SearchQueryUtils'; +import {buildSearchQueryJSON} from '@libs/SearchQueryUtils'; import {shouldRestrictUserBillableActions} from '@libs/SubscriptionUtils'; import {hasTransactionBeenRejected} from '@libs/TransactionUtils'; import type {ReceiptFile} from '@pages/iou/request/step/IOURequestStepScan/types'; @@ -85,11 +84,8 @@ import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; import type SCREENS from '@src/SCREENS'; -import type {SearchAdvancedFiltersForm} from '@src/types/form'; -import type {CurrencyList, Policy, Report, SearchResults, Transaction} from '@src/types/onyx'; +import type {Policy, Report, SearchResults, Transaction} from '@src/types/onyx'; import type {FileObject} from '@src/types/utils/Attachment'; -import {getEmptyObject} from '@src/types/utils/EmptyObject'; -import useFilterFormValues from '../../hooks/useFilterFormValues'; import SearchPageNarrow from './SearchPageNarrow'; import SearchPageWide from './SearchPageWide'; @@ -104,7 +100,6 @@ function SearchPage({route}: SearchPageProps) { const styles = useThemeStyles(); const theme = useTheme(); const {isOffline} = useNetwork(); - const personalDetails = usePersonalDetails(); const {selectedTransactions, clearSelectedTransactions, selectedReports, lastSearchType, setLastSearchType, areAllMatchingItemsSelected, selectAllMatchingItems} = useSearchContext(); const currentUserPersonalDetails = useCurrentUserPersonalDetails(); const isMobileSelectionModeEnabled = useMobileSelectionMode(); @@ -114,11 +109,6 @@ function SearchPage({route}: SearchPageProps) { const [currentDate] = useOnyx(ONYXKEYS.CURRENT_DATE, {canBeMissing: true}); const newReportID = generateReportID(); - const [userCardList] = useOnyx(ONYXKEYS.CARD_LIST, {canBeMissing: true}); - const [policyTagsLists] = useOnyx(ONYXKEYS.COLLECTION.POLICY_TAGS, {canBeMissing: true}); - const [policyCategories] = useOnyx(ONYXKEYS.COLLECTION.POLICY_CATEGORIES, {canBeMissing: true}); - const [workspaceCardFeeds] = useOnyx(ONYXKEYS.COLLECTION.WORKSPACE_CARDS_LIST, {canBeMissing: true}); - const [currencyList = getEmptyObject()] = useOnyx(ONYXKEYS.CURRENCY_LIST, {canBeMissing: true}); const [newReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${newReportID}`, {canBeMissing: true}); const [newParentReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${newReport?.parentReportID}`, {canBeMissing: true}); const [activePolicyID] = useOnyx(ONYXKEYS.NVP_ACTIVE_POLICY_ID, {canBeMissing: false}); @@ -169,8 +159,6 @@ function SearchPage({route}: SearchPageProps) { const selectedReportIDs = Object.values(selectedReports).map((report) => report.reportID); const isCurrencySupportedBulkWallet = isCurrencySupportWalletBulkPay(selectedReports, selectedTransactions); const hasOnlyPersonalPolicies = useMemo(() => hasOnlyPersonalPoliciesUtil(policies), [policies]); - const taxRates = getAllTaxRates(policies); - const allCards = mergeCardListWithWorkspaceFeeds(workspaceCardFeeds ?? CONST.EMPTY_OBJECT, userCardList); // Collate a list of policyIDs from the selected transactions const selectedPolicyIDs = useMemo( From c02e5c9c96f6ed0d5fcc1dc34a5dbe92c8783310 Mon Sep 17 00:00:00 2001 From: Jack Senyitko Date: Mon, 22 Dec 2025 10:05:54 -0500 Subject: [PATCH 3/3] use in filters bar --- .../SearchPageHeader/SearchFiltersBar.tsx | 102 +++++++++--------- 1 file changed, 54 insertions(+), 48 deletions(-) diff --git a/src/components/Search/SearchPageHeader/SearchFiltersBar.tsx b/src/components/Search/SearchPageHeader/SearchFiltersBar.tsx index b49b956654242..fb72124b8cc1d 100644 --- a/src/components/Search/SearchPageHeader/SearchFiltersBar.tsx +++ b/src/components/Search/SearchPageHeader/SearchFiltersBar.tsx @@ -25,6 +25,7 @@ import type {BankAccountMenuItem, SearchDateFilterKeys, SearchQueryJSON, Singula import SearchFiltersSkeleton from '@components/Skeletons/SearchFiltersSkeleton'; import useAdvancedSearchFilters from '@hooks/useAdvancedSearchFilters'; import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails'; +import useFilterFormValues from '@hooks/useFilterFormValues'; import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset'; import useLocalize from '@hooks/useLocalize'; import useNetwork from '@hooks/useNetwork'; @@ -35,7 +36,7 @@ import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import useWorkspaceList from '@hooks/useWorkspaceList'; import {close} from '@libs/actions/Modal'; -import {handleBulkPayItemSelected} from '@libs/actions/Search'; +import {handleBulkPayItemSelected, updateAdvancedFilters} from '@libs/actions/Search'; import {mergeCardListWithWorkspaceFeeds} from '@libs/CardUtils'; import DateUtils from '@libs/DateUtils'; import Navigation from '@libs/Navigation/Navigation'; @@ -86,7 +87,7 @@ function SearchFiltersBar({ const scrollRef = useRef>(null); const currentPolicy = usePolicy(currentSelectedPolicyID); const [isUserValidated] = useOnyx(ONYXKEYS.ACCOUNT, {selector: isUserValidatedSelector, canBeMissing: true}); - const [filterFormValues = getEmptyObject>()] = useOnyx(ONYXKEYS.FORMS.SEARCH_ADVANCED_FILTERS_FORM, {canBeMissing: true}); + const [searchAdvancedFiltersForm = getEmptyObject>()] = useOnyx(ONYXKEYS.FORMS.SEARCH_ADVANCED_FILTERS_FORM, {canBeMissing: true}); // type, groupBy and status values are not guaranteed to respect the ts type as they come from user input const {hash, type: unsafeType, groupBy: unsafeGroupBy, status: unsafeStatus, flatFilters} = queryJSON; const [selectedIOUReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${currentSelectedReportID}`, {canBeMissing: true}); @@ -98,6 +99,7 @@ function SearchFiltersBar({ const {isOffline} = useNetwork(); const personalDetails = usePersonalDetails(); + const filterFormValues = useFilterFormValues(queryJSON); const {shouldUseNarrowLayout, isLargeScreenWidth} = useResponsiveLayout(); const {selectedTransactions, selectAllMatchingItems, areAllMatchingItemsSelected, showSelectAllMatchingItems, shouldShowFiltersBarLoading} = useSearchContext(); @@ -144,13 +146,13 @@ function SearchFiltersBar({ // Get selected workspace options from filterFormValues or queryJSON const selectedWorkspaceOptions = useMemo(() => { - const policyIDs = filterFormValues.policyID ?? queryJSON.policyID; + const policyIDs = searchAdvancedFiltersForm.policyID ?? queryJSON.policyID; if (!policyIDs) { return []; } const normalizedIDs = Array.isArray(policyIDs) ? policyIDs : [policyIDs]; return workspaceOptions.filter((option) => normalizedIDs.includes(option.value)); - }, [filterFormValues.policyID, queryJSON.policyID, workspaceOptions]); + }, [searchAdvancedFiltersForm.policyID, queryJSON.policyID, workspaceOptions]); const hasErrors = Object.keys(searchResultsErrors ?? {}).length > 0 && !isOffline; const shouldShowSelectedDropdown = headerButtonsOptions.length > 0 && (!shouldUseNarrowLayout || isMobileSelectionModeEnabled); @@ -190,9 +192,9 @@ function SearchFiltersBar({ const [groupCurrencyOptions, groupCurrency] = useMemo(() => { const options = getGroupCurrencyOptions(currencyList); - const value = options.find((option) => option.value === filterFormValues.groupCurrency) ?? null; + const value = options.find((option) => option.value === searchAdvancedFiltersForm.groupCurrency) ?? null; return [options, value]; - }, [filterFormValues.groupCurrency, currencyList]); + }, [searchAdvancedFiltersForm.groupCurrency, currencyList]); const [feedOptions, feed] = useMemo(() => { const feedFilterValues = flatFilters.find((filter) => filter.key === CONST.SEARCH.SYNTAX_FILTER_KEYS.FEED)?.filters?.map((filter) => filter.value); @@ -252,55 +254,55 @@ function SearchFiltersBar({ const [date, displayDate] = useMemo( () => createDateDisplayValue({ - on: filterFormValues.dateOn, - after: filterFormValues.dateAfter, - before: filterFormValues.dateBefore, + on: searchAdvancedFiltersForm.dateOn, + after: searchAdvancedFiltersForm.dateAfter, + before: searchAdvancedFiltersForm.dateBefore, }), - [filterFormValues.dateOn, filterFormValues.dateAfter, filterFormValues.dateBefore, createDateDisplayValue], + [searchAdvancedFiltersForm.dateOn, searchAdvancedFiltersForm.dateAfter, searchAdvancedFiltersForm.dateBefore, createDateDisplayValue], ); const [posted, displayPosted] = useMemo( () => createDateDisplayValue({ - on: filterFormValues.postedOn, - after: filterFormValues.postedAfter, - before: filterFormValues.postedBefore, + on: searchAdvancedFiltersForm.postedOn, + after: searchAdvancedFiltersForm.postedAfter, + before: searchAdvancedFiltersForm.postedBefore, }), - [filterFormValues.postedOn, filterFormValues.postedAfter, filterFormValues.postedBefore, createDateDisplayValue], + [searchAdvancedFiltersForm.postedOn, searchAdvancedFiltersForm.postedAfter, searchAdvancedFiltersForm.postedBefore, createDateDisplayValue], ); const [withdrawn, displayWithdrawn] = useMemo( () => createDateDisplayValue({ - on: filterFormValues.withdrawnOn, - after: filterFormValues.withdrawnAfter, - before: filterFormValues.withdrawnBefore, + on: searchAdvancedFiltersForm.withdrawnOn, + after: searchAdvancedFiltersForm.withdrawnAfter, + before: searchAdvancedFiltersForm.withdrawnBefore, }), - [filterFormValues.withdrawnOn, filterFormValues.withdrawnAfter, filterFormValues.withdrawnBefore, createDateDisplayValue], + [searchAdvancedFiltersForm.withdrawnOn, searchAdvancedFiltersForm.withdrawnAfter, searchAdvancedFiltersForm.withdrawnBefore, createDateDisplayValue], ); const [withdrawalTypeOptions, withdrawalType] = useMemo(() => { const options = getWithdrawalTypeOptions(translate); - const value = options.find((option) => option.value === filterFormValues.withdrawalType) ?? null; + const value = options.find((option) => option.value === searchAdvancedFiltersForm.withdrawalType) ?? null; return [options, value]; - }, [translate, filterFormValues.withdrawalType]); + }, [translate, searchAdvancedFiltersForm.withdrawalType]); const {accountID} = useCurrentUserPersonalDetails(); const activeAdminPolicies = getActiveAdminWorkspaces(allPolicies, accountID.toString()).sort((a, b) => localeCompare(a.name || '', b.name || '')); const updateFilterForm = useCallback( (values: Partial) => { const updatedFilterFormValues: Partial = { - ...filterFormValues, + ...searchAdvancedFiltersForm, ...values, }; // If the type has changed, reset the status so we dont have an invalid status selected - if (updatedFilterFormValues.type !== filterFormValues.type) { + if (updatedFilterFormValues.type !== searchAdvancedFiltersForm.type) { updatedFilterFormValues.status = CONST.SEARCH.STATUS.EXPENSE.ALL; updatedFilterFormValues.columns = []; } - if (updatedFilterFormValues.groupBy !== filterFormValues.groupBy) { + if (updatedFilterFormValues.groupBy !== searchAdvancedFiltersForm.groupBy) { updatedFilterFormValues.columns = []; } @@ -311,12 +313,13 @@ function SearchFiltersBar({ Navigation.setParams({q: queryString, rawQuery: undefined}); }); }, - [filterFormValues], + [searchAdvancedFiltersForm], ); const openAdvancedFilters = useCallback(() => { + updateAdvancedFilters(filterFormValues); Navigation.navigate(ROUTES.SEARCH_ADVANCED_FILTERS.getRoute()); - }, []); + }, [filterFormValues]); const openSearchColumns = () => { Navigation.navigate(ROUTES.SEARCH_COLUMNS); @@ -483,7 +486,7 @@ function SearchFiltersBar({ const userPickerComponent = useCallback( ({closeOverlay}: PopoverComponentProps) => { - const value = filterFormValues.from ?? []; + const value = searchAdvancedFiltersForm.from ?? []; return ( ); }, - [filterFormValues.from, updateFilterForm], + [searchAdvancedFiltersForm.from, updateFilterForm], ); const handleWorkspaceChange = useCallback( @@ -528,14 +531,15 @@ function SearchFiltersBar({ * filter bar */ const filters = useMemo(() => { - const fromValue = filterFormValues.from?.map((currentAccountID) => getDisplayNameOrDefault(personalDetails?.[currentAccountID], currentAccountID, false)) ?? []; + const fromValue = searchAdvancedFiltersForm.from?.map((currentAccountID) => getDisplayNameOrDefault(personalDetails?.[currentAccountID], currentAccountID, false)) ?? []; const shouldDisplayGroupByFilter = !!groupBy?.value; const shouldDisplayGroupCurrencyFilter = shouldDisplayGroupByFilter && hasMultipleOutputCurrency; - const shouldDisplayFeedFilter = feedOptions.length > 1 && !!filterFormValues.feed; - const shouldDisplayPostedFilter = !!filterFormValues.feed && (!!filterFormValues.postedOn || !!filterFormValues.postedAfter || !!filterFormValues.postedBefore); - const shouldDisplayWithdrawalTypeFilter = !!filterFormValues.withdrawalType; - const shouldDisplayWithdrawnFilter = !!filterFormValues.withdrawnOn || !!filterFormValues.withdrawnAfter || !!filterFormValues.withdrawnBefore; + const shouldDisplayFeedFilter = feedOptions.length > 1 && !!searchAdvancedFiltersForm.feed; + const shouldDisplayPostedFilter = + !!searchAdvancedFiltersForm.feed && (!!searchAdvancedFiltersForm.postedOn || !!searchAdvancedFiltersForm.postedAfter || !!searchAdvancedFiltersForm.postedBefore); + const shouldDisplayWithdrawalTypeFilter = !!searchAdvancedFiltersForm.withdrawalType; + const shouldDisplayWithdrawnFilter = !!searchAdvancedFiltersForm.withdrawnOn || !!searchAdvancedFiltersForm.withdrawnAfter || !!searchAdvancedFiltersForm.withdrawnBefore; const filterList = [ { @@ -665,15 +669,15 @@ function SearchFiltersBar({ displayDate, displayPosted, displayWithdrawn, - filterFormValues.from, - filterFormValues.feed, - filterFormValues.postedOn, - filterFormValues.postedAfter, - filterFormValues.postedBefore, - filterFormValues.withdrawalType, - filterFormValues.withdrawnOn, - filterFormValues.withdrawnAfter, - filterFormValues.withdrawnBefore, + searchAdvancedFiltersForm.from, + searchAdvancedFiltersForm.feed, + searchAdvancedFiltersForm.postedOn, + searchAdvancedFiltersForm.postedAfter, + searchAdvancedFiltersForm.postedBefore, + searchAdvancedFiltersForm.withdrawalType, + searchAdvancedFiltersForm.withdrawnOn, + searchAdvancedFiltersForm.withdrawnAfter, + searchAdvancedFiltersForm.withdrawnBefore, translate, hasComponent, isComponent, @@ -712,12 +716,14 @@ function SearchFiltersBar({ ); const hiddenFilters = advancedSearchFiltersKeys.filter((key) => !exposedFiltersKeys.has(key as SearchAdvancedFiltersKey)); - const hasReportFields = Object.keys(filterFormValues).some((key) => key.startsWith(CONST.SEARCH.REPORT_FIELD.GLOBAL_PREFIX) && !key.startsWith(CONST.SEARCH.REPORT_FIELD.NOT_PREFIX)); + const hasReportFields = Object.keys(searchAdvancedFiltersForm).some( + (key) => key.startsWith(CONST.SEARCH.REPORT_FIELD.GLOBAL_PREFIX) && !key.startsWith(CONST.SEARCH.REPORT_FIELD.NOT_PREFIX), + ); return hiddenFilters.filter((key) => { const dateFilterKey = DATE_FILTER_KEYS.find((dateKey) => key === dateKey); if (dateFilterKey) { - return filterFormValues[`${dateFilterKey}On`] ?? filterFormValues[`${dateFilterKey}After`] ?? filterFormValues[`${dateFilterKey}Before`]; + return searchAdvancedFiltersForm[`${dateFilterKey}On`] ?? searchAdvancedFiltersForm[`${dateFilterKey}After`] ?? searchAdvancedFiltersForm[`${dateFilterKey}Before`]; } if (key === CONST.SEARCH.SYNTAX_FILTER_KEYS.REPORT_FIELD) { @@ -727,15 +733,15 @@ function SearchFiltersBar({ const amountFilterKey = AMOUNT_FILTER_KEYS.find((amountKey) => key === amountKey); if (amountFilterKey) { return ( - filterFormValues[`${amountFilterKey}${CONST.SEARCH.AMOUNT_MODIFIERS.EQUAL_TO}`] ?? - filterFormValues[`${amountFilterKey}${CONST.SEARCH.AMOUNT_MODIFIERS.GREATER_THAN}`] ?? - filterFormValues[`${amountFilterKey}${CONST.SEARCH.AMOUNT_MODIFIERS.LESS_THAN}`] + searchAdvancedFiltersForm[`${amountFilterKey}${CONST.SEARCH.AMOUNT_MODIFIERS.EQUAL_TO}`] ?? + searchAdvancedFiltersForm[`${amountFilterKey}${CONST.SEARCH.AMOUNT_MODIFIERS.GREATER_THAN}`] ?? + searchAdvancedFiltersForm[`${amountFilterKey}${CONST.SEARCH.AMOUNT_MODIFIERS.LESS_THAN}`] ); } - return filterFormValues[key as SearchAdvancedFiltersKey]; + return searchAdvancedFiltersForm[key as SearchAdvancedFiltersKey]; }); - }, [filterFormValues, filters, typeFiltersKeys]); + }, [searchAdvancedFiltersForm, filters, typeFiltersKeys]); const adjustScroll = useCallback((info: {distanceFromEnd: number}) => { // Workaround for a known React Native bug on Android (https://github.com/facebook/react-native/issues/27504):