Minimal server search / enable improved focus mode

src/ONYXKEYS.ts

@@ -27,6 +27,9 @@ const ONYXKEYS = {
     /** Boolean flag set whenever the sidebar has loaded */
     IS_SIDEBAR_LOADED: 'isSidebarLoaded',
 
+    /** Boolean flag set whenever we are searching for reports in the server */
+    IS_SEARCHING_FOR_REPORTS: 'isSearchingForReports',
+
     /** Note: These are Persisted Requests - not all requests in the main queue as the key name might lead one to believe */
     PERSISTED_REQUESTS: 'networkRequestQueue',
 

src/components/OptionsListSkeletonRow.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {Rect, Circle} from 'react-native-svg';
+import SkeletonViewContentLoader from 'react-content-loader/native';
+import themeColors from '../styles/themes/default';
+import CONST from '../CONST';
+import styles from '../styles/styles';
+
+const propTypes = {
+    /** Whether to animate the skeleton view */
+    shouldAnimate: PropTypes.bool.isRequired,
+
+    /** Line width string */
+    lineWidth: PropTypes.string.isRequired,
+};
+
+function OptionsListSkeletonRow({lineWidth, shouldAnimate}) {
+    return (
+        <SkeletonViewContentLoader
+            animate={shouldAnimate}
+            height={CONST.LHN_SKELETON_VIEW_ITEM_HEIGHT}
+            backgroundColor={themeColors.skeletonLHNIn}
+            foregroundColor={themeColors.skeletonLHNOut}
+            style={styles.mr5}
+        >
+            <Circle
+                cx="40"
+                cy="32"
+                r="20"
+            />
+            <Rect
+                x="72"
+                y="18"
+                width="20%"
+                height="8"
+            />
+            <Rect
+                x="72"
+                y="38"
+                width={lineWidth}
+                height="8"
+            />
+        </SkeletonViewContentLoader>
+    );
+}
+
+OptionsListSkeletonRow.propTypes = propTypes;
+export default OptionsListSkeletonRow;

src/components/OptionsListSkeletonView.js

@@ -1,11 +1,9 @@
 import React from 'react';
 import {View} from 'react-native';
 import PropTypes from 'prop-types';
-import {Rect, Circle} from 'react-native-svg';
-import SkeletonViewContentLoader from 'react-content-loader/native';
 import CONST from '../CONST';
-import themeColors from '../styles/themes/default';
 import styles from '../styles/styles';
+import OptionsListSkeletonRow from './OptionsListSkeletonRow';
 
 const propTypes = {
     /** Whether to animate the skeleton view */
@@ -56,32 +54,11 @@ class OptionsListSkeletonView extends React.Component {
                     lineWidth = '25%';
             }
             skeletonViewItems.push(
-                <SkeletonViewContentLoader
+                <OptionsListSkeletonRow
                     key={`skeletonViewItems${i}`}
-                    animate={this.props.shouldAnimate}
-                    height={CONST.LHN_SKELETON_VIEW_ITEM_HEIGHT}
-                    backgroundColor={themeColors.skeletonLHNIn}
-                    foregroundColor={themeColors.skeletonLHNOut}
-                    style={styles.mr5}
-                >
-                    <Circle
-                        cx="40"
-                        cy="32"
-                        r="20"
-                    />
-                    <Rect
-                        x="72"
-                        y="18"
-                        width="20%"
-                        height="8"
-                    />
-                    <Rect
-                        x="72"
-                        y="38"
-                        width={lineWidth}
-                        height="8"
-                    />
-                </SkeletonViewContentLoader>,
+                    shouldAnimate={this.props.shouldAnimate}
+                    lineWidth={lineWidth}
+                />,
             );
         }
 

src/components/OptionsSelector/BaseOptionsSelector.js

@@ -17,6 +17,8 @@ import {propTypes as optionsSelectorPropTypes, defaultProps as optionsSelectorDe
 import setSelection from '../../libs/setSelection';
 import compose from '../../libs/compose';
 import getPlatform from '../../libs/getPlatform';
+import OptionsListSkeletonRow from '../OptionsListSkeletonRow';
+import FormHelpMessage from '../FormHelpMessage';
 
 const propTypes = {
     /** padding bottom style of safe area */
@@ -344,63 +346,80 @@ class BaseOptionsSelector extends Component {
         const shouldShowDefaultConfirmButton = !this.props.footerContent && defaultConfirmButtonText;
         const safeAreaPaddingBottomStyle = shouldShowFooter ? undefined : this.props.safeAreaPaddingBottomStyle;
         const textInput = (
-            <TextInput
-                ref={(el) => (this.textInput = el)}
-                value={this.props.value}
-                label={this.props.textInputLabel}
-                accessibilityLabel={this.props.textInputLabel}
-                accessibilityRole={CONST.ACCESSIBILITY_ROLE.TEXT}
-                onChangeText={this.props.onChangeText}
-                onSubmitEditing={this.selectFocusedOption}
-                placeholder={this.props.placeholderText}
-                maxLength={this.props.maxLength}
-                keyboardType={this.props.keyboardType}
-                onBlur={(e) => {
-                    if (!this.props.shouldFocusOnSelectRow) {
-                        return;
-                    }
-                    this.relatedTarget = e.relatedTarget;
-                }}
-                selectTextOnFocus
-                blurOnSubmit={Boolean(this.state.allOptions.length)}
-                spellCheck={false}
-            />
+            <>
+                <TextInput
+                    ref={(el) => (this.textInput = el)}
+                    value={this.props.value}
+                    label={this.props.textInputLabel}
+                    accessibilityLabel={this.props.textInputLabel}
+                    accessibilityRole={CONST.ACCESSIBILITY_ROLE.TEXT}
+                    onChangeText={this.props.onChangeText}
+                    onSubmitEditing={this.selectFocusedOption}
+                    placeholder={this.props.placeholderText}
+                    maxLength={this.props.maxLength}
+                    keyboardType={this.props.keyboardType}
+                    onBlur={(e) => {
+                        if (!this.props.shouldFocusOnSelectRow) {
+                            return;
+                        }
+                        this.relatedTarget = e.relatedTarget;
+                    }}
+                    selectTextOnFocus
+                    blurOnSubmit={Boolean(this.state.allOptions.length)}
+                    spellCheck={false}
+                />
+                {this.props.textInputAlert && (
+                    <FormHelpMessage
+                        message={this.props.textInputAlert}
+                        style={[styles.mb3]}
+                        isError={false}
+                    />
+                )}
+            </>
         );
         const optionsList = (
-            <OptionsList
-                ref={(el) => (this.list = el)}
-                optionHoveredStyle={this.props.optionHoveredStyle}
-                onSelectRow={this.props.onSelectRow ? this.selectRow : undefined}
-                sections={this.props.sections}
-                focusedIndex={this.state.focusedIndex}
-                selectedOptions={this.props.selectedOptions}
-                canSelectMultipleOptions={this.props.canSelectMultipleOptions}
-                shouldShowMultipleOptionSelectorAsButton={this.props.shouldShowMultipleOptionSelectorAsButton}
-                multipleOptionSelectorButtonText={this.props.multipleOptionSelectorButtonText}
-                onAddToSelection={this.props.onAddToSelection}
-                hideSectionHeaders={this.props.hideSectionHeaders}
-                headerMessage={this.props.headerMessage}
-                boldStyle={this.props.boldStyle}
-                showTitleTooltip={this.props.showTitleTooltip}
-                isDisabled={this.props.isDisabled}
-                shouldHaveOptionSeparator={this.props.shouldHaveOptionSeparator}
-                highlightSelectedOptions={this.props.highlightSelectedOptions}
-                onLayout={() => {
-                    if (this.props.selectedOptions.length === 0) {
-                        this.scrollToIndex(this.state.focusedIndex, false);
-                    }
-
-                    if (this.props.onLayout) {
-                        this.props.onLayout();
-                    }
-                }}
-                contentContainerStyles={[safeAreaPaddingBottomStyle, ...this.props.contentContainerStyles]}
-                listContainerStyles={this.props.listContainerStyles}
-                listStyles={this.props.listStyles}
-                isLoading={!this.props.shouldShowOptions}
-                showScrollIndicator={this.props.showScrollIndicator}
-                isRowMultilineSupported={this.props.isRowMultilineSupported}
-            />
+            <>
+                {this.props.shouldShowLoader && (
+                    <OptionsListSkeletonRow
+                        lineWidth="100%"
+                        shouldAnimate
+                    />
+                )}
+                <OptionsList
+                    ref={(el) => (this.list = el)}
+                    optionHoveredStyle={this.props.optionHoveredStyle}
+                    onSelectRow={this.props.onSelectRow ? this.selectRow : undefined}
+                    sections={this.props.sections}
+                    focusedIndex={this.state.focusedIndex}
+                    selectedOptions={this.props.selectedOptions}
+                    canSelectMultipleOptions={this.props.canSelectMultipleOptions}
+                    shouldShowMultipleOptionSelectorAsButton={this.props.shouldShowMultipleOptionSelectorAsButton}
+                    multipleOptionSelectorButtonText={this.props.multipleOptionSelectorButtonText}
+                    onAddToSelection={this.props.onAddToSelection}
+                    hideSectionHeaders={this.props.hideSectionHeaders}
+                    headerMessage={this.props.headerMessage}
+                    boldStyle={this.props.boldStyle}
+                    showTitleTooltip={this.props.showTitleTooltip}
+                    isDisabled={this.props.isDisabled}
+                    shouldHaveOptionSeparator={this.props.shouldHaveOptionSeparator}
+                    highlightSelectedOptions={this.props.highlightSelectedOptions}
+                    onLayout={() => {
+                        if (this.props.selectedOptions.length === 0) {
+                            this.scrollToIndex(this.state.focusedIndex, false);
+                        }
+
+                        if (this.props.onLayout) {
+                            this.props.onLayout();
+                        }
+                    }}
+                    contentContainerStyles={[safeAreaPaddingBottomStyle, ...this.props.contentContainerStyles]}
+                    listContainerStyles={this.props.listContainerStyles}
+                    listStyles={this.props.listStyles}
+                    isLoading={!this.props.shouldShowOptions}
+                    showScrollIndicator={this.props.showScrollIndicator}
+                    isRowMultilineSupported={this.props.isRowMultilineSupported}
+                />
+            </>
         );
         return (
             <ArrowKeyFocusManager

src/languages/en.ts

@@ -1561,6 +1561,9 @@ export default {
         screenShare: 'Screen share',
         screenShareRequest: 'Expensify is inviting you to a screen share',
     },
+    search: {
+        resultsAreLimited: 'Search results are limited.',
+    },
     genericErrorPage: {
         title: 'Uh-oh, something went wrong!',
         body: {

src/languages/es.ts

@@ -1583,6 +1583,9 @@ export default {
         screenShare: 'Compartir pantalla',
         screenShareRequest: 'Expensify te está invitando a compartir la pantalla',
     },
+    search: {
+        resultsAreLimited: 'Los resultados de búsqueda están limitados.',
+    },
     genericErrorPage: {
         title: '¡Uh-oh, algo salió mal!',
         body: {

src/libs/actions/App.js

@@ -204,7 +204,8 @@ function getOnyxDataForOpenOrReconnect(isOpenApp = false) {
  */
 function openApp() {
     getPolicyParamsForOpenOrReconnect().then((policyParams) => {
-        API.read('OpenApp', policyParams, getOnyxDataForOpenOrReconnect(true));
+        const params = {enablePriorityModeFilter: true, ...policyParams};
+        API.read('OpenApp', params, getOnyxDataForOpenOrReconnect(true));
     });
 }
 

src/libs/actions/Report.js

@@ -2135,7 +2135,53 @@ function clearPrivateNotesError(reportID, accountID) {
     Onyx.merge(`${ONYXKEYS.COLLECTION.REPORT}${reportID}`, {privateNotes: {[accountID]: {errors: null}}});
 }
 
+/**
+ * @private
+ * @param {string} searchInput
+ */
+function searchInServer(searchInput) {
+    // We do not try to make this request while offline because it sets a loading indicator optimistically
+    if (isNetworkOffline) {
+        return;
+    }
+
+    API.read(
+        'SearchForReports',
+        {searchInput},
+        {
+            optimisticData: [
+                {
+                    onyxMethod: Onyx.METHOD.MERGE,
+                    key: ONYXKEYS.IS_SEARCHING_FOR_REPORTS,
+                    value: true,
+                },
+            ],
+            successData: [
+                {
+                    onyxMethod: Onyx.METHOD.MERGE,
+                    key: ONYXKEYS.IS_SEARCHING_FOR_REPORTS,
+                    value: false,
+                },
+            ],
+            failureData: [
+                {
+                    onyxMethod: Onyx.METHOD.MERGE,
+                    key: ONYXKEYS.IS_SEARCHING_FOR_REPORTS,
+                    value: false,
+                },
+            ],
+        },
+    );
+}
+
+/**
+ * @private
+ * @param {string} searchInput
+ */
+const throttledSearchInServer = _.throttle(searchInServer, 1000, {leading: false});
+
 export {
+    throttledSearchInServer,
     addComment,
     addAttachment,
     reconnect,

src/pages/NewChatPage.js

@@ -20,6 +20,7 @@ import compose from '../libs/compose';
 import personalDetailsPropType from './personalDetailsPropType';
 import reportPropTypes from './reportPropTypes';
 import variables from '../styles/variables';
+import useNetwork from '../hooks/useNetwork';
 
 const propTypes = {
     /** Beta features list */
@@ -44,12 +45,13 @@ const defaultProps = {
 
 const excludedGroupEmails = _.without(CONST.EXPENSIFY_EMAILS, CONST.EMAIL.CONCIERGE);
 
-function NewChatPage({betas, isGroupChat, personalDetails, reports, translate}) {
+function NewChatPage({betas, isGroupChat, personalDetails, reports, translate, isSearchingForReports}) {
     const [searchTerm, setSearchTerm] = useState('');
     const [filteredRecentReports, setFilteredRecentReports] = useState([]);
     const [filteredPersonalDetails, setFilteredPersonalDetails] = useState([]);
     const [filteredUserToInvite, setFilteredUserToInvite] = useState();
     const [selectedOptions, setSelectedOptions] = useState([]);
+    const {isOffline} = useNetwork();
 
     const maxParticipantsReached = selectedOptions.length === CONST.REPORT.MAXIMUM_PARTICIPANTS;
     const headerMessage = OptionsListUtils.getHeaderMessage(
@@ -167,6 +169,10 @@ function NewChatPage({betas, isGroupChat, personalDetails, reports, translate})
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [reports, personalDetails, searchTerm]);
 
+    // When search term updates we will fetch any reports
+    useEffect(() => {
+        Report.throttledSearchInServer(searchTerm);
+    }, [searchTerm]);
     return (
         <ScreenWrapper
             shouldEnableKeyboardAvoidingView={false}
@@ -202,9 +208,11 @@ function NewChatPage({betas, isGroupChat, personalDetails, reports, translate})
                             shouldShowOptions={isOptionsDataReady}
                             shouldShowConfirmButton
                             confirmButtonText={selectedOptions.length > 1 ? translate('newChatPage.createGroup') : translate('newChatPage.createChat')}
+                            textInputAlert={isOffline ? `${translate('common.youAppearToBeOffline')} ${translate('search.resultsAreLimited')}` : ''}
                             onConfirmSelection={createGroup}
                             textInputLabel={translate('optionsSelector.nameEmailOrPhoneNumber')}
                             safeAreaPaddingBottomStyle={safeAreaPaddingBottomStyle}
+                            shouldShowLoader={isSearchingForReports}
                         />
                     </View>
                 </KeyboardAvoidingView>
@@ -230,5 +238,9 @@ export default compose(
         betas: {
             key: ONYXKEYS.BETAS,
         },
+        isSearchingForReports: {
+            key: ONYXKEYS.IS_SEARCHING_FOR_REPORTS,
+            initWithStoredValues: false,
+        },
     }),
 )(NewChatPage);