Merge pull request #4309 from aman-atg/aman-atg-TimezoneInfoWithSpanish

Fix rendering of timezone info inside chats when the selected language is Spanish
Expensify · Jul 29, 2021 · 99063f7 · 99063f7
2 parents fa35541 + 347f33e
commit 99063f7
Showing 1 changed file with 24 additions and 25 deletions.
diff --git a/src/pages/home/report/ParticipantLocalTime.js b/src/pages/home/report/ParticipantLocalTime.js
@@ -35,13 +35,18 @@ class ParticipantLocalTime extends React.Component {
         }, 1000));
     }
 
+    shouldComponentUpdate(nextProps, nextState) {
+        return nextState.localTime !== this.state.localTime;
+    }
+
     componentWillUnmount() {
         clearInterval(this.timer);
         clearInterval(this.readyTimer);
     }
 
     getParticipantLocalTime() {
         const reportRecipientTimezone = lodashGet(this.props.participant, 'timezone', {});
+        moment.locale(this.props.preferredLocale);
         const reportRecipientDay = moment().tz(reportRecipientTimezone.selected).format('dddd');
         const currentUserDay = moment().tz(this.props.currentUserTimezone.selected).format('dddd');
 
@@ -52,38 +57,32 @@ class ParticipantLocalTime extends React.Component {
     }
 
     render() {
-        // Moment.format does not return AM or PM values immediately.
-        // So we have to wait until we are ready before showing the time to the user
-        const isReportRecipientLocalTimeReady = this.state.localTime.toString().match(/(A|P)M/ig);
         const reportRecipientDisplayName = this.props.participant.firstName
             || (Str.isSMSLogin(this.props.participant.login)
                 ? this.props.toLocalPhone(this.props.participant.displayName)
                 : this.props.participant.displayName);
 
         return (
-            isReportRecipientLocalTimeReady ? (
-                <View style={[styles.chatItemComposeSecondaryRow]}>
-                    <View style={[
-                        styles.chatItemComposeSecondaryRowOffset,
-                        styles.flexRow,
-                        styles.alignItemsCenter]}
-                    >
-                        <ExpensiText style={[styles.chatItemComposeSecondaryRowSubText, styles.mr1]}>
-                            {this.props.translate('common.timePrefix')}
-                        </ExpensiText>
-                        <ExpensiText style={[styles.textMicroSupportingBold, styles.mr1]}>
-                            {this.state.localTime}
-                        </ExpensiText>
-                        <ExpensiText style={[styles.chatItemComposeSecondaryRowSubText, styles.mr1]}>
-                            {this.props.translate('common.conjunctionFor')}
-                        </ExpensiText>
-                        <ExpensiText style={[styles.textMicroSupportingBold]}>
-                            {reportRecipientDisplayName}
-                        </ExpensiText>
-                    </View>
+            <View style={[styles.chatItemComposeSecondaryRow]}>
+                <View style={[
+                    styles.chatItemComposeSecondaryRowOffset,
+                    styles.flexRow,
+                    styles.alignItemsCenter]}
+                >
+                    <ExpensiText style={[styles.chatItemComposeSecondaryRowSubText, styles.mr1]}>
+                        {this.props.translate('common.timePrefix')}
+                    </ExpensiText>
+                    <ExpensiText style={[styles.textMicroSupportingBold, styles.mr1]}>
+                        {this.state.localTime}
+                    </ExpensiText>
+                    <ExpensiText style={[styles.chatItemComposeSecondaryRowSubText, styles.mr1]}>
+                        {this.props.translate('common.conjunctionFor')}
+                    </ExpensiText>
+                    <ExpensiText style={[styles.textMicroSupportingBold]}>
+                        {reportRecipientDisplayName}
+                    </ExpensiText>
                 </View>
-            )
-                : <View style={[styles.chatItemComposeSecondaryRow]} />
+            </View>
         );
     }
 }