Merge pull request #4436 from Expensify/chirag-race-fix-attempt2

Race fix attempt 2

src/pages/home/HeaderView.js

@@ -54,17 +54,23 @@ const propTypes = {
     }).isRequired,
 
     /** Personal details of all the users */
-    personalDetails: PropTypes.objectOf(participantPropTypes).isRequired,
+    personalDetails: PropTypes.objectOf(participantPropTypes),
 
     ...windowDimensionsPropTypes,
     ...withLocalizePropTypes,
 };
 
 const defaultProps = {
+    personalDetails: {},
     report: null,
 };
 
 const HeaderView = (props) => {
+    // Waiting until ONYX variables are loaded before displaying the component
+    if (_.isEmpty(props.personalDetails)) {
+        return null;
+    }
+
     const participants = lodashGet(props.report, 'participants', []);
     const isMultipleParticipant = participants.length > 1;
     const displayNamesWithTooltips = _.map(

src/pages/home/report/ParticipantLocalTime.js

@@ -10,6 +10,7 @@ import withLocalize, {withLocalizePropTypes} from '../../../components/withLocal
 import {participantPropTypes} from '../sidebar/optionPropTypes';
 import ExpensiText from '../../../components/Text';
 import Timers from '../../../libs/Timers';
+import CONST from '../../../CONST';
 
 const propTypes = {
     /** Personal details of the participant */
@@ -40,7 +41,7 @@ class ParticipantLocalTime extends PureComponent {
     }
 
     getParticipantLocalTime() {
-        const reportRecipientTimezone = lodashGet(this.props.participant, 'timezone', {});
+        const reportRecipientTimezone = lodashGet(this.props.participant, 'timezone', CONST.DEFAULT_TIME_ZONE);
         moment.locale(this.props.preferredLocale);
         const reportRecipientDay = moment().tz(reportRecipientTimezone.selected).format('dddd');
         const currentUserDay = moment().tz(this.props.currentUserTimezone.selected).format('dddd');

src/pages/home/report/ReportActionCompose.js

@@ -77,10 +77,10 @@ const propTypes = {
     }),
 
     /** The personal details of the person who is logged in */
-    myPersonalDetails: PropTypes.shape(currentUserPersonalDetailsPropsTypes).isRequired,
+    myPersonalDetails: PropTypes.shape(currentUserPersonalDetailsPropsTypes),
 
     /** Personal details of all the users */
-    personalDetails: PropTypes.objectOf(participantPropTypes).isRequired,
+    personalDetails: PropTypes.objectOf(participantPropTypes),
 
     /** The report currently being looked at */
     report: PropTypes.shape({
@@ -123,6 +123,8 @@ const defaultProps = {
     reportActions: {},
     network: {isOffline: false},
     blockedFromConcierge: {},
+    personalDetails: {},
+    myPersonalDetails: {},
 };
 
 class ReportActionCompose extends React.Component {
@@ -421,14 +423,19 @@ class ReportActionCompose extends React.Component {
     }
 
     render() {
+        // Waiting until ONYX variables are loaded before displaying the component
+        if (_.isEmpty(this.props.personalDetails) || _.isEmpty(this.props.myPersonalDetails)) {
+            return null;
+        }
+
         // eslint-disable-next-line no-unused-vars
         const reportParticipants = lodashGet(this.props.report, 'participants', []);
         const hasMultipleParticipants = reportParticipants.length > 1;
         const hasChronosParticipant = _.contains(reportParticipants, CONST.EMAIL.CHRONOS);
         const hasConciergeParticipant = _.contains(reportParticipants, CONST.EMAIL.CONCIERGE);
         const reportRecipient = this.props.personalDetails[reportParticipants[0]];
-        const currentUserTimezone = lodashGet(this.props.myPersonalDetails, 'timezone', {});
-        const reportRecipientTimezone = lodashGet(reportRecipient, 'timezone', {});
+        const currentUserTimezone = lodashGet(this.props.myPersonalDetails, 'timezone', CONST.DEFAULT_TIME_ZONE);
+        const reportRecipientTimezone = lodashGet(reportRecipient, 'timezone', CONST.DEFAULT_TIME_ZONE);
         const shouldShowReportRecipientLocalTime = !hasConciergeParticipant
             && !hasChronosParticipant
             && !hasMultipleParticipants

src/pages/home/sidebar/SidebarLinks.js

@@ -99,8 +99,8 @@ class SidebarLinks extends React.Component {
     }
 
     render() {
-        // Wait until the reports are actually loaded before displaying the LHN
-        if (!this.props.initialReportDataLoaded) {
+        // Wait until the reports and personalDetails are actually loaded before displaying the LHN
+        if (!this.props.initialReportDataLoaded || _.isEmpty(this.props.personalDetails)) {
             return null;
         }