diff --git a/src/components/Search/SearchRouter/SearchRouter.tsx b/src/components/Search/SearchRouter/SearchRouter.tsx index d35c9b80de36..70d2637ffc08 100644 --- a/src/components/Search/SearchRouter/SearchRouter.tsx +++ b/src/components/Search/SearchRouter/SearchRouter.tsx @@ -26,6 +26,8 @@ const SEARCH_DEBOUNCE_DELAY = 200; function SearchRouter() { const styles = useThemeStyles(); const [betas] = useOnyx(`${ONYXKEYS.BETAS}`); + const [recentSearches] = useOnyx(ONYXKEYS.RECENT_SEARCHES); + const {isSmallScreenWidth} = useResponsiveLayout(); const {isSearchRouterDisplayed, closeSearchRouter} = useSearchRouterContext(); @@ -33,25 +35,25 @@ function SearchRouter() { const contextualReportID = useNavigationState, string | undefined>((state) => { return state.routes.at(-1)?.params?.reportID; }); - const [recentSearches] = useOnyx(ONYXKEYS.RECENT_SEARCHES); - const sortedRecentSearches = Object.values(recentSearches ?? {}).sort((a, b) => { - const dateA = new Date(a.timestamp); - const dateB = new Date(b.timestamp); - return dateB.getTime() - dateA.getTime(); - }); + 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 [] as unknown as OptionsListUtils.Options; + return {recentReports: [], personalDetails: [], userToInvite: null, currentUserOption: null, categoryOptions: [], tagOptions: [], taxRatesOptions: []}; } - const optionList = OptionsListUtils.getSearchOptions(options, '', betas ?? []); - return optionList; + return OptionsListUtils.getSearchOptions(options, '', betas ?? []); }, [areOptionsInitialized, betas, options]); - const contextualReportData = searchOptions.recentReports?.find((option) => option.reportID === contextualReportID); + const contextualReportData = contextualReportID ? searchOptions.recentReports?.find((option) => option.reportID === contextualReportID) : undefined; const clearUserQuery = () => { setCurrentQuery(undefined); @@ -93,28 +95,13 @@ function SearchRouter() { [closeSearchRouter], ); -<<<<<<< HEAD - useKeyboardShortcut( - CONST.KEYBOARD_SHORTCUTS.ENTER, - () => { - onSearchSubmit(currentQuery); - }, - { - captureOnInputs: true, - shouldBubble: false, - }, - ); - -======= ->>>>>>> main useKeyboardShortcut(CONST.KEYBOARD_SHORTCUTS.ESCAPE, () => { closeSearchRouter(); clearUserQuery(); }); const modalType = isSmallScreenWidth ? CONST.MODAL.MODAL_TYPE.CENTERED : CONST.MODAL.MODAL_TYPE.POPOVER; - const isFullScreen = isSmallScreenWidth; - const modalWidth = isFullScreen ? styles.w100 : {width: variables.popoverWidth}; + const modalWidth = isSmallScreenWidth ? styles.w100 : {width: variables.popoverWidth}; return ( - + { @@ -134,7 +121,7 @@ function SearchRouter() { /> | SingleIconListI if ('item' in props && props.item.reportID) { return ( )} /> @@ -43,18 +42,18 @@ function SearchRouterItem(props: UserListItemProps | SingleIconListI return )} />; } -function SearchRouterList({currentSearch, reportForContextualSearch, recentSearches, recentReports, onRecentSearchSelect, closeAndClearRouter}: SearchRouterListProps) { +function SearchRouterList({currentQuery, reportForContextualSearch, recentSearches, recentReports, onRecentSearchSelect, closeAndClearRouter}: SearchRouterListProps) { const styles = useThemeStyles(); const {translate} = useLocalize(); const sections: Array> = []; - if (currentSearch?.inputQuery) { + if (currentQuery?.inputQuery) { sections.push({ data: [ { - text: currentSearch?.inputQuery, + text: currentQuery?.inputQuery, singleIcon: Expensicons.MagnifyingGlass, - query: currentSearch?.inputQuery, + query: currentQuery?.inputQuery, itemStyle: styles.activeComponentBG, keyForList: 'findItem', }, @@ -84,23 +83,23 @@ function SearchRouterList({currentSearch, reportForContextualSearch, recentSearc keyForList: query, })); - if (recentSearchesData) { + if (recentSearchesData && recentSearchesData.length > 0) { sections.push({title: translate('search.recentSearches'), data: recentSearchesData}); } - const recentReportsWithStyle = recentReports.map((item) => ({...item, pressableStyle: styles.br2})); - sections.push({title: translate('search.recentChats'), data: recentReportsWithStyle}); + const styledRecentReports = recentReports.map((item) => ({...item, pressableStyle: styles.br2})); + sections.push({title: translate('search.recentChats'), data: styledRecentReports}); const onSelectRow = useCallback( (item: OptionData | ItemWithQuery) => { - // This is case for handling selection of "Recent search" + // Handle selection of "Recent search" if ('query' in item && item?.query) { const queryJSON = SearchUtils.buildSearchQueryJSON(item?.query); onRecentSearchSelect(queryJSON, true); return; } - // This is case for handling selection of "Recent chat" + // Handle selection of "Recent chat" closeAndClearRouter(); if ('reportID' in item && item?.reportID) { Navigation.closeAndNavigate(ROUTES.REPORT_WITH_ID.getRoute(item?.reportID)); diff --git a/src/components/SelectionList/Search/SingleIconListItem.tsx b/src/components/SelectionList/Search/SingleIconListItem.tsx index e67ca6db39a1..784aa4822335 100644 --- a/src/components/SelectionList/Search/SingleIconListItem.tsx +++ b/src/components/SelectionList/Search/SingleIconListItem.tsx @@ -34,7 +34,7 @@ function SingleIconListItem({item, isFocus hoverStyle={item.isSelected && styles.activeComponentBG} > <> - {!!item.singleIcon && ( + {item.singleIcon && ( ({item, isFocus styles.justifyContentCenter, ]} /> - {!!item.alternateText && ( + {item.alternateText && ( ({item, isFocus /> )} - {!!item.rightElement && item.rightElement} );