Add recent serches and recent chats in Search router

src/CONST.ts

@@ -5578,6 +5578,11 @@ const CONST = {
             KEYWORD: 'keyword',
             IN: 'in',
         },
+        ROUTER_LIST_ITEM_TYPE: {
+            REPORT: 'report',
+            SEARCH: 'search',
+            CONTEXTUAL_SUGGESTION: 'contextualSuggestion',
+        },
     },
 
     REFERRER: {

src/ONYXKEYS.ts

@@ -422,6 +422,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.SAVED_SEARCHES]: OnyxTypes.SaveSearch[];
+    [ONYXKEYS.RECENT_SEARCHES]: Record<string, OnyxTypes.RecentSearchItem>;
     [ONYXKEYS.RECENTLY_USED_CURRENCIES]: string[];
     [ONYXKEYS.ACTIVE_CLIENTS]: string[];
     [ONYXKEYS.DEVICE_ID]: string;

src/components/Search/SearchRouter/SearchRouter.tsx

@@ -1,71 +1,117 @@
+import {useNavigationState} from '@react-navigation/native';
 import debounce from 'lodash/debounce';
-import React, {useCallback, useState} from 'react';
+import React, {useCallback, useMemo, useState} from 'react';
 import {View} from 'react-native';
+import {useOnyx} from 'react-native-onyx';
 import FocusTrapForModal from '@components/FocusTrap/FocusTrapForModal';
 import Modal from '@components/Modal';
+import {useOptionsList} from '@components/OptionListContextProvider';
 import type {SearchQueryJSON} from '@components/Search/types';
 import useKeyboardShortcut from '@hooks/useKeyboardShortcut';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useThemeStyles from '@hooks/useThemeStyles';
+import * as OptionsListUtils from '@libs/OptionsListUtils';
 import * as SearchUtils from '@libs/SearchUtils';
 import Navigation from '@navigation/Navigation';
+import variables from '@styles/variables';
 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 [betas] = useOnyx(`${ONYXKEYS.BETAS}`);
+    const [recentSearches] = useOnyx(ONYXKEYS.RECENT_SEARCHES);
 
     const {isSmallScreenWidth} = useResponsiveLayout();
     const {isSearchRouterDisplayed, closeSearchRouter} = useSearchRouterContext();
 
+    const [textInputValue, setTextInputValue] = useState('');
     const [userSearchQuery, setUserSearchQuery] = useState<SearchQueryJSON | undefined>(undefined);
+    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) => {
+            const dateA = new Date(a.timestamp);
+            const dateB = new Date(b.timestamp);
+            return dateB.getTime() - dateA.getTime();
+        });
+    }, [recentSearches]);
+
+    const {options, areOptionsInitialized} = useOptionsList({
+        shouldInitialize: true,
+    });
+    const searchOptions = useMemo(() => {
+        if (!areOptionsInitialized) {
+            return {recentReports: [], personalDetails: [], userToInvite: null, currentUserOption: null, categoryOptions: [], tagOptions: [], taxRatesOptions: []};
+        }
+        return OptionsListUtils.getSearchOptions(options, '', betas ?? []);
+    }, [areOptionsInitialized, betas, options]);
+
+    const contextualReportData = contextualReportID ? searchOptions.recentReports?.find((option) => option.reportID === contextualReportID) : undefined;
 
     const clearUserQuery = () => {
+        setTextInputValue('');
         setUserSearchQuery(undefined);
     };
 
-    const onSearchChange = debounce((userQuery: string) => {
-        if (!userQuery) {
-            clearUserQuery();
-            return;
-        }
-
-        const queryJSON = SearchUtils.buildSearchQueryJSON(userQuery);
-
-        if (queryJSON) {
-            // eslint-disable-next-line
-            console.log('parsedQuery', queryJSON);
-
-            setUserSearchQuery(queryJSON);
-        } else {
-            // Handle query parsing error
-        }
-    }, SEARCH_DEBOUNCE_DELAY);
+    const onSearchChange = useCallback(
+        debounce((userQuery: string) => {
+            if (!userQuery) {
+                clearUserQuery();
+                return;
+            }
+
+            const queryJSON = SearchUtils.buildSearchQueryJSON(userQuery);
+
+            if (queryJSON) {
+                // eslint-disable-next-line
+                console.log('parsedQuery', queryJSON);
+
+                setUserSearchQuery(queryJSON);
+            } else {
+                // Handle query parsing error
+            }
+        }, SEARCH_DEBOUNCE_DELAY),
+        [],
+    );
 
