Filter list not updated after change type

src/components/Search/FilterComponents/CategorySelector.tsx

@@ -6,20 +6,18 @@ import useOnyx from '@hooks/useOnyx';
 import {getDecodedCategoryName} from '@libs/CategoryUtils';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
-import {filterPolicyIDSelector} from '@src/selectors/Search';
 import type {PolicyCategories, PolicyCategory} from '@src/types/onyx';
 import {getEmptyObject} from '@src/types/utils/EmptyObject';
-import getEmptyArray from '@src/types/utils/getEmptyArray';
 import MultiSelect from './MultiSelect';
 
 type CategorySelectorProps = SearchFilterSelectionListProps & {
     value: string[] | undefined;
+    policyIDs: string[] | undefined;
     onChange: (categories: string[]) => void;
 };
 
-function CategorySelector({value = [], selectionListTextInputStyle, selectionListStyle, autoFocus, footer, onChange}: CategorySelectorProps) {
+function CategorySelector({value = [], policyIDs = [], selectionListTextInputStyle, selectionListStyle, autoFocus, footer, onChange}: CategorySelectorProps) {
     const {translate} = useLocalize();
-    const [policyIDs = getEmptyArray<string>()] = useOnyx(ONYXKEYS.FORMS.SEARCH_ADVANCED_FILTERS_FORM, {selector: filterPolicyIDSelector});
     const [personalPolicyID] = useOnyx(ONYXKEYS.PERSONAL_POLICY_ID);
 
     const selectedCategoriesItems = value.map((category) => {

src/components/Search/FilterComponents/ExportedToSelector.tsx

@@ -16,13 +16,12 @@ import {getIntegrationIcon} from '@libs/ReportUtils';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
-import {filterPolicyIDSelector} from '@src/selectors/Search';
-import getEmptyArray from '@src/types/utils/getEmptyArray';
 import type IconAsset from '@src/types/utils/IconAsset';
 import MultiSelect from './MultiSelect';
 
 type ExportedToSelectorProps = SearchFilterSelectionListProps & {
     value: string[] | undefined;
+    policyIDs: string[] | undefined;
     onChange: (exportedTo: string[]) => void;
 };
 
@@ -31,7 +30,7 @@ const STANDARD_EXPORT_TEMPLATE_ID_TO_DISPLAY_LABEL: Record<string, string> = {
     [CONST.REPORT.EXPORT_OPTIONS.EXPENSE_LEVEL_EXPORT]: CONST.REPORT.EXPORT_OPTION_LABELS.EXPENSE_LEVEL_EXPORT,
 };
 
-function ExportedToSelector({value = [], selectionListTextInputStyle, selectionListStyle, autoFocus, footer, onChange}: ExportedToSelectorProps) {
+function ExportedToSelector({value = [], policyIDs = [], selectionListTextInputStyle, selectionListStyle, autoFocus, footer, onChange}: ExportedToSelectorProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const StyleUtils = useStyleUtils();
@@ -49,7 +48,6 @@ function ExportedToSelector({value = [], selectionListTextInputStyle, selectionL
     ]);
     const [integrationsExportTemplates] = useOnyx(ONYXKEYS.NVP_INTEGRATION_SERVER_EXPORT_TEMPLATES);
     const [csvExportLayouts] = useOnyx(ONYXKEYS.NVP_CSV_EXPORT_LAYOUTS);
-    const [policyIDs = getEmptyArray<string>()] = useOnyx(ONYXKEYS.FORMS.SEARCH_ADVANCED_FILTERS_FORM, {selector: filterPolicyIDSelector});
     const [policies] = useOnyx(ONYXKEYS.COLLECTION.POLICY);
 
     const connectedIntegrationNames = getConnectedIntegrationNamesForPolicies(policies, policyIDs.length > 0 ? policyIDs : undefined);

src/components/Search/FilterComponents/TagSelector.tsx

@@ -7,20 +7,18 @@ import {getCleanedTagName, getTagNamesFromTagsLists} from '@libs/PolicyUtils';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import passthroughPolicyTagListSelector from '@src/selectors/PolicyTagList';
-import {filterPolicyIDSelector} from '@src/selectors/Search';
 import type {PolicyTagLists} from '@src/types/onyx';
 import {getEmptyObject} from '@src/types/utils/EmptyObject';
-import getEmptyArray from '@src/types/utils/getEmptyArray';
 import MultiSelect from './MultiSelect';
 
 type TagSelectorProps = SearchFilterSelectionListProps & {
     value: string[] | undefined;
+    policyIDs: string[] | undefined;
     onChange: (tags: string[]) => void;
 };
 
-function TagSelector({value = [], selectionListTextInputStyle, selectionListStyle, autoFocus, footer, onChange}: TagSelectorProps) {
+function TagSelector({value = [], policyIDs = [], selectionListTextInputStyle, selectionListStyle, autoFocus, footer, onChange}: TagSelectorProps) {
     const {translate} = useLocalize();
-    const [policyIDs = getEmptyArray<string>()] = useOnyx(ONYXKEYS.FORMS.SEARCH_ADVANCED_FILTERS_FORM, {selector: filterPolicyIDSelector});
     const [allPolicyTagLists = getEmptyObject<NonNullable<OnyxCollection<PolicyTagLists>>>()] = useOnyx(ONYXKEYS.COLLECTION.POLICY_TAGS, {selector: passthroughPolicyTagListSelector});
 
     const selectedPoliciesTagLists = Object.keys(allPolicyTagLists ?? {})

src/components/Search/FilterComponents/TaxRateSelector.tsx

@@ -4,17 +4,16 @@ import useOnyx from '@hooks/useOnyx';
 import {getAllTaxRates} from '@libs/PolicyUtils';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
-import {filterPolicyIDSelector} from '@src/selectors/Search';
 import type {Policy} from '@src/types/onyx';
 import MultiSelect from './MultiSelect';
 
 type TaxRateSelectorProps = SearchFilterSelectionListProps & {
     value: string[] | undefined;
+    policyIDs: string[] | undefined;
     onChange: (taxRates: string[]) => void;
 };
 
-function TaxRateSelector({value = [], selectionListTextInputStyle, selectionListStyle, autoFocus, footer, onChange}: TaxRateSelectorProps) {
-    const [policyIDs] = useOnyx(ONYXKEYS.FORMS.SEARCH_ADVANCED_FILTERS_FORM, {selector: filterPolicyIDSelector});
+function TaxRateSelector({value = [], policyIDs = [], selectionListTextInputStyle, selectionListStyle, autoFocus, footer, onChange}: TaxRateSelectorProps) {
     const [policies] = useOnyx(ONYXKEYS.COLLECTION.POLICY);
 
     const allTaxRates = getAllTaxRates(policies);

src/components/Search/FilterComponents/WorkspaceSelector.tsx

@@ -1,7 +1,12 @@
 import React from 'react';
+import type {OnyxCollection} from 'react-native-onyx';
 import type {SearchFilterSelectionListProps} from '@components/Search/types';
-import useAdvancedSearchFilters from '@hooks/useAdvancedSearchFilters';
+import {advancedSearchPoliciesSelector, useAdvancedSearchFiltersWorkspaces} from '@hooks/useAdvancedSearchFilters';
+import useOnyx from '@hooks/useOnyx';
+import ONYXKEYS from '@src/ONYXKEYS';
+import type {Policy} from '@src/types/onyx';
 import type {Icon} from '@src/types/onyx/OnyxCommon';
+import {getEmptyObject} from '@src/types/utils/EmptyObject';
 import type {MultiSelectItem} from './MultiSelect';
 import MultiSelect from './MultiSelect';
 
@@ -13,7 +18,8 @@ type WorkspaceSelectorProps = SearchFilterSelectionListProps & {
 };
 
 function WorkspaceSelector({policyIDQuery, value, selectionListTextInputStyle, selectionListStyle, autoFocus, footer, onChange}: WorkspaceSelectorProps) {
-    const {workspaces, shouldShowWorkspaceSearchInput} = useAdvancedSearchFilters();
+    const [policies = getEmptyObject<NonNullable<OnyxCollection<Policy>>>()] = useOnyx(ONYXKEYS.COLLECTION.POLICY, {selector: advancedSearchPoliciesSelector});
+    const {workspaces, shouldShowWorkspaceSearchInput} = useAdvancedSearchFiltersWorkspaces(policies);
     const workspaceOptions: Array<MultiSelectItem<string>> = workspaces
         .flatMap((section) => section.data)
         .filter((workspace): workspace is typeof workspace & {policyID: string; icons: Icon[]} => !!workspace.policyID && !!workspace.icons)

src/components/Search/FilterComponents/index.tsx

@@ -1,15 +1,13 @@
 import React from 'react';
-import type {OnyxEntry} from 'react-native-onyx';
 import type {SearchAmountFilterKeys, SearchDateFilterKeys, SearchFilterSelectionListProps} from '@components/Search/types';
 import TextInput from '@components/TextInput';
 import useLocalize from '@hooks/useLocalize';
-import useOnyx from '@hooks/useOnyx';
 import useThemeStyles from '@hooks/useThemeStyles';
 import {FILTER_VIEW_MAP, getMultiSelectFilterOptions, getSingleSelectFilterOptions} from '@libs/SearchUIUtils';
 import type {SearchFilter} from '@libs/SearchUIUtils';
 import CONST from '@src/CONST';
-import ONYXKEYS from '@src/ONYXKEYS';
 import type {SearchAdvancedFiltersForm} from '@src/types/form/SearchAdvancedFiltersForm';
+import type {SearchDataTypes} from '@src/types/onyx/SearchResults';
 import CardSelector from './CardSelector';
 import CategorySelector from './CategorySelector';
 import CurrencySelector from './CurrencySelector';
@@ -28,6 +26,8 @@ type FilterKeys = Exclude<SearchFilter['key'], SearchDateFilterKeys | SearchAmou
 type FilterComponentsProps = SearchFilterSelectionListProps & {
     filterKey: FilterKeys;
     value: SearchAdvancedFiltersForm[FilterKeys] | undefined;
+    type?: SearchDataTypes;
+    policyIDs: string[] | undefined;
     policyIDQuery: string[] | undefined;
     allowDeselectSingleSelection?: boolean;
     onChange: (value: SearchAdvancedFiltersForm[FilterKeys] | undefined) => void;
@@ -63,6 +63,7 @@ type MultiSelectFilterKeys =
 type MultiSelectFilterComponentsProps = SearchFilterSelectionListProps & {
     filterKey: MultiSelectFilterKeys;
     value: SearchAdvancedFiltersForm[MultiSelectFilterKeys] | undefined;
+    type: SearchDataTypes | undefined;
     onChange: (values: SearchAdvancedFiltersForm[MultiSelectFilterKeys]) => void;
 };
 
@@ -101,14 +102,8 @@ function SingleSelectFilterComponents({filterKey, value, selectionListTextInputS
     );
 }
 
-function MultiSelectFilterComponents({filterKey, value = [], selectionListStyle, footer, onChange}: MultiSelectFilterComponentsProps) {
+function MultiSelectFilterComponents({filterKey, value = [], type = CONST.SEARCH.DATA_TYPES.EXPENSE, selectionListStyle, footer, onChange}: MultiSelectFilterComponentsProps) {
     const {translate} = useLocalize();
-    const typeSelector = (searchAdvancedFiltersForm: OnyxEntry<SearchAdvancedFiltersForm>) => {
-        return searchAdvancedFiltersForm?.type;
-    };
-    const [type = CONST.SEARCH.DATA_TYPES.EXPENSE] = useOnyx(ONYXKEYS.FORMS.SEARCH_ADVANCED_FILTERS_FORM, {
-        selector: typeSelector,
-    });
     const items = getMultiSelectFilterOptions(filterKey, type, translate);
     const normalizedValue = Array.isArray(value) ? value : value.split(',');
     const multiSelectValues = items.filter((item) => normalizedValue.includes(item.value));
@@ -133,6 +128,8 @@ function MultiSelectFilterComponents({filterKey, value = [], selectionListStyle,
 function FilterComponents({
     filterKey,
     value,
+    type,
+    policyIDs,
     policyIDQuery,
     selectionListTextInputStyle,
     selectionListStyle,
@@ -161,6 +158,7 @@ function FilterComponents({
             return (
                 <Component
                     value={value as string[] | undefined}
+                    policyIDs={policyIDs}
                     selectionListTextInputStyle={selectionListTextInputStyle}
                     selectionListStyle={selectionListStyle}
                     autoFocus={autoFocus}
@@ -235,6 +233,7 @@ function FilterComponents({
                     key={filterKey}
                     filterKey={filterKey}
                     value={value}
+                    type={type}
                     selectionListTextInputStyle={selectionListTextInputStyle}
                     selectionListStyle={selectionListStyle}
                     footer={footer}

src/components/Search/FilterDropdowns/AdvancedFilters/AdvancedFiltersFullscreen.tsx

@@ -59,6 +59,8 @@ function AdvancedFiltersFullscreen({queryJSON, closeOverlay}: AdvancedFiltersFul
             <FilterList
                 style={!!selectedFilter && styles.dNone}
                 selectedFilter={selectedFilter}
+                type={values.type}
+                policyID={values.policyID}
                 onFilterSelected={setSelectedFilter}
             />
             {!!selectedFilter && (

src/components/Search/FilterDropdowns/AdvancedFilters/AdvancedFiltersPopup.tsx

@@ -32,6 +32,8 @@ function AdvancedFiltersPopup({queryJSON}: AdvancedFiltersPopupProps) {
             <View style={[styles.flexRow, StyleUtils.getHeight(Math.min(windowHeight, CONST.ADVANCED_FILTERS_POPOVER_HEIGHT))]}>
                 <FilterList
                     selectedFilter={selectedFilter}
+                    type={searchAdvancedFiltersForm?.type}
+                    policyID={searchAdvancedFiltersForm?.policyID}
                     onFilterSelected={setSelectedFilter}
                 />
                 <View

src/components/Search/FilterDropdowns/AdvancedFilters/FilterList.tsx

@@ -6,18 +6,21 @@ import SpacerView from '@components/SpacerView';
 import useAdvancedSearchFilters from '@hooks/useAdvancedSearchFilters';
 import useThemeStyles from '@hooks/useThemeStyles';
 import type {SearchFilter} from '@libs/SearchUIUtils';
+import type {SearchDataTypes} from '@src/types/onyx/SearchResults';
 import FilterItem from './FilterItem';
 import useFullscreenAdvancedFilters from './useFullscreenAdvancedFilters';
 
 type FilterListProps = {
     selectedFilter: SearchFilter['key'] | null;
+    type: SearchDataTypes | undefined;
+    policyID: string[] | undefined;
     style?: StyleProp<ViewStyle>;
     onFilterSelected: (filter: SearchFilter['key']) => void;
 };
 
-function FilterList({selectedFilter, style, onFilterSelected}: FilterListProps) {
+function FilterList({selectedFilter, type, policyID, style, onFilterSelected}: FilterListProps) {
     const styles = useThemeStyles();
-    const {typeFiltersKeys} = useAdvancedSearchFilters();
+    const typeFiltersKeys = useAdvancedSearchFilters(type, policyID);
     const fullscreen = useFullscreenAdvancedFilters();
 
     return (

src/components/Search/FilterDropdowns/AdvancedFilters/SelectedFilterContent.tsx

@@ -9,6 +9,7 @@ import {isAmountFilterKey, isDateFilterKey} from '@libs/SearchUIUtils';
 import type {SearchFilter} from '@libs/SearchUIUtils';
 import CONST from '@src/CONST';
 import type {SearchAdvancedFiltersForm} from '@src/types/form';
+import type {SearchDataTypes} from '@src/types/onyx/SearchResults';
 import AmountFilterComponent from './AmountFilterComponent';
 import DateFilterComponent from './DateFilterComponent';
 import ReportFieldFilterComponent from './ReportFieldFilterComponent';
@@ -36,6 +37,8 @@ type TextInputFilterContentProps = {
 type CommonContentProps = {
     filterKey: FilterComponentsProps['filterKey'];
     value: FilterComponentsProps['value'];
+    type: SearchDataTypes | undefined;
+    policyIDs: string[] | undefined;
     policyIDQuery: string[] | undefined;
     onChange: (values: Partial<SearchAdvancedFiltersForm>) => void;
 };
@@ -51,6 +54,7 @@ function TextInputFilterContent({filterKey, value: initialValue, onChange}: Text
         <View style={[styles.flex1, styles.justifyContentBetween, !fullscreen && styles.pt5]}>
             <FilterComponents
                 value={value}
+                policyIDs={undefined}
                 filterKey={filterKey}
                 policyIDQuery={undefined}
                 autoFocus={fullscreen}
@@ -68,7 +72,7 @@ function TextInputFilterContent({filterKey, value: initialValue, onChange}: Text
     );
 }
 
-function CommonContent({filterKey, value: initialValue, policyIDQuery, onChange}: CommonContentProps) {
+function CommonContent({filterKey, value: initialValue, type, policyIDs, policyIDQuery, onChange}: CommonContentProps) {
     const {translate} = useLocalize();
     const styles = useThemeStyles();
     const [value, setValue] = useState<FilterComponentsProps['value']>(initialValue);
@@ -78,6 +82,8 @@ function CommonContent({filterKey, value: initialValue, policyIDQuery, onChange}
     return (
         <FilterComponents
             value={fullscreen ? value : initialValue}
+            type={type}
+            policyIDs={policyIDs}
             filterKey={filterKey}
             policyIDQuery={policyIDQuery}
             selectionListTextInputStyle={!fullscreen && [styles.pb1, styles.pt5]}
@@ -167,6 +173,8 @@ function SelectedFilterContent({filterKey, values, policyIDQuery, onChange}: Sel
             key={filterKey}
             filterKey={filterKey}
             value={values?.[filterKey]}
+            type={values?.type}
+            policyIDs={values?.policyID}
             policyIDQuery={policyIDQuery}
             onChange={onChange}
         />

src/components/Search/FilterDropdowns/CommonPopup.tsx

@@ -8,13 +8,15 @@ import type {PopoverComponentProps} from './FilterPopupButton';
 type CommonPopupProps = {
     filterKey: FilterComponentsProps['filterKey'];
     value: FilterComponentsProps['value'];
+    type: FilterComponentsProps['type'];
+    policyIDs: FilterComponentsProps['policyIDs'];
     label: string;
     policyIDQuery: string[] | undefined;
     closeOverlay: PopoverComponentProps['closeOverlay'];
     updateFilterForm: (value: Partial<SearchAdvancedFiltersForm>) => void;
 };
 
-function CommonPopup({filterKey, value: initialValue, label, policyIDQuery, updateFilterForm, closeOverlay}: CommonPopupProps) {
+function CommonPopup({filterKey, value: initialValue, type, policyIDs, label, policyIDQuery, updateFilterForm, closeOverlay}: CommonPopupProps) {
     const [value, setValue] = useState(initialValue);
 
     const applyChanges = () => {
@@ -38,6 +40,8 @@ function CommonPopup({filterKey, value: initialValue, label, policyIDQuery, upda
             <FilterComponents
                 filterKey={filterKey}
                 value={value}
+                type={type}
+                policyIDs={policyIDs}
                 policyIDQuery={policyIDQuery}
                 onChange={setValue}
             />

src/components/Search/SearchPageHeader/useSearchFiltersBar.tsx

@@ -103,6 +103,8 @@ function FilterPopup({filterKey, searchAdvancedFiltersForm, queryJSON, closeOver
         <CommonPopup
             filterKey={filterKey}
             value={searchAdvancedFiltersForm[filterKey]}
+            type={searchAdvancedFiltersForm.type}
+            policyIDs={searchAdvancedFiltersForm.policyID}
             label={label}
             policyIDQuery={queryJSON.policyID}
             closeOverlay={closeOverlay}

src/components/Search/hooks/useFilterCardValue.tsx

@@ -1,10 +1,12 @@
-import useAdvancedSearchFilters from '@hooks/useAdvancedSearchFilters';
 import useLocalize from '@hooks/useLocalize';
+import useOnyx from '@hooks/useOnyx';
 import {getCardDescription} from '@libs/CardUtils';
+import ONYXKEYS from '@src/ONYXKEYS';
+import {filterCardsHiddenFromSearch} from '@src/selectors/Card';
 
 function useFilterCardValue(value: string[]): string {
     const {translate} = useLocalize();
-    const {searchCards} = useAdvancedSearchFilters();
+    const [searchCards] = useOnyx(ONYXKEYS.DERIVED.PERSONAL_AND_WORKSPACE_CARD_LIST, {selector: filterCardsHiddenFromSearch});
 
     const cardNames = Object.values(searchCards ?? {})
         .filter((card) => value.includes(card.cardID.toString()))

src/components/Search/hooks/useFilterTaxRateValue.tsx

@@ -1,19 +1,27 @@
-import useAdvancedSearchFilters from '@hooks/useAdvancedSearchFilters';
+import type {OnyxCollection} from 'react-native-onyx';
+import useOnyx from '@hooks/useOnyx';
 import {getAllTaxRates} from '@libs/PolicyUtils';
+import ONYXKEYS from '@src/ONYXKEYS';
+import type {Policy} from '@src/types/onyx';
 
-function useFilterTaxRateValue(value: string[]): string {
-    const {policies} = useAdvancedSearchFilters();
-
-    const taxRates = getAllTaxRates(policies);
-    const result: string[] = [];
-    for (const [taxRateName, taxRateKeys] of Object.entries(taxRates)) {
-        if (!taxRateKeys.some((taxRateKey) => value.includes(taxRateKey)) || result.includes(taxRateName)) {
-            continue;
+function taxRatesPoliciesSelector(value: string[]) {
+    return (policies: OnyxCollection<Policy>) => {
+        const taxRates = getAllTaxRates(policies);
+        const result: string[] = [];
+        for (const [taxRateName, taxRateKeys] of Object.entries(taxRates)) {
+            if (!taxRateKeys.some((taxRateKey) => value.includes(taxRateKey)) || result.includes(taxRateName)) {
+                continue;
+            }
+            result.push(taxRateName);
         }
-        result.push(taxRateName);
+
+        return result.join(', ');
     }
+}
 
-    return result.join(', ');
+function useFilterTaxRateValue(value: string[]): string {
+    const [taxRateValue = ''] = useOnyx(ONYXKEYS.COLLECTION.POLICY, {selector: taxRatesPoliciesSelector(value)});
+    return taxRateValue;
 }
 
 export default useFilterTaxRateValue;