fix pr comments

Expensify · Sep 24, 2024 · 17cda40 · 17cda40
1 parent 50d4e78
commit 17cda40
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 42 deletions.
diff --git a/src/components/Search/SearchRouter/SearchRouter.tsx b/src/components/Search/SearchRouter/SearchRouter.tsx
@@ -26,32 +26,34 @@ 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();
 
     const [currentQuery, setCurrentQuery] = useState<SearchQueryJSON | undefined>(undefined);
     const contextualReportID = useNavigationState<Record<string, {reportID: string}>, 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 (
         <Modal
@@ -125,7 +112,7 @@ function SearchRouter() {
             onClose={closeSearchRouter}
         >
             <FocusTrapForModal active={isSearchRouterDisplayed}>
-                <View style={[styles.flex1, styles.p3, modalWidth, styles.mh100, !isFullScreen && styles.mh85vh]}>
+                <View style={[styles.flex1, styles.p3, modalWidth, styles.mh100, !isSmallScreenWidth && styles.mh85vh]}>
                     <SearchRouterInput
                         onChange={onSearchChange}
                         onSubmit={() => {
@@ -134,7 +121,7 @@ function SearchRouter() {
                     />
 
                     <SearchRouterList
-                        currentSearch={currentQuery}
+                        currentQuery={currentQuery}
                         reportForContextualSearch={contextualReportData}
                         recentSearches={sortedRecentSearches}
                         recentReports={searchOptions?.recentReports?.slice(0, 5)}

diff --git a/src/components/Search/SearchRouter/SearchRouterList.tsx b/src/components/Search/SearchRouter/SearchRouterList.tsx
@@ -19,7 +19,7 @@ type ItemWithQuery = {
 };
 
 type SearchRouterListProps = {
-    currentSearch: SearchQueryJSON | undefined;
+    currentQuery: SearchQueryJSON | undefined;
     reportForContextualSearch?: OptionData;
     recentSearches: ItemWithQuery[] | undefined;
     recentReports: OptionData[];
@@ -33,7 +33,6 @@ function SearchRouterItem(props: UserListItemProps<OptionData> | SingleIconListI
     if ('item' in props && props.item.reportID) {
         return (
             <UserListItem
-                pressableStyle={styles.br2}
                 // eslint-disable-next-line react/jsx-props-no-spreading
                 {...(props as UserListItemProps<OptionData>)}
             />
@@ -43,18 +42,18 @@ function SearchRouterItem(props: UserListItemProps<OptionData> | SingleIconListI
     return <SingleIconListItem {...(props as SingleIconListItemProps<ListItemWithSingleIcon & ItemWithQuery>)} />;
 }
 
-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<SectionListDataType<OptionData | (ListItemWithSingleIcon & ItemWithQuery)>> = [];
 
-    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
@@ -34,7 +34,7 @@ function SingleIconListItem<TItem extends ListItemWithSingleIcon>({item, isFocus
             hoverStyle={item.isSelected && styles.activeComponentBG}
         >
             <>
-                {!!item.singleIcon && (
+                {item.singleIcon && (
                     <Icon
                         src={item.singleIcon}
                         fill={theme.icon}
@@ -55,15 +55,14 @@ function SingleIconListItem<TItem extends ListItemWithSingleIcon>({item, isFocus
                             styles.justifyContentCenter,
                         ]}
                     />
-                    {!!item.alternateText && (
+                    {item.alternateText && (
                         <TextWithTooltip
                             shouldShowTooltip={showTooltip ?? false}
                             text={item.alternateText}
                             style={[styles.textLabelSupporting, styles.lh16, styles.pre]}
                         />
                     )}
                 </View>
-                {!!item.rightElement && item.rightElement}
             </>
         </BaseListItem>
     );