From 8f1a7717c489c12b10740da4781c1165d1994e1e Mon Sep 17 00:00:00 2001
From: Aldo Canepa <aldo@expensify.com>
Date: Tue, 6 Jun 2023 12:05:03 -0700
Subject: [PATCH 1/2] Refactor to function component

---
 src/pages/home/report/ParticipantLocalTime.js | 86 +++++++++----------
 1 file changed, 39 insertions(+), 47 deletions(-)

diff --git a/src/pages/home/report/ParticipantLocalTime.js b/src/pages/home/report/ParticipantLocalTime.js
index ceafc5dcfad2..4a729b3258bd 100644
--- a/src/pages/home/report/ParticipantLocalTime.js
+++ b/src/pages/home/report/ParticipantLocalTime.js
@@ -1,4 +1,4 @@
-import React, {PureComponent} from 'react';
+import React, {useState, useEffect} from 'react';
 import {View} from 'react-native';
 import lodashGet from 'lodash/get';
 import styles from '../../../styles/styles';
@@ -16,60 +16,52 @@ const propTypes = {
     ...withLocalizePropTypes,
 };
 
-class ParticipantLocalTime extends PureComponent {
-    constructor(props) {
-        super(props);
-        this.getParticipantLocalTime = this.getParticipantLocalTime.bind(this);
-        this.state = {
-            localTime: this.getParticipantLocalTime(),
-        };
+function getParticipantLocalTime(participant, preferredLocale) {
+    const reportRecipientTimezone = lodashGet(participant, 'timezone', CONST.DEFAULT_TIME_ZONE);
+    const reportTimezone = DateUtils.getLocalMomentFromDatetime(preferredLocale, null, reportRecipientTimezone.selected);
+    const currentTimezone = DateUtils.getLocalMomentFromDatetime(preferredLocale);
+    const reportRecipientDay = reportTimezone.format('dddd');
+    const currentUserDay = currentTimezone.format('dddd');
+
+    if (reportRecipientDay !== currentUserDay) {
+        return `${reportTimezone.format('LT')} ${reportRecipientDay}`;
     }
+    return `${reportTimezone.format('LT')}`;
+}
+
+function ParticipantLocalTime(props) {
+    const {participant, preferredLocale, translate} = props;
 
-    componentDidMount() {
-        this.timer = Timers.register(
+    const [localTime, setLocalTime] = useState(() => getParticipantLocalTime(participant, preferredLocale));
+    useEffect(() => {
+        const timer = Timers.register(
             setInterval(() => {
-                this.setState({
-                    localTime: this.getParticipantLocalTime(),
-                });
+                setLocalTime(getParticipantLocalTime(participant, preferredLocale));
             }, 1000),
         );
-    }
-
-    componentWillUnmount() {
-        clearInterval(this.timer);
-    }
-
-    getParticipantLocalTime() {
-        const reportRecipientTimezone = lodashGet(this.props.participant, 'timezone', CONST.DEFAULT_TIME_ZONE);
-        const reportTimezone = DateUtils.getLocalMomentFromDatetime(this.props.preferredLocale, null, reportRecipientTimezone.selected);
-        const currentTimezone = DateUtils.getLocalMomentFromDatetime(this.props.preferredLocale);
-        const reportRecipientDay = reportTimezone.format('dddd');
-        const currentUserDay = currentTimezone.format('dddd');
-
-        if (reportRecipientDay !== currentUserDay) {
-            return `${reportTimezone.format('LT')} ${reportRecipientDay}`;
-        }
-        return `${reportTimezone.format('LT')}`;
-    }
+        return () => {
+            clearTimeout(timer);
+        };
+    }, [participant, preferredLocale]);
 
-    render() {
-        const reportRecipientDisplayName = lodashGet(this.props, 'participant.firstName') || lodashGet(this.props, 'participant.displayName');
+    const reportRecipientDisplayName = lodashGet(props, 'participant.firstName') || lodashGet(props, 'participant.displayName');
 
-        return (
-            <View style={[styles.chatItemComposeSecondaryRow]}>
-                <Text
-                    style={[styles.chatItemComposeSecondaryRowSubText, styles.chatItemComposeSecondaryRowOffset, styles.pre]}
-                    numberOfLines={1}
-                >
-                    {this.props.translate('reportActionCompose.localTime', {
-                        user: reportRecipientDisplayName,
-                        time: this.state.localTime,
-                    })}
-                </Text>
-            </View>
-        );
-    }
+    return (
+        <View style={[styles.chatItemComposeSecondaryRow]}>
+            <Text
+                style={[styles.chatItemComposeSecondaryRowSubText, styles.chatItemComposeSecondaryRowOffset, styles.pre]}
+                numberOfLines={1}
+            >
+                {translate('reportActionCompose.localTime', {
+                    user: reportRecipientDisplayName,
+                    time: localTime,
+                })}
+            </Text>
+        </View>
+    );
 }
 
 ParticipantLocalTime.propTypes = propTypes;
+ParticipantLocalTime.displayName = 'ParticipantLocalTime';
+
 export default withLocalize(ParticipantLocalTime);

From bf72be5d8023e79461c15b281c34286b56f0e31a Mon Sep 17 00:00:00 2001
From: Aldo Canepa <aldo@expensify.com>
Date: Tue, 6 Jun 2023 13:01:58 -0700
Subject: [PATCH 2/2] Use clearInterval

---
 src/pages/home/report/ParticipantLocalTime.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/home/report/ParticipantLocalTime.js b/src/pages/home/report/ParticipantLocalTime.js
index 4a729b3258bd..e5ffa3c30364 100644
--- a/src/pages/home/report/ParticipantLocalTime.js
+++ b/src/pages/home/report/ParticipantLocalTime.js
@@ -40,7 +40,7 @@ function ParticipantLocalTime(props) {
             }, 1000),
         );
         return () => {
-            clearTimeout(timer);
+            clearInterval(timer);
         };
     }, [participant, preferredLocale]);