Feat: migrate report typing indicator to functional component

src/pages/home/report/ReportTypingIndicator.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useState, useEffect} from 'react';
 import PropTypes from 'prop-types';
 import _ from 'underscore';
 import {withOnyx} from 'react-native-onyx';
@@ -26,66 +26,52 @@ const defaultProps = {
     userTypingStatuses: {},
 };
 
-class ReportTypingIndicator extends React.Component {
-    constructor(props) {
-        super(props);
+const ReportTypingIndicator = (props) => {
+    const [usersTyping, setUsersTyping] = useState(props.userTypingStatuses ? _.filter(_.keys(props.userTypingStatuses), (login) => props.userTypingStatuses[login]) : []);
 
-        const usersTyping = props.userTypingStatuses ? _.filter(_.keys(props.userTypingStatuses), (login) => props.userTypingStatuses[login]) : [];
-        this.state = {usersTyping};
-    }
-
-    componentDidUpdate(prevProps) {
-        // Make sure we only update the state if there's been a change in who's typing.
-        if (_.isEqual(prevProps.userTypingStatuses, this.props.userTypingStatuses)) {
-            return;
-        }
-
-        const usersTyping = _.filter(_.keys(this.props.userTypingStatuses), (login) => this.props.userTypingStatuses[login]);
+    useEffect(() => {
+        setUsersTyping(_.filter(_.keys(props.userTypingStatuses), (login) => props.userTypingStatuses[login]));
+    }, [props.userTypingStatuses]);
 
-        // eslint-disable-next-line react/no-did-update-set-state
-        this.setState({usersTyping});
+    // If we are offline, the user typing statuses are not up-to-date so do not show them
+    if (props.network.isOffline) {
+        return null;
     }
 
-    render() {
-        const numUsersTyping = _.size(this.state.usersTyping);
+    const numUsersTyping = _.size(usersTyping);
 
-        // If we are offline, the user typing statuses are not up-to-date so do not show them
-        if (this.props.network.isOffline) {
+    // Decide on the Text element that will hold the display based on the number of users that are typing.
+    switch (numUsersTyping) {
+        case 0:
             return null;
-        }
 
-        // Decide on the Text element that will hold the display based on the number of users that are typing.
-        switch (numUsersTyping) {
-            case 0:
-                return null;
-
-            case 1:
-                return (
-                    <TextWithEllipsis
-                        leadingText={PersonalDetails.getDisplayName(this.state.usersTyping[0])}
-                        trailingText={` ${this.props.translate('reportTypingIndicator.isTyping')}`}
-                        textStyle={[styles.chatItemComposeSecondaryRowSubText]}
-                        wrapperStyle={[styles.chatItemComposeSecondaryRow, styles.flex1]}
-                        leadingTextParentStyle={styles.chatItemComposeSecondaryRowOffset}
-                    />
-                );
-
-            default:
-                return (
-                    <Text
-                        style={[styles.chatItemComposeSecondaryRowSubText, styles.chatItemComposeSecondaryRowOffset]}
-                        numberOfLines={1}
-                    >
-                        {this.props.translate('reportTypingIndicator.multipleUsers')}
-                        {` ${this.props.translate('reportTypingIndicator.areTyping')}`}
-                    </Text>
-                );
-        }
+        case 1:
+            return (
+                <TextWithEllipsis
+                    leadingText={PersonalDetails.getDisplayName(usersTyping[0])}
+                    trailingText={` ${props.translate('reportTypingIndicator.isTyping')}`}
+                    textStyle={[styles.chatItemComposeSecondaryRowSubText]}
+                    wrapperStyle={[styles.chatItemComposeSecondaryRow, styles.flex1]}
+                    leadingTextParentStyle={styles.chatItemComposeSecondaryRowOffset}
+                />
+            );
+
+        default:
+            return (
+                <Text
+                    style={[styles.chatItemComposeSecondaryRowSubText, styles.chatItemComposeSecondaryRowOffset]}
+                    numberOfLines={1}
+                >
+                    {props.translate('reportTypingIndicator.multipleUsers')}
+                    {` ${props.translate('reportTypingIndicator.areTyping')}`}
+                </Text>
+            );
     }
-}
+};
 
 ReportTypingIndicator.propTypes = propTypes;
 ReportTypingIndicator.defaultProps = defaultProps;
+ReportTypingIndicator.displayName = 'ReportTypingIndicator';
 
 export default compose(
     withLocalize,