Merge pull request #22912 from AGarciaNY/main

Migrate FloatingMessageCounter to function component
Expensify · Aug 1, 2023 · a97a154 · a97a154
2 parents 9266cfd + aa582d8
commit a97a154
Showing 1 changed file with 50 additions and 58 deletions.
diff --git a/src/pages/home/report/FloatingMessageCounter/index.js b/src/pages/home/report/FloatingMessageCounter/index.js
@@ -1,4 +1,4 @@
-import React, {PureComponent} from 'react';
+import React, {useEffect, useMemo, useCallback} from 'react';
 import {Animated, View} from 'react-native';
 import PropTypes from 'prop-types';
 import styles from '../../../../styles/styles';
@@ -7,7 +7,7 @@ import Text from '../../../../components/Text';
 import Icon from '../../../../components/Icon';
 import * as Expensicons from '../../../../components/Icon/Expensicons';
 import themeColors from '../../../../styles/themes/default';
-import withLocalize, {withLocalizePropTypes} from '../../../../components/withLocalize';
+import useLocalize from '../../../../hooks/useLocalize';
 import FloatingMessageCounterContainer from './FloatingMessageCounterContainer';
 
 const propTypes = {
@@ -16,8 +16,6 @@ const propTypes = {
 
     /** Callback to be called when user clicks the New Messages indicator */
     onClick: PropTypes.func,
-
-    ...withLocalizePropTypes,
 };
 
 const defaultProps = {
@@ -28,73 +26,67 @@ const defaultProps = {
 const MARKER_INACTIVE_TRANSLATE_Y = -40;
 const MARKER_ACTIVE_TRANSLATE_Y = 10;
 
-class FloatingMessageCounter extends PureComponent {
-    constructor(props) {
-        super(props);
-        this.translateY = new Animated.Value(MARKER_INACTIVE_TRANSLATE_Y);
-        this.show = this.show.bind(this);
-        this.hide = this.hide.bind(this);
-    }
-
-    componentDidUpdate() {
-        if (this.props.isActive) {
-            this.show();
-        } else {
-            this.hide();
-        }
-    }
+function FloatingMessageCounter(props) {
+    const {translate} = useLocalize();
+    const translateY = useMemo(() => new Animated.Value(MARKER_INACTIVE_TRANSLATE_Y), []);
 
-    show() {
-        Animated.spring(this.translateY, {
+    const show = useCallback(() => {
+        Animated.spring(translateY, {
             toValue: MARKER_ACTIVE_TRANSLATE_Y,
             duration: 80,
             useNativeDriver: true,
         }).start();
-    }
+    }, [translateY]);
 
-    hide() {
-        Animated.spring(this.translateY, {
+    const hide = useCallback(() => {
+        Animated.spring(translateY, {
             toValue: MARKER_INACTIVE_TRANSLATE_Y,
             duration: 80,
             useNativeDriver: true,
         }).start();
-    }
+    }, [translateY]);
 
-    render() {
-        return (
-            <FloatingMessageCounterContainer
-                accessibilityHint={this.props.translate('accessibilityHints.scrollToNewestMessages')}
-                containerStyles={[styles.floatingMessageCounterTransformation(this.translateY)]}
-            >
-                <View style={styles.floatingMessageCounter}>
-                    <View style={[styles.flexRow, styles.justifyContentBetween, styles.alignItemsCenter]}>
-                        <Button
-                            success
-                            small
-                            onPress={this.props.onClick}
-                        >
-                            <View style={[styles.flexRow, styles.alignItemsCenter]}>
-                                <Icon
-                                    small
-                                    src={Expensicons.DownArrow}
-                                    fill={themeColors.textLight}
-                                />
-                                <Text
-                                    selectable={false}
-                                    style={[styles.ml2, styles.buttonSmallText, styles.textWhite]}
-                                >
-                                    {this.props.translate('newMessages')}
-                                </Text>
-                            </View>
-                        </Button>
-                    </View>
+    useEffect(() => {
+        if (props.isActive) {
+            show();
+        } else {
+            hide();
+        }
+    }, [props.isActive, show, hide]);
+
+    return (
+        <FloatingMessageCounterContainer
+            accessibilityHint={translate('accessibilityHints.scrollToNewestMessages')}
+            containerStyles={[styles.floatingMessageCounterTransformation(translateY)]}
+        >
+            <View style={styles.floatingMessageCounter}>
+                <View style={[styles.flexRow, styles.justifyContentBetween, styles.alignItemsCenter]}>
+                    <Button
+                        success
+                        small
+                        onPress={props.onClick}
+                    >
+                        <View style={[styles.flexRow, styles.alignItemsCenter]}>
+                            <Icon
+                                small
+                                src={Expensicons.DownArrow}
+                                fill={themeColors.textLight}
+                            />
+                            <Text
+                                selectable={false}
+                                style={[styles.ml2, styles.buttonSmallText, styles.textWhite]}
+                            >
+                                {translate('newMessages')}
+                            </Text>
+                        </View>
+                    </Button>
                 </View>
-            </FloatingMessageCounterContainer>
-        );
-    }
+            </View>
+        </FloatingMessageCounterContainer>
+    );
 }
 
 FloatingMessageCounter.propTypes = propTypes;
 FloatingMessageCounter.defaultProps = defaultProps;
-
-export default withLocalize(FloatingMessageCounter);
+FloatingMessageCounter.displayName = 'FloatingMessageCounter';
+export default React.memo(FloatingMessageCounter);