Skip to content

Commit

Permalink
Improve autocomplete case matching
Browse files Browse the repository at this point in the history
  • Loading branch information
@Kicu
Kicu committed Nov 6, 2024
1 parent 735b44e commit 82cb2ec
Showing 1 changed file with 53 additions and 44 deletions.
97 changes: 53 additions & 44 deletions src/components/Search/SearchRouter/SearchRouter.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,53 +55,16 @@ function SearchRouter({onRouterClose}: SearchRouterProps) {
const [recentSearches] = useOnyx(ONYXKEYS.RECENT_SEARCHES);
const [isSearchingForReports] = useOnyx(ONYXKEYS.IS_SEARCHING_FOR_REPORTS, {initWithStoredValues: false});
const [autocompleteSuggestions, setAutocompleteSuggestions] = useState<AutocompleteItemData[] | undefined>([]);
const [autocompleteSubstitutions, setAutocompleteSubstitutions] = useState<SubstitutionMap>({});

const {shouldUseNarrowLayout} = useResponsiveLayout();
const listRef = useRef<SelectionListHandle>(null);

const [autocompleteSubstitutions, setAutocompleteSubstitutions] = useState<SubstitutionMap>({});
const [textInputValue, debouncedInputValue, setTextInputValue] = useDebouncedState('', 500);
const contextualReportID = useNavigationState<Record<string, {reportID: string}>, string | undefined>((state) => {
return state?.routes.at(-1)?.params?.reportID;
});

const {activeWorkspaceID} = useActiveWorkspace();
const policy = usePolicy(activeWorkspaceID);

const typeAutocompleteList = Object.values(CONST.SEARCH.DATA_TYPES);
const statusAutocompleteList = Object.values({...CONST.SEARCH.STATUS.TRIP, ...CONST.SEARCH.STATUS.INVOICE, ...CONST.SEARCH.STATUS.CHAT, ...CONST.SEARCH.STATUS.TRIP});
const expenseTypes = Object.values(CONST.SEARCH.TRANSACTION_TYPE);
const [cardList = {}] = useOnyx(ONYXKEYS.CARD_LIST);
const cardAutocompleteList = Object.values(cardList);
const personalDetailsForParticipants = usePersonalDetails();
const participantsAutocompleteList = Object.values(personalDetailsForParticipants)
.filter((details): details is NonNullable<PersonalDetails> => !!(details && details?.login))
.map((details) => ({
name: details.displayName ?? Str.removeSMSDomain(details.login ?? ''),
accountID: details?.accountID.toString(),
}));
const allTaxRates = getAllTaxRates();
const taxAutocompleteList = useMemo(() => getAutocompleteTaxList(allTaxRates, policy), [policy, allTaxRates]);
const [allPolicyCategories] = useOnyx(ONYXKEYS.COLLECTION.POLICY_CATEGORIES);
const [allRecentCategories] = useOnyx(ONYXKEYS.COLLECTION.POLICY_RECENTLY_USED_CATEGORIES);
const categoryAutocompleteList = useMemo(() => {
return getAutocompleteCategories(allPolicyCategories, activeWorkspaceID);
}, [activeWorkspaceID, allPolicyCategories]);
const recentCategoriesAutocompleteList = useMemo(() => {
return getAutocompleteRecentCategories(allRecentCategories, activeWorkspaceID);
}, [activeWorkspaceID, allRecentCategories]);

const [currencyList] = useOnyx(ONYXKEYS.CURRENCY_LIST);
const currencyAutocompleteList = Object.keys(currencyList ?? {});
const [recentCurrencyAutocompleteList] = useOnyx(ONYXKEYS.RECENTLY_USED_CURRENCIES);

const [allPoliciesTags] = useOnyx(ONYXKEYS.COLLECTION.POLICY_TAGS);
const [allRecentTags] = useOnyx(ONYXKEYS.COLLECTION.POLICY_RECENTLY_USED_TAGS);
const tagAutocompleteList = useMemo(() => {
return getAutocompleteTags(allPoliciesTags, activeWorkspaceID);
}, [activeWorkspaceID, allPoliciesTags]);
const recentTagsAutocompleteList = getAutocompleteRecentTags(allRecentTags, activeWorkspaceID);

const sortedRecentSearches = useMemo(() => {
return Object.values(recentSearches ?? {}).sort((a, b) => b.timestamp.localeCompare(a.timestamp));
}, [recentSearches]);
Expand Down Expand Up @@ -146,12 +109,50 @@ function SearchRouter({onRouterClose}: SearchRouterProps) {
return reports.slice(0, 10);
}, [debouncedInputValue, filteredOptions, searchOptions]);

useEffect(() => {
Report.searchInServer(debouncedInputValue.trim());
}, [debouncedInputValue]);

const contextualReportData = contextualReportID ? searchOptions.recentReports?.find((option) => option.reportID === contextualReportID) : undefined;

const {activeWorkspaceID} = useActiveWorkspace();
const policy = usePolicy(activeWorkspaceID);

