From 633606e09b3b7809ae48938b8c853b145e923b95 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?F=C3=A1bio=20Henriques?= <contact@fabiohenriques.dev>
Date: Mon, 13 Nov 2023 06:28:22 -0300
Subject: [PATCH 1/3] Rename file to TS

---
 src/components/{Badge.js => Badge.tsx} | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename src/components/{Badge.js => Badge.tsx} (100%)

diff --git a/src/components/Badge.js b/src/components/Badge.tsx
similarity index 100%
rename from src/components/Badge.js
rename to src/components/Badge.tsx

From fa04a3f7702418dc816397a78ba48c155cf0ac91 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?F=C3=A1bio=20Henriques?= <contact@fabiohenriques.dev>
Date: Mon, 13 Nov 2023 09:33:41 -0300
Subject: [PATCH 2/3] Migrate file to TS

---
 src/components/Badge.tsx | 62 ++++++++++++++++------------------------
 1 file changed, 25 insertions(+), 37 deletions(-)

diff --git a/src/components/Badge.tsx b/src/components/Badge.tsx
index 49b330ae37b2..8a0fea75f99a 100644
--- a/src/components/Badge.tsx
+++ b/src/components/Badge.tsx
@@ -1,79 +1,67 @@
-import PropTypes from 'prop-types';
 import React from 'react';
-import {View} from 'react-native';
+import {GestureResponderEvent, PressableStateCallbackType, StyleProp, TextStyle, View, ViewStyle} from 'react-native';
 import styles from '@styles/styles';
 import * as StyleUtils from '@styles/StyleUtils';
 import CONST from '@src/CONST';
 import PressableWithoutFeedback from './Pressable/PressableWithoutFeedback';
 import Text from './Text';
 
-const propTypes = {
+type BadgeProps = {
     /** Is Success type */
-    success: PropTypes.bool,
+    success?: boolean;
 
     /** Is Error type */
-    error: PropTypes.bool,
+    error?: boolean;
 
     /** Whether badge is clickable */
-    pressable: PropTypes.bool,
+    pressable?: boolean;
 
     /** Text to display in the Badge */
-    text: PropTypes.string.isRequired,
+    text: string;
 
     /** Text to display in the Badge */
-    environment: PropTypes.string,
+    environment?: string;
 
     /** Styles for Badge */
-    // eslint-disable-next-line react/forbid-prop-types
-    badgeStyles: PropTypes.arrayOf(PropTypes.object),
+    badgeStyles?: StyleProp<ViewStyle>;
 
     /** Styles for Badge Text */
-    // eslint-disable-next-line react/forbid-prop-types
-    textStyles: PropTypes.arrayOf(PropTypes.object),
+    textStyles?: StyleProp<TextStyle>;
 
     /** Callback to be called on onPress */
-    onPress: PropTypes.func,
+    onPress: (event?: GestureResponderEvent | KeyboardEvent) => void;
 };
 
-const defaultProps = {
-    success: false,
-    error: false,
-    pressable: false,
-    badgeStyles: [],
-    textStyles: [],
-    onPress: undefined,
-    environment: CONST.ENVIRONMENT.DEV,
-};
+function Badge({success = false, error = false, pressable = false, text, environment = CONST.ENVIRONMENT.DEV, badgeStyles, textStyles, onPress = () => {}}: BadgeProps) {
+    const textColorStyles = success || error ? styles.textWhite : undefined;
+    const Wrapper = pressable ? PressableWithoutFeedback : View;
 
-function Badge(props) {
-    const textStyles = props.success || props.error ? styles.textWhite : undefined;
-    const Wrapper = props.pressable ? PressableWithoutFeedback : View;
-    const wrapperStyles = ({pressed}) => [
+    const wrapperStyles: (state: PressableStateCallbackType) => StyleProp<ViewStyle> = ({pressed}) => [
         styles.badge,
         styles.ml2,
-        StyleUtils.getBadgeColorStyle(props.success, props.error, pressed, props.environment === CONST.ENVIRONMENT.ADHOC),
-        ...props.badgeStyles,
+        StyleUtils.getBadgeColorStyle(success, error, pressed, environment === CONST.ENVIRONMENT.ADHOC),
+        badgeStyles,
     ];
 
     return (
         <Wrapper
-            style={props.pressable ? wrapperStyles : wrapperStyles(false)}
-            onPress={props.onPress}
-            role={props.pressable ? CONST.ACCESSIBILITY_ROLE.BUTTON : CONST.ACCESSIBILITY_ROLE.TEXT}
-            accessibilityLabel={props.pressable ? props.text : undefined}
-            aria-label={!props.pressable ? props.text : undefined}
+            style={pressable ? wrapperStyles : wrapperStyles({focused: false, hovered: false, isDisabled: false, isScreenReaderActive: false, pressed: false})}
+            onPress={onPress}
+            role={pressable ? CONST.ACCESSIBILITY_ROLE.BUTTON : CONST.ACCESSIBILITY_ROLE.TEXT}
+            accessibilityLabel={pressable ? text : undefined}
+            aria-label={!pressable ? text : undefined}
+            accessible={false}
         >
             <Text
-                style={[styles.badgeText, textStyles, ...props.textStyles]}
+                style={[styles.badgeText, textColorStyles, textStyles]}
                 numberOfLines={1}
             >
-                {props.text}
+                {text}
             </Text>
         </Wrapper>
     );
 }
 
 Badge.displayName = 'Badge';
-Badge.propTypes = propTypes;
-Badge.defaultProps = defaultProps;
+
 export default Badge;

From 95d237b608b6bd9b5f50f9b9c221615602bbfaf8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?F=C3=A1bio=20Henriques?= <contact@fabiohenriques.dev>
Date: Mon, 13 Nov 2023 09:51:51 -0300
Subject: [PATCH 3/3] Add useCallback

---
 src/components/Badge.tsx | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/src/components/Badge.tsx b/src/components/Badge.tsx
index 8a0fea75f99a..2ccd41575073 100644
--- a/src/components/Badge.tsx
+++ b/src/components/Badge.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useCallback} from 'react';
 import {GestureResponderEvent, PressableStateCallbackType, StyleProp, TextStyle, View, ViewStyle} from 'react-native';
 import styles from '@styles/styles';
 import * as StyleUtils from '@styles/StyleUtils';
@@ -36,12 +36,10 @@ function Badge({success = false, error = false, pressable = false, text, environ
     const textColorStyles = success || error ? styles.textWhite : undefined;
     const Wrapper = pressable ? PressableWithoutFeedback : View;
 
-    const wrapperStyles: (state: PressableStateCallbackType) => StyleProp<ViewStyle> = ({pressed}) => [
-        styles.badge,
-        styles.ml2,
-        StyleUtils.getBadgeColorStyle(success, error, pressed, environment === CONST.ENVIRONMENT.ADHOC),
-        badgeStyles,
-    ];
+    const wrapperStyles: (state: PressableStateCallbackType) => StyleProp<ViewStyle> = useCallback(
+        ({pressed}) => [styles.badge, styles.ml2, StyleUtils.getBadgeColorStyle(success, error, pressed, environment === CONST.ENVIRONMENT.ADHOC), badgeStyles],
+        [success, error, environment, badgeStyles],
+    );
 
     return (
         <Wrapper