Add recent serches and recent chats in Search router

src/ONYXKEYS.ts

@@ -423,6 +423,9 @@ const ONYXKEYS = {
     /** Stores the information about the saved searches */
     SAVED_SEARCHES: 'nvp_savedSearches',
 
+    /** Stores the information about the recent searches */
+    RECENT_SEARCHES: 'nvp_recentSearches',
+
     /** Stores recently used currencies */
     RECENTLY_USED_CURRENCIES: 'nvp_recentlyUsedCurrencies',
 
@@ -850,6 +853,7 @@ type OnyxValuesMapping = {
 
     // ONYXKEYS.NVP_TRYNEWDOT is HybridApp onboarding data
     [ONYXKEYS.NVP_TRYNEWDOT]: OnyxTypes.TryNewDot;
+    [ONYXKEYS.RECENT_SEARCHES]: Record<string, OnyxTypes.RecentSearchItem>;
     [ONYXKEYS.SAVED_SEARCHES]: OnyxTypes.SaveSearch;
     [ONYXKEYS.RECENTLY_USED_CURRENCIES]: string[];
     [ONYXKEYS.ACTIVE_CLIENTS]: string[];

src/components/Search/SearchPageHeader.tsx

@@ -69,12 +69,15 @@ function HeaderWrapper({icon, children, text, isCannedQuery}: HeaderWrapperProps
             ) : (
                 <View style={styles.pr5}>
                     <SearchRouterInput
+                        value={text}
+                        setValue={() => {}}
+                        updateSearch={() => {}}
                         disabled
                         isFullWidth
                         wrapperStyle={[styles.searchRouterInputResults, styles.br2]}
                         wrapperFocusedStyle={styles.searchRouterInputResultsFocused}
-                        defaultValue={text}
                         rightComponent={children}
+                        routerListRef={undefined}
                     />
                 </View>
             )}

src/components/Search/SearchRouter/SearchRouter.tsx

@@ -1,71 +1,167 @@
+import {useNavigationState} from '@react-navigation/native';
 import debounce from 'lodash/debounce';
-import React, {useCallback, useState} from 'react';
+import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
 import {View} from 'react-native';
+import {useOnyx} from 'react-native-onyx';
 import FocusTrapForModal from '@components/FocusTrap/FocusTrapForModal';
+import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import Modal from '@components/Modal';
+import {useOptionsList} from '@components/OptionListContextProvider';
 import type {SearchQueryJSON} from '@components/Search/types';
+import type {SelectionListHandle} from '@components/SelectionList/types';
+import useDebouncedState from '@hooks/useDebouncedState';
 import useKeyboardShortcut from '@hooks/useKeyboardShortcut';
+import useLocalize from '@hooks/useLocalize';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useThemeStyles from '@hooks/useThemeStyles';
+import Log from '@libs/Log';
+import * as OptionsListUtils from '@libs/OptionsListUtils';
+import type {OptionData} from '@libs/ReportUtils';
 import * as SearchUtils from '@libs/SearchUtils';
 import Navigation from '@navigation/Navigation';
+import variables from '@styles/variables';
+import * as Report from '@userActions/Report';
 import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 import {useSearchRouterContext} from './SearchRouterContext';
 import SearchRouterInput from './SearchRouterInput';
+import SearchRouterList from './SearchRouterList';
 
 const SEARCH_DEBOUNCE_DELAY = 150;
 
 function SearchRouter() {
     const styles = useThemeStyles();
+    const {translate} = useLocalize();
+    const [betas] = useOnyx(ONYXKEYS.BETAS);
+    const [recentSearches] = useOnyx(ONYXKEYS.RECENT_SEARCHES);
+    const [isSearchingForReports] = useOnyx(ONYXKEYS.IS_SEARCHING_FOR_REPORTS, {initWithStoredValues: false});
 
     const {isSmallScreenWidth} = useResponsiveLayout();
     const {isSearchRouterDisplayed, closeSearchRouter} = useSearchRouterContext();
+    const listRef = useRef<SelectionListHandle>(null);
 
+    const [textInputValue, debouncedInputValue, setTextInputValue] = useDebouncedState('', 500);
     const [userSearchQuery, setUserSearchQuery] = useState<SearchQueryJSON | undefined>(undefined);
-
-    const clearUserQuery = () => {
-        setUserSearchQuery(undefined);
-    };
-
-    const onSearchChange = debounce((userQuery: string) => {
-        if (!userQuery) {
-            clearUserQuery();
-            return;
+    const contextualReportID = useNavigationState<Record<string, {reportID: string}>, string | undefined>((state) => {
+        return state?.routes.at(-1)?.params?.reportID;
+    });
+    const sortedRecentSearches = useMemo(() => {
+        return Object.values(recentSearches ?? {}).sort((a, b) => b.timestamp.localeCompare(a.timestamp));
+    }, [recentSearches]);
+
+    const {options, areOptionsInitialized} = useOptionsList();
+    const searchOptions = useMemo(() => {
+        if (!areOptionsInitialized) {
+            return {recentReports: [], personalDetails: [], userToInvite: null, currentUserOption: null, categoryOptions: [], tagOptions: [], taxRatesOptions: []};
+        }
+        return OptionsListUtils.getSearchOptions(options, '', betas ?? []);
+    }, [areOptionsInitialized, betas, options]);
+
+    const filteredOptions = useMemo(() => {
+        if (debouncedInputValue.trim() === '') {
+            return {
+                recentReports: [],
+                personalDetails: [],
+                userToInvite: null,
+            };
         }
 
-        const queryJSON = SearchUtils.buildSearchQueryJSON(userQuery);
+        const newOptions = OptionsListUtils.filterOptions(searchOptions, debouncedInputValue, {sortByReportTypeInSearch: true, preferChatroomsOverThreads: true});
 
-        if (queryJSON) {
-            // eslint-disable-next-line
-            console.log('parsedQuery', queryJSON);
+        return {
+            recentReports: newOptions.recentReports,
+            personalDetails: newOptions.personalDetails,
+            userToInvite: newOptions.userToInvite,
+        };
+    }, [debouncedInputValue, searchOptions]);
 
-            setUserSearchQuery(queryJSON);
-        } else {
-            // Handle query parsing error
+    const recentReports: OptionData[] = useMemo(() => {
+        const currentSearchOptions = debouncedInputValue === '' ? searchOptions : filteredOptions;
+        const reports: OptionData[] = [...currentSearchOptions.recentReports, ...currentSearchOptions.personalDetails];
+        if (currentSearchOptions.userToInvite) {
+            reports.push(currentSearchOptions.userToInvite);
         }
-    }, SEARCH_DEBOUNCE_DELAY);
+        return reports.slice(0, 10);
+    }, [debouncedInputValue, filteredOptions, searchOptions]);
 
-    const onSearchSubmit = useCallback(() => {
-        if (!userSearchQuery) {
+    useEffect(() => {
+        Report.searchInServer(debouncedInputValue.trim());
+    }, [debouncedInputValue]);
+
+    useEffect(() => {
+        if (!textInputValue && isSearchRouterDisplayed) {
             return;
         }
+        listRef.current?.updateAndScrollToFocusedIndex(0);
+        // eslint-disable-next-line react-compiler/react-compiler
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [isSearchRouterDisplayed]);
 
-        closeSearchRouter();
+    const contextualReportData = contextualReportID ? searchOptions.recentReports?.find((option) => option.reportID === contextualReportID) : undefined;
 
-        const query = SearchUtils.buildSearchQueryString(userSearchQuery);
-        Navigation.navigate(ROUTES.SEARCH_CENTRAL_PANE.getRoute({query}));
+    const clearUserQuery = () => {
+        setTextInputValue('');
+        setUserSearchQuery(undefined);
+    };
 
+    const onSearchChange = useMemo(
+        // eslint-disable-next-line react-compiler/react-compiler
+        () =>
+            debounce((userQuery: string) => {
+                if (!userQuery) {
+                    clearUserQuery();
+                    listRef.current?.updateAndScrollToFocusedIndex(-1);
+                    return;
+                }
+                listRef.current?.updateAndScrollToFocusedIndex(0);
+                const queryJSON = SearchUtils.buildSearchQueryJSON(userQuery);
+
+                if (queryJSON) {
+                    setUserSearchQuery(queryJSON);
+                } else {
+                    Log.alert(`${CONST.ERROR.ENSURE_BUGBOT} user query failed to parse`, userQuery, false);
+                }
+            }, SEARCH_DEBOUNCE_DELAY),
+        // eslint-disable-next-line react-compiler/react-compiler
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        [],
+    );
+
+    const updateUserSearchQuery = (newSearchQuery: string) => {
+        setTextInputValue(newSearchQuery);
+        onSearchChange(newSearchQuery);
+    };
+
+    const closeAndClearRouter = useCallback(() => {
+        closeSearchRouter();
         clearUserQuery();
-    }, [closeSearchRouter, userSearchQuery]);
+        // eslint-disable-next-line react-compiler/react-compiler
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [closeSearchRouter]);
+
+    const onSearchSubmit = useCallback(
+        (query: SearchQueryJSON | undefined) => {
+            if (!query) {
+                return;
+            }
+            closeSearchRouter();
+            const queryString = SearchUtils.buildSearchQueryString(query);
+            Navigation.navigate(ROUTES.SEARCH_CENTRAL_PANE.getRoute({query: queryString}));
+            clearUserQuery();
+        },
+        // eslint-disable-next-line react-compiler/react-compiler
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        [closeSearchRouter],
+    );
 
     useKeyboardShortcut(CONST.KEYBOARD_SHORTCUTS.ESCAPE, () => {
         closeSearchRouter();
         clearUserQuery();
     });
 
-    const modalType = isSmallScreenWidth ? CONST.MODAL.MODAL_TYPE.CENTERED : CONST.MODAL.MODAL_TYPE.POPOVER;
-    const isFullWidth = isSmallScreenWidth;
+    const modalType = isSmallScreenWidth ? CONST.MODAL.MODAL_TYPE.CENTERED_UNSWIPEABLE : CONST.MODAL.MODAL_TYPE.POPOVER;
+    const modalWidth = isSmallScreenWidth ? styles.w100 : {width: variables.popoverWidth};
 
     return (
         <Modal
@@ -76,11 +172,32 @@ function SearchRouter() {
             onClose={closeSearchRouter}
         >
             <FocusTrapForModal active={isSearchRouterDisplayed}>
-                <View style={[styles.flex1, styles.p3]}>
+                <View style={[styles.flex1, modalWidth, styles.h100, !isSmallScreenWidth && styles.mh85vh]}>
+                    {isSmallScreenWidth && (
+                        <HeaderWithBackButton
+                            title={translate('common.search')}
+                            onBackButtonPress={() => closeSearchRouter()}
+                        />
+                    )}
                     <SearchRouterInput
-                        isFullWidth={isFullWidth}
-                        onChange={onSearchChange}
-                        onSubmit={onSearchSubmit}
+                        value={textInputValue}
+                        setValue={setTextInputValue}
+                        isFullWidth={isSmallScreenWidth}
+                        updateSearch={onSearchChange}
+                        routerListRef={listRef}
+                        wrapperStyle={[isSmallScreenWidth ? styles.mv3 : styles.mv2, isSmallScreenWidth ? styles.mh5 : styles.mh2, styles.border]}
+                        wrapperFocusedStyle={[styles.borderColorFocus]}
+                        isSearchingForReports={isSearchingForReports}
+                    />
+                    <SearchRouterList
+                        currentQuery={userSearchQuery}
+                        reportForContextualSearch={contextualReportData}
+                        recentSearches={sortedRecentSearches?.slice(0, 5)}
+                        recentReports={recentReports}
+                        onSearchSubmit={onSearchSubmit}
+                        updateUserSearchQuery={updateUserSearchQuery}
+                        closeAndClearRouter={closeAndClearRouter}
+                        ref={listRef}
                     />
                 </View>
             </FocusTrapForModal>

src/components/Search/SearchRouter/SearchRouterInput.tsx

@@ -1,25 +1,30 @@
 import React, {useState} from 'react';
-import type {ReactNode} from 'react';
+import type {ReactNode, RefObject} from 'react';
 import {View} from 'react-native';
 import type {StyleProp, ViewStyle} from 'react-native';
+import type {SelectionListHandle} from '@components/SelectionList/types';
 import TextInput from '@components/TextInput';
+import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
 
 type SearchRouterInputProps = {
-    /** Callback triggered when the input text changes */
-    onChange?: (searchTerm: string) => void;
+    /** Value of TextInput */
+    value: string;
 
-    /** Callback invoked when the user submits the input */
-    onSubmit?: () => void;
+    /** Setter to TextInput value */
+    setValue: (searchTerm: string) => void;
+
+    /** Callback to update search in SearchRouter */
+    updateSearch: (searchTerm: string) => void;
+
+    /** SearchRouterList ref for managing TextInput and SearchRouterList focus */
+    routerListRef?: RefObject<SelectionListHandle>;
 
     /** Whether the input is full width */
     isFullWidth: boolean;
 
-    /** Default value for text input */
-    defaultValue?: string;
-
     /** Whether the input is disabled */
     disabled?: boolean;
 
@@ -31,37 +36,58 @@ type SearchRouterInputProps = {
 
     /** Component to be displayed on the right */
     rightComponent?: ReactNode;
+
+    /** Whether the search reports API call is running  */
+    isSearchingForReports?: boolean;
 };
 
-function SearchRouterInput({isFullWidth, onChange, onSubmit, defaultValue = '', disabled = false, wrapperStyle, wrapperFocusedStyle, rightComponent}: SearchRouterInputProps) {
+function SearchRouterInput({
+    value,
+    setValue,
+    updateSearch,
+    routerListRef,
+    isFullWidth,
+    disabled = false,
+    wrapperStyle,
+    wrapperFocusedStyle,
+    rightComponent,
+    isSearchingForReports,
+}: SearchRouterInputProps) {
     const styles = useThemeStyles();
-
-    const [value, setValue] = useState(defaultValue);
+    const {translate} = useLocalize();
     const [isFocused, setIsFocused] = useState<boolean>(false);
 
     const onChangeText = (text: string) => {
         setValue(text);
-        onChange?.(text);
+        updateSearch(text);
     };
 
     const inputWidth = isFullWidth ? styles.w100 : {width: variables.popoverWidth};
 
     return (
-        <View style={[styles.flexRow, styles.alignItemsCenter, wrapperStyle ?? styles.searchRouterInput, isFocused && wrapperFocusedStyle]}>
+        <View style={[styles.flexRow, styles.alignItemsCenter, wrapperStyle ?? styles.searchRouterTextInputContainer, isFocused && wrapperFocusedStyle]}>
             <View style={styles.flex1}>
                 <TextInput
-                    autoFocus
                     value={value}
                     onChangeText={onChangeText}
-                    onSubmitEditing={onSubmit}
+                    autoFocus
+                    loadingSpinnerStyle={[styles.mt0, styles.mr2]}
                     role={CONST.ROLE.PRESENTATION}
+                    placeholder={translate('search.searchPlaceholder')}
                     autoCapitalize="none"
                     disabled={disabled}
                     shouldUseDisabledStyles={false}
                     textInputContainerStyles={styles.borderNone}
                     inputStyle={[styles.searchInputStyle, inputWidth, styles.pl3, styles.pr3]}
-                    onFocus={() => setIsFocused(true)}
-                    onBlur={() => setIsFocused(false)}
+                    onFocus={() => {
+                        setIsFocused(true);
+                        routerListRef?.current?.updateExternalTextInputFocus(true);
+                    }}
+                    onBlur={() => {
+                        setIsFocused(false);
+                        routerListRef?.current?.updateExternalTextInputFocus(false);
+                    }}
+                    isLoading={!!isSearchingForReports}
                 />
             </View>
             {rightComponent && <View style={styles.pr3}>{rightComponent}</View>}