fix stale data issue in components that use report data and display options list

Author: jczekalski

src/pages/NewChatPage.js

@@ -32,6 +32,9 @@ const propTypes = {
     /** All reports shared with the user */
     reports: PropTypes.objectOf(reportPropTypes),
 
+    /** Indicates whether the reports data is ready */
+    isLoadingReportData: PropTypes.bool,
+
     ...windowDimensionsPropTypes,
 
     ...withLocalizePropTypes,
@@ -42,6 +45,7 @@ const defaultProps = {
     betas: [],
     personalDetails: {},
     reports: {},
+    isLoadingReportData: true,
 };
 
 class NewChatPage extends Component {
@@ -75,6 +79,13 @@ class NewChatPage extends Component {
         };
     }
 
+    componentDidUpdate(prevProps) {
+        if (prevProps.isLoadingReportData === this.props.isLoadingReportData) {
+            return;
+        }
+        this.updateOptionsWithSearchTerm(this.state.searchTerm);
+    }
+
     /**
      * Returns the sections needed for the OptionsSelector
      *
@@ -255,6 +266,7 @@ class NewChatPage extends Component {
                                     boldStyle
                                     shouldFocusOnSelectRow={this.props.isGroupChat}
                                     shouldShowConfirmButton={this.props.isGroupChat}
+                                    shouldShowOptions={!this.props.isLoadingReportData}
                                     confirmButtonText={this.props.translate('newChatPage.createGroup')}
                                     onConfirmSelection={this.createGroup}
                                     placeholderText={this.props.translate('optionsSelector.nameEmailOrPhoneNumber')}
@@ -287,5 +299,8 @@ export default compose(
         betas: {
             key: ONYXKEYS.BETAS,
         },
+        isLoadingReportData: {
+            key: ONYXKEYS.IS_LOADING_REPORT_DATA,
+        },
     }),
 )(NewChatPage);

src/pages/SearchPage.js

@@ -20,6 +20,7 @@ import compose from '../libs/compose';
 import personalDetailsPropType from './personalDetailsPropType';
 import reportPropTypes from './reportPropTypes';
 import Performance from '../libs/Performance';
+import FullScreenLoadingIndicator from '../components/FullscreenLoadingIndicator';
 
 const propTypes = {
     /* Onyx Props */
@@ -33,6 +34,9 @@ const propTypes = {
     /** All reports shared with the user */
     reports: PropTypes.objectOf(reportPropTypes),
 
+    /** Indicates whether report data is ready */
+    isLoadingReportData: PropTypes.bool,
+
     /** Window Dimensions Props */
     ...windowDimensionsPropTypes,
 
@@ -43,6 +47,7 @@ const defaultProps = {
     betas: [],
     personalDetails: {},
     reports: {},
+    isLoadingReportData: true,
 };
 
 class SearchPage extends Component {
@@ -76,6 +81,13 @@ class SearchPage extends Component {
         };
     }
 
+    componentDidUpdate(prevProps) {
+        if (prevProps.isLoadingReportData === this.props.isLoadingReportData) {
+            return;
+        }
+        this.updateOptions();
+    }
+
     onChangeText(searchValue = '') {
         this.setState({searchValue}, this.debouncedUpdateOptions);
     }
@@ -178,19 +190,23 @@ class SearchPage extends Component {
                             onCloseButtonPress={() => Navigation.dismissModal(true)}
                         />
                         <View style={[styles.flex1, styles.w100, styles.pRelative]}>
-                            <OptionsSelector
-                                sections={sections}
-                                value={this.state.searchValue}
-                                onSelectRow={this.selectReport}
-                                onChangeText={this.onChangeText}
-                                headerMessage={headerMessage}
-                                hideSectionHeaders
-                                showTitleTooltip
-                                shouldShowOptions={didScreenTransitionEnd}
-                                placeholderText={this.props.translate('optionsSelector.nameEmailOrPhoneNumber')}
-                                onLayout={this.searchRendered}
-                                safeAreaPaddingBottomStyle={safeAreaPaddingBottomStyle}
-                            />
+                            {didScreenTransitionEnd ? (
+                                <OptionsSelector
+                                    sections={sections}
+                                    value={this.state.searchValue}
+                                    onSelectRow={this.selectReport}
+                                    onChangeText={this.onChangeText}
+                                    headerMessage={headerMessage}
+                                    hideSectionHeaders
+                                    showTitleTooltip
+                                    shouldShowOptions={!this.props.isLoadingReportData}
+                                    placeholderText={this.props.translate('optionsSelector.nameEmailOrPhoneNumber')}
+                                    onLayout={this.searchRendered}
+                                    safeAreaPaddingBottomStyle={safeAreaPaddingBottomStyle}
+                                />
+                            ) : (
+                                <FullScreenLoadingIndicator />
+                            )}
                         </View>
                     </>
                 )}
@@ -215,5 +231,8 @@ export default compose(
         betas: {
             key: ONYXKEYS.BETAS,
         },
+        isLoadingReportData: {
+            key: ONYXKEYS.IS_LOADING_REPORT_DATA,
+        },
     }),
 )(SearchPage);

