Merge pull request #3824 from Expensify/revert-3760-thibault-FixSearc…

…hPageSlowIssue(CMD+K)

[CP Staging] Revert "Fix Desktop - CMD + K is slow and laggy #3601"

(cherry picked from commit 312e645)

src/components/OptionsSelector.js

@@ -13,12 +13,6 @@ const propTypes = {
     /** Callback to fire when a row is tapped */
     onSelectRow: PropTypes.func,
 
-    /** Function to get a filtered result as list */
-    searchSections: PropTypes.func,
-
-    /** Function to get header message from parent component */
-    getCustomHeaderMessage: PropTypes.func,
-
     /** Sections for the section list */
     sections: PropTypes.arrayOf(PropTypes.shape({
         /** Title of the section */
@@ -34,12 +28,21 @@ const propTypes = {
         shouldShow: PropTypes.bool,
     })).isRequired,
 
+    /** Value in the search input field */
+    value: PropTypes.string.isRequired,
+
+    /** Callback fired when text changes */
+    onChangeText: PropTypes.func.isRequired,
+
     /** Optional placeholder text for the selector */
     placeholderText: PropTypes.string,
 
     /** Options that have already been selected */
     selectedOptions: PropTypes.arrayOf(optionPropTypes),
 
+    /** Optional header message */
+    headerMessage: PropTypes.string,
+
     /** Whether we can select multiple options */
     canSelectMultipleOptions: PropTypes.bool,
 
@@ -66,10 +69,9 @@ const propTypes = {
 
 const defaultProps = {
     onSelectRow: () => {},
-    searchSections: () => {},
-    getCustomHeaderMessage: () => {},
     placeholderText: '',
     selectedOptions: [],
+    headerMessage: '',
     canSelectMultipleOptions: false,
     hideSectionHeaders: false,
     disableArrowKeysActions: false,
@@ -84,32 +86,18 @@ class OptionsSelector extends Component {
         super(props);
 
         this.handleKeyPress = this.handleKeyPress.bind(this);
-        this.onChangeText = this.onChangeText.bind(this);
         this.selectRow = this.selectRow.bind(this);
         this.viewableItems = [];
-        this.searchValue = '';
 
         this.state = {
             focusedIndex: 0,
-            sections: props.sections,
         };
     }
 
     componentDidMount() {
         this.textInput.focus();
     }
 
-    /**
-     * Updates sections filtered by searchValue
-     *
-     * @param {String} searchValue
-     */
-    onChangeText(searchValue) {
-        const sections = this.props.searchSections(searchValue);
-        this.searchValue = searchValue;
-        this.setState({sections});
-    }
-
     /**
      * Scrolls to the focused index within the SectionList
      *
@@ -207,8 +195,9 @@ class OptionsSelector extends Component {
                         styleFocusIn={[styles.textInputReversedFocus]}
                         ref={el => this.textInput = el}
                         style={[styles.textInput]}
+                        value={this.props.value}
+                        onChangeText={this.props.onChangeText}
                         onKeyPress={this.handleKeyPress}
-                        onChangeText={this.onChangeText}
                         placeholder={this.props.placeholderText
                             || this.props.translate('optionsSelector.nameEmailOrPhoneNumber')}
                         placeholderTextColor={themeColors.placeholderText}
@@ -218,12 +207,12 @@ class OptionsSelector extends Component {
                     ref={el => this.list = el}
                     optionHoveredStyle={styles.hoveredComponentBG}
                     onSelectRow={this.selectRow}
-                    sections={this.state.sections}
+                    sections={this.props.sections}
                     focusedIndex={this.state.focusedIndex}
                     selectedOptions={this.props.selectedOptions}
                     canSelectMultipleOptions={this.props.canSelectMultipleOptions}
                     hideSectionHeaders={this.props.hideSectionHeaders}
-                    headerMessage={this.props.getCustomHeaderMessage(this.searchValue)}
+                    headerMessage={this.props.headerMessage}
                     disableFocusOptions={this.props.disableArrowKeysActions}
                     hideAdditionalOptionStates={this.props.hideAdditionalOptionStates}
                     forceTextUnreadStyle={this.props.forceTextUnreadStyle}

src/pages/SearchPage.js

@@ -1,3 +1,4 @@
+import _ from 'underscore';
 import React, {Component} from 'react';
 import {View} from 'react-native';
 import PropTypes from 'prop-types';
@@ -64,74 +65,53 @@ class SearchPage extends Component {
         Timing.start(CONST.TIMING.SEARCH_RENDER);
 
         this.selectReport = this.selectReport.bind(this);
-        this.searchSections = this.searchSections.bind(this);
-        this.getCustomHeaderMessage = this.getCustomHeaderMessage.bind(this);
-    }
+        this.onChangeText = this.onChangeText.bind(this);
+        this.debouncedUpdateOptions = _.debounce(this.updateOptions.bind(this), 300);
 
-    componentDidMount() {
-        Timing.end(CONST.TIMING.SEARCH_RENDER);
-    }
-
-    /**
-     * Returns header message given searchValue
-     * @param {String} searchValue
-     * @returns {String} header messae
-     */
-    getCustomHeaderMessage(searchValue = '') {
         const {
             recentReports,
             personalDetails,
             userToInvite,
         } = getSearchOptions(
-            this.props.reports,
-            this.props.personalDetails,
+            props.reports,
+            props.personalDetails,
             '',
-            this.props.betas,
-        );
-        return getHeaderMessage(
-            (recentReports.length + personalDetails.length) !== 0,
-            Boolean(userToInvite),
-            searchValue,
+            props.betas,
         );
+
+        this.state = {
+            searchValue: '',
+            recentReports,
+            personalDetails,
+            userToInvite,
+        };
     }
 
-    /**
-     * Returns the sections needed for the OptionsSelector
-     *
-     * @returns {Array}
-     */
-    getSections() {
-        // getSections is same to searchSections given empty searchValue
-        return this.searchSections();
+    componentDidMount() {
+        Timing.end(CONST.TIMING.SEARCH_RENDER);
+    }
+
+    onChangeText(searchValue = '') {
+        this.setState({searchValue}, this.debouncedUpdateOptions);
     }
 
     /**
      * Returns the sections needed for the OptionsSelector
-     * @param {String} searchValue
+     *
      * @returns {Array}
      */
-    searchSections(searchValue = '') {
-        const {
-            recentReports,
-            personalDetails,
-            userToInvite,
-        } = getSearchOptions(
-            this.props.reports,
-            this.props.personalDetails,
-            searchValue,
-            this.props.betas,
-        );
+    getSections() {
         const sections = [{
             title: this.props.translate('common.recents'),
-            data: recentReports.concat(personalDetails),
+            data: this.state.recentReports.concat(this.state.personalDetails),
             shouldShow: true,
             indexOffset: 0,
         }];
 
-        if (userToInvite) {
+        if (this.state.userToInvite) {
             sections.push(({
                 undefined,
-                data: [userToInvite],
+                data: [this.state.userToInvite],
                 shouldShow: true,
                 indexOffset: 0,
             }));
@@ -140,6 +120,24 @@ class SearchPage extends Component {
         return sections;
     }
 
+    updateOptions() {
+        const {
+            recentReports,
+            personalDetails,
+            userToInvite,
+        } = getSearchOptions(
+            this.props.reports,
+            this.props.personalDetails,
+            this.state.searchValue,
+            this.props.betas,
+        );
+        this.setState({
+            userToInvite,
+            recentReports,
+            personalDetails,
+        });
+    }
+
     /**
      * Reset the search value and redirect to the selected report
      *
@@ -151,7 +149,11 @@ class SearchPage extends Component {
         }
 
         if (option.reportID) {
-            Navigation.navigate(ROUTES.getReportRoute(option.reportID));
+            this.setState({
+                searchValue: '',
+            }, () => {
+                Navigation.navigate(ROUTES.getReportRoute(option.reportID));
+            });
         } else {
             fetchOrCreateChatReport([
                 this.props.session.email,
@@ -162,32 +164,36 @@ class SearchPage extends Component {
 
     render() {
         const sections = this.getSections();
+        const headerMessage = getHeaderMessage(
+            (this.state.recentReports.length + this.state.personalDetails.length) !== 0,
+            Boolean(this.state.userToInvite),
+            this.state.searchValue,
+        );
         return (
             <ScreenWrapper>
                 {({didScreenTransitionEnd}) => (
-                    didScreenTransitionEnd && (
-                        <>
-                            <HeaderWithCloseButton
-                                title={this.props.translate('common.search')}
-                                onCloseButtonPress={() => Navigation.dismissModal(true)}
+                    <>
+                        <HeaderWithCloseButton
+                            title={this.props.translate('common.search')}
+                            onCloseButtonPress={() => Navigation.dismissModal(true)}
+                        />
+                        <View style={[styles.flex1, styles.w100, styles.pRelative]}>
+                            <FullScreenLoadingIndicator visible={!didScreenTransitionEnd} />
+                            {didScreenTransitionEnd && (
+                            <OptionsSelector
+                                sections={sections}
+                                value={this.state.searchValue}
+                                onSelectRow={this.selectReport}
+                                onChangeText={this.onChangeText}
+                                headerMessage={headerMessage}
+                                hideSectionHeaders
+                                hideAdditionalOptionStates
+                                showTitleTooltip
                             />
-                            <View style={[styles.flex1, styles.w100, styles.pRelative]}>
-                                <FullScreenLoadingIndicator visible={!didScreenTransitionEnd} />
-                                {didScreenTransitionEnd && (
-                                <OptionsSelector
-                                    sections={sections}
-                                    onSelectRow={this.selectReport}
-                                    searchSections={this.searchSections}
-                                    getCustomHeaderMessage={this.getCustomHeaderMessage}
-                                    hideSectionHeaders
-                                    hideAdditionalOptionStates
-                                    showTitleTooltip
-                                />
-                                )}
-                            </View>
-                            <KeyboardSpacer />
-                        </>
-                    )
+                            )}
+                        </View>
+                        <KeyboardSpacer />
+                    </>
                 )}
             </ScreenWrapper>
         );