From 8438f6528a87f51bfd7aecf46d8a46fada62b2fa Mon Sep 17 00:00:00 2001
From: Aditya <108405791+adityaaa-r@users.noreply.github.com>
Date: Tue, 1 Aug 2023 12:49:39 +0530
Subject: [PATCH 1/3] migrated ThreeDotsMenu/index.js to a functional component

---
 src/components/ThreeDotsMenu/index.js | 102 ++++++++++++--------------
 1 file changed, 46 insertions(+), 56 deletions(-)

diff --git a/src/components/ThreeDotsMenu/index.js b/src/components/ThreeDotsMenu/index.js
index e54481bcab99..3b68c25c9407 100644
--- a/src/components/ThreeDotsMenu/index.js
+++ b/src/components/ThreeDotsMenu/index.js
@@ -1,4 +1,4 @@
-import React, {Component} from 'react';
+import React, {useState, useRef} from 'react';
 import {View} from 'react-native';
 import PropTypes from 'prop-types';
 import _ from 'underscore';
@@ -61,61 +61,51 @@ const defaultProps = {
     },
 };
 
-class ThreeDotsMenu extends Component {
-    constructor(props) {
-        super(props);
-
-        this.hidePopoverMenu = this.hidePopoverMenu.bind(this);
-        this.showPopoverMenu = this.showPopoverMenu.bind(this);
-        this.state = {
-            isPopupMenuVisible: false,
-        };
-        this.button = null;
-    }
-
-    showPopoverMenu() {
-        this.setState({isPopupMenuVisible: true});
-    }
-
-    hidePopoverMenu() {
-        this.setState({isPopupMenuVisible: false});
-    }
-
-    render() {
-        return (
-            <>
-                <View>
-                    <Tooltip text={this.props.translate(this.props.iconTooltip)}>
-                        <PressableWithoutFeedback
-                            onPress={() => {
-                                this.showPopoverMenu();
-                                if (this.props.onIconPress) {
-                                    this.props.onIconPress();
-                                }
-                            }}
-                            ref={(el) => (this.button = el)}
-                            style={[styles.touchableButtonImage, ...this.props.iconStyles]}
-                            accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON}
-                            accessibilityLabel={this.props.translate(this.props.iconTooltip)}
-                        >
-                            <Icon
-                                src={this.props.icon}
-                                fill={this.props.iconFill}
-                            />
-                        </PressableWithoutFeedback>
-                    </Tooltip>
-                </View>
-                <PopoverMenu
-                    onClose={this.hidePopoverMenu}
-                    isVisible={this.state.isPopupMenuVisible}
-                    anchorPosition={this.props.anchorPosition}
-                    anchorAlignment={this.props.anchorAlignment}
-                    onItemSelected={this.hidePopoverMenu}
-                    menuItems={this.props.menuItems}
-                />
-            </>
-        );
-    }
+function ThreeDotsMenu({iconTooltip, icon, iconFill, iconStyles, onIconPress, menuItems, anchorPosition, anchorAlignment, translate}) {
+    const [isPopupMenuVisible, setPopupMenuVisible] = useState(false);
+    const buttonRef = useRef(null);
+
+    const showPopoverMenu = () => {
+        setPopupMenuVisible(true);
+    };
+
+    const hidePopoverMenu = () => {
+        setPopupMenuVisible(false);
+    };
+
+    return (
+        <>
+            <View>
+                <Tooltip text={translate(iconTooltip)}>
+                    <PressableWithoutFeedback
+                        onPress={() => {
+                            showPopoverMenu();
+                            if (onIconPress) {
+                                onIconPress();
+                            }
+                        }}
+                        ref={buttonRef}
+                        style={[styles.touchableButtonImage, ...iconStyles]}
+                        accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON}
+                        accessibilityLabel={translate(iconTooltip)}
+                    >
+                        <Icon
+                            src={icon}
+                            fill={iconFill}
+                        />
+                    </PressableWithoutFeedback>
+                </Tooltip>
+            </View>
+            <PopoverMenu
+                onClose={hidePopoverMenu}
+                isVisible={isPopupMenuVisible}
+                anchorPosition={anchorPosition}
+                anchorAlignment={anchorAlignment}
+                onItemSelected={hidePopoverMenu}
+                menuItems={menuItems}
+            />
+        </>
+    );
 }
 
 ThreeDotsMenu.propTypes = propTypes;

