From c59a8b510dcde20da604ddb8ef960c7b3a30c339 Mon Sep 17 00:00:00 2001
From: chiragsalian <chirag@expensify.com>
Date: Thu, 5 Aug 2021 16:34:46 -0700
Subject: [PATCH] Race fix attempt 2

---
 src/pages/home/HeaderView.js                  |  8 +++++++-
 src/pages/home/report/ParticipantLocalTime.js |  3 ++-
 src/pages/home/report/ReportActionCompose.js  | 15 +++++++++++----
 src/pages/home/sidebar/SidebarLinks.js        |  4 ++--
 4 files changed, 22 insertions(+), 8 deletions(-)

diff --git a/src/pages/home/HeaderView.js b/src/pages/home/HeaderView.js
index c1f4e7d63c00..94950b258baa 100644
--- a/src/pages/home/HeaderView.js
+++ b/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(
diff --git a/src/pages/home/report/ParticipantLocalTime.js b/src/pages/home/report/ParticipantLocalTime.js
index 9e6b14eda91e..cab0781233a7 100644
--- a/src/pages/home/report/ParticipantLocalTime.js
+++ b/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');
diff --git a/src/pages/home/report/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose.js
index f3eca50cf174..c5fa63c28524 100755
--- a/src/pages/home/report/ReportActionCompose.js
+++ b/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
diff --git a/src/pages/home/sidebar/SidebarLinks.js b/src/pages/home/sidebar/SidebarLinks.js
index d846b67e9e29..e74800d3a71a 100644
--- a/src/pages/home/sidebar/SidebarLinks.js
+++ b/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;
         }