Skip to content

Commit

Permalink
Merge pull request #52102 from software-mansion-labs/kicu/50564-hide-…
Browse files Browse the repository at this point in the history 
…category-filter

Stop displaying some advanced filters when they have no data
  • Loading branch information
@luacmartins
luacmartins authored Nov 8, 2024
2 parents 50794ef + 5292f56 commit a569cbc
Show file tree
Hide file tree
Showing 3 changed files with 55 additions and 21 deletions.
52 changes: 44 additions & 8 deletions src/pages/Search/AdvancedSearchFilters.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ import {convertToDisplayStringWithoutCurrency} from '@libs/CurrencyUtils';
import localeCompare from '@libs/LocaleCompare';
import Navigation from '@libs/Navigation/Navigation';
import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils';
import {getAllTaxRates} from '@libs/PolicyUtils';
import {getAllTaxRates, getTagNamesFromTagsLists} from '@libs/PolicyUtils';
import * as ReportUtils from '@libs/ReportUtils';
import * as SearchQueryUtils from '@libs/SearchQueryUtils';
import * as SearchUIUtils from '@libs/SearchUIUtils';
Expand All @@ -27,7 +27,7 @@ import CONST from '@src/CONST';
import ONYXKEYS from '@src/ONYXKEYS';
import ROUTES from '@src/ROUTES';
import type {SearchAdvancedFiltersForm} from '@src/types/form';
import type {CardList, PersonalDetailsList, Report} from '@src/types/onyx';
import type {CardList, PersonalDetailsList, Policy, PolicyTagLists, Report} from '@src/types/onyx';

