diff --git a/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js b/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js index 5d47a51fb73c..790793787e57 100755 --- a/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js +++ b/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js @@ -7,6 +7,8 @@ import _ from 'underscore'; import OptionsSelector from '@components/OptionsSelector'; import refPropTypes from '@components/refPropTypes'; import withLocalize, {withLocalizePropTypes} from '@components/withLocalize'; +import useNetwork from '@hooks/useNetwork'; +import * as Report from '@libs/actions/Report'; import * as Browser from '@libs/Browser'; import compose from '@libs/compose'; import * as OptionsListUtils from '@libs/OptionsListUtils'; @@ -59,6 +61,9 @@ const propTypes = { /** Whether the money request is a distance request or not */ isDistanceRequest: PropTypes.bool, + /** Whether we are searching for reports in the server */ + isSearchingForReports: PropTypes.bool, + ...withLocalizePropTypes, }; @@ -70,6 +75,7 @@ const defaultProps = { reports: {}, betas: [], isDistanceRequest: false, + isSearchingForReports: false, }; function MoneyRequestParticipantsSelector({ @@ -85,6 +91,7 @@ function MoneyRequestParticipantsSelector({ safeAreaPaddingBottomStyle, iouType, isDistanceRequest, + isSearchingForReports, }) { const [searchTerm, setSearchTerm] = useState(''); const [newChatOptions, setNewChatOptions] = useState({ @@ -92,6 +99,7 @@ function MoneyRequestParticipantsSelector({ personalDetails: [], userToInvite: null, }); + const {isOffline} = useNetwork(); const maxParticipantsReached = participants.length === CONST.REPORT.MAXIMUM_PARTICIPANTS; @@ -244,6 +252,14 @@ function MoneyRequestParticipantsSelector({ }); }, [betas, reports, participants, personalDetails, translate, searchTerm, setNewChatOptions, iouType, isDistanceRequest]); + // When search term updates we will fetch any reports + const setSearchTermAndSearchInServer = useCallback((text = '') => { + if (text.length) { + Report.searchInServer(text); + } + setSearchTerm(text); + }, []); + // Right now you can't split a request with a workspace and other additional participants // This is getting properly fixed in https://github.com/Expensify/App/issues/27508, but as a stop-gap to prevent // the app from crashing on native when you try to do this, we'll going to hide the button if you have a workspace and other participants @@ -262,7 +278,7 @@ function MoneyRequestParticipantsSelector({ selectedOptions={participants} value={searchTerm} onSelectRow={addSingleParticipant} - onChangeText={setSearchTerm} + onChangeText={setSearchTermAndSearchInServer} ref={forwardedRef} headerMessage={headerMessage} boldStyle @@ -270,10 +286,12 @@ function MoneyRequestParticipantsSelector({ confirmButtonText={translate('iou.addToSplit')} onConfirmSelection={navigateToSplit} textInputLabel={translate('optionsSelector.nameEmailOrPhoneNumber')} + textInputAlert={isOffline ? `${translate('common.youAppearToBeOffline')} ${translate('search.resultsAreLimited')}` : ''} safeAreaPaddingBottomStyle={safeAreaPaddingBottomStyle} shouldShowOptions={isOptionsDataReady} shouldPreventDefaultFocusOnSelectRow={!Browser.isMobile()} shouldDelayFocus + isLoadingNewOptions={isSearchingForReports} /> ); @@ -305,5 +323,9 @@ export default compose( betas: { key: ONYXKEYS.BETAS, }, + isSearchingForReports: { + key: ONYXKEYS.IS_SEARCHING_FOR_REPORTS, + initWithStoredValues: false, + }, }), )(MoneyRequestParticipantsSelectorWithRef); diff --git a/src/pages/tasks/TaskShareDestinationSelectorModal.js b/src/pages/tasks/TaskShareDestinationSelectorModal.js index 085d9a5a96b7..43d4a70a6ba4 100644 --- a/src/pages/tasks/TaskShareDestinationSelectorModal.js +++ b/src/pages/tasks/TaskShareDestinationSelectorModal.js @@ -8,6 +8,8 @@ import HeaderWithBackButton from '@components/HeaderWithBackButton'; import OptionsSelector from '@components/OptionsSelector'; import ScreenWrapper from '@components/ScreenWrapper'; import withLocalize, {withLocalizePropTypes} from '@components/withLocalize'; +import useNetwork from '@hooks/useNetwork'; +import * as Report from '@libs/actions/Report'; import compose from '@libs/compose'; import Navigation from '@libs/Navigation/Navigation'; import * as OptionsListUtils from '@libs/OptionsListUtils'; @@ -32,6 +34,9 @@ const propTypes = { /** All reports shared with the user */ reports: PropTypes.objectOf(reportPropTypes), + /** Whether we are searching for reports in the server */ + isSearchingForReports: PropTypes.bool, + ...withLocalizePropTypes, }; @@ -39,14 +44,16 @@ const defaultProps = { betas: [], personalDetails: {}, reports: {}, + isSearchingForReports: false, }; function TaskShareDestinationSelectorModal(props) { const [searchValue, setSearchValue] = useState(''); const [headerMessage, setHeaderMessage] = useState(''); const [filteredRecentReports, setFilteredRecentReports] = useState([]); - + const {isSearchingForReports} = props; const optionRef = useRef(); + const {isOffline} = useNetwork(); const filteredReports = useMemo(() => { const reports = {}; @@ -78,10 +85,6 @@ function TaskShareDestinationSelectorModal(props) { }; }, [updateOptions]); - const onChangeText = (newSearchTerm = '') => { - setSearchValue(newSearchTerm); - }; - const getSections = () => { const sections = []; let indexOffset = 0; @@ -111,7 +114,16 @@ function TaskShareDestinationSelectorModal(props) { } }; + // When search term updates we will fetch any reports + const setSearchTermAndSearchInServer = useCallback((text = '') => { + if (text.length) { + Report.searchInServer(text); + } + setSearchValue(text); + }, []); + const sections = getSections(); + return ( @@ -163,5 +177,9 @@ export default compose( betas: { key: ONYXKEYS.BETAS, }, + isSearchingForReports: { + key: ONYXKEYS.IS_SEARCHING_FOR_REPORTS, + initWithStoredValues: false, + }, }), )(TaskShareDestinationSelectorModal);