SearchPage list refactor

src/components/SelectionList/BaseSelectionList.js

@@ -40,6 +40,7 @@ function BaseSelectionList({
     textInputLabel = '',
     textInputPlaceholder = '',
     textInputValue = '',
+    textInputHint = '',
     textInputMaxLength,
     inputMode = CONST.INPUT_MODE.TEXT,
     onChangeText,
@@ -413,6 +414,7 @@ function BaseSelectionList({
                                     }}
                                     label={textInputLabel}
                                     accessibilityLabel={textInputLabel}
+                                    hint={textInputHint}
                                     role={CONST.ROLE.PRESENTATION}
                                     value={textInputValue}
                                     placeholder={textInputPlaceholder}

src/hooks/useDebouncedState.ts

@@ -0,0 +1,35 @@
+import debounce from 'lodash/debounce';
+import {useEffect, useRef, useState} from 'react';
+import CONST from '@src/CONST';
+
+/**
+ * A React hook that provides a state and its debounced version.
+ *
+ * @param initialValue - The initial value of the state.
+ * @param delay - The debounce delay in milliseconds. Defaults to SEARCH_OPTION_LIST_DEBOUNCE_TIME = 300ms.
+ * @returns A tuple containing:
+ *          - The current state value.
+ *          - The debounced state value.
+ *          - A function to set both the current and debounced state values.
+ *
+ * @template T The type of the state value.
+ *
+ * @example
+ * const [value, debouncedValue, setValue] = useDebouncedState<string>("", 300);
+ */
+function useDebouncedState<T>(initialValue: T, delay = CONST.TIMING.SEARCH_OPTION_LIST_DEBOUNCE_TIME): [T, T, (value: T) => void] {
+    const [value, setValue] = useState(initialValue);
+    const [debouncedValue, setDebouncedValue] = useState(initialValue);
+    const debouncedSetDebouncedValue = useRef(debounce(setDebouncedValue, delay)).current;
+
+    useEffect(() => () => debouncedSetDebouncedValue.cancel(), [debouncedSetDebouncedValue]);
+
+    const handleSetValue = (newValue: T) => {
+        setValue(newValue);
+        debouncedSetDebouncedValue(newValue);
+    };
+
+    return [value, debouncedValue, handleSetValue];
+}
+
+export default useDebouncedState;

src/pages/SearchPage/SearchPageFooter.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import {View} from 'react-native';
+import Icon from '@components/Icon';
+import {Info} from '@components/Icon/Expensicons';
+import {PressableWithoutFeedback} from '@components/Pressable';
+import Text from '@components/Text';
+import useLocalize from '@hooks/useLocalize';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
+import Navigation from '@libs/Navigation/Navigation';
+import CONST from '@src/CONST';
+import ROUTES from '@src/ROUTES';
+
+function SearchPageFooter() {
+    const themeStyles = useThemeStyles();
+    const theme = useTheme();
+    const {translate} = useLocalize();
+
+    return (
+        <View style={[themeStyles.pb5, themeStyles.flexShrink0]}>
+            <PressableWithoutFeedback
+                onPress={() => {
+                    Navigation.navigate(ROUTES.REFERRAL_DETAILS_MODAL.getRoute(CONST.REFERRAL_PROGRAM.CONTENT_TYPES.REFER_FRIEND));
+                }}
+                style={[
+                    themeStyles.p5,
+                    themeStyles.w100,
+                    themeStyles.br2,
+                    themeStyles.highlightBG,
+                    themeStyles.flexRow,
+                    themeStyles.justifyContentBetween,
+                    themeStyles.alignItemsCenter,
+                    {gap: 10},
+                ]}
+                accessibilityLabel="referral"
+                role={CONST.ACCESSIBILITY_ROLE.BUTTON}
+            >
+                <Text>
+                    {translate(`referralProgram.${CONST.REFERRAL_PROGRAM.CONTENT_TYPES.REFER_FRIEND}.buttonText1`)}
+                    <Text
+                        color={theme.success}
+                        style={themeStyles.textStrong}
+                    >
+                        {translate(`referralProgram.${CONST.REFERRAL_PROGRAM.CONTENT_TYPES.REFER_FRIEND}.buttonText2`)}
+                    </Text>
+                </Text>
+                <Icon
+                    src={Info}
+                    height={20}
+                    width={20}
+                />
+            </PressableWithoutFeedback>
+        </View>
+    );
+}
+
+SearchPageFooter.displayName = 'SearchPageFooter';
+
+export default SearchPageFooter;

src/pages/SearchPage/index.js

@@ -0,0 +1,183 @@
+import PropTypes from 'prop-types';
+import React, {useEffect, useMemo, useState} from 'react';
+import {View} from 'react-native';
+import {withOnyx} from 'react-native-onyx';
+import HeaderWithBackButton from '@components/HeaderWithBackButton';
+import {usePersonalDetails} from '@components/OnyxProvider';
+import ScreenWrapper from '@components/ScreenWrapper';
+import SelectionList from '@components/SelectionList';
+import useDebouncedState from '@hooks/useDebouncedState';
+import useLocalize from '@hooks/useLocalize';
+import useNetwork from '@hooks/useNetwork';
+import useThemeStyles from '@hooks/useThemeStyles';
+import Navigation from '@libs/Navigation/Navigation';
+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 SearchPageFooter from './SearchPageFooter';
+
+const propTypes = {
+    /* Onyx Props */
+
+    /** Beta features list */
+    betas: PropTypes.arrayOf(PropTypes.string),
+
+    /** All reports shared with the user */
+    reports: PropTypes.objectOf(reportPropTypes),
+};
+
+const defaultProps = {
+    betas: [],
+    reports: {},
+};
+
+const setPerformanceTimersEnd = () => {
+    Timing.end(CONST.TIMING.SEARCH_RENDER);
+    Performance.markEnd(CONST.TIMING.SEARCH_RENDER);
+};
+
+const SearchPageFooterInstance = <SearchPageFooter />;
+
+function SearchPage({betas, reports}) {
+    const [isScreenTransitionEnd, setIsScreenTransitionEnd] = useState(false);
+    const {translate} = useLocalize();
+    const {isOffline} = useNetwork();
+    const themeStyles = useThemeStyles();
+    const personalDetails = usePersonalDetails();
+
+    const offlineMessage = isOffline ? `${translate('common.youAppearToBeOffline')} ${translate('search.resultsAreLimited')}` : '';
+
+    const [searchValue, debouncedSearchValue, setSearchValue] = useDebouncedState('');
+
+    useEffect(() => {
+        Timing.start(CONST.TIMING.SEARCH_RENDER);
+        Performance.markStart(CONST.TIMING.SEARCH_RENDER);
+    }, []);
+
+    const onChangeText = (text = '') => {
+        Report.searchInServer(text);
+        setSearchValue(text);
+    };
+
+    const {
+        recentReports,
+        personalDetails: localPersonalDetails,
+        userToInvite,
+        headerMessage,
+    } = useMemo(() => {
+        if (!isScreenTransitionEnd) {
+            return {
+                recentReports: {},
+                personalDetails: {},
+                userToInvite: {},
+                headerMessage: '',
+            };
+        }
+        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 = [];
+        let indexOffset = 0;
+
+        if (recentReports.length > 0) {
+            newSections.push({
+                data: recentReports,
+                shouldShow: true,
+                indexOffset,
+            });
+            indexOffset += recentReports.length;
+        }
+
+        if (localPersonalDetails.length > 0) {
+            newSections.push({
+                data: localPersonalDetails,
+                shouldShow: true,
+                indexOffset,
+            });
+            indexOffset += recentReports.length;
+        }
+
+        if (userToInvite) {
+            newSections.push({
+                data: [userToInvite],
+                shouldShow: true,
+                indexOffset,
+            });
+        }
+
+        return newSections;
+    }, [localPersonalDetails, recentReports, userToInvite]);
+
+    const selectReport = (option) => {
+        if (!option) {
+            return;
+        }
+
+        if (option.reportID) {
+            setSearchValue('');
+            Navigation.dismissModal(option.reportID);
+        } else {
+            Report.navigateToAndOpenReport([option.login]);
+        }
+    };
+
+    const handleScreenTransitionEnd = () => {
+        setIsScreenTransitionEnd(true);
+    };
+
+    const isOptionsDataReady = useMemo(() => ReportUtils.isReportDataReady() && OptionsListUtils.isPersonalDetailsReady(personalDetails), [personalDetails]);
+
+    return (
+        <ScreenWrapper
+            includeSafeAreaPaddingBottom={false}
+            testID={SearchPage.displayName}
+            onEntryTransitionEnd={handleScreenTransitionEnd}
+        >
+            {({didScreenTransitionEnd, safeAreaPaddingBottomStyle}) => (
+                <>
+                    <HeaderWithBackButton title={translate('common.search')} />
+                    <View style={[themeStyles.flex1, themeStyles.w100, safeAreaPaddingBottomStyle]}>
+                        <SelectionList
+                            sections={didScreenTransitionEnd && isOptionsDataReady ? sections : CONST.EMPTY_ARRAY}
+                            textInputValue={searchValue}
+                            textInputLabel={translate('optionsSelector.nameEmailOrPhoneNumber')}
+                            textInputHint={offlineMessage}
+                            onChangeText={onChangeText}
+                            headerMessage={headerMessage}
+                            onLayout={setPerformanceTimersEnd}
+                            autoFocus
+                            onSelectRow={selectReport}
+                            showLoadingPlaceholder={!didScreenTransitionEnd || !isOptionsDataReady}
+                            footerContent={SearchPageFooterInstance}
+                        />
+                    </View>
+                </>
+            )}
+        </ScreenWrapper>
+    );
+}
+
+SearchPage.propTypes = propTypes;
+SearchPage.defaultProps = defaultProps;
+SearchPage.displayName = 'SearchPage';
+
+export default withOnyx({
+    reports: {
+        key: ONYXKEYS.COLLECTION.REPORT,
+    },
+    betas: {
+        key: ONYXKEYS.BETAS,
+    },
+    isSearchingForReports: {
+        key: ONYXKEYS.IS_SEARCHING_FOR_REPORTS,
+        initWithStoredValues: false,
+    },
+})(SearchPage);