From 249436011aa93dc38e6288c64bd9921cf0e8a1fc Mon Sep 17 00:00:00 2001
From: Aditya <108405791+adityaaa-r@users.noreply.github.com>
Date: Tue, 1 Aug 2023 23:05:02 +0530
Subject: [PATCH 2/3] added displayName

---
 src/components/ThreeDotsMenu/index.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/ThreeDotsMenu/index.js b/src/components/ThreeDotsMenu/index.js
index 3b68c25c9407..bde1c0daf4f4 100644
--- a/src/components/ThreeDotsMenu/index.js
+++ b/src/components/ThreeDotsMenu/index.js
@@ -110,6 +110,7 @@ function ThreeDotsMenu({iconTooltip, icon, iconFill, iconStyles, onIconPress, me
 
 ThreeDotsMenu.propTypes = propTypes;
 ThreeDotsMenu.defaultProps = defaultProps;
+ThreeDotsMenu.displayName = 'ThreeDotsMenu';
 
 export default withLocalize(ThreeDotsMenu);
 

From 16e3e47ae92685ec14f41aba7ac39a645b1f8b8a Mon Sep 17 00:00:00 2001
From: Aditya <108405791+adityaaa-r@users.noreply.github.com>
Date: Fri, 4 Aug 2023 15:04:24 +0530
Subject: [PATCH 3/3] remove withLocalize, added useLocalize

---
 src/components/ThreeDotsMenu/index.js | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/components/ThreeDotsMenu/index.js b/src/components/ThreeDotsMenu/index.js
index bde1c0daf4f4..1b837982cc58 100644
--- a/src/components/ThreeDotsMenu/index.js
+++ b/src/components/ThreeDotsMenu/index.js
@@ -5,7 +5,7 @@ import _ from 'underscore';
 import Icon from '../Icon';
 import PopoverMenu from '../PopoverMenu';
 import styles from '../../styles/styles';
-import withLocalize, {withLocalizePropTypes} from '../withLocalize';
+import useLocalize from '../../hooks/useLocalize';
 import Tooltip from '../Tooltip';
 import * as Expensicons from '../Icon/Expensicons';
 import ThreeDotsMenuItemPropTypes from './ThreeDotsMenuItemPropTypes';
@@ -13,8 +13,6 @@ import CONST from '../../CONST';
 import PressableWithoutFeedback from '../Pressable/PressableWithoutFeedback';
 
 const propTypes = {
-    ...withLocalizePropTypes,
-
     /** Tooltip for the popup icon */
     iconTooltip: PropTypes.string,
 
@@ -61,9 +59,10 @@ const defaultProps = {
     },
 };
 
-function ThreeDotsMenu({iconTooltip, icon, iconFill, iconStyles, onIconPress, menuItems, anchorPosition, anchorAlignment, translate}) {
+function ThreeDotsMenu({iconTooltip, icon, iconFill, iconStyles, onIconPress, menuItems, anchorPosition, anchorAlignment}) {
     const [isPopupMenuVisible, setPopupMenuVisible] = useState(false);
     const buttonRef = useRef(null);
+    const {translate} = useLocalize();
 
     const showPopoverMenu = () => {
         setPopupMenuVisible(true);
@@ -112,6 +111,6 @@ ThreeDotsMenu.propTypes = propTypes;
 ThreeDotsMenu.defaultProps = defaultProps;
 ThreeDotsMenu.displayName = 'ThreeDotsMenu';
 
-export default withLocalize(ThreeDotsMenu);
+export default ThreeDotsMenu;
 
 export {ThreeDotsMenuItemPropTypes};