const typeAutocompleteList = Object.values(CONST.SEARCH.DATA_TYPES);
const statusAutocompleteList = Object.values({...CONST.SEARCH.STATUS.TRIP, ...CONST.SEARCH.STATUS.INVOICE, ...CONST.SEARCH.STATUS.CHAT, ...CONST.SEARCH.STATUS.TRIP});
const expenseTypes = Object.values(CONST.SEARCH.TRANSACTION_TYPE);
const [cardList = {}] = useOnyx(ONYXKEYS.CARD_LIST);
const cardAutocompleteList = Object.values(cardList);
const personalDetailsForParticipants = usePersonalDetails();

const participantsAutocompleteList = useMemo(
() =>
Object.values(personalDetailsForParticipants)
.filter((details): details is NonNullable<PersonalDetails> => !!(details && details?.login))
.map((details) => ({
name: details.displayName ?? Str.removeSMSDomain(details.login ?? ''),
accountID: details?.accountID.toString(),
})),
[personalDetailsForParticipants],
);
const allTaxRates = getAllTaxRates();
const taxAutocompleteList = useMemo(() => getAutocompleteTaxList(allTaxRates, policy), [policy, allTaxRates]);
const [allPolicyCategories] = useOnyx(ONYXKEYS.COLLECTION.POLICY_CATEGORIES);
const [allRecentCategories] = useOnyx(ONYXKEYS.COLLECTION.POLICY_RECENTLY_USED_CATEGORIES);
const categoryAutocompleteList = useMemo(() => {
return getAutocompleteCategories(allPolicyCategories, activeWorkspaceID);
}, [activeWorkspaceID, allPolicyCategories]);
const recentCategoriesAutocompleteList = useMemo(() => {
return getAutocompleteRecentCategories(allRecentCategories, activeWorkspaceID);
}, [activeWorkspaceID, allRecentCategories]);

const [currencyList] = useOnyx(ONYXKEYS.CURRENCY_LIST);
const currencyAutocompleteList = Object.keys(currencyList ?? {});
const [recentCurrencyAutocompleteList] = useOnyx(ONYXKEYS.RECENTLY_USED_CURRENCIES);

const [allPoliciesTags] = useOnyx(ONYXKEYS.COLLECTION.POLICY_TAGS);
const [allRecentTags] = useOnyx(ONYXKEYS.COLLECTION.POLICY_RECENTLY_USED_TAGS);
const tagAutocompleteList = useMemo(() => {
return getAutocompleteTags(allPoliciesTags, activeWorkspaceID);
}, [activeWorkspaceID, allPoliciesTags]);
const recentTagsAutocompleteList = getAutocompleteRecentTags(allRecentTags, activeWorkspaceID);

const updateAutocomplete = useCallback(
(autocompleteValue: string, ranges: SearchAutocompleteQueryRange[], autocompleteType?: ValueOf<typeof CONST.SEARCH.SYNTAX_ROOT_KEYS & typeof CONST.SEARCH.SYNTAX_FILTER_KEYS>) => {
const alreadyAutocompletedKeys: string[] = [];
Expand Down Expand Up @@ -220,7 +221,9 @@ function SearchRouter({onRouterClose}: SearchRouterProps) {
}
case CONST.SEARCH.SYNTAX_FILTER_KEYS.FROM: {
const filteredParticipants = participantsAutocompleteList
.filter((participant) => participant.name.includes(autocompleteValue.toLowerCase()) && !alreadyAutocompletedKeys.includes(participant.name.toLowerCase()))
.filter(
(participant) => participant.name.toLowerCase().includes(autocompleteValue.toLowerCase()) && !alreadyAutocompletedKeys.includes(participant.name.toLowerCase()),
)
.sort()
.slice(0, 10);
filteredAutocompleteSuggestions = filteredParticipants.map((participant) => ({
Expand All @@ -232,7 +235,9 @@ function SearchRouter({onRouterClose}: SearchRouterProps) {
}
case CONST.SEARCH.SYNTAX_FILTER_KEYS.TO: {
const filteredParticipants = participantsAutocompleteList
.filter((participant) => participant.name.includes(autocompleteValue.toLowerCase()) && !alreadyAutocompletedKeys.includes(participant.name.toLowerCase()))
.filter(
(participant) => participant.name.toLowerCase().includes(autocompleteValue.toLowerCase()) && !alreadyAutocompletedKeys.includes(participant.name.toLowerCase()),
)
.sort()
.slice(0, 10);
filteredAutocompleteSuggestions = filteredParticipants.map((participant) => ({
Expand Down Expand Up @@ -316,6 +321,10 @@ function SearchRouter({onRouterClose}: SearchRouterProps) {
],
);

useEffect(() => {
Report.searchInServer(debouncedInputValue.trim());
}, [debouncedInputValue]);

const onSearchChange = useCallback(
(userQuery: string) => {
let newUserQuery = userQuery;
Expand Down

0 comments on commit 82cb2ec

Please sign in to comment.