diff --git a/src/pages/iou/request/MoneyTemporaryForRefactorRequestParticipantsSelector.js b/src/pages/iou/request/MoneyTemporaryForRefactorRequestParticipantsSelector.js index b052731c361c..2adffcf390e4 100644 --- a/src/pages/iou/request/MoneyTemporaryForRefactorRequestParticipantsSelector.js +++ b/src/pages/iou/request/MoneyTemporaryForRefactorRequestParticipantsSelector.js @@ -1,6 +1,6 @@ import lodashGet from 'lodash/get'; import PropTypes from 'prop-types'; -import React, {useCallback, useMemo, useState} from 'react'; +import React, {memo, useCallback, useEffect, useMemo} from 'react'; import {View} from 'react-native'; import {withOnyx} from 'react-native-onyx'; import _ from 'underscore'; @@ -12,15 +12,16 @@ import ReferralProgramCTA from '@components/ReferralProgramCTA'; import SelectCircle from '@components/SelectCircle'; import SelectionList from '@components/SelectionList'; import UserListItem from '@components/SelectionList/UserListItem'; +import useDebouncedState from '@hooks/useDebouncedState'; import useLocalize from '@hooks/useLocalize'; import useNetwork from '@hooks/useNetwork'; import usePermissions from '@hooks/usePermissions'; -import useSearchTermAndSearch from '@hooks/useSearchTermAndSearch'; import useThemeStyles from '@hooks/useThemeStyles'; import * as DeviceCapabilities from '@libs/DeviceCapabilities'; import * as OptionsListUtils from '@libs/OptionsListUtils'; import * as ReportUtils from '@libs/ReportUtils'; import reportPropTypes from '@pages/reportPropTypes'; +import * as Report from '@userActions/Report'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; @@ -87,7 +88,7 @@ function MoneyTemporaryForRefactorRequestParticipantsSelector({ }) { const {translate} = useLocalize(); const styles = useThemeStyles(); - const [searchTerm, setSearchTerm] = useState(''); + const [searchTerm, debouncedSearchTerm, setSearchTerm] = useDebouncedState(''); const referralContentType = iouType === CONST.IOU.TYPE.SEND ? CONST.REFERRAL_PROGRAM.CONTENT_TYPES.SEND_MONEY : CONST.REFERRAL_PROGRAM.CONTENT_TYPES.MONEY_REQUEST; const {isOffline} = useNetwork(); const personalDetails = usePersonalDetails(); @@ -96,7 +97,10 @@ function MoneyTemporaryForRefactorRequestParticipantsSelector({ const offlineMessage = isOffline ? [`${translate('common.youAppearToBeOffline')} ${translate('search.resultsAreLimited')}`, {isTranslated: true}] : ''; const maxParticipantsReached = participants.length === CONST.REPORT.MAXIMUM_PARTICIPANTS; - const setSearchTermAndSearchInServer = useSearchTermAndSearch(setSearchTerm, maxParticipantsReached); + + useEffect(() => { + Report.searchInServer(debouncedSearchTerm.trim()); + }, [debouncedSearchTerm]); /** * Returns the sections needed for the OptionsSelector @@ -109,12 +113,11 @@ function MoneyTemporaryForRefactorRequestParticipantsSelector({ return [newSections, {}]; } let indexOffset = 0; - const chatOptions = OptionsListUtils.getFilteredOptions( reports, personalDetails, betas, - searchTerm, + debouncedSearchTerm, participants, CONST.EXPENSIFY_EMAILS, @@ -134,7 +137,7 @@ function MoneyTemporaryForRefactorRequestParticipantsSelector({ ); const formatResults = OptionsListUtils.formatSectionsFromSearchTerm( - searchTerm, + debouncedSearchTerm, participants, chatOptions.recentReports, chatOptions.personalDetails, @@ -180,7 +183,7 @@ function MoneyTemporaryForRefactorRequestParticipantsSelector({ } return [newSections, chatOptions]; - }, [didScreenTransitionEnd, reports, personalDetails, betas, searchTerm, participants, iouType, iouRequestType, maxParticipantsReached, canUseP2PDistanceRequests, translate]); + }, [didScreenTransitionEnd, reports, personalDetails, betas, debouncedSearchTerm, participants, iouType, canUseP2PDistanceRequests, iouRequestType, maxParticipantsReached, translate]); /** * Adds a single participant to the request @@ -246,11 +249,11 @@ function MoneyTemporaryForRefactorRequestParticipantsSelector({ OptionsListUtils.getHeaderMessage( _.get(newChatOptions, 'personalDetails', []).length + _.get(newChatOptions, 'recentReports', []).length !== 0, Boolean(newChatOptions.userToInvite), - searchTerm.trim(), + debouncedSearchTerm.trim(), maxParticipantsReached, - _.some(participants, (participant) => participant.searchText.toLowerCase().includes(searchTerm.trim().toLowerCase())), + _.some(participants, (participant) => participant.searchText.toLowerCase().includes(debouncedSearchTerm.trim().toLowerCase())), ), - [maxParticipantsReached, newChatOptions, participants, searchTerm], + [maxParticipantsReached, newChatOptions, participants, debouncedSearchTerm], ); // Right now you can't split a request with a workspace and other additional participants @@ -354,7 +357,7 @@ function MoneyTemporaryForRefactorRequestParticipantsSelector({ textInputValue={searchTerm} textInputLabel={translate('optionsSelector.nameEmailOrPhoneNumber')} textInputHint={offlineMessage} - onChangeText={setSearchTermAndSearchInServer} + onChangeText={setSearchTerm} shouldPreventDefaultFocusOnSelectRow={!DeviceCapabilities.canUseTouchScreen()} onSelectRow={addSingleParticipant} footerContent={footerContent} @@ -380,4 +383,15 @@ export default withOnyx({ betas: { key: ONYXKEYS.BETAS, }, -})(MoneyTemporaryForRefactorRequestParticipantsSelector); +})( + memo( + MoneyTemporaryForRefactorRequestParticipantsSelector, + (prevProps, nextProps) => + _.isEqual(prevProps.participants, nextProps.participants) && + prevProps.didScreenTransitionEnd === nextProps.didScreenTransitionEnd && + _.isEqual(prevProps.dismissedReferralBanners, nextProps.dismissedReferralBanners) && + prevProps.iouRequestType === nextProps.iouRequestType && + prevProps.iouType === nextProps.iouType && + _.isEqual(prevProps.betas, nextProps.betas), + ), +);