[TS migration] Migrate SearchPage

src/components/ScreenWrapper.tsx

@@ -14,7 +14,7 @@ import useTackInputFocus from '@hooks/useTackInputFocus';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import * as Browser from '@libs/Browser';
-import type {RootStackParamList} from '@libs/Navigation/types';
+import type {RootStackParamList, SearchNavigatorParamList} from '@libs/Navigation/types';
 import toggleTestToolsModal from '@userActions/TestTool';
 import CONST from '@src/CONST';
 import CustomDevMenu from './CustomDevMenu';
@@ -89,7 +89,7 @@ type ScreenWrapperProps = {
      *
      * This is required because transitionEnd event doesn't trigger in the testing environment.
      */
-    navigation?: StackNavigationProp<RootStackParamList>;
+    navigation?: StackNavigationProp<RootStackParamList> | StackNavigationProp<SearchNavigatorParamList>;
 
     /** Whether to show offline indicator on wide screens */
     shouldShowOfflineIndicatorInWideScreen?: boolean;

src/components/SelectionList/BaseListItem.tsx

@@ -55,13 +55,13 @@ function BaseListItem<TItem extends User | RadioItem>({
             <PressableWithFeedback
                 onPress={() => onSelectRow(item)}
                 disabled={isDisabled}
-                accessibilityLabel={item.text}
+                accessibilityLabel={item.text ?? ''}
                 role={CONST.ROLE.BUTTON}
                 hoverDimmingValue={1}
                 hoverStyle={styles.hoveredComponentBG}
                 dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: true}}
                 onMouseDown={shouldPreventDefaultFocusOnSelectRow ? (e) => e.preventDefault() : undefined}
-                nativeID={keyForList}
+                nativeID={keyForList ?? ''}
             >
                 <View
                     style={[
@@ -130,7 +130,7 @@ function BaseListItem<TItem extends User | RadioItem>({
                     )}
                     {rightHandSideComponentRender()}
                 </View>
-                {isUserItem && item.invitedSecondaryLogin && (
+                {isUserItem && 'invitedSecondaryLogin' in item && item.invitedSecondaryLogin && (
                     <Text style={[styles.ml9, styles.ph5, styles.pb3, styles.textLabelSupporting]}>
                         {translate('workspace.people.invitedBySecondaryLogin', {secondaryLogin: item.invitedSecondaryLogin})}
                     </Text>

src/components/SelectionList/BaseSelectionList.tsx

@@ -314,7 +314,7 @@
 
     const onSectionListLayout = useCallback(
         (nativeEvent: LayoutChangeEvent) => {
             onLayout?.(nativeEvent);
             scrollToFocusedIndexOnFirstRender(nativeEvent);
         },
         [onLayout, scrollToFocusedIndexOnFirstRender],
@@ -457,7 +457,7 @@
                                     getItemLayout={getItemLayout}
                                     onScroll={onScroll}
                                     onScrollBeginDrag={onScrollBeginDrag}
-                                    keyExtractor={(item) => item.keyForList}
+                                    keyExtractor={(item) => item.keyForList ?? ''}
                                     extraData={focusedIndex}
                                     indicatorStyle="white"
                                     keyboardShouldPersistTaps="always"

src/components/SelectionList/RadioListItem.tsx

@@ -11,7 +11,7 @@ function RadioListItem({item, showTooltip, textStyles, alternateTextStyles}: Rad
         <View style={[styles.flex1, styles.alignItemsStart]}>
             <TextWithTooltip
                 shouldShowTooltip={showTooltip}
-                text={item.text}
+                text={item.text ?? ''}
                 textStyles={textStyles}
             />
 

src/components/SelectionList/UserListItem.tsx

@@ -19,7 +19,7 @@ function UserListItem({item, textStyles, alternateTextStyles, showTooltip, style
             <View style={[styles.flex1, styles.flexColumn, styles.justifyContentCenter, styles.alignItemsStretch, styles.optionRow]}>
                 <TextWithTooltip
                     shouldShowTooltip={showTooltip}
-                    text={item.text}
+                    text={item.text ?? ''}
                     textStyles={[textStyles, style]}
                 />
                 {!!item.alternateText && (

src/components/SelectionList/types.ts

@@ -1,5 +1,6 @@
 import type {ReactElement, ReactNode} from 'react';
-import type {GestureResponderEvent, InputModeOptions, LayoutChangeEvent, SectionListData, StyleProp, TextStyle, ViewStyle} from 'react-native';
+import type {GestureResponderEvent, InputModeOptions, SectionListData, StyleProp, TextStyle, ViewStyle} from 'react-native';
+import type CONST from '@src/CONST';
 import type {Errors, Icon, PendingAction} from '@src/types/onyx/OnyxCommon';
 import type ChildrenProps from '@src/types/utils/ChildrenProps';
 
@@ -14,7 +15,7 @@ type CommonListItemProps<TItem> = {
     alternateTextStyles?: StyleProp<TextStyle>;
 
     /** Whether this item is disabled */
-    isDisabled?: boolean;
+    isDisabled?: boolean | null;
 
     /** Whether this item should show Tooltip */
     showTooltip: boolean;
@@ -34,25 +35,25 @@ type CommonListItemProps<TItem> = {
 
 type User = {
     /** Text to display */
-    text: string;
+    text?: string;
 
     /** Alternate text to display */
-    alternateText?: string;
+    alternateText?: string | null;
 
     /** Key used internally by React */
-    keyForList: string;
+    keyForList?: string | null;
 
     /** Whether this option is selected */
     isSelected?: boolean;
 
     /** Whether this option is disabled for selection */
-    isDisabled?: boolean;
+    isDisabled?: boolean | null;
 
     /** User accountID */
-    accountID?: number;
+    accountID?: number | null;
 
     /** User login */
-    login?: string;
+    login?: string | null;
 
     /** Element to show on the right side of the item */
     rightElement?: ReactNode;
@@ -73,6 +74,9 @@ type User = {
 
     /** Represents the index of the option within the section it came from */
     index?: number;
+
+    /** ID of the report */
+    reportID?: string;
 };
 
 type UserListItemProps = CommonListItemProps<User> & {
@@ -85,19 +89,19 @@ type UserListItemProps = CommonListItemProps<User> & {
 
 type RadioItem = {
     /** Text to display */
-    text: string;
+    text?: string;
 
     /** Alternate text to display */
-    alternateText?: string;
+    alternateText?: string | null;
 
     /** Key used internally by React */
-    keyForList: string;
+    keyForList?: string | null;
 
     /** Whether this option is selected */
     isSelected?: boolean;
 
     /** Whether this option is disabled for selection */
-    isDisabled?: boolean;
+    isDisabled?: boolean | null;
 
     /** Represents the index of the section it came from  */
     sectionIndex?: number;
@@ -114,7 +118,7 @@ type RadioListItemProps = CommonListItemProps<RadioItem> & {
 type BaseListItemProps<TItem extends User | RadioItem> = CommonListItemProps<TItem> & {
     item: TItem;
     shouldPreventDefaultFocusOnSelectRow?: boolean;
-    keyForList?: string;
+    keyForList?: string | null;
 };
 
 type Section<TItem extends User | RadioItem> = {
@@ -136,7 +140,7 @@ type Section<TItem extends User | RadioItem> = {
 
 type BaseSelectionListProps<TItem extends User | RadioItem> = Partial<ChildrenProps> & {
     /** Sections for the section list */
-    sections: Array<SectionListData<TItem, Section<TItem>>>;
+    sections: Array<SectionListData<TItem, Section<TItem>>> | typeof CONST.EMPTY_ARRAY;
 
     /** Whether this is a multi-select list */
     canSelectMultiple?: boolean;
@@ -237,8 +241,11 @@ type BaseSelectionListProps<TItem extends User | RadioItem> = Partial<ChildrenPr
     /** Whether to show the loading indicator for new options */
     isLoadingNewOptions?: boolean;
 
-    /** Fired when the list is displayed with the items */
-    onLayout?: (event: LayoutChangeEvent) => void;
+    /** Custom callback when Selection List layout changes */
+    onLayout?: () => void;
+
+    /**  Whether to auto focus the Search Input */
+    autoFocus?: boolean;
 };
 
 type ItemLayout = {

src/libs/OptionsListUtils.ts

@@ -1704,7 +1704,7 @@ function getOptions(
 /**
  * Build the options for the Search view
  */
-function getSearchOptions(reports: Record<string, Report>, personalDetails: OnyxEntry<PersonalDetailsList>, searchValue = '', betas: Beta[] = []): GetOptions {
+function getSearchOptions(reports: OnyxCollection<Report>, personalDetails: OnyxEntry<PersonalDetailsList>, searchValue = '', betas: Beta[] = []): GetOptions {
     Timing.start(CONST.TIMING.LOAD_SEARCH_OPTIONS);
     Performance.markStart(CONST.TIMING.LOAD_SEARCH_OPTIONS);
     const options = getOptions(reports, personalDetails, {

src/pages/SearchPage/index.js → src/pages/SearchPage/index.tsx

@@ -1,6 +1,7 @@
-import PropTypes from 'prop-types';
+import type {StackScreenProps} from '@react-navigation/stack';
 import React, {useEffect, useMemo, useState} from 'react';
 import {View} from 'react-native';
+import type {OnyxCollection, OnyxEntry} from 'react-native-onyx';
 import {withOnyx} from 'react-native-onyx';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import {usePersonalDetails} from '@components/OnyxProvider';
@@ -11,43 +12,47 @@
 import useNetwork from '@hooks/useNetwork';
 import useThemeStyles from '@hooks/useThemeStyles';
 import Navigation from '@libs/Navigation/Navigation';
+import type {SearchNavigatorParamList} from '@libs/Navigation/types';
 import * as OptionsListUtils from '@libs/OptionsListUtils';
 import Performance from '@libs/Performance';
 import * as ReportUtils from '@libs/ReportUtils';
-import reportPropTypes from '@pages/reportPropTypes';
 import * as Report from '@userActions/Report';
 import Timing from '@userActions/Timing';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
+import type SCREENS from '@src/SCREENS';
+import type * as OnyxTypes from '@src/types/onyx';
 import SearchPageFooter from './SearchPageFooter';
 
-const propTypes = {
-    /* Onyx Props */
-
+type SearchPageOnyxProps = {
     /** Beta features list */
-    betas: PropTypes.arrayOf(PropTypes.string),
+    betas: OnyxEntry<OnyxTypes.Beta[]>;
 
     /** All reports shared with the user */
-    reports: PropTypes.objectOf(reportPropTypes),
+    reports: OnyxCollection<OnyxTypes.Report>;
 
     /** Whether or not we are searching for reports on the server */
-    isSearchingForReports: PropTypes.bool,
+    isSearchingForReports: OnyxEntry<boolean>;
 };
 
-const defaultProps = {
-    betas: [],
-    reports: {},
-    isSearchingForReports: false,
+type SearchPageProps = SearchPageOnyxProps & StackScreenProps<SearchNavigatorParamList, typeof SCREENS.SEARCH_ROOT>;
+
+type SearchPageSectionItem = {
+    data: ReportUtils.OptionData[];
+    shouldShow: boolean;
+    indexOffset: number;
 };
 
+type SearchPageSectionList = SearchPageSectionItem[];
+
 const setPerformanceTimersEnd = () => {
     Timing.end(CONST.TIMING.SEARCH_RENDER);
     Performance.markEnd(CONST.TIMING.SEARCH_RENDER);
 };
 
 const SearchPageFooterInstance = <SearchPageFooter />;
 
-function SearchPage({betas, reports, isSearchingForReports}) {
+function SearchPage({betas, reports, isSearchingForReports}: SearchPageProps) {
     const [isScreenTransitionEnd, setIsScreenTransitionEnd] = useState(false);
     const {translate} = useLocalize();
     const {isOffline} = useNetwork();
@@ -75,28 +80,28 @@
     } = useMemo(() => {
         if (!isScreenTransitionEnd) {
             return {
-                recentReports: {},
-                personalDetails: {},
-                userToInvite: {},
+                recentReports: [],
+                personalDetails: [],
+                userToInvite: null,
                 headerMessage: '',
             };
         }
-        const options = OptionsListUtils.getSearchOptions(reports, personalDetails, debouncedSearchValue.trim(), betas);
+        const options = OptionsListUtils.getSearchOptions(reports, personalDetails, debouncedSearchValue.trim(), betas ?? []);
         const header = OptionsListUtils.getHeaderMessage(options.recentReports.length + options.personalDetails.length !== 0, Boolean(options.userToInvite), debouncedSearchValue);
         return {...options, headerMessage: header};
     }, [debouncedSearchValue, reports, personalDetails, betas, isScreenTransitionEnd]);
 
-    const sections = useMemo(() => {
-        const newSections = [];
+    const sections = useMemo((): SearchPageSectionList => {
+        const newSections: SearchPageSectionList = [];
         let indexOffset = 0;
 
-        if (recentReports.length > 0) {
+        if (recentReports?.length > 0) {
             newSections.push({
                 data: recentReports,
                 shouldShow: true,
                 indexOffset,
             });
-            indexOffset += recentReports.length;
+            indexOffset += recentReports?.length;
         }
 
         if (localPersonalDetails.length > 0) {
@@ -119,7 +124,7 @@
         return newSections;
     }, [localPersonalDetails, recentReports, userToInvite]);
 
-    const selectReport = (option) => {
+    const selectReport = (option: ReportUtils.OptionData) => {
         if (!option) {
             return;
         }
@@ -128,7 +133,7 @@
             setSearchValue('');
             Navigation.dismissModal(option.reportID);
         } else {
-            Report.navigateToAndOpenReport([option.login]);
+            Report.navigateToAndOpenReport(option.login ? [option.login] : []);
         }
     };
 
@@ -151,11 +156,11 @@
                         onBackButtonPress={Navigation.goBack}
                     />
                     <View style={[themeStyles.flex1, themeStyles.w100, safeAreaPaddingBottomStyle]}>
-                        <SelectionList
+                        <SelectionList<ReportUtils.OptionData>
                             sections={didScreenTransitionEnd && isOptionsDataReady ? sections : CONST.EMPTY_ARRAY}
                             textInputValue={searchValue}
                             textInputLabel={translate('optionsSelector.nameEmailOrPhoneNumber')}
                             textInputHint={offlineMessage}
                             onChangeText={setSearchValue}
                             headerMessage={headerMessage}
                             onLayout={setPerformanceTimersEnd}
@@ -163,7 +168,7 @@
                             onSelectRow={selectReport}
                             showLoadingPlaceholder={!didScreenTransitionEnd || !isOptionsDataReady}
                             footerContent={SearchPageFooterInstance}
-                            isLoadingNewOptions={isSearchingForReports}
+                            isLoadingNewOptions={isSearchingForReports ?? undefined}
                         />
                     </View>
                 </>
@@ -172,11 +177,9 @@
     );
 }
 
-SearchPage.propTypes = propTypes;
-SearchPage.defaultProps = defaultProps;
 SearchPage.displayName = 'SearchPage';
 
-export default withOnyx({
+export default withOnyx<SearchPageProps, SearchPageOnyxProps>({
     reports: {
         key: ONYXKEYS.COLLECTION.REPORT,
     },