src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js

@@ -27,6 +27,9 @@ const propTypes = {
     /** All reports shared with the user */
     reports: PropTypes.objectOf(reportPropTypes),
 
+    /** Indicates whether report data is ready */
+    isLoadingReportData: PropTypes.bool,
+
     /** padding bottom style of safe area */
     safeAreaPaddingBottomStyle: PropTypes.oneOfType([
         PropTypes.arrayOf(PropTypes.object),
@@ -44,6 +47,7 @@ const defaultProps = {
     personalDetails: {},
     reports: {},
     betas: [],
+    isLoadingReportData: true,
 };
 
 class MoneyRequestParticipantsSelector extends Component {
@@ -67,6 +71,13 @@ class MoneyRequestParticipantsSelector extends Component {
         };
     }
 
+    componentDidUpdate(prevProps) {
+        if (prevProps.isLoadingReportData === this.props.isLoadingReportData) {
+            return;
+        }
+        this.updateOptionsWithSearchTerm(this.state.searchTerm);
+    }
+
     /**
      * @param {string} searchTerm
      * @returns {Object}
@@ -164,6 +175,7 @@ class MoneyRequestParticipantsSelector extends Component {
                 placeholderText={this.props.translate('optionsSelector.nameEmailOrPhoneNumber')}
                 boldStyle
                 safeAreaPaddingBottomStyle={this.props.safeAreaPaddingBottomStyle}
+                shouldShowOptions={!this.props.isLoadingReportData}
             />
         );
     }
@@ -184,5 +196,8 @@ export default compose(
         betas: {
             key: ONYXKEYS.BETAS,
         },
+        isLoadingReportData: {
+            key: ONYXKEYS.IS_LOADING_REPORT_DATA,
+        },
     }),
 )(MoneyRequestParticipantsSelector);

src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSplitSelector.js

@@ -49,6 +49,9 @@ const propTypes = {
         PropTypes.object,
     ]),
 
+    /** Indicates whether report data is ready */
+    isLoadingReportData: PropTypes.bool,
+
     ...withLocalizePropTypes,
 };
 
@@ -58,6 +61,7 @@ const defaultProps = {
     personalDetails: {},
     reports: {},
     safeAreaPaddingBottomStyle: {},
+    isLoadingReportData: true,
 };
 
 class MoneyRequestParticipantsSplitSelector extends Component {
@@ -89,6 +93,13 @@ class MoneyRequestParticipantsSplitSelector extends Component {
         };
     }
 
+    componentDidUpdate(prevProps) {
+        if (prevProps.isLoadingReportData === this.props.isLoadingReportData) {
+            return;
+        }
+        this.updateOptionsWithSearchTerm(this.state.searchTerm);
+    }
+
     /**
      * Returns the sections needed for the OptionsSelector
      *
@@ -238,6 +249,7 @@ class MoneyRequestParticipantsSplitSelector extends Component {
                     onConfirmSelection={this.finalizeParticipants}
                     placeholderText={this.props.translate('optionsSelector.nameEmailOrPhoneNumber')}
                     safeAreaPaddingBottomStyle={this.props.safeAreaPaddingBottomStyle}
+                    shouldShowOptions={!this.props.isLoadingReportData}
                 />
             </View>
         );
@@ -259,5 +271,8 @@ export default compose(
         betas: {
             key: ONYXKEYS.BETAS,
         },
+        isLoadingReportData: {
+            key: ONYXKEYS.IS_LOADING_REPORT_DATA,
+        },
     }),
 )(MoneyRequestParticipantsSplitSelector);