From 20dea7c2c9567ff9a645880098faf9ae8571d596 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?F=C3=A1bio=20Henriques?= <contact@fabiohenriques.dev>
Date: Tue, 24 Oct 2023 05:26:32 -0300
Subject: [PATCH 1/6] Rename file to TSX

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

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

From 63559ae0a6ff3d98ef179f32b91e8745f3842eca Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?F=C3=A1bio=20Henriques?= <contact@fabiohenriques.dev>
Date: Tue, 24 Oct 2023 06:40:05 -0300
Subject: [PATCH 2/6] Starts migration of BigNumberPad

---
 src/components/BigNumberPad.tsx | 57 +++++++++++++++------------------
 1 file changed, 26 insertions(+), 31 deletions(-)

diff --git a/src/components/BigNumberPad.tsx b/src/components/BigNumberPad.tsx
index 5587808a09fd..aeadce2c3025 100644
--- a/src/components/BigNumberPad.tsx
+++ b/src/components/BigNumberPad.tsx
@@ -1,29 +1,22 @@
 import React, {useState} from 'react';
 import {View} from 'react-native';
-import _ from 'underscore';
-import PropTypes from 'prop-types';
+import useWindowDimensions from '../hooks/useWindowDimensions';
+import ControlSelection from '../libs/ControlSelection';
 import styles from '../styles/styles';
 import Button from './Button';
-import ControlSelection from '../libs/ControlSelection';
-import withLocalize, {withLocalizePropTypes} from './withLocalize';
-import useWindowDimensions from '../hooks/useWindowDimensions';
+import withLocalize from './withLocalize';
 