-    const onSearchSubmit = useCallback(() => {
-        if (!userSearchQuery) {
-            return;
-        }
+    const updateUserSearchQuery = (newSearchQuery: string) => {
+        setTextInputValue(newSearchQuery);
+        onSearchChange(newSearchQuery);
+    };
 
+    const closeAndClearRouter = useCallback(() => {
         closeSearchRouter();
-
-        const query = SearchUtils.buildSearchQueryString(userSearchQuery);
-        Navigation.navigate(ROUTES.SEARCH_CENTRAL_PANE.getRoute({query}));
-
         clearUserQuery();
-    }, [closeSearchRouter, userSearchQuery]);
+    }, [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();
+        },
+        [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 modalWidth = isSmallScreenWidth ? styles.w100 : {width: variables.popoverWidth};
 
     return (
         <Modal
@@ -76,11 +122,24 @@
             onClose={closeSearchRouter}
         >
             <FocusTrapForModal active={isSearchRouterDisplayed}>
-                <View style={[styles.flex1, styles.p3]}>
+                <View style={[styles.flex1, styles.p3, modalWidth, styles.mh100, !isSmallScreenWidth && styles.mh85vh]}>
                     <SearchRouterInput
-                        isFullWidth={isFullWidth}
-                        onChange={onSearchChange}
-                        onSubmit={onSearchSubmit}
+                        text={textInputValue}
+                        setText={setTextInputValue}
+                        updateSearch={onSearchChange}
+                        onSubmit={() => {
+                            onSearchSubmit(userSearchQuery);
+                        }}
+                    />
+
+                    <SearchRouterList
+                        currentQuery={userSearchQuery}
+                        reportForContextualSearch={contextualReportData}
+                        recentSearches={sortedRecentSearches}
+                        recentReports={searchOptions?.recentReports?.slice(0, 5)}
+                        onSearchSubmit={onSearchSubmit}
+                        updateUserSearchQuery={updateUserSearchQuery}
+                        closeAndClearRouter={closeAndClearRouter}
                     />
                 </View>
             </FocusTrapForModal>

src/components/Search/SearchRouter/SearchRouterInput.tsx

@@ -1,34 +1,30 @@
 import React, {useState} from 'react';
 import BaseTextInput from '@components/TextInput/BaseTextInput';
 import useThemeStyles from '@hooks/useThemeStyles';
-import variables from '@styles/variables';
 import CONST from '@src/CONST';
 
 type SearchRouterInputProps = {
-    isFullWidth: boolean;
-    onChange: (searchTerm: string) => void;
+    text: string;
+    setText: (searchTerm: string) => void;
+    updateSearch: (searchTerm: string) => void;
     onSubmit: () => void;
 };
 
-function SearchRouterInput({isFullWidth, onChange, onSubmit}: SearchRouterInputProps) {
+function SearchRouterInput({text, setText, updateSearch, onSubmit}: SearchRouterInputProps) {
     const styles = useThemeStyles();
 
-    const [value, setValue] = useState('');
-
     const onChangeText = (text: string) => {
-        setValue(text);
-        onChange(text);
+        setText(text);
+        updateSearch(text);
     };
 
-    const modalWidth = isFullWidth ? styles.w100 : {width: variables.popoverWidth};
-
     return (
         <BaseTextInput
-            value={value}
+            value={text}
             onChangeText={onChangeText}
             onSubmitEditing={onSubmit}
             autoFocus
-            textInputContainerStyles={[{borderBottomWidth: 0}, modalWidth]}
+            textInputContainerStyles={[{borderBottomWidth: 0}, styles.w100]}
             inputStyle={[styles.searchInputStyle, styles.searchRouterInputStyle, styles.ph2]}
             role={CONST.ROLE.PRESENTATION}
             autoCapitalize="none"

src/components/Search/SearchRouter/SearchRouterList.tsx

@@ -0,0 +1,141 @@
+import React, {useCallback} from 'react';
+import * as Expensicons from '@components/Icon/Expensicons';
+import type {SearchQueryJSON, SearchRouterListItem} from '@components/Search/types';
+import SelectionList from '@components/SelectionList';
+import SingleIconListItem from '@components/SelectionList/Search/SingleIconListItem';
+import type {ListItemWithSingleIcon, SingleIconListItemProps} from '@components/SelectionList/Search/SingleIconListItem';
+import type {SectionListDataType, UserListItemProps} from '@components/SelectionList/types';
+import UserListItem from '@components/SelectionList/UserListItem';
+import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
+import Navigation from '@libs/Navigation/Navigation';
+import type {OptionData} from '@libs/ReportUtils';
+import * as SearchUtils from '@libs/SearchUtils';
+import * as Report from '@userActions/Report';
+import CONST from '@src/CONST';
+import ROUTES from '@src/ROUTES';
+
+type ItemWithQuery = {
+    query: string;
+};
+
+type SearchRouterListProps = {
+    currentQuery: SearchQueryJSON | undefined;
+    reportForContextualSearch?: OptionData;
+    recentSearches: ItemWithQuery[] | undefined;
+    recentReports: OptionData[];
+    onSearchSubmit: (query: SearchQueryJSON | undefined) => void;
+    updateUserSearchQuery: (newSearchQuery: string) => void;
+    closeAndClearRouter: () => void;
+};
+
+function SearchRouterItem(props: UserListItemProps<SearchRouterListItem> | SingleIconListItemProps<SearchRouterListItem>) {
+    const styles = useThemeStyles();
+    if (props.item.itemType === CONST.SEARCH.ROUTER_LIST_ITEM_TYPE.REPORT) {
+        return (
+            <UserListItem
+                pressableStyle={styles.br2}
+                // eslint-disable-next-line react/jsx-props-no-spreading
+                {...(props as UserListItemProps<OptionData>)}
+            />
+        );
+    }
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    return <SingleIconListItem {...(props as SingleIconListItemProps<ListItemWithSingleIcon & ItemWithQuery>)} />;
+}
+
+function SearchRouterList({currentQuery, reportForContextualSearch, recentSearches, recentReports, onSearchSubmit, updateUserSearchQuery, closeAndClearRouter}: SearchRouterListProps) {
+    const styles = useThemeStyles();
+    const {translate} = useLocalize();
+    const sections: Array<SectionListDataType<SearchRouterListItem>> = [];
+
+    if (currentQuery?.inputQuery) {
+        sections.push({
+            data: [
+                {
+                    text: currentQuery?.inputQuery,
+                    singleIcon: Expensicons.MagnifyingGlass,
+                    query: currentQuery?.inputQuery,
+                    itemStyle: styles.activeComponentBG,
+                    keyForList: 'findItem',
+                    itemType: CONST.SEARCH.ROUTER_LIST_ITEM_TYPE.SEARCH,
+                },
+            ],
+        });
+    }
+
+    if (reportForContextualSearch) {
+        sections.push({
+            data: [
+                {
+                    text: `${translate('search.searchIn')}${reportForContextualSearch.text ?? reportForContextualSearch.alternateText}`,
+                    singleIcon: Expensicons.MagnifyingGlass,
+                    query: `in:${reportForContextualSearch.reportID}`,
+                    itemStyle: styles.activeComponentBG,
+                    keyForList: 'contextualSearch',
+                    itemType: CONST.SEARCH.ROUTER_LIST_ITEM_TYPE.CONTEXTUAL_SUGGESTION,
+                },
+            ],
+        });
+    }
+
+    const recentSearchesData = recentSearches?.map(({query}) => ({
+        text: query,
+        singleIcon: Expensicons.History,
+        query,
+        keyForList: query,
+        itemType: CONST.SEARCH.ROUTER_LIST_ITEM_TYPE.SEARCH,
+    }));
+
+    if (recentSearchesData && recentSearchesData.length > 0) {
+        sections.push({title: translate('search.recentSearches'), data: recentSearchesData});
+    }
+
+    const recentReportsData = recentReports.map((item) => ({...item, pressableStyle: styles.br2, itemType: CONST.SEARCH.ROUTER_LIST_ITEM_TYPE.REPORT}));
+    sections.push({title: translate('search.recentChats'), data: recentReportsData});
+
+    const onSelectRow = useCallback(
+        (item: SearchRouterListItem) => {
+            switch (item.itemType) {
+                case CONST.SEARCH.ROUTER_LIST_ITEM_TYPE.SEARCH:
+                    // Handle selection of "Recent search"
+                    if (!('query' in item) || !item?.query) {
+                        return;
+                    }
+                    const queryJSON = SearchUtils.buildSearchQueryJSON(item?.query);
+                    onSearchSubmit(queryJSON);
+                    return;
+                case CONST.SEARCH.ROUTER_LIST_ITEM_TYPE.CONTEXTUAL_SUGGESTION:
+                    // Handle selection of "Contextual search suggestion"
+                    if (!('query' in item) || !item?.query || currentQuery?.inputQuery.includes(item?.query)) {
+                        return;
+                    }
+                    updateUserSearchQuery(`${item?.query} ${currentQuery?.inputQuery ?? ''}`);
+                    return;
+                case CONST.SEARCH.ROUTER_LIST_ITEM_TYPE.REPORT:
+                    // Handle selection of "Recent chat"
+                    closeAndClearRouter();
+                    if ('reportID' in item && item?.reportID) {
+                        Navigation.closeAndNavigate(ROUTES.REPORT_WITH_ID.getRoute(item?.reportID));
+                    } else if ('login' in item) {
+                        Report.navigateToAndOpenReport(item?.login ? [item.login] : []);
+                    }
+                    return;
+            }
+        },
+        [closeAndClearRouter, onSearchSubmit, currentQuery],
+    );
+
+    return (
+        <SelectionList<SearchRouterListItem>
+            sections={sections}
+            onSelectRow={onSelectRow}
+            ListItem={SearchRouterItem}
+            containerStyle={styles.mh100}
+        />
+    );
+}
+
+export default SearchRouterList;
+export {SearchRouterItem};
+export type {ItemWithQuery};