perf: Implement filtering in search page

src/libs/OptionsListUtils.ts

@@ -36,6 +36,8 @@ import times from '@src/utils/times';
 import Timing from './actions/Timing';
 import * as CollectionUtils from './CollectionUtils';
 import * as ErrorUtils from './ErrorUtils';
+import filterArrayByMatch from './filterArrayByMatch';
+import type {KeyOption} from './filterArrayByMatch';
 import localeCompare from './LocaleCompare';
 import * as LocalePhoneNumber from './LocalePhoneNumber';
 import * as Localize from './Localize';
@@ -149,6 +151,8 @@ type GetOptions = {
 
 type PreviewConfig = {showChatPreviewLine?: boolean; forcePolicyNamePreview?: boolean};
 
+type ReportTypesOptionData = Record<string, ReportUtils.OptionData[]>;
+
 /**
  * OptionsListUtils is used to build a list options passed to the OptionsList component. Several different UI views can
  * be configured to display different results based on the options passed to the private getOptions() method. Public
@@ -1306,6 +1310,35 @@ function isReportSelected(reportOption: ReportUtils.OptionData, selectedOptions:
     return selectedOptions.some((option) => (option.accountID && option.accountID === reportOption.accountID) || (option.reportID && option.reportID === reportOption.reportID));
 }
 
+/**
+ * Options need to be sorted in the specific order
+ * @param options - list of options to be sorted
+ * @param searchValue - search string
+ * @returns a sorted list of options
+ */
+function orderOptions(options: ReportUtils.OptionData[], searchValue: string | undefined) {
+    return lodashOrderBy(
+        options,
+        [
+            (option) => {
+                if (!!option.isChatRoom || option.isArchivedRoom) {
+                    return 3;
+                }
+                if (!option.login) {
+                    return 2;
+                }
+                if (option.login.toLowerCase() !== searchValue?.toLowerCase()) {
+                    return 1;
+                }
+
+                // When option.login is an exact match with the search value, returning 0 puts it at the top of the option list
+                return 0;
+            },
+        ],
+        ['asc'],
+    );
+}
+
 /**
  * Build the options
  */
@@ -1656,26 +1689,7 @@ function getOptions(
         // When sortByReportTypeInSearch is true, recentReports will be returned with all the reports including personalDetailsOptions in the correct Order.
         recentReportOptions.push(...personalDetailsOptions);
         personalDetailsOptions = [];
-        recentReportOptions = lodashOrderBy(
-            recentReportOptions,
-            [
-                (option) => {
-                    if (!!option.isChatRoom || option.isArchivedRoom) {
-                        return 3;
-                    }
-                    if (!option.login) {
-                        return 2;
-                    }
-                    if (option.login.toLowerCase() !== searchValue?.toLowerCase()) {
-                        return 1;
-                    }
-
-                    // When option.login is an exact match with the search value, returning 0 puts it at the top of the option list
-                    return 0;
-                },
-            ],
-            ['asc'],
-        );
+        recentReportOptions = orderOptions(recentReportOptions, searchValue);
     }
 
     return {
@@ -1997,6 +2011,73 @@ function formatSectionsFromSearchTerm(
     };
 }
 
+function filterOptions(options: GetOptions, searchValue: string): ReportUtils.OptionData[] {
+    const searchTerms = searchValue.split(' ');
+
+    const reportsByType = options.recentReports.reduce<ReportTypesOptionData>(
+        (acc, option) => {
+            if (!!option.isChatRoom || !!option.isPolicyExpenseChat) {
+                acc.chatRoomsAndPolicyExpenseChats.push(option);
+            } else {
+                acc.reports.push(option);
+            }
+
+            return acc;
+        },
+        {
+            chatRoomsAndPolicyExpenseChats: [],
+            reports: [],
+            personalDetails: options.personalDetails,
+        },
+    );
+    const createFilter = (items: ReportUtils.OptionData[], keys: ReadonlyArray<KeyOption<ReportUtils.OptionData>>, term: string) =>
+        filterArrayByMatch(items, term, {
+            keys,
+            strict: true,
+        });
+
+    // The regex below is used to remove dots only from the local part of the user email (local-part@domain)
+    // so that we can match emails that have dots without explicitly writing the dots (e.g: fistlast@domain will match first.last@domain)
+    const emailRegex = /\.(?=[^\s@]*@)/g;
+
+    const matchResults = searchTerms.reduceRight((items, term) => {
+        const personalDetails = createFilter(
+            items.personalDetails,
+            [
+                'text',
+                'login',
+                (item) => (item.login ? item.login.replace(emailRegex, '') : []),
+                'participantsList.0.displayName',
+                'participantsList.0.firstName',
+                'participantsList.0.lastName',
+            ],
+            term,
+        );
+        const chatRoomsAndPolicyExpenseChats = createFilter(items.chatRoomsAndPolicyExpenseChats, ['text', 'alternateText'], term);
+        const reports = createFilter(
+            items.reports,
+            [
+                'text',
+                'participantsList.0.login',
+                (item) => (item.participantsList ? item.participantsList.filter(({login}) => login).map((i) => (i.login ? i.login.replace(emailRegex, '') : '')) : []),
+                'participantsList.0.displayName',
+                'participantsList.0.firstName',
+                'participantsList.0.lastName',
+            ],
+            term,
+        );
+
+        return {
+            reports,
+            personalDetails,
+            chatRoomsAndPolicyExpenseChats,
+        };
+    }, reportsByType);
+
+    const filteredOptions = Object.values(matchResults).flat();
+    return orderOptions(filteredOptions, searchValue);
+}
+
 export {
     getAvatarsForAccountIDs,
     isCurrentUser,
@@ -2027,6 +2108,7 @@ export {
     formatSectionsFromSearchTerm,
     transformedTaxRates,
     getShareLogOptions,
+    filterOptions,
 };
 
 export type {MemberForList, CategorySection, GetOptions};