From a1b711488a67b89fd1f07feb57e998700d62b9e6 Mon Sep 17 00:00:00 2001 From: Marc Glasser Date: Thu, 26 Oct 2023 10:28:39 -1000 Subject: [PATCH 1/4] Enable server searching in the MoneyRequestParticipantsSelector --- .../MoneyRequestParticipantsSelector.js | 21 ++++++++++++++++++- 1 file changed, 20 insertions(+), 1 deletion(-) diff --git a/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js b/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js index 7e88ebe7db48..cc8ec394872c 100755 --- a/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js +++ b/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js @@ -16,6 +16,7 @@ import CONST from '../../../../CONST'; import personalDetailsPropType from '../../../personalDetailsPropType'; import reportPropTypes from '../../../reportPropTypes'; import refPropTypes from '../../../../components/refPropTypes'; +import * as Report from '../../../../libs/actions/Report'; const propTypes = { /** Beta features list */ @@ -59,6 +60,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 +74,7 @@ const defaultProps = { reports: {}, betas: [], isDistanceRequest: false, + isSearchingForReports: false, }; function MoneyRequestParticipantsSelector({ @@ -85,6 +90,7 @@ function MoneyRequestParticipantsSelector({ safeAreaPaddingBottomStyle, iouType, isDistanceRequest, + isSearchingForReports, }) { const [searchTerm, setSearchTerm] = useState(''); const [newChatOptions, setNewChatOptions] = useState({ @@ -244,6 +250,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 +276,7 @@ function MoneyRequestParticipantsSelector({ selectedOptions={participants} value={searchTerm} onSelectRow={addSingleParticipant} - onChangeText={setSearchTerm} + onChangeText={setSearchTermAndSearchInServer} ref={forwardedRef} headerMessage={headerMessage} boldStyle @@ -274,6 +288,7 @@ function MoneyRequestParticipantsSelector({ shouldShowOptions={isOptionsDataReady} shouldPreventDefaultFocusOnSelectRow={!Browser.isMobile()} shouldDelayFocus + isLoadingNewOptions={isSearchingForReports} /> ); @@ -305,5 +320,9 @@ export default compose( betas: { key: ONYXKEYS.BETAS, }, + isSearchingForReports: { + key: ONYXKEYS.IS_SEARCHING_FOR_REPORTS, + initWithStoredValues: false, + }, }), )(MoneyRequestParticipantsSelectorWithRef); From bd48b137ad2cfbab2cc49d6a938230436024c277 Mon Sep 17 00:00:00 2001 From: Marc Glasser Date: Thu, 26 Oct 2023 13:13:26 -1000 Subject: [PATCH 2/4] Add server searching to task share destination selector as well --- .../TaskShareDestinationSelectorModal.js | 27 ++++++++++++++----- 1 file changed, 21 insertions(+), 6 deletions(-) diff --git a/src/pages/tasks/TaskShareDestinationSelectorModal.js b/src/pages/tasks/TaskShareDestinationSelectorModal.js index 2fc8f0eab014..9e130418bb9c 100644 --- a/src/pages/tasks/TaskShareDestinationSelectorModal.js +++ b/src/pages/tasks/TaskShareDestinationSelectorModal.js @@ -19,6 +19,7 @@ import reportPropTypes from '../reportPropTypes'; import * as Task from '../../libs/actions/Task'; import * as ReportUtils from '../../libs/ReportUtils'; import ROUTES from '../../ROUTES'; +import * as Report from '../../libs/actions/Report'; const propTypes = { /* Onyx Props */ @@ -32,6 +33,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,13 +43,14 @@ 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 filteredReports = useMemo(() => { @@ -78,10 +83,6 @@ function TaskShareDestinationSelectorModal(props) { }; }, [updateOptions]); - const onChangeText = (newSearchTerm = '') => { - setSearchValue(newSearchTerm); - }; - const getSections = () => { const sections = []; let indexOffset = 0; @@ -111,7 +112,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 +174,9 @@ export default compose( betas: { key: ONYXKEYS.BETAS, }, + isSearchingForReports: { + key: ONYXKEYS.IS_SEARCHING_FOR_REPORTS, + initWithStoredValues: false, + }, }), )(TaskShareDestinationSelectorModal); From 66b0f89993b9e4e8e3eb3050f174f3a01d497fcb Mon Sep 17 00:00:00 2001 From: Marc Glasser Date: Thu, 26 Oct 2023 13:40:07 -1000 Subject: [PATCH 3/4] Handle offline case --- .../MoneyRequestParticipantsSelector.js | 3 +++ src/pages/tasks/TaskShareDestinationSelectorModal.js | 3 +++ 2 files changed, 6 insertions(+) diff --git a/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js b/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js index cc8ec394872c..0d80cbeccbb3 100755 --- a/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js +++ b/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js @@ -17,6 +17,7 @@ import personalDetailsPropType from '../../../personalDetailsPropType'; import reportPropTypes from '../../../reportPropTypes'; import refPropTypes from '../../../../components/refPropTypes'; import * as Report from '../../../../libs/actions/Report'; +import useNetwork from '../../../../hooks/useNetwork'; const propTypes = { /** Beta features list */ @@ -98,6 +99,7 @@ function MoneyRequestParticipantsSelector({ personalDetails: [], userToInvite: null, }); + const {isOffline} = useNetwork(); const maxParticipantsReached = participants.length === CONST.REPORT.MAXIMUM_PARTICIPANTS; @@ -284,6 +286,7 @@ 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()} diff --git a/src/pages/tasks/TaskShareDestinationSelectorModal.js b/src/pages/tasks/TaskShareDestinationSelectorModal.js index 9e130418bb9c..e65d22d6145d 100644 --- a/src/pages/tasks/TaskShareDestinationSelectorModal.js +++ b/src/pages/tasks/TaskShareDestinationSelectorModal.js @@ -20,6 +20,7 @@ import * as Task from '../../libs/actions/Task'; import * as ReportUtils from '../../libs/ReportUtils'; import ROUTES from '../../ROUTES'; import * as Report from '../../libs/actions/Report'; +import useNetwork from '../../hooks/useNetwork'; const propTypes = { /* Onyx Props */ @@ -52,6 +53,7 @@ function TaskShareDestinationSelectorModal(props) { const [filteredRecentReports, setFilteredRecentReports] = useState([]); const {isSearchingForReports} = props; const optionRef = useRef(); + const {isOffline} = useNetwork(); const filteredReports = useMemo(() => { const reports = {}; @@ -146,6 +148,7 @@ function TaskShareDestinationSelectorModal(props) { showTitleTooltip shouldShowOptions={didScreenTransitionEnd} textInputLabel={props.translate('optionsSelector.nameEmailOrPhoneNumber')} + textInputAlert={isOffline ? `${props.translate('common.youAppearToBeOffline')} ${props.translate('search.resultsAreLimited')}` : ''} safeAreaPaddingBottomStyle={safeAreaPaddingBottomStyle} autoFocus={false} ref={optionRef} From 0de33e3693e905166157a8fb583c485a620d4e46 Mon Sep 17 00:00:00 2001 From: Marc Glasser Date: Mon, 30 Oct 2023 16:34:55 -1000 Subject: [PATCH 4/4] prettier --- .../MoneyRequestParticipantsSelector.js | 4 ++-- src/pages/tasks/TaskShareDestinationSelectorModal.js | 6 +++--- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js b/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js index 97ddaa3974fd..790793787e57 100755 --- a/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js +++ b/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js @@ -4,11 +4,11 @@ import React, {useCallback, useEffect, useMemo, useState} from 'react'; import {View} from 'react-native'; import {withOnyx} from 'react-native-onyx'; import _ from 'underscore'; -import * as Report from '@libs/actions/Report'; -import useNetwork from '@hooks/useNetwork'; 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'; diff --git a/src/pages/tasks/TaskShareDestinationSelectorModal.js b/src/pages/tasks/TaskShareDestinationSelectorModal.js index 92aa708f2d4e..43d4a70a6ba4 100644 --- a/src/pages/tasks/TaskShareDestinationSelectorModal.js +++ b/src/pages/tasks/TaskShareDestinationSelectorModal.js @@ -1,15 +1,15 @@ /* eslint-disable es/no-optional-chaining */ -import _ from 'underscore'; 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 * as Report from '@libs/actions/Report'; -import useNetwork from '@hooks/useNetwork'; +import _ from 'underscore'; 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';