Migrate SearchAutocompleteList to useFilteredOptions

src/components/Search/SearchAutocompleteList.tsx

@@ -1,7 +1,6 @@
 import type {ForwardedRef, RefObject} from 'react';
-import React, {useContext, useEffect, useRef, useState} from 'react';
+import React, {useEffect, useRef, useState} from 'react';
 import type {OnyxCollection, OnyxEntry} from 'react-native-onyx';
-import {OptionsListStateContext, useOptionsList} from '@components/OptionListContextProvider';
 import OptionsListSkeletonView from '@components/OptionsListSkeletonView';
 import type {AnimatedTextInputRef} from '@components/RNTextInput';
 import type {ListItem as NewListItem, UserListItemProps} from '@components/SelectionList/ListItem/types';
@@ -15,6 +14,7 @@ import useAutocompleteSuggestions from '@hooks/useAutocompleteSuggestions';
 import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails';
 import useDebounce from '@hooks/useDebounce';
 import useFeedKeysWithAssignedCards from '@hooks/useFeedKeysWithAssignedCards';
+import useFilteredOptions from '@hooks/useFilteredOptions';
 import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
 import useLocalize from '@hooks/useLocalize';
 import useOnyx from '@hooks/useOnyx';
@@ -93,6 +93,11 @@ const defaultListOptions = {
     categoryOptions: [],
 };
 
+const emptyOptionList = {
+    reports: [],
+    personalDetails: [],
+};
+
 const setPerformanceTimersEnd = () => {
     endSpan(CONST.TELEMETRY.SPAN_OPEN_SEARCH_ROUTER);
 };
