From cf172580712381d205cf2c88e01b152298664039 Mon Sep 17 00:00:00 2001
From: FitseTLT <engfitsum@gmail.com>
Date: Mon, 26 Feb 2024 23:41:11 +0300
Subject: [PATCH 1/7] ts migrate time picker

---
 .../{TimePicker.js => TimePicker.tsx}         | 171 +++++++++---------
 src/components/VideoPlayer/utils.ts           |   3 +-
 2 files changed, 84 insertions(+), 90 deletions(-)
 rename src/components/TimePicker/{TimePicker.js => TimePicker.tsx} (81%)

diff --git a/src/components/TimePicker/TimePicker.js b/src/components/TimePicker/TimePicker.tsx
similarity index 81%
rename from src/components/TimePicker/TimePicker.js
rename to src/components/TimePicker/TimePicker.tsx
index f57f2540dfb3..0a71b27ce220 100644
--- a/src/components/TimePicker/TimePicker.js
+++ b/src/components/TimePicker/TimePicker.tsx
@@ -1,12 +1,12 @@
-import PropTypes from 'prop-types';
 import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
+import type {ForwardedRef} from 'react';
 import {View} from 'react-native';
-import _ from 'underscore';
+import type {GestureResponderEvent, NativeSyntheticEvent} from 'react-native';
+import type {TextInput} from 'react-native-gesture-handler';
 import AmountTextInput from '@components/AmountTextInput';
 import BigNumberPad from '@components/BigNumberPad';
 import Button from '@components/Button';
 import FormHelpMessage from '@components/FormHelpMessage';
-import refPropTypes from '@components/refPropTypes';
 import Text from '@components/Text';
 import useAutoFocusInput from '@hooks/useAutoFocusInput';
 import useKeyboardShortcut from '@hooks/useKeyboardShortcut';
@@ -19,24 +19,20 @@ import * as DeviceCapabilities from '@libs/DeviceCapabilities';
 import CONST from '@src/CONST';
 import setCursorPosition from './setCursorPosition';
 