-const propTypes = {
+type BigNumberPadProps = {
     /** Callback to inform parent modal with key pressed */
-    numberPressed: PropTypes.func.isRequired,
+    numberPressed: (key: string) => void;
 
     /** Callback to inform parent modal whether user is long pressing the "<" (backspace) button */
-    longPressHandlerStateChanged: PropTypes.func,
+    longPressHandlerStateChanged?: (isUserLongPressingBackspace: boolean) => void;
 
     /** Used to locate this view from native classes. */
-    nativeID: PropTypes.string,
+    nativeID?: string;
 
-    ...withLocalizePropTypes,
-};
-
-const defaultProps = {
-    longPressHandlerStateChanged: () => {},
-    nativeID: 'numPadView',
+    // TODO: Add withLocalize props (withLocalizePropTypes)
 };
 
 const padNumbers = [
@@ -33,57 +26,61 @@ const padNumbers = [
     ['.', '0', '<'],
 ];
 
-function BigNumberPad(props) {
-    const [timer, setTimer] = useState(null);
+function BigNumberPad({numberPressed, longPressHandlerStateChanged = () => {}, nativeID = 'numPadView'}: BigNumberPadProps) {
+    const [timer, setTimer] = useState<NodeJS.Timer | null>(null);
     const {isExtraSmallScreenHeight} = useWindowDimensions();
 
     /**
      * Handle long press key on number pad.
      * Only handles the '<' key and starts the continuous input timer.
-     *
-     * @param {String} key
      */
-    const handleLongPress = (key) => {
+    const handleLongPress = (key: string) => {
         if (key !== '<') {
             return;
         }
 
-        props.longPressHandlerStateChanged(true);
+        longPressHandlerStateChanged(true);
 
         const newTimer = setInterval(() => {
-            props.numberPressed(key);
+            numberPressed(key);
         }, 100);
+
         setTimer(newTimer);
     };
 
     return (
         <View
             style={[styles.flexColumn, styles.w100]}
-            nativeID={props.nativeID}
+            nativeID={nativeID}
         >
-            {_.map(padNumbers, (row, rowIndex) => (
+            {padNumbers.map((row, rowIndex) => (
                 <View
+                    // eslint-disable-next-line react/no-array-index-key
                     key={`NumberPadRow-${rowIndex}`}
                     style={[styles.flexRow, styles.mt3]}
                 >
-                    {_.map(row, (column, columnIndex) => {
+                    {row.map((column, columnIndex) => {
                         // Adding margin between buttons except first column to
                         // avoid unccessary space before the first column.
                         const marginLeft = columnIndex > 0 ? styles.ml3 : {};
+
                         return (
                             <Button
                                 key={column}
                                 medium={isExtraSmallScreenHeight}
                                 shouldEnableHapticFeedback
                                 style={[styles.flex1, marginLeft]}
-                                text={column === '<' ? column : props.toLocaleDigit(column)}
+                                text={column === '<' ? column : toLocaleDigit(column)}
                                 onLongPress={() => handleLongPress(column)}
-                                onPress={() => props.numberPressed(column)}
+                                onPress={() => numberPressed(column)}
                                 onPressIn={ControlSelection.block}
                                 onPressOut={() => {
-                                    clearInterval(timer);
+                                    if (timer) {
+                                        clearInterval(timer);
+                                    }
+
                                     ControlSelection.unblock();
-                                    props.longPressHandlerStateChanged(false);
+                                    longPressHandlerStateChanged(false);
                                 }}
                                 onMouseDown={(e) => e.preventDefault()}
                             />
@@ -95,8 +92,6 @@ function BigNumberPad(props) {
     );
 }
 
-BigNumberPad.propTypes = propTypes;
-BigNumberPad.defaultProps = defaultProps;
 BigNumberPad.displayName = 'BigNumberPad';
 
 export default withLocalize(BigNumberPad);

From 11a6afd67e17b7db2031e8e7ae05b1eb58535114 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?F=C3=A1bio=20Henriques?= <contact@fabiohenriques.dev>
Date: Tue, 28 Nov 2023 09:09:23 -0300
Subject: [PATCH 3/6] Fix BigNumberPad

---
 src/components/BigNumberPad.tsx | 27 ++++++++++++---------------
 src/components/Button/index.tsx |  6 +++---
 2 files changed, 15 insertions(+), 18 deletions(-)

diff --git a/src/components/BigNumberPad.tsx b/src/components/BigNumberPad.tsx
index a32d5e710055..c50ff9751458 100644
--- a/src/components/BigNumberPad.tsx
+++ b/src/components/BigNumberPad.tsx
@@ -1,10 +1,10 @@
 import React, {useState} from 'react';
 import {View} from 'react-native';
+import useLocalize from '@hooks/useLocalize';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import ControlSelection from '@libs/ControlSelection';
 import useThemeStyles from '@styles/useThemeStyles';
 import Button from './Button';
-import withLocalize from './withLocalize';
 
 type BigNumberPadProps = {
     /** Callback to inform parent modal with key pressed */
@@ -15,15 +15,8 @@ type BigNumberPadProps = {
 
     /** Used to locate this view from native classes. */
     id?: string;
-
-    // TODO: Add withLocalize props (withLocalizePropTypes)
 };
 
-// const defaultProps = {
-//     longPressHandlerStateChanged: () => {},
-//     id: 'numPadView',
-// };
-
 const padNumbers = [
     ['1', '2', '3'],
     ['4', '5', '6'],
@@ -31,9 +24,11 @@ const padNumbers = [
     ['.', '0', '<'],
 ];
 
-function BigNumberPad(props) {
+function BigNumberPad({numberPressed, longPressHandlerStateChanged, id}: BigNumberPadProps) {
+    const {toLocaleDigit} = useLocalize();
+
     const styles = useThemeStyles();
-    const [timer, setTimer] = useState(null);
+    const [timer, setTimer] = useState<NodeJS.Timer | null>(null);
     const {isExtraSmallScreenHeight} = useWindowDimensions();
 
     /**
@@ -45,7 +40,7 @@ function BigNumberPad(props) {
             return;
         }
 
-        longPressHandlerStateChanged(true);
+        longPressHandlerStateChanged?.(true);
 
         const newTimer = setInterval(() => {
             numberPressed(key);
@@ -57,7 +52,7 @@ function BigNumberPad(props) {
     return (
         <View
             style={[styles.flexColumn, styles.w100]}
-            id={props.id}
+            id={id}
         >
             {padNumbers.map((row, rowIndex) => (
                 <View
@@ -86,9 +81,11 @@ function BigNumberPad(props) {
                                     }
 
                                     ControlSelection.unblock();
-                                    longPressHandlerStateChanged(false);
+                                    longPressHandlerStateChanged?.(false);
+                                }}
+                                onMouseDown={(e) => {
+                                    e.preventDefault();
                                 }}
-                                onMouseDown={(e) => e.preventDefault()}
                             />
                         );
                     })}
@@ -100,4 +97,4 @@ function BigNumberPad(props) {
 
 BigNumberPad.displayName = 'BigNumberPad';
 
-export default withLocalize(BigNumberPad);
+export default BigNumberPad;
diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
index 71bce9777174..01b51a11d58b 100644
--- a/src/components/Button/index.tsx
+++ b/src/components/Button/index.tsx
@@ -65,13 +65,13 @@ type ButtonProps = (ButtonWithText | ChildrenProps) & {
     onLongPress?: (event?: GestureResponderEvent) => void;
 
     /** A function that is called when the button is pressed */
-    onPressIn?: () => void;
+    onPressIn?: (event: GestureResponderEvent) => void;
 
     /** A function that is called when the button is released */
-    onPressOut?: () => void;
+    onPressOut?: (event: GestureResponderEvent) => void;
 
     /** Callback that is called when mousedown is triggered. */
-    onMouseDown?: () => void;
+    onMouseDown?: (e: React.MouseEvent<Element, MouseEvent>) => void;
 
     /** Call the onPress function when Enter key is pressed */
     pressOnEnter?: boolean;

From 8ae903044e84e76209df656c4e56bbb14c6dae47 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?F=C3=A1bio=20Henriques?= <contact@fabiohenriques.dev>
Date: Tue, 28 Nov 2023 09:14:12 -0300
Subject: [PATCH 4/6] Minor fixes

---
 src/components/BigNumberPad.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/BigNumberPad.tsx b/src/components/BigNumberPad.tsx
index c50ff9751458..2d5b46cb25b9 100644
--- a/src/components/BigNumberPad.tsx
+++ b/src/components/BigNumberPad.tsx
@@ -24,7 +24,7 @@ const padNumbers = [
     ['.', '0', '<'],
 ];
 
-function BigNumberPad({numberPressed, longPressHandlerStateChanged, id}: BigNumberPadProps) {
+function BigNumberPad({numberPressed, longPressHandlerStateChanged = () => {}, id = 'numPadView'}: BigNumberPadProps) {
     const {toLocaleDigit} = useLocalize();
 
     const styles = useThemeStyles();
@@ -40,7 +40,7 @@ function BigNumberPad({numberPressed, longPressHandlerStateChanged, id}: BigNumb
             return;
         }
 
-        longPressHandlerStateChanged?.(true);
+        longPressHandlerStateChanged(true);
 
         const newTimer = setInterval(() => {
             numberPressed(key);
@@ -81,7 +81,7 @@ function BigNumberPad({numberPressed, longPressHandlerStateChanged, id}: BigNumb
                                     }
 
                                     ControlSelection.unblock();
-                                    longPressHandlerStateChanged?.(false);
+                                    longPressHandlerStateChanged(false);
                                 }}
                                 onMouseDown={(e) => {
                                     e.preventDefault();

From 6ecf478a1c6f94abdcea025b4adfa361c1e43639 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?F=C3=A1bio=20Henriques?= <contact@fabiohenriques.dev>
Date: Tue, 28 Nov 2023 09:15:26 -0300
Subject: [PATCH 5/6] Make padNumbers const

---
 src/components/BigNumberPad.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/BigNumberPad.tsx b/src/components/BigNumberPad.tsx
index 2d5b46cb25b9..422cf74a2148 100644
--- a/src/components/BigNumberPad.tsx
+++ b/src/components/BigNumberPad.tsx
@@ -22,7 +22,7 @@ const padNumbers = [
     ['4', '5', '6'],
     ['7', '8', '9'],
     ['.', '0', '<'],
-];
+] as const;
 
 function BigNumberPad({numberPressed, longPressHandlerStateChanged = () => {}, id = 'numPadView'}: BigNumberPadProps) {
     const {toLocaleDigit} = useLocalize();

From d17097488795fd7ac14426a2fec85e796638534b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?F=C3=A1bio=20Henriques?= <contact@fabiohenriques.dev>
Date: Wed, 29 Nov 2023 18:00:01 -0300
Subject: [PATCH 6/6] Improvement to avoid using map() index in key prop

---
 src/components/BigNumberPad.tsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/components/BigNumberPad.tsx b/src/components/BigNumberPad.tsx
index 422cf74a2148..812e9e78635b 100644
--- a/src/components/BigNumberPad.tsx
+++ b/src/components/BigNumberPad.tsx
@@ -54,10 +54,9 @@ function BigNumberPad({numberPressed, longPressHandlerStateChanged = () => {}, i
             style={[styles.flexColumn, styles.w100]}
             id={id}
         >
-            {padNumbers.map((row, rowIndex) => (
+            {padNumbers.map((row) => (
                 <View
-                    // eslint-disable-next-line react/no-array-index-key
-                    key={`NumberPadRow-${rowIndex}`}
+                    key={`NumberPadRow-${row[0]}`}
                     style={[styles.flexRow, styles.mt3]}
                 >
                     {row.map((column, columnIndex) => {