Merge pull request #85922 from hoangzinh/feature/82187-migrate-searchautocompletelist-to-usefiltered-options

Migrate SearchAutocompleteList to useFilteredOptions

Author: mountiny

src/components/Search/SearchAutocompleteList.tsx

@@ -1,7 +1,6 @@
 import type {ForwardedRef, RefObject} from 'react';
-import React, {useContext, useEffect, useMemo, useRef, useState} from 'react';
+import React, {useEffect, useMemo, 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';
@@ -13,6 +12,7 @@ import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails'
 import useDebounce from '@hooks/useDebounce';
 import useDebouncedAccessibilityAnnouncement from '@hooks/useDebouncedAccessibilityAnnouncement';
 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';
@@ -94,6 +94,11 @@ const defaultListOptions = {
     categoryOptions: [],
 };
 
+const emptyOptionList = {
+    reports: [],
+    personalDetails: [],
+};
+
 const setPerformanceTimersEnd = () => {
     endSpan(CONST.TELEMETRY.SPAN_OPEN_SEARCH_ROUTER);
 };
@@ -165,7 +170,7 @@ function SearchAutocompleteList({
     const expensifyIcons = useMemoizedLazyExpensifyIcons(['History', 'MagnifyingGlass']);
     const taxRates = getAllTaxRates(policies);
 
-    const {options, areOptionsInitialized} = useOptionsList();
+    const {options: listOptions, isLoading: isLoadingOptions} = useFilteredOptions({enabled: true, isSearching: !!autocompleteQueryValue.trim(), betas: betas ?? []});
 
     const isRecentSearchesDataLoaded = !isLoadingOnyxValue(recentSearchesMetadata);
 
@@ -175,25 +180,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, isLoadingOptions);
             coldStartAttributeSet.current = true;
         }
-    }, [contextAreOptionsInitialized]);
+    }, [isLoadingOptions]);
 
     const searchOptions = (() => {
-        if (!areOptionsInitialized) {
+        if (listOptions === null) {
             return defaultListOptions;
         }
         return getSearchOptions({
-            options,
+            options: listOptions,
             draftComments,
             nvpDismissedProductTraining,
             betas: betas ?? [],
@@ -277,7 +281,7 @@ function SearchAutocompleteList({
         autocompleteQueryValue,
         allCards,
         allFeeds,
-        options,
+        options: listOptions ?? emptyOptionList,
         draftComments,
         nvpDismissedProductTraining,
         betas,
@@ -357,7 +361,7 @@ function SearchAutocompleteList({
     const reasonAttributes: SkeletonSpanReasonAttributes = {
         context: 'SearchAutocompleteList',
         isRecentSearchesDataLoaded,
-        areOptionsInitialized,
+        isLoadingOptions,
     };
 
     /* Sections generation */
@@ -404,7 +408,7 @@ function SearchAutocompleteList({
             } as AutocompleteListItem;
         });
 
-        if (areOptionsInitialized) {
+        if (!isLoadingOptions) {
             pushSection({
                 title: autocompleteQueryValue.trim() === '' ? translate('search.recentChats') : undefined,
                 data: nextStyledRecentReports,
@@ -430,7 +434,7 @@ function SearchAutocompleteList({
                         reasonAttributes={{
                             context: 'SearchAutocompleteList',
                             isRecentSearchesDataLoaded,
-                            areOptionsInitialized,
+                            isLoadingOptions,
                         }}
                     />
                 ),
@@ -465,7 +469,7 @@ function SearchAutocompleteList({
         searchQueryItem,
         styles,
         translate,
-        areOptionsInitialized,
+        isLoadingOptions,
         isRecentSearchesDataLoaded,
     ]);
 
@@ -507,13 +511,13 @@ 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 || firstRecentReportFlatIndex === -1) {
+        if (shouldUseNarrowLayout || isLoadingOptions || hasSetInitialFocusRef.current || firstRecentReportFlatIndex === -1) {
             return;
         }
         hasSetInitialFocusRef.current = true;
 
         innerListRef.current?.updateAndScrollToFocusedIndex(firstRecentReportFlatIndex, false);
-    }, [areOptionsInitialized, firstRecentReportFlatIndex, shouldUseNarrowLayout]);
+    }, [isLoadingOptions, firstRecentReportFlatIndex, shouldUseNarrowLayout]);
 
     useEffect(() => {
         const targetText = autocompleteQueryValue;

src/hooks/useFilteredOptions.ts

@@ -19,8 +19,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[]>;
 };
@@ -66,7 +66,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);
 
@@ -86,11 +86,11 @@ function useFilteredOptions(config: UseFilteredOptionsConfig = {}): UseFilteredO
                 ? createFilteredOptionList(allPersonalDetails, allReports, reportAttributesDerived, privateIsArchivedMap, allPolicies, {
                       maxRecentReports: reportsLimit,
                       includeP2P,
-                      searchTerm,
+                      isSearching,
                       betas,
                   })
                 : null,
-        [enabled, allReports, allPersonalDetails, reportAttributesDerived, privateIsArchivedMap, allPolicies, reportsLimit, includeP2P, searchTerm, betas],
+        [enabled, allReports, allPersonalDetails, reportAttributesDerived, privateIsArchivedMap, allPolicies, reportsLimit, includeP2P, isSearching, betas],
     );
 
     const hasMore = options ? reportsLimit < totalReports : false;

src/libs/OptionsListUtils/index.ts

@@ -1536,14 +1536,13 @@ function createFilteredOptionList(
     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

@@ -90,7 +90,7 @@ function useOptions(reportAttributesDerived: ReportAttributesDerivedValue['repor
         includeP2P: true,
         batchSize: 100,
         enablePagination: true,
-        searchTerm: debouncedSearchTerm,
+        isSearching: !!debouncedSearchTerm.trim(),
         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.trim(),
     });
     const areOptionsInitialized = !isLoading;
     const [isSearchingForReports] = useOnyx(ONYXKEYS.RAM_ONLY_IS_SEARCHING_FOR_REPORTS);

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

@@ -274,26 +274,26 @@ describe('OptionsListUtils', () => {
         await measureFunction(() =>
             createFilteredOptionList(personalDetails, mockedReportsMap, undefined, EMPTY_PRIVATE_IS_ARCHIVED_MAP, undefined, {
                 maxRecentReports: 500,
-                searchTerm: '',
+                isSearching: false,
             }),
         );
     });
 
-    test('[OptionsListUtils] createFilteredOptionList with searchTerm', async () => {
+    test('[OptionsListUtils] createFilteredOptionList with isSearching is true', async () => {
         await waitForBatchedUpdates();
         await measureFunction(() =>
             createFilteredOptionList(personalDetails, mockedReportsMap, undefined, EMPTY_PRIVATE_IS_ARCHIVED_MAP, undefined, {
                 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, undefined, EMPTY_PRIVATE_IS_ARCHIVED_MAP, undefined, {
             maxRecentReports: 500,
-            searchTerm: SEARCH_VALUE,
+            isSearching: true,
         });
 
         await measureFunction(() =>

tests/ui/components/SearchAutocompleteListTest.tsx

@@ -34,18 +34,20 @@ jest.mock('@hooks/useResponsiveLayout', () => ({
     })),
 }));
 
-jest.mock('@components/OptionListContextProvider', () => {
-    const ActualReact = jest.requireActual<typeof React>('react');
-    return {
-        useOptionsList: jest.fn(() => ({
-            options: {},
-            areOptionsInitialized: true,
-        })),
-        OptionsListStateContext: ActualReact.createContext({
-            areOptionsInitialized: true,
-        }),
-    };
-});
+jest.mock('@hooks/useFilteredOptions', () => ({
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    __esModule: true,
+    default: jest.fn(() => ({
+        options: {
+            reports: [],
+            personalDetails: [],
+        },
+        isLoading: false,
+        loadMore: jest.fn(),
+        hasMore: false,
+        isLoadingMore: false,
+    })),
+}));
 
 jest.mock('@libs/OptionsListUtils', () => ({
     getSearchOptions: jest.fn(() => ({

tests/unit/OptionsListUtilsTest.tsx

@@ -7045,22 +7045,22 @@ describe('OptionsListUtils', () => {
             expect(result).toBeDefined();
         });
 
-        it('should handle searchTerm filtering', () => {
-            const result = createFilteredOptionList(PERSONAL_DETAILS, REPORTS, undefined, {}, undefined, {searchTerm: 'Spider'});
+        it('should handle isSearching filtering', () => {
+            const result = createFilteredOptionList(PERSONAL_DETAILS, REPORTS, undefined, {}, undefined, {isSearching: true});
 
             expect(result).toBeDefined();
             expect(result.reports.length).toBe(Object.keys(REPORTS).length);
         });
 
-        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,
                 undefined,
                 {},
                 {},
                 {
-                    searchTerm: 'Report',
+                    isSearching: true,
                     maxRecentReports: 2,
                 },
             );