-const propTypes = {
+type MinHrRefsType = {refHour: TextInput | null; minuteRef: TextInput | null};
+
+type TimePickerProps = {
     /** Refs forwarded to the TextInputWithCurrencySymbol */
-    forwardedRef: refPropTypes,
+    forwardedRef?: ForwardedRef<{refHour: TextInput | null; minuteRef: TextInput | null}>;
 
     /** Default value for the inputs */
-    defaultValue: PropTypes.string,
+    defaultValue?: string;
 
     /** Callback to call when the Save button is pressed  */
-    onSubmit: PropTypes.func.isRequired,
+    onSubmit: (timeString: string) => void;
 
     /** Callback to call when the input changes */
-    onInputChange: PropTypes.func,
-};
-
-const defaultProps = {
-    forwardedRef: null,
-    onInputChange: () => {},
-    defaultValue: '',
+    onInputChange?: (timeString: string) => void;
 };
 
 const AMOUNT_VIEW_ID = 'amountView';
@@ -45,14 +41,14 @@ const NUM_PAD_VIEW_ID = 'numPadView';
 
 /**
  * Replace the sub-string of the given string with the provided value
- * @param {String} originalString - the string that will be modified
- * @param {String} newSubstring - the replacement string
- * @param {Number} from - the start index of the sub-string to replace
- * @param {Number} to - the end index of the sub-string to replace
+ * @param originalString - the string that will be modified
+ * @param newSubstring - the replacement string
+ * @param from - the start index of the sub-string to replace
+ * @param to - the end index of the sub-string to replace
  *
- * @returns {String} - the modified string with the range (from, to) replaced with the provided value
+ * @returns - the modified string with the range (from, to) replaced with the provided value
  */
-function insertAtPosition(originalString, newSubstring, from, to) {
+function insertAtPosition(originalString: string, newSubstring: string, from: number, to: number) {
     // Check for invalid positions
     if (from < 0 || to < 0 || from > originalString.length || to > originalString.length) {
         return originalString;
@@ -72,13 +68,13 @@ function insertAtPosition(originalString, newSubstring, from, to) {
 
 /**
  * Replace the sub-string of the given string with zeros
- * @param {String} originalString - the string that will be modified
- * @param {Number} from - the start index of the sub-string to replace
- * @param {Number} to - the end index of the sub-string to replace
+ * @param originalString - the string that will be modified
+ * @param from - the start index of the sub-string to replace
+ * @param to - the end index of the sub-string to replace
  *
- * @returns {String} - the modified string with the range (from, to) replaced with zeros
+ * @returns - the modified string with the range (from, to) replaced with zeros
  */
-function replaceRangeWithZeros(originalString, from, to) {
+function replaceRangeWithZeros(originalString: string, from: number, to: number) {
     const normalizedFrom = Math.max(from, 0);
     const normalizedTo = Math.min(to, 2);
     const replacement = '0'.repeat(normalizedTo - normalizedFrom);
@@ -87,12 +83,23 @@ function replaceRangeWithZeros(originalString, from, to) {
 
 /**
  * Clear the value under selection of an input (either hours or minutes) by replacing it with zeros
- * @param {String} value - current value of the input
- * @param {Object} selection - current selection of the input
- * @param {Function} setValue - the function that modifies the value of the input
- * @param {Function} setSelection - the function that modifies the selection of the input
+ *
+ * @param value - current value of the input
+ * @param selection - current selection of the input
+ * @param setValue - the function that modifies the value of the input
+ * @param setSelection - the function that modifies the selection of the input
  */
-function clearSelectedValue(value, selection, setValue, setSelection) {
+function clearSelectedValue(
+    value: string,
+    selection: {start: number; end: number},
+    setValue: React.Dispatch<React.SetStateAction<string>>,
+    setSelection: React.Dispatch<
+        React.SetStateAction<{
+            start: number;
+            end: number;
+        }>
+    >,
+) {
     let newValue;
     let newCursorPosition;
 
@@ -109,7 +116,7 @@ function clearSelectedValue(value, selection, setValue, setSelection) {
     setSelection({start: newCursorPosition, end: newCursorPosition});
 }
 
-function TimePicker({forwardedRef, defaultValue, onSubmit, onInputChange}) {
+function TimePicker({forwardedRef, defaultValue = '', onSubmit, onInputChange = () => {}}: TimePickerProps) {
     const {numberFormat, translate} = useLocalize();
     const {isExtraSmallScreenHeight} = useWindowDimensions();
     const styles = useThemeStyles();
@@ -125,8 +132,8 @@ function TimePicker({forwardedRef, defaultValue, onSubmit, onInputChange}) {
     const [amPmValue, setAmPmValue] = useState(() => DateUtils.get12HourTimeObjectFromDate(value).period);
 
     const lastPressedKey = useRef('');
-    const hourInputRef = useRef(null);
-    const minuteInputRef = useRef(null);
+    const hourInputRef = useRef<TextInput | null>(null);
+    const minuteInputRef = useRef<TextInput | null>(null);
 
     const {inputCallbackRef} = useAutoFocusInput();
 
@@ -134,7 +141,7 @@ function TimePicker({forwardedRef, defaultValue, onSubmit, onInputChange}) {
     const focusHourInputOnLastCharacter = useCallback(() => setCursorPosition(2, hourInputRef, setSelectionHour), []);
 
     const validate = useCallback(
-        (time) => {
+        (time: string) => {
             const isValid = DateUtils.isTimeAtLeastOneMinuteInFuture({timeString: time || `${hours}:${minutes} ${amPmValue}`, dateTimeString: defaultValue});
             setError(!isValid);
             return isValid;
@@ -154,10 +161,10 @@ function TimePicker({forwardedRef, defaultValue, onSubmit, onInputChange}) {
 
     // This function receive value from hour input and validate it
     // The valid format is HH(from 00 to 12). If the user input 9, it will be 09. If user try to change 09 to 19 it would skip the first character
-    const handleHourChange = (text) => {
+    const handleHourChange = (text: string) => {
         // Replace spaces with 0 to implement the following digit removal by pressing space
         const trimmedText = text.replace(/ /g, '0');
-        if (_.isEmpty(trimmedText)) {
+        if (!trimmedText) {
             resetHours();
             return;
         }
@@ -179,13 +186,13 @@ function TimePicker({forwardedRef, defaultValue, onSubmit, onInputChange}) {
                 // To support the forward-removal using Delete key
                 newHour = `0${firstDigit}`;
                 newSelection = 1;
-            } else if (firstDigit <= 1) {
+            } else if (Number(firstDigit) <= 1) {
                 /*
                  The first entered digit is 0 or 1.
                  If the first digit is 0, we can safely append the second digit.
                  If the first digit is 1, we must check the second digit to ensure it is not greater than 2, amd replace it with 0 otherwise.
                 */
-                newHour = `${firstDigit}${firstDigit === '1' && secondDigit > 2 ? 0 : secondDigit}`;
+                newHour = `${firstDigit}${firstDigit === '1' && Number(secondDigit) > 2 ? 0 : secondDigit}`;
                 newSelection = 1;
             } else {
                 // The first entered digit is 2-9. We should replace the whole value by prepending 0 to the entered digit.
@@ -210,7 +217,7 @@ function TimePicker({forwardedRef, defaultValue, onSubmit, onInputChange}) {
             // There is an active selection of the second digit
             newHour = trimmedText.substring(0, 2).padEnd(2, '0');
             newSelection = trimmedText.length === 1 ? 1 : 2;
-        } else if (trimmedText.length === 1 && trimmedText <= 1) {
+        } else if (trimmedText.length === 1 && Number(trimmedText) <= 1) {
             /*
              The trimmed text is either 0 or 1.
              We are either replacing hours with a single digit, or removing the last digit.
@@ -224,10 +231,11 @@ function TimePicker({forwardedRef, defaultValue, onSubmit, onInputChange}) {
             newSelection = 2;
         }
 
-        if (newHour > 24) {
+        const newHourNumber = Number(newHour);
+        if (newHourNumber > 24) {
             newHour = hours;
-        } else if (newHour > 12) {
-            newHour = String(newHour - 12).padStart(2, '0');
+        } else if (newHourNumber > 12) {
+            newHour = String(newHourNumber - 12).padStart(2, '0');
             setAmPmValue(CONST.TIME_PERIOD.PM);
         }
 
@@ -242,10 +250,10 @@ function TimePicker({forwardedRef, defaultValue, onSubmit, onInputChange}) {
      This function receives value from the minutes input and validates it.
      The valid format is MM(from 00 to 59). If the user enters 9, it will be prepended to 09. If the user tries to change 09 to 99, it would skip the character
     */
-    const handleMinutesChange = (text) => {
+    const handleMinutesChange = (text: string) => {
         // Replace spaces with 0 to implement the following digit removal by pressing space
         const trimmedText = text.replace(/ /g, '0');
-        if (_.isEmpty(trimmedText)) {
+        if (!trimmedText) {
             resetMinutes();
             return;
         }
@@ -265,7 +273,7 @@ function TimePicker({forwardedRef, defaultValue, onSubmit, onInputChange}) {
                 // To support the forward-removal using Delete key
                 newMinute = `0${firstDigit}`;
                 newSelection = 1;
-            } else if (firstDigit <= 5) {
+            } else if (Number(firstDigit) <= 5) {
                 // The first entered digit is 0-5, we can safely append the second digit.
                 newMinute = `${firstDigit}${trimmedText[2] || 0}`;
                 newSelection = 1;
@@ -292,7 +300,7 @@ function TimePicker({forwardedRef, defaultValue, onSubmit, onInputChange}) {
             // There is an active selection of the second digit
             newMinute = trimmedText.substring(0, 2).padEnd(2, '0');
             newSelection = trimmedText.length === 1 ? 1 : 2;
-        } else if (trimmedText.length === 1 && trimmedText <= 5) {
+        } else if (trimmedText.length === 1 && Number(trimmedText) <= 5) {
             /*
              The trimmed text is from 0 to 5.
              We are either replacing minutes with a single digit, or removing the last digit.
@@ -306,7 +314,7 @@ function TimePicker({forwardedRef, defaultValue, onSubmit, onInputChange}) {
             newSelection = 2;
         }
 
-        if (newMinute > 59) {
+        if (Number(newMinute) > 59) {
             newMinute = minutes;
         }
 
@@ -317,15 +325,13 @@ function TimePicker({forwardedRef, defaultValue, onSubmit, onInputChange}) {
     /**
      * Update amount with number or Backspace pressed for BigNumberPad.
      * Validate new amount with decimal number regex up to 6 digits and 2 decimal digit to enable Next button
-     *
-     * @param {String} key
      */
     const updateAmountNumberPad = useCallback(
-        (key) => {
-            const isHourFocused = hourInputRef.current.isFocused();
-            const isMinuteFocused = minuteInputRef.current.isFocused();
+        (key: string) => {
+            const isHourFocused = hourInputRef.current?.isFocused();
+            const isMinuteFocused = minuteInputRef.current?.isFocused();
             if (!isHourFocused && !isMinuteFocused) {
-                minuteInputRef.current.focus();
+                minuteInputRef.current?.focus();
             }
 
             if (key === '.') {
@@ -370,13 +376,12 @@ function TimePicker({forwardedRef, defaultValue, onSubmit, onInputChange}) {
     );
 
     const arrowLeftCallback = useCallback(
-        (e) => {
-            const isMinuteFocused = minuteInputRef.current.isFocused();
+        (e?: GestureResponderEvent | KeyboardEvent) => {
+            const isMinuteFocused = minuteInputRef.current?.isFocused();
             if (isMinuteFocused && selectionMinute.start === 0) {
-                if (e) {
-                    // Check e to be truthy to avoid crashing on Android (e is undefined there)
-                    e.preventDefault();
-                }
+                // Check e to be truthy to avoid crashing on Android (e is undefined there)
+                e?.preventDefault();
+
                 focusHourInputOnLastCharacter();
             }
         },
@@ -384,14 +389,12 @@ function TimePicker({forwardedRef, defaultValue, onSubmit, onInputChange}) {
         [selectionHour, selectionMinute],
     );
     const arrowRightCallback = useCallback(
-        (e) => {
-            const isHourFocused = hourInputRef.current.isFocused();
+        (e?: GestureResponderEvent | KeyboardEvent) => {
+            const isHourFocused = hourInputRef.current?.isFocused();
 
             if (isHourFocused && selectionHour.start === 2) {
-                if (e) {
-                    // Check e to be truthy to avoid crashing on Android (e is undefined there)
-                    e.preventDefault();
-                }
+                // Check e to be truthy to avoid crashing on Android (e is undefined there)
+                e?.preventDefault();
                 focusMinuteInputOnFirstCharacter();
             }
         },
@@ -403,8 +406,8 @@ function TimePicker({forwardedRef, defaultValue, onSubmit, onInputChange}) {
     useKeyboardShortcut(CONST.KEYBOARD_SHORTCUTS.ARROW_RIGHT, arrowRightCallback, arrowConfig);
 
     const handleFocusOnBackspace = useCallback(
-        (e) => {
-            if (selectionMinute.start !== 0 || selectionMinute.end !== 0 || e.key !== 'Backspace') {
+        (e: NativeSyntheticEvent<KeyboardEvent>) => {
+            if (selectionMinute.start !== 0 || selectionMinute.end !== 0 || e.nativeEvent.key !== 'Backspace') {
                 return;
             }
             e.preventDefault();
@@ -422,7 +425,7 @@ function TimePicker({forwardedRef, defaultValue, onSubmit, onInputChange}) {
         }
         return (
             <BigNumberPad
-                nativeID={NUM_PAD_VIEW_ID}
+                id={NUM_PAD_VIEW_ID}
                 numberPressed={updateAmountNumberPad}
                 isLongPressDisabled
             />
@@ -452,21 +455,19 @@ function TimePicker({forwardedRef, defaultValue, onSubmit, onInputChange}) {
                 >
                     <AmountTextInput
                         placeholder={numberFormat(0)}
-                        maxLength={2}
                         formattedAmount={hours}
                         onKeyPress={(e) => {
                             lastPressedKey.current = e.nativeEvent.key;
                         }}
                         onChangeAmount={handleHourChange}
-                        role={CONST.ACCESSIBILITY_ROLE.TEXT}
                         ref={(ref) => {
                             if (typeof forwardedRef === 'function') {
-                                forwardedRef({refHour: ref, minuteRef: minuteInputRef.current});
-                            } else if (forwardedRef && _.has(forwardedRef, 'current')) {
+                                forwardedRef({refHour: ref as TextInput | null, minuteRef: minuteInputRef.current});
+                            } else if (forwardedRef && 'current' in forwardedRef) {
                                 // eslint-disable-next-line no-param-reassign
-                                forwardedRef.current = {hourRef: ref, minuteRef: minuteInputRef.current};
+                                forwardedRef.current = {refHour: ref as TextInput | null, minuteRef: minuteInputRef.current};
                             }
-                            hourInputRef.current = ref;
+                            hourInputRef.current = ref as TextInput | null;
                         }}
                         onSelectionChange={(e) => {
                             setSelectionHour(e.nativeEvent.selection);
@@ -474,28 +475,25 @@ function TimePicker({forwardedRef, defaultValue, onSubmit, onInputChange}) {
                         style={styles.timePickerInput}
                         touchableInputWrapperStyle={styles.timePickerHeight100}
                         selection={selectionHour}
-                        showSoftInputOnFocus={false}
                     />
                     <Text style={styles.timePickerSemiDot}>{CONST.COLON}</Text>
                     <AmountTextInput
                         placeholder={numberFormat(0)}
-                        maxLength={2}
                         formattedAmount={minutes}
                         onKeyPress={(e) => {
                             lastPressedKey.current = e.nativeEvent.key;
                             handleFocusOnBackspace(e);
                         }}
                         onChangeAmount={handleMinutesChange}
-                        role={CONST.ACCESSIBILITY_ROLE.TEXT}
                         ref={(ref) => {
                             if (typeof forwardedRef === 'function') {
-                                forwardedRef({refHour: hourInputRef.current, minuteRef: ref});
-                            } else if (forwardedRef && _.has(forwardedRef, 'current')) {
+                                forwardedRef({refHour: hourInputRef.current, minuteRef: ref as TextInput | null});
+                            } else if (forwardedRef && 'current' in forwardedRef) {
                                 // eslint-disable-next-line no-param-reassign
-                                minuteInputRef.current = {hourRef: hourInputRef.current, minuteInputRef: ref};
+                                forwardedRef.current = {refHour: hourInputRef.current, minuteRef: ref as TextInput | null};
                             }
-                            minuteInputRef.current = ref;
-                            inputCallbackRef(ref);
+                            minuteInputRef.current = ref as TextInput | null;
+                            inputCallbackRef(ref as TextInput | null);
                         }}
                         onSelectionChange={(e) => {
                             setSelectionMinute(e.nativeEvent.selection);
@@ -503,7 +501,6 @@ function TimePicker({forwardedRef, defaultValue, onSubmit, onInputChange}) {
                         style={styles.timePickerInput}
                         touchableInputWrapperStyle={styles.timePickerHeight100}
                         selection={selectionMinute}
-                        showSoftInputOnFocus={false}
                     />
                 </View>
                 <View style={styles.timePickerSwitcherContainer}>
@@ -521,7 +518,7 @@ function TimePicker({forwardedRef, defaultValue, onSubmit, onInputChange}) {
                     />
                     <Button
                         shouldEnableHapticFeedback
-                        innerStyles={[...styleForPM, styles.ml1]}
+                        innerStyles={[styleForPM, styles.ml1]}
                         medium={isExtraSmallScreenHeight}
                         text={translate('common.pm')}
                         onLongPress={() => {}}
@@ -560,11 +557,9 @@ function TimePicker({forwardedRef, defaultValue, onSubmit, onInputChange}) {
     );
 }
 
-TimePicker.propTypes = propTypes;
-TimePicker.defaultProps = defaultProps;
 TimePicker.displayName = 'TimePicker';
 
-const TimePickerWithRef = React.forwardRef((props, ref) => (
+const TimePickerWithRef = React.forwardRef((props: Omit<TimePickerProps, 'forwardedRef'>, ref: ForwardedRef<MinHrRefsType>) => (
     <TimePicker
         // eslint-disable-next-line react/jsx-props-no-spreading
         {...props}
@@ -572,6 +567,4 @@ const TimePickerWithRef = React.forwardRef((props, ref) => (
     />
 ));
 
-TimePickerWithRef.displayName = 'TimePickerWithRef';
-
 export default TimePickerWithRef;
diff --git a/src/components/VideoPlayer/utils.ts b/src/components/VideoPlayer/utils.ts
index 57f5422d0ce5..660c6be23f72 100644
--- a/src/components/VideoPlayer/utils.ts
+++ b/src/components/VideoPlayer/utils.ts
@@ -3,7 +3,8 @@ import {format} from 'date-fns';
 // Converts milliseconds to 'minutes:seconds' format
 const convertMillisecondsToTime = (milliseconds: number) => {
     const date = new Date(milliseconds);
-    return format(date, 'mm:ss');
+    return format(date, 'mm:ss', {locale: {}});
+    Locale;
 };
 
 export default convertMillisecondsToTime;

From fe9e2cf3811d0bd13e0cbb064b74ee138005a421 Mon Sep 17 00:00:00 2001
From: FitseTLT <engfitsum@gmail.com>
Date: Mon, 26 Feb 2024 23:42:15 +0300
Subject: [PATCH 2/7] undo unnecessary change

---
 src/components/VideoPlayer/utils.ts | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/VideoPlayer/utils.ts b/src/components/VideoPlayer/utils.ts
index 660c6be23f72..57f5422d0ce5 100644
--- a/src/components/VideoPlayer/utils.ts
+++ b/src/components/VideoPlayer/utils.ts
@@ -3,8 +3,7 @@ import {format} from 'date-fns';
 // Converts milliseconds to 'minutes:seconds' format
 const convertMillisecondsToTime = (milliseconds: number) => {
     const date = new Date(milliseconds);
-    return format(date, 'mm:ss', {locale: {}});
-    Locale;
+    return format(date, 'mm:ss');
 };
 
 export default convertMillisecondsToTime;

From f0e1293d857bac29fc91d7b1c52f4320c6cf917e Mon Sep 17 00:00:00 2001
From: FitseTLT <engfitsum@gmail.com>
Date: Tue, 27 Feb 2024 22:07:42 +0300
Subject: [PATCH 3/7] fix type naming

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

diff --git a/src/components/TimePicker/TimePicker.tsx b/src/components/TimePicker/TimePicker.tsx
index 0a71b27ce220..8a648a9877a1 100644
--- a/src/components/TimePicker/TimePicker.tsx
+++ b/src/components/TimePicker/TimePicker.tsx
@@ -19,11 +19,11 @@ import * as DeviceCapabilities from '@libs/DeviceCapabilities';
 import CONST from '@src/CONST';
 import setCursorPosition from './setCursorPosition';
 
-type MinHrRefsType = {refHour: TextInput | null; minuteRef: TextInput | null};
+type MinHrRefs = {refHour: TextInput | null; minuteRef: TextInput | null};
 
 type TimePickerProps = {
     /** Refs forwarded to the TextInputWithCurrencySymbol */
-    forwardedRef?: ForwardedRef<{refHour: TextInput | null; minuteRef: TextInput | null}>;
+    forwardedRef?: ForwardedRef<MinHrRefs>;
 
     /** Default value for the inputs */
     defaultValue?: string;
@@ -559,7 +559,7 @@ function TimePicker({forwardedRef, defaultValue = '', onSubmit, onInputChange =
 
 TimePicker.displayName = 'TimePicker';
 
-const TimePickerWithRef = React.forwardRef((props: Omit<TimePickerProps, 'forwardedRef'>, ref: ForwardedRef<MinHrRefsType>) => (
+const TimePickerWithRef = React.forwardRef((props: Omit<TimePickerProps, 'forwardedRef'>, ref: ForwardedRef<MinHrRefs>) => (
     <TimePicker
         // eslint-disable-next-line react/jsx-props-no-spreading
         {...props}

From 7ab7c95f0e11455a01797ee20f1f7dbc8f359746 Mon Sep 17 00:00:00 2001
From: FitseTLT <engfitsum@gmail.com>
Date: Fri, 1 Mar 2024 23:51:05 +0300
Subject: [PATCH 4/7] fix based on comments

---
 src/components/TimePicker/TimePicker.tsx | 26 ++++++++----------------
 1 file changed, 8 insertions(+), 18 deletions(-)

diff --git a/src/components/TimePicker/TimePicker.tsx b/src/components/TimePicker/TimePicker.tsx
index 8a648a9877a1..540e271384da 100644
--- a/src/components/TimePicker/TimePicker.tsx
+++ b/src/components/TimePicker/TimePicker.tsx
@@ -19,7 +19,7 @@ import * as DeviceCapabilities from '@libs/DeviceCapabilities';
 import CONST from '@src/CONST';
 import setCursorPosition from './setCursorPosition';
 
-type MinHrRefs = {refHour: TextInput | null; minuteRef: TextInput | null};
+type MinHrRefs = {hourRef: TextInput | null; minuteRef: TextInput | null};
 
 type TimePickerProps = {
     /** Refs forwarded to the TextInputWithCurrencySymbol */
@@ -48,7 +48,7 @@ const NUM_PAD_VIEW_ID = 'numPadView';
  *
  * @returns - the modified string with the range (from, to) replaced with the provided value
  */
-function insertAtPosition(originalString: string, newSubstring: string, from: number, to: number) {
+function insertAtPosition(originalString: string, newSubstring: string, from: number, to: number): string {
     // Check for invalid positions
     if (from < 0 || to < 0 || from > originalString.length || to > originalString.length) {
         return originalString;
@@ -74,7 +74,7 @@ function insertAtPosition(originalString: string, newSubstring: string, from: nu
  *
  * @returns - the modified string with the range (from, to) replaced with zeros
  */
-function replaceRangeWithZeros(originalString: string, from: number, to: number) {
+function replaceRangeWithZeros(originalString: string, from: number, to: number): string {
     const normalizedFrom = Math.max(from, 0);
     const normalizedTo = Math.min(to, 2);
     const replacement = '0'.repeat(normalizedTo - normalizedFrom);
@@ -89,17 +89,7 @@ function replaceRangeWithZeros(originalString: string, from: number, to: number)
  * @param setValue - the function that modifies the value of the input
  * @param setSelection - the function that modifies the selection of the input
  */
-function clearSelectedValue(
-    value: string,
-    selection: {start: number; end: number},
-    setValue: React.Dispatch<React.SetStateAction<string>>,
-    setSelection: React.Dispatch<
-        React.SetStateAction<{
-            start: number;
-            end: number;
-        }>
-    >,
-) {
+function clearSelectedValue(value: string, selection: {start: number; end: number}, setValue: (value: string) => void, setSelection: (value: {start: number; end: number}) => void) {
     let newValue;
     let newCursorPosition;
 
@@ -462,10 +452,10 @@ function TimePicker({forwardedRef, defaultValue = '', onSubmit, onInputChange =
                         onChangeAmount={handleHourChange}
                         ref={(ref) => {
                             if (typeof forwardedRef === 'function') {
-                                forwardedRef({refHour: ref as TextInput | null, minuteRef: minuteInputRef.current});
+                                forwardedRef({hourRef: ref as TextInput | null, minuteRef: minuteInputRef.current});
                             } else if (forwardedRef && 'current' in forwardedRef) {
                                 // eslint-disable-next-line no-param-reassign
-                                forwardedRef.current = {refHour: ref as TextInput | null, minuteRef: minuteInputRef.current};
+                                forwardedRef.current = {hourRef: ref as TextInput | null, minuteRef: minuteInputRef.current};
                             }
                             hourInputRef.current = ref as TextInput | null;
                         }}
@@ -487,10 +477,10 @@ function TimePicker({forwardedRef, defaultValue = '', onSubmit, onInputChange =
                         onChangeAmount={handleMinutesChange}
                         ref={(ref) => {
                             if (typeof forwardedRef === 'function') {
-                                forwardedRef({refHour: hourInputRef.current, minuteRef: ref as TextInput | null});
+                                forwardedRef({hourRef: hourInputRef.current, minuteRef: ref as TextInput | null});
                             } else if (forwardedRef && 'current' in forwardedRef) {
                                 // eslint-disable-next-line no-param-reassign
-                                forwardedRef.current = {refHour: hourInputRef.current, minuteRef: ref as TextInput | null};
+                                forwardedRef.current = {hourRef: hourInputRef.current, minuteRef: ref as TextInput | null};
                             }
                             minuteInputRef.current = ref as TextInput | null;
                             inputCallbackRef(ref as TextInput | null);

From 5aaf9b6ac82b0b07cceaf3073db8f13391170f37 Mon Sep 17 00:00:00 2001
From: FitseTLT <engfitsum@gmail.com>
Date: Sat, 2 Mar 2024 00:10:19 +0300
Subject: [PATCH 5/7] removed unnecessary component

---
 src/components/TimePicker/TimePicker.tsx | 41 +++++++++---------------
 1 file changed, 15 insertions(+), 26 deletions(-)

diff --git a/src/components/TimePicker/TimePicker.tsx b/src/components/TimePicker/TimePicker.tsx
index 540e271384da..c4ce301b2c80 100644
--- a/src/components/TimePicker/TimePicker.tsx
+++ b/src/components/TimePicker/TimePicker.tsx
@@ -22,9 +22,6 @@ import setCursorPosition from './setCursorPosition';
 type MinHrRefs = {hourRef: TextInput | null; minuteRef: TextInput | null};
 
 type TimePickerProps = {
-    /** Refs forwarded to the TextInputWithCurrencySymbol */
-    forwardedRef?: ForwardedRef<MinHrRefs>;
-
     /** Default value for the inputs */
     defaultValue?: string;
 
@@ -106,7 +103,7 @@ function clearSelectedValue(value: string, selection: {start: number; end: numbe
     setSelection({start: newCursorPosition, end: newCursorPosition});
 }
 
-function TimePicker({forwardedRef, defaultValue = '', onSubmit, onInputChange = () => {}}: TimePickerProps) {
+function TimePicker({defaultValue = '', onSubmit, onInputChange = () => {}}: TimePickerProps, ref: ForwardedRef<MinHrRefs>) {
     const {numberFormat, translate} = useLocalize();
     const {isExtraSmallScreenHeight} = useWindowDimensions();
     const styles = useThemeStyles();
@@ -450,14 +447,14 @@ function TimePicker({forwardedRef, defaultValue = '', onSubmit, onInputChange =
                             lastPressedKey.current = e.nativeEvent.key;
                         }}
                         onChangeAmount={handleHourChange}
-                        ref={(ref) => {
-                            if (typeof forwardedRef === 'function') {
-                                forwardedRef({hourRef: ref as TextInput | null, minuteRef: minuteInputRef.current});
-                            } else if (forwardedRef && 'current' in forwardedRef) {
+                        ref={(tempRef) => {
+                            if (typeof ref === 'function') {
+                                ref({hourRef: tempRef as TextInput | null, minuteRef: minuteInputRef.current});
+                            } else if (ref && 'current' in ref) {
                                 // eslint-disable-next-line no-param-reassign
-                                forwardedRef.current = {hourRef: ref as TextInput | null, minuteRef: minuteInputRef.current};
+                                ref.current = {hourRef: tempRef as TextInput | null, minuteRef: minuteInputRef.current};
                             }
-                            hourInputRef.current = ref as TextInput | null;
+                            hourInputRef.current = tempRef as TextInput | null;
                         }}
                         onSelectionChange={(e) => {
                             setSelectionHour(e.nativeEvent.selection);
@@ -475,15 +472,15 @@ function TimePicker({forwardedRef, defaultValue = '', onSubmit, onInputChange =
                             handleFocusOnBackspace(e);
                         }}
                         onChangeAmount={handleMinutesChange}
-                        ref={(ref) => {
-                            if (typeof forwardedRef === 'function') {
-                                forwardedRef({hourRef: hourInputRef.current, minuteRef: ref as TextInput | null});
-                            } else if (forwardedRef && 'current' in forwardedRef) {
+                        ref={(tempRef) => {
+                            if (typeof ref === 'function') {
+                                ref({hourRef: hourInputRef.current, minuteRef: tempRef as TextInput | null});
+                            } else if (ref && 'current' in ref) {
                                 // eslint-disable-next-line no-param-reassign
-                                forwardedRef.current = {hourRef: hourInputRef.current, minuteRef: ref as TextInput | null};
+                                ref.current = {hourRef: hourInputRef.current, minuteRef: tempRef as TextInput | null};
                             }
-                            minuteInputRef.current = ref as TextInput | null;
-                            inputCallbackRef(ref as TextInput | null);
+                            minuteInputRef.current = tempRef as TextInput | null;
+                            inputCallbackRef(tempRef as TextInput | null);
                         }}
                         onSelectionChange={(e) => {
                             setSelectionMinute(e.nativeEvent.selection);
@@ -549,12 +546,4 @@ function TimePicker({forwardedRef, defaultValue = '', onSubmit, onInputChange =
 
 TimePicker.displayName = 'TimePicker';
 
-const TimePickerWithRef = React.forwardRef((props: Omit<TimePickerProps, 'forwardedRef'>, ref: ForwardedRef<MinHrRefs>) => (
-    <TimePicker
-        // eslint-disable-next-line react/jsx-props-no-spreading
-        {...props}
-        forwardedRef={ref}
-    />
-));
-
-export default TimePickerWithRef;
+export default React.forwardRef(TimePicker);

From 0da3b1654b88577e112c870ebbdc8426deaa810b Mon Sep 17 00:00:00 2001
From: FitseTLT <engfitsum@gmail.com>
Date: Mon, 4 Mar 2024 15:25:44 +0300
Subject: [PATCH 6/7] changed variable name

---
 src/components/TimePicker/TimePicker.tsx | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/components/TimePicker/TimePicker.tsx b/src/components/TimePicker/TimePicker.tsx
index c4ce301b2c80..a758a17bf0aa 100644
--- a/src/components/TimePicker/TimePicker.tsx
+++ b/src/components/TimePicker/TimePicker.tsx
@@ -447,14 +447,14 @@ function TimePicker({defaultValue = '', onSubmit, onInputChange = () => {}}: Tim
                             lastPressedKey.current = e.nativeEvent.key;
                         }}
                         onChangeAmount={handleHourChange}
-                        ref={(tempRef) => {
+                        ref={(textInputRef) => {
                             if (typeof ref === 'function') {
-                                ref({hourRef: tempRef as TextInput | null, minuteRef: minuteInputRef.current});
+                                ref({hourRef: textInputRef as TextInput | null, minuteRef: minuteInputRef.current});
                             } else if (ref && 'current' in ref) {
                                 // eslint-disable-next-line no-param-reassign
-                                ref.current = {hourRef: tempRef as TextInput | null, minuteRef: minuteInputRef.current};
+                                ref.current = {hourRef: textInputRef as TextInput | null, minuteRef: minuteInputRef.current};
                             }
-                            hourInputRef.current = tempRef as TextInput | null;
+                            hourInputRef.current = textInputRef as TextInput | null;
                         }}
                         onSelectionChange={(e) => {
                             setSelectionHour(e.nativeEvent.selection);
@@ -472,15 +472,15 @@ function TimePicker({defaultValue = '', onSubmit, onInputChange = () => {}}: Tim
                             handleFocusOnBackspace(e);
                         }}
                         onChangeAmount={handleMinutesChange}
-                        ref={(tempRef) => {
+                        ref={(textInputRef) => {
                             if (typeof ref === 'function') {
-                                ref({hourRef: hourInputRef.current, minuteRef: tempRef as TextInput | null});
+                                ref({hourRef: hourInputRef.current, minuteRef: textInputRef as TextInput | null});
                             } else if (ref && 'current' in ref) {
                                 // eslint-disable-next-line no-param-reassign
-                                ref.current = {hourRef: hourInputRef.current, minuteRef: tempRef as TextInput | null};
+                                ref.current = {hourRef: hourInputRef.current, minuteRef: textInputRef as TextInput | null};
                             }
-                            minuteInputRef.current = tempRef as TextInput | null;
-                            inputCallbackRef(tempRef as TextInput | null);
+                            minuteInputRef.current = textInputRef as TextInput | null;
+                            inputCallbackRef(textInputRef as TextInput | null);
                         }}
                         onSelectionChange={(e) => {
                             setSelectionMinute(e.nativeEvent.selection);

From a129954cac8a4a9ba921d5a4db398cee9605892c Mon Sep 17 00:00:00 2001
From: FitseTLT <engfitsum@gmail.com>
Date: Sat, 23 Mar 2024 14:21:14 +0300
Subject: [PATCH 7/7] addressed comments

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

diff --git a/src/components/TimePicker/TimePicker.tsx b/src/components/TimePicker/TimePicker.tsx
index 90a5a06b1d18..17cd93db432b 100644
--- a/src/components/TimePicker/TimePicker.tsx
+++ b/src/components/TimePicker/TimePicker.tsx
@@ -19,7 +19,7 @@ import * as DeviceCapabilities from '@libs/DeviceCapabilities';
 import CONST from '@src/CONST';
 import setCursorPosition from './setCursorPosition';
 
-type MinHrRefs = {hourRef: TextInput | null; minuteRef: TextInput | null};
+type MinuteHourRefs = {hourRef: TextInput | null; minuteRef: TextInput | null};
 
 type TimePickerProps = {
     /** Default value for the inputs */
@@ -103,7 +103,7 @@ function clearSelectedValue(value: string, selection: {start: number; end: numbe
     setSelection({start: newCursorPosition, end: newCursorPosition});
 }
 
-function TimePicker({defaultValue = '', onSubmit, onInputChange = () => {}}: TimePickerProps, ref: ForwardedRef<MinHrRefs>) {
+function TimePicker({defaultValue = '', onSubmit, onInputChange = () => {}}: TimePickerProps, ref: ForwardedRef<MinuteHourRefs>) {
     const {numberFormat, translate} = useLocalize();
     const {isExtraSmallScreenHeight} = useWindowDimensions();
     const styles = useThemeStyles();
@@ -368,7 +368,6 @@ function TimePicker({defaultValue = '', onSubmit, onInputChange = () => {}}: Tim
             if (isMinuteFocused && selectionMinute.start === 0) {
                 // Check e to be truthy to avoid crashing on Android (e is undefined there)
                 e?.preventDefault();
-
                 focusHourInputOnLastCharacter();
             }
         },