const baseFilterConfig = {
date: {
Expand Down Expand Up @@ -242,14 +242,15 @@ function getFilterExpenseDisplayTitle(filters: Partial<SearchAdvancedFiltersForm
: undefined;
}

function getFilterInDisplayTitle(filters: Partial<SearchAdvancedFiltersForm>, translate: LocaleContextProps['translate'], reports?: OnyxCollection<Report>) {
function getFilterInDisplayTitle(filters: Partial<SearchAdvancedFiltersForm>, _: LocaleContextProps['translate'], reports?: OnyxCollection<Report>) {
return filters.in
? filters.in
.map((id) => ReportUtils.getReportName(reports?.[`${ONYXKEYS.COLLECTION.REPORT}${id}`]))
.filter(Boolean)
.join(', ')
: undefined;
}

function AdvancedSearchFilters() {
const {translate} = useLocalize();
const styles = useThemeStyles();
Expand All @@ -258,9 +259,33 @@ function AdvancedSearchFilters() {
const [reports] = useOnyx(ONYXKEYS.COLLECTION.REPORT);
const [savedSearches] = useOnyx(ONYXKEYS.SAVED_SEARCHES);
const [searchAdvancedFilters = {} as SearchAdvancedFiltersForm] = useOnyx(ONYXKEYS.FORMS.SEARCH_ADVANCED_FILTERS_FORM);
const policyID = searchAdvancedFilters.policyID ?? '-1';

const [cardList = {}] = useOnyx(ONYXKEYS.CARD_LIST);
const taxRates = getAllTaxRates();
const personalDetails = usePersonalDetails();

const [policies = {}] = useOnyx(ONYXKEYS.COLLECTION.POLICY);
const [allPolicyCategories = {}] = useOnyx(ONYXKEYS.COLLECTION.POLICY_CATEGORIES);
const singlePolicyCategories = allPolicyCategories[`${ONYXKEYS.COLLECTION.POLICY_CATEGORIES}${policyID}`];
const [allPolicyTagLists = {}] = useOnyx(ONYXKEYS.COLLECTION.POLICY_TAGS);
const singlePolicyTagLists = allPolicyTagLists[`${ONYXKEYS.COLLECTION.POLICY_TAGS}${policyID}`];
const tagListsUnpacked = Object.values(allPolicyTagLists ?? {})
.filter((item): item is NonNullable<PolicyTagLists> => !!item)
.map(getTagNamesFromTagsLists)
.flat();

// When looking if a user has any categories to display, we want to ignore the policies that are of type PERSONAL
const nonPersonalPolicyCategoryIds = Object.values(policies)
.filter((policy): policy is NonNullable<Policy> => !!(policy && policy.type !== CONST.POLICY.TYPE.PERSONAL))
.map((policy) => `${ONYXKEYS.COLLECTION.POLICY_CATEGORIES}${policy.id}`);
const nonPersonalPolicyCategoryCount = Object.keys(allPolicyCategories).filter((policyCategoryId) => nonPersonalPolicyCategoryIds.includes(policyCategoryId)).length;

const shouldDisplayCategoryFilter = nonPersonalPolicyCategoryCount !== 0 || !!singlePolicyCategories;
const shouldDisplayTagFilter = tagListsUnpacked.length !== 0 || !!singlePolicyTagLists;
const shouldDisplayCardFilter = Object.keys(cardList).length !== 0;
const shouldDisplayTaxFilter = Object.keys(taxRates).length !== 0;

let currentType = searchAdvancedFilters?.type ?? CONST.SEARCH.DATA_TYPES.EXPENSE;
if (!Object.keys(typeFiltersKeys).includes(currentType)) {
currentType = CONST.SEARCH.DATA_TYPES.EXPENSE;
Expand Down Expand Up @@ -307,20 +332,31 @@ function AdvancedSearchFilters() {
key === CONST.SEARCH.SYNTAX_FILTER_KEYS.DATE ||
key === CONST.SEARCH.SYNTAX_FILTER_KEYS.AMOUNT ||
key === CONST.SEARCH.SYNTAX_FILTER_KEYS.CURRENCY ||
key === CONST.SEARCH.SYNTAX_FILTER_KEYS.CATEGORY ||
key === CONST.SEARCH.SYNTAX_FILTER_KEYS.DESCRIPTION ||
key === CONST.SEARCH.SYNTAX_FILTER_KEYS.MERCHANT ||
key === CONST.SEARCH.SYNTAX_FILTER_KEYS.REPORT_ID ||
key === CONST.SEARCH.SYNTAX_FILTER_KEYS.KEYWORD ||
key === CONST.SEARCH.SYNTAX_FILTER_KEYS.TAG
key === CONST.SEARCH.SYNTAX_FILTER_KEYS.KEYWORD
) {
filterTitle = baseFilterConfig[key].getTitle(searchAdvancedFilters, key, translate);
} else if (key === CONST.SEARCH.SYNTAX_FILTER_KEYS.CATEGORY) {
if (!shouldDisplayCategoryFilter) {
return;
}
filterTitle = baseFilterConfig[key].getTitle(searchAdvancedFilters, key, translate);
} else if (key === CONST.SEARCH.SYNTAX_FILTER_KEYS.TAG) {
if (!shouldDisplayTagFilter) {
return;
}
filterTitle = baseFilterConfig[key].getTitle(searchAdvancedFilters, key, translate);
} else if (key === CONST.SEARCH.SYNTAX_FILTER_KEYS.CARD_ID) {
if (Object.keys(cardList).length === 0) {
return undefined;
if (!shouldDisplayCardFilter) {
return;
}
filterTitle = baseFilterConfig[key].getTitle(searchAdvancedFilters, cardList);
} else if (key === CONST.SEARCH.SYNTAX_FILTER_KEYS.TAX_RATE) {
if (!shouldDisplayTaxFilter) {
return;
}
filterTitle = baseFilterConfig[key].getTitle(searchAdvancedFilters, taxRates);
} else if (key === CONST.SEARCH.SYNTAX_FILTER_KEYS.EXPENSE_TYPE) {
filterTitle = baseFilterConfig[key].getTitle(searchAdvancedFilters, translate);
Expand Down
8 changes: 4 additions & 4 deletions src/pages/Search/SearchAdvancedFiltersPage/SearchFiltersCategoryPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,20 +25,20 @@ function SearchFiltersCategoryPage() {
return {name: category, value: category};
});
const policyID = searchAdvancedFiltersForm?.policyID ?? '-1';
const [allPolicyIDCategories] = useOnyx(ONYXKEYS.COLLECTION.POLICY_CATEGORIES);
const singlePolicyCategories = allPolicyIDCategories?.[`${ONYXKEYS.COLLECTION.POLICY_CATEGORIES}${policyID}`];
const [allPolicyCategories] = useOnyx(ONYXKEYS.COLLECTION.POLICY_CATEGORIES);
const singlePolicyCategories = allPolicyCategories?.[`${ONYXKEYS.COLLECTION.POLICY_CATEGORIES}${policyID}`];

const categoryItems = useMemo(() => {
const items = [{name: translate('search.noCategory'), value: CONST.SEARCH.EMPTY_VALUE as string}];
if (!singlePolicyCategories) {
const uniqueCategoryNames = new Set<string>();
Object.values(allPolicyIDCategories ?? {}).map((policyCategories) => Object.values(policyCategories ?? {}).forEach((category) => uniqueCategoryNames.add(category.name)));
Object.values(allPolicyCategories ?? {}).map((policyCategories) => Object.values(policyCategories ?? {}).forEach((category) => uniqueCategoryNames.add(category.name)));
items.push(...Array.from(uniqueCategoryNames).map((categoryName) => ({name: categoryName, value: categoryName})));
} else {
items.push(...Object.values(singlePolicyCategories ?? {}).map((category) => ({name: category.name, value: category.name})));
}
return items;
}, [allPolicyIDCategories, singlePolicyCategories, translate]);
}, [allPolicyCategories, singlePolicyCategories, translate]);

const onSaveSelection = useCallback((values: string[]) => SearchActions.updateAdvancedFilters({category: values}), []);
const safePaddingBottomStyle = useSafePaddingBottomStyle();
Expand Down
16 changes: 7 additions & 9 deletions src/pages/Search/SearchAdvancedFiltersPage/SearchFiltersTagPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,26 +26,24 @@ function SearchFiltersTagPage() {
return {name: tag, value: tag};
});
const policyID = searchAdvancedFiltersForm?.policyID ?? '-1';
const [allPoliciesTagsLists] = useOnyx(ONYXKEYS.COLLECTION.POLICY_TAGS);
const singlePolicyTagsList: PolicyTagLists | undefined = allPoliciesTagsLists?.[`${ONYXKEYS.COLLECTION.POLICY_TAGS}${policyID}`];
const [allPolicyTagLists = {}] = useOnyx(ONYXKEYS.COLLECTION.POLICY_TAGS);
const singlePolicyTagLists = allPolicyTagLists[`${ONYXKEYS.COLLECTION.POLICY_TAGS}${policyID}`];

const tagItems = useMemo(() => {
const items = [{name: translate('search.noTag'), value: CONST.SEARCH.EMPTY_VALUE as string}];
if (!singlePolicyTagsList) {
if (!singlePolicyTagLists) {
const uniqueTagNames = new Set<string>();
const tagListsUnpacked = Object.values(allPoliciesTagsLists ?? {}).filter((item) => !!item) as PolicyTagLists[];
const tagListsUnpacked = Object.values(allPolicyTagLists ?? {}).filter((item) => !!item) as PolicyTagLists[];
tagListsUnpacked
.map((policyTagLists) => {
return getTagNamesFromTagsLists(policyTagLists);
})
.map(getTagNamesFromTagsLists)
.flat()
.forEach((tag) => uniqueTagNames.add(tag));
items.push(...Array.from(uniqueTagNames).map((tagName) => ({name: tagName, value: tagName})));
} else {
items.push(...getTagNamesFromTagsLists(singlePolicyTagsList).map((name) => ({name, value: name})));
items.push(...getTagNamesFromTagsLists(singlePolicyTagLists).map((name) => ({name, value: name})));
}
return items;
}, [allPoliciesTagsLists, singlePolicyTagsList, translate]);
}, [allPolicyTagLists, singlePolicyTagLists, translate]);

const updateTagFilter = useCallback((values: string[]) => SearchActions.updateAdvancedFilters({tag: values}), []);

Expand Down

0 comments on commit a569cbc

Please sign in to comment.