Migrate SearchPage.js to function component #27924
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,17 +1,14 @@ | ||
| import PropTypes from 'prop-types'; | ||
| import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react'; | ||
| import {View} from 'react-native'; | ||
| import {withOnyx} from 'react-native-onyx'; | ||
| import _ from 'underscore'; | ||
| import HeaderWithBackButton from '@components/HeaderWithBackButton'; | ||
| import OptionsSelector from '@components/OptionsSelector'; | ||
| import ScreenWrapper from '@components/ScreenWrapper'; | ||
| 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'; | ||
|
|
@@ -35,207 +32,195 @@ const propTypes = { | |
| /** All reports shared with the user */ | ||
| reports: PropTypes.objectOf(reportPropTypes), | ||
|
|
||
| /** Whether we are searching for reports in the server */ | ||
| isSearchingForReports: PropTypes.bool, | ||
| }; | ||
|
|
||
| const defaultProps = { | ||
| betas: [], | ||
| personalDetails: {}, | ||
| reports: {}, | ||
| isSearchingForReports: false, | ||
| }; | ||
|
|
||
| function SearchPage({betas, personalDetails, reports, isSearchingForReports}) { | ||
| const [searchValue, setSearchValue] = useState(''); | ||
| const [searchOptions, setSearchOptions] = useState(() => { | ||
| const { | ||
| recentReports: localRecentReports, | ||
| personalDetails: localPersonalDetails, | ||
| userToInvite: localUserToInvite, | ||
| } = OptionsListUtils.getSearchOptions(reports, personalDetails, '', betas); | ||
|
|
||
| return { | ||
| recentReports: localRecentReports, | ||
| personalDetails: localPersonalDetails, | ||
| userToInvite: localUserToInvite, | ||
| }; | ||
| }); | ||
|
|
||
| const {isOffline} = useNetwork(); | ||
| const {translate} = useLocalize(); | ||
| const themeStyles = useThemeStyles(); | ||
| const isMounted = useRef(false); | ||
|
|
||
| const updateOptions = useCallback(() => { | ||
| const { | ||
| recentReports: localRecentReports, | ||
| personalDetails: localPersonalDetails, | ||
| userToInvite: localUserToInvite, | ||
| } = OptionsListUtils.getSearchOptions(reports, personalDetails, searchValue.trim(), betas); | ||
|
|
||
| setSearchOptions({ | ||
| recentReports: localRecentReports, | ||
| personalDetails: localPersonalDetails, | ||
| userToInvite: localUserToInvite, | ||
| }); | ||
| }, [reports, personalDetails, searchValue, betas]); | ||
|
|
||
| const debouncedUpdateOptions = useMemo(() => _.debounce(updateOptions, 75), [updateOptions]); | ||
|
|
||
| useEffect(() => { | ||
| Timing.start(CONST.TIMING.SEARCH_RENDER); | ||
| Performance.markStart(CONST.TIMING.SEARCH_RENDER); | ||
| }, []); | ||
|
|
||
| useEffect(() => { | ||
| updateOptions(); | ||
| }, [reports, personalDetails, betas, updateOptions]); | ||
|
|
||
| useEffect(() => { | ||
| if (!isMounted.current) { | ||
| isMounted.current = true; | ||
| return; | ||
| } | ||
|
|
||
| debouncedUpdateOptions(); | ||
| // Ignoring the rule intentionally, we want to run the code only when search Value changes to prevent additional runs. | ||
| // eslint-disable-next-line react-hooks/exhaustive-deps | ||
| }, [searchValue]); | ||
|
|
||
| /** | ||
| * Returns the sections needed for the OptionsSelector | ||
| * | ||
| * @returns {Array} | ||
| */ | ||
| const getSections = () => { | ||
| const sections = []; | ||
| let indexOffset = 0; | ||
|
|
||
| if (searchOptions.recentReports.length > 0) { | ||
| sections.push({ | ||
| data: searchOptions.recentReports, | ||
| shouldShow: true, | ||
| indexOffset, | ||
| }); | ||
| indexOffset += searchOptions.recentReports.length; | ||
| } | ||
|
|
||
| if (searchOptions.personalDetails.length > 0) { | ||
| sections.push({ | ||
| data: searchOptions.personalDetails, | ||
| shouldShow: true, | ||
| indexOffset, | ||
| }); | ||
| indexOffset += searchOptions.recentReports.length; | ||
| } | ||
|
|
||
| if (searchOptions.userToInvite) { | ||
| sections.push({ | ||
| data: [searchOptions.userToInvite], | ||
| shouldShow: true, | ||
| indexOffset, | ||
| }); | ||
| } | ||
|
|
||
| return sections; | ||
| }; | ||
|
|
||
| const searchRendered = () => { | ||
| Timing.end(CONST.TIMING.SEARCH_RENDER); | ||
| Performance.markEnd(CONST.TIMING.SEARCH_RENDER); | ||
| }; | ||
|
|
||
| const onChangeText = (value = '') => { | ||
| Report.searchInServer(searchValue); | ||
|
Contributor
There was a problem hiding this comment. This is causing the previously stored |
||
| setSearchValue(value); | ||
| }; | ||
|
|
||
| /** | ||
| * Reset the search value and redirect to the selected report | ||
| * | ||
| * @param {Object} option | ||
| */ | ||
| const selectReport = (option) => { | ||
| if (!option) { | ||
| return; | ||
| } | ||
| if (option.reportID) { | ||
| Navigation.dismissModal(option.reportID); | ||
|
Contributor
There was a problem hiding this comment. Please add this as a callback to to the
Contributor
There was a problem hiding this comment. @allroundexperts we cannot do it the same way we did in the class component. And I don't really see the necessity to do such here. What's more: the component always unmounts when we navigate to the report page, so the next time we open search page the search value is an empty string - no need to clear the input then. |
||
| } else { | ||
| Report.navigateToAndOpenReport([option.login]); | ||
| } | ||
| }; | ||
|
|
||
| const isOptionsDataReady = ReportUtils.isReportDataReady() && OptionsListUtils.isPersonalDetailsReady(personalDetails); | ||
| const headerMessage = OptionsListUtils.getHeaderMessage( | ||
| searchOptions.recentReports.length + searchOptions.personalDetails.length !== 0, | ||
| Boolean(searchOptions.userToInvite), | ||
| searchValue, | ||
| ); | ||
|
|
||
| return ( | ||
| <ScreenWrapper | ||
| includeSafeAreaPaddingBottom={false} | ||
| testID={SearchPage.displayName} | ||
| onEntryTransitionEnd={updateOptions} | ||
| > | ||
| {({didScreenTransitionEnd, safeAreaPaddingBottomStyle}) => ( | ||
| <> | ||
| <HeaderWithBackButton title={translate('common.search')} /> | ||
| <View style={[themeStyles.flex1, themeStyles.w100, themeStyles.pRelative]}> | ||
| <OptionsSelector | ||
| sections={getSections()} | ||
| onSelectRow={selectReport} | ||
| value={searchValue} | ||
| onChangeText={onChangeText} | ||
| headerMessage={headerMessage} | ||
| hideSectionHeaders | ||
| showTitleTooltip | ||
| shouldShowOptions={didScreenTransitionEnd && isOptionsDataReady} | ||
| textInputLabel={translate('optionsSelector.nameEmailOrPhoneNumber')} | ||
| shouldShowReferralCTA | ||
| referralContentType={CONST.REFERRAL_PROGRAM.CONTENT_TYPES.REFER_FRIEND} | ||
| textInputAlert={isOffline ? `${translate('common.youAppearToBeOffline')} ${translate('search.resultsAreLimited')}` : ''} | ||
| onLayout={searchRendered} | ||
| safeAreaPaddingBottomStyle={safeAreaPaddingBottomStyle} | ||
| autoFocus | ||
| isLoadingNewOptions={isSearchingForReports} | ||
| /> | ||
| </View> | ||
| </> | ||
| )} | ||
| </ScreenWrapper> | ||
| ); | ||
| } | ||
|
|
||
| SearchPage.propTypes = propTypes; | ||
| SearchPage.defaultProps = defaultProps; | ||
| SearchPage.displayName = 'SearchPage'; | ||
| export default withOnyx({ | ||
| reports: { | ||
| key: ONYXKEYS.COLLECTION.REPORT, | ||
| }, | ||
| personalDetails: { | ||
| key: ONYXKEYS.PERSONAL_DETAILS_LIST, | ||
| }, | ||
| betas: { | ||
| key: ONYXKEYS.BETAS, | ||
| }, | ||
| isSearchingForReports: { | ||
| key: ONYXKEYS.IS_SEARCHING_FOR_REPORTS, | ||
| initWithStoredValues: false, | ||
| }, | ||
| })(SearchPage); | ||
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.