From 302eccecde3f9d7b7dff5006e94bf05cb3b60152 Mon Sep 17 00:00:00 2001
From: AGarciaNY <aldairgarcia360@gmail.com>
Date: Fri, 7 Jul 2023 11:01:29 -0400
Subject: [PATCH 1/3] feat [issue #16143]:  Changed CategoryShortcutButton
 class component

---
 .../EmojiPicker/CategoryShortcutButton.js     | 64 +++++++++----------
 1 file changed, 29 insertions(+), 35 deletions(-)

diff --git a/src/components/EmojiPicker/CategoryShortcutButton.js b/src/components/EmojiPicker/CategoryShortcutButton.js
index f84771b8c9ad..ae60745505fa 100644
--- a/src/components/EmojiPicker/CategoryShortcutButton.js
+++ b/src/components/EmojiPicker/CategoryShortcutButton.js
@@ -1,4 +1,4 @@
-import React, {PureComponent} from 'react';
+import React, {PureComponent, useState} from 'react';
 import PropTypes from 'prop-types';
 import Icon from '../Icon';
 import Tooltip from '../Tooltip';
@@ -23,42 +23,36 @@ const propTypes = {
     ...withLocalizePropTypes,
 };
 
-class CategoryShortcutButton extends PureComponent {
-    constructor(props) {
-        super(props);
-        this.state = {
-            isHighlighted: false,
-        };
-    }
+function CategoryShortcutButton(props) {
 
-    render() {
-        return (
-            <Tooltip
-                text={this.props.translate(`emojiPicker.headers.${this.props.code}`)}
-                shiftVertical={-4}
+    let [isHighlighted, setIsHighlighted] = useState(false)
+
+    return (
+        <Tooltip
+            text={props.translate(`emojiPicker.headers.${props.code}`)}
+            shiftVertical={-4}
+        >
+            <PressableWithoutFeedback
+                onPress={props.onPress}
+                onHoverIn={() => setIsHighlighted(true)}
+                onHoverOut={() => setIsHighlighted(false)}
+                style={({ pressed }) => [
+                    StyleUtils.getButtonBackgroundColorStyle(getButtonState(false, pressed)),
+                    styles.categoryShortcutButton,
+                    isHighlighted && styles.emojiItemHighlighted,
+                ]}
+                accessibilityLabel={`emojiPicker.headers.${props.code}`}
+                accessibilityRole="button"
             >
-                <PressableWithoutFeedback
-                    onPress={this.props.onPress}
-                    onHoverIn={() => this.setState({isHighlighted: true})}
-                    onHoverOut={() => this.setState({isHighlighted: false})}
-                    style={({pressed}) => [
-                        StyleUtils.getButtonBackgroundColorStyle(getButtonState(false, pressed)),
-                        styles.categoryShortcutButton,
-                        this.state.isHighlighted && styles.emojiItemHighlighted,
-                    ]}
-                    accessibilityLabel={`emojiPicker.headers.${this.props.code}`}
-                    accessibilityRole="button"
-                >
-                    <Icon
-                        fill={themeColors.icon}
-                        src={this.props.icon}
-                        height={variables.iconSizeNormal}
-                        width={variables.iconSizeNormal}
-                    />
-                </PressableWithoutFeedback>
-            </Tooltip>
-        );
-    }
+                <Icon
+                    fill={themeColors.icon}
+                    src={props.icon}
+                    height={variables.iconSizeNormal}
+                    width={variables.iconSizeNormal}
+                />
+            </PressableWithoutFeedback>
+        </Tooltip>
+    );
 }
 CategoryShortcutButton.propTypes = propTypes;
 

From 9ea1f3fb70b95068ac50d79f4ac6b763a2a6bbda Mon Sep 17 00:00:00 2001
From: AGarciaNY <aldairgarcia360@gmail.com>
Date: Mon, 10 Jul 2023 17:27:47 -0400
Subject: [PATCH 2/3] ran lint and prettier in CategoryShortcutButton

---
 src/components/EmojiPicker/CategoryShortcutButton.js | 9 ++-------
 1 file changed, 2 insertions(+), 7 deletions(-)

diff --git a/src/components/EmojiPicker/CategoryShortcutButton.js b/src/components/EmojiPicker/CategoryShortcutButton.js
index a71788d0ef7c..c97f46ae8acd 100644
--- a/src/components/EmojiPicker/CategoryShortcutButton.js
+++ b/src/components/EmojiPicker/CategoryShortcutButton.js
@@ -25,8 +25,7 @@ const propTypes = {
 };
 
 function CategoryShortcutButton(props) {
-
-    let [isHighlighted, setIsHighlighted] = useState(false);
+    const [isHighlighted, setIsHighlighted] = useState(false);
 
     return (
         <Tooltip
@@ -37,11 +36,7 @@ function CategoryShortcutButton(props) {
                 onPress={props.onPress}
                 onHoverIn={() => setIsHighlighted(true)}
                 onHoverOut={() => setIsHighlighted(false)}
-                style={({ pressed }) => [
-                    StyleUtils.getButtonBackgroundColorStyle(getButtonState(false, pressed)),
-                    styles.categoryShortcutButton,
-                    isHighlighted && styles.emojiItemHighlighted,
-                ]}
+                style={({pressed}) => [StyleUtils.getButtonBackgroundColorStyle(getButtonState(false, pressed)), styles.categoryShortcutButton, isHighlighted && styles.emojiItemHighlighted]}
                 accessibilityLabel={`emojiPicker.headers.${props.code}`}
                 accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON}
             >

From aa5190782df1ccf8b62d54d779309b6a0ff83c99 Mon Sep 17 00:00:00 2001
From: AGarciaNY <aldairgarcia360@gmail.com>
Date: Wed, 12 Jul 2023 11:43:00 -0400
Subject: [PATCH 3/3] Replaced withLocalized with useLocalize and added
 React.memo

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

diff --git a/src/components/EmojiPicker/CategoryShortcutButton.js b/src/components/EmojiPicker/CategoryShortcutButton.js
index c97f46ae8acd..d2056e2c9e2f 100644
--- a/src/components/EmojiPicker/CategoryShortcutButton.js
+++ b/src/components/EmojiPicker/CategoryShortcutButton.js
@@ -2,7 +2,7 @@ import React, {useState} from 'react';
 import PropTypes from 'prop-types';
 import Icon from '../Icon';
 import Tooltip from '../Tooltip';
-import withLocalize, {withLocalizePropTypes} from '../withLocalize';
+import useLocalize from '../../hooks/useLocalize';
 import variables from '../../styles/variables';
 import styles from '../../styles/styles';
 import * as StyleUtils from '../../styles/StyleUtils';
@@ -20,16 +20,15 @@ const propTypes = {
 
     /** The function to call when an emoji is selected */
     onPress: PropTypes.func.isRequired,
-
-    ...withLocalizePropTypes,
 };
 
 function CategoryShortcutButton(props) {
+    const {translate} = useLocalize();
     const [isHighlighted, setIsHighlighted] = useState(false);
 
     return (
         <Tooltip
-            text={props.translate(`emojiPicker.headers.${props.code}`)}
+            text={translate(`emojiPicker.headers.${props.code}`)}
             shiftVertical={-4}
         >
             <PressableWithoutFeedback
@@ -52,4 +51,4 @@ function CategoryShortcutButton(props) {
 }
 CategoryShortcutButton.propTypes = propTypes;
 CategoryShortcutButton.displayName = 'CategoryShortcutButton';
-export default withLocalize(CategoryShortcutButton);
+export default React.memo(CategoryShortcutButton);