@@ -164,7 +169,7 @@ function SearchAutocompleteList({
     const expensifyIcons = useMemoizedLazyExpensifyIcons(['History', 'MagnifyingGlass']);
     const taxRates = getAllTaxRates(policies);
 
-    const {options, areOptionsInitialized} = useOptionsList();
+    const {options: listOptions, isLoading} = useFilteredOptions({enabled: true, isSearching: !!autocompleteQueryValue, betas: betas ?? []});
 
     const isRecentSearchesDataLoaded = !isLoadingOnyxValue(recentSearchesMetadata);
 
@@ -174,25 +179,24 @@ function SearchAutocompleteList({
         };
     }, []);
 
-    const {areOptionsInitialized: contextAreOptionsInitialized} = useContext(OptionsListStateContext);
     const coldStartAttributeSet = useRef(false);
     useEffect(() => {
         if (coldStartAttributeSet.current) {
             return;
         }
         const parentSpan = getSpan(CONST.TELEMETRY.SPAN_OPEN_SEARCH_ROUTER);
         if (parentSpan) {
-            parentSpan.setAttribute(CONST.TELEMETRY.ATTRIBUTE_COLD_START, !contextAreOptionsInitialized);
+            parentSpan.setAttribute(CONST.TELEMETRY.ATTRIBUTE_COLD_START, isLoading);
             coldStartAttributeSet.current = true;
         }
-    }, [contextAreOptionsInitialized]);
+    }, [isLoading]);
 
     const searchOptions = (() => {
-        if (!areOptionsInitialized) {
+        if (listOptions === null) {
             return defaultListOptions;
         }
         return getSearchOptions({
-            options,
+            options: listOptions,
             draftComments,
             nvpDismissedProductTraining,
             betas: betas ?? [],
@@ -276,7 +280,7 @@ function SearchAutocompleteList({
         autocompleteQueryValue,
         allCards,
         allFeeds,
-        options,
+        options: listOptions ?? emptyOptionList,
         draftComments,
         nvpDismissedProductTraining,
         betas,
@@ -412,7 +416,7 @@ function SearchAutocompleteList({
     // because useState(initialFocusedIndex) in useArrowKeyFocusManager only reads the initial value.
     // Imperatively focus the first recent report once options become available (desktop only).
     useEffect(() => {
-        if (shouldUseNarrowLayout || !areOptionsInitialized || hasSetInitialFocusRef.current || !firstRecentReportKey) {
+        if (shouldUseNarrowLayout || isLoading || hasSetInitialFocusRef.current || !firstRecentReportKey) {
             return;
         }
         hasSetInitialFocusRef.current = true;
@@ -434,7 +438,7 @@ function SearchAutocompleteList({
                 flatIndex++;
             }
         }
-    }, [areOptionsInitialized, firstRecentReportKey, sections, shouldUseNarrowLayout]);
+    }, [isLoading, firstRecentReportKey, sections, shouldUseNarrowLayout]);
 
     useEffect(() => {
         const targetText = autocompleteQueryValue;
@@ -444,15 +448,15 @@ function SearchAutocompleteList({
         }
     }, [autocompleteQueryValue, onHighlightFirstItem, normalizedReferenceText]);
 
-    const isLoading = !isRecentSearchesDataLoaded || !areOptionsInitialized;
+    const isLoadingFullData = !isRecentSearchesDataLoaded || isLoading;
 
     const reasonAttributes: SkeletonSpanReasonAttributes = {
         context: 'SearchAutocompleteList',
         isRecentSearchesDataLoaded,
-        areOptionsInitialized,
+        isLoading,
     };
 
-    if (isLoading) {
+    if (isLoadingFullData) {
         return (
             <OptionsListSkeletonView
                 fixedNumItems={4}

src/hooks/useFilteredOptions.ts

@@ -20,8 +20,8 @@ type UseFilteredOptionsConfig = {
     batchSize?: number;
     /** Whether to enable dynamic loading/pagination (default: true) */
     enablePagination?: boolean;
-    /** Search term for filtering - when present, builds full report map for personal details (default: '') */
-    searchTerm?: string;
+    /** Whether search mode is active - when true, builds full report map for personal details (default: false) */
+    isSearching?: boolean;
     /** Beta features the user has access to */
     betas?: OnyxEntry<Beta[]>;
 };
@@ -67,7 +67,7 @@ type UseFilteredOptionsResult = {
  * />
  */
 function useFilteredOptions(config: UseFilteredOptionsConfig = {}): UseFilteredOptionsResult {
-    const {maxRecentReports = 500, enabled = true, includeP2P = true, batchSize = 100, searchTerm = '', betas} = config;
+    const {maxRecentReports = 500, enabled = true, includeP2P = true, batchSize = 100, isSearching = false, betas} = config;
 
     const [reportsLimit, setReportsLimit] = useState(maxRecentReports);
 
@@ -87,11 +87,11 @@ function useFilteredOptions(config: UseFilteredOptionsConfig = {}): UseFilteredO
                 ? createFilteredOptionList(allPersonalDetails, allReports, currentUserPersonalDetails.accountID, reportAttributesDerived, privateIsArchivedMap, {
                       maxRecentReports: reportsLimit,
                       includeP2P,
-                      searchTerm,
+                      isSearching,
                       betas,
                   })
                 : null,
-        [enabled, allReports, allPersonalDetails, currentUserPersonalDetails.accountID, reportAttributesDerived, privateIsArchivedMap, reportsLimit, includeP2P, searchTerm, betas],
+        [enabled, allReports, allPersonalDetails, currentUserPersonalDetails.accountID, reportAttributesDerived, privateIsArchivedMap, reportsLimit, includeP2P, isSearching, betas],
     );
 
     const hasMore = options ? reportsLimit < totalReports : false;

src/libs/OptionsListUtils/index.ts

@@ -207,7 +207,7 @@
  */
 
 let allReports: OnyxCollection<Report>;
 Onyx.connect({
     key: ONYXKEYS.COLLECTION.REPORT,
     waitForCollectionCallback: true,
     callback: (value) => {
@@ -219,7 +219,7 @@
 const allSortedReportActions: Record<string, ReportAction[]> = {};
 const cachedOneTransactionThreadReportIDs: Record<string, string | undefined> = {};
 let allReportActions: OnyxCollection<ReportActions>;
 Onyx.connect({
     key: ONYXKEYS.COLLECTION.REPORT_ACTIONS,
     waitForCollectionCallback: true,
     callback: (actions) => {
@@ -264,7 +264,7 @@
 });
 
 let activePolicyID: OnyxEntry<string>;
 Onyx.connect({
     key: ONYXKEYS.NVP_ACTIVE_POLICY_ID,
     callback: (value) => (activePolicyID = value),
 });
@@ -1481,14 +1481,13 @@
     options: {
         maxRecentReports?: number;
         includeP2P?: boolean;
-        searchTerm?: string;
+        isSearching?: boolean;
         betas?: OnyxEntry<Beta[]>;
     } = {},
     policyTags?: OnyxCollection<PolicyTagLists>,
     visibleReportActionsData: VisibleReportActionsDerivedValue = {},
 ) {
-    const {maxRecentReports = 500, includeP2P = true, searchTerm = ''} = options;
-    const isSearching = !!searchTerm?.trim();
+    const {maxRecentReports = 500, includeP2P = true, isSearching = false} = options;
     const reportMapForAccountIDs: Record<number, Report> = {};
 
     // Step 1: Pre-filter reports to avoid processing thousands

src/pages/NewChatPage.tsx

@@ -87,7 +87,7 @@ function useOptions(reportAttributesDerived: ReportAttributesDerivedValue['repor
         includeP2P: true,
         batchSize: 100,
         enablePagination: true,
-        searchTerm: debouncedSearchTerm,
+        isSearching: !!debouncedSearchTerm,
         betas,
     });
 

src/pages/Share/ShareTab.tsx

@@ -66,7 +66,7 @@ function ShareTab({ref}: ShareTabProps) {
     const {options: listOptions, isLoading} = useFilteredOptions({
         enabled: didScreenTransitionEnd,
         betas: betas ?? [],
-        searchTerm: debouncedTextInputValue,
+        isSearching: !!debouncedTextInputValue,
     });
     const areOptionsInitialized = !isLoading;
     const [isSearchingForReports] = useOnyx(ONYXKEYS.IS_SEARCHING_FOR_REPORTS, {initWithStoredValues: false});

tests/perf-test/OptionsListUtils.perf-test.ts

@@ -271,25 +271,25 @@ describe('OptionsListUtils', () => {
     test('[OptionsListUtils] createFilteredOptionList', async () => {
         await waitForBatchedUpdates();
         await measureFunction(() =>
-            createFilteredOptionList(personalDetails, mockedReportsMap, MOCK_CURRENT_USER_ACCOUNT_ID, undefined, EMPTY_PRIVATE_IS_ARCHIVED_MAP, {maxRecentReports: 500, searchTerm: ''}),
+            createFilteredOptionList(personalDetails, mockedReportsMap, MOCK_CURRENT_USER_ACCOUNT_ID, undefined, EMPTY_PRIVATE_IS_ARCHIVED_MAP, {maxRecentReports: 500, isSearching: false}),
         );
     });
 
-    test('[OptionsListUtils] createFilteredOptionList with searchTerm', async () => {
+    test('[OptionsListUtils] createFilteredOptionList with isSearching is true', async () => {
         await waitForBatchedUpdates();
         await measureFunction(() =>
             createFilteredOptionList(personalDetails, mockedReportsMap, MOCK_CURRENT_USER_ACCOUNT_ID, undefined, EMPTY_PRIVATE_IS_ARCHIVED_MAP, {
                 maxRecentReports: 500,
-                searchTerm: SEARCH_VALUE,
+                isSearching: true,
             }),
         );
     });
 
-    test('[OptionsListUtils] getSearchOptions with searchTerm', async () => {
+    test('[OptionsListUtils] getSearchOptions with isSearching is true', async () => {
         await waitForBatchedUpdates();
         const optionLists = createFilteredOptionList(personalDetails, mockedReportsMap, MOCK_CURRENT_USER_ACCOUNT_ID, undefined, EMPTY_PRIVATE_IS_ARCHIVED_MAP, {
             maxRecentReports: 500,
-            searchTerm: SEARCH_VALUE,
+            isSearching: true,
         });
 
         await measureFunction(() =>

tests/unit/OptionsListUtilsTest.tsx

@@ -6787,15 +6787,15 @@ describe('OptionsListUtils', () => {
             expect(result).toBeDefined();
         });
 
-        it('should return all reports when searchTerm is provided (isSearching is true)', () => {
+        it('should return all reports when isSearching is true', () => {
             const result = createFilteredOptionList(
                 PERSONAL_DETAILS,
                 REPORTS,
                 CURRENT_USER_ACCOUNT_ID,
                 undefined,
                 {},
                 {
-                    searchTerm: 'Report',
+                    isSearching: true,
                     maxRecentReports: 2,
                 },
             );