Merge pull request Expensify#34454 from callstack-internal/pac-guerre…

…iro/refactor/migrate-countryselector-to-typescript

[TS migration] Migrate 'CountrySelector.js' component to TypeScript

src/CONST.ts

@@ -3133,4 +3133,8 @@ const CONST = {
     MINI_CONTEXT_MENU_MAX_ITEMS: 4,
 } as const;
 
+type Country = keyof typeof CONST.ALL_COUNTRIES;
+
+export type {Country};
+
 export default CONST;

src/components/CountrySelector.js → src/components/CountrySelector.tsx

@@ -1,39 +1,30 @@
-import PropTypes from 'prop-types';
-import React, {useEffect} from 'react';
+import React, {forwardRef, useEffect} from 'react';
+import type {ForwardedRef} from 'react';
 import {View} from 'react-native';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import Navigation from '@libs/Navigation/Navigation';
+import type {Country} from '@src/CONST';
 import ROUTES from '@src/ROUTES';
 import FormHelpMessage from './FormHelpMessage';
 import MenuItemWithTopDescription from './MenuItemWithTopDescription';
-import refPropTypes from './refPropTypes';
 
-const propTypes = {
+type CountrySelectorProps = {
     /** Form error text. e.g when no country is selected */
-    errorText: PropTypes.string,
+    errorText?: string;
 
     /** Callback called when the country changes. */
-    onInputChange: PropTypes.func.isRequired,
+    onInputChange: (value?: string) => void;
 
     /** Current selected country  */
-    value: PropTypes.string,
+    value?: Country;
 
     /** inputID used by the Form component */
     // eslint-disable-next-line react/no-unused-prop-types
-    inputID: PropTypes.string.isRequired,
-
-    /** React ref being forwarded to the MenuItemWithTopDescription */
-    forwardedRef: refPropTypes,
-};
-
-const defaultProps = {
-    errorText: '',
-    value: undefined,
-    forwardedRef: () => {},
+    inputID: string;
 };
 
-function CountrySelector({errorText, value: countryCode, onInputChange, forwardedRef}) {
+function CountrySelector({errorText = '', value: countryCode, onInputChange}: CountrySelectorProps, ref: ForwardedRef<View>) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
 
@@ -51,12 +42,12 @@ function CountrySelector({errorText, value: countryCode, onInputChange, forwarde
             <MenuItemWithTopDescription
                 shouldShowRightIcon
                 title={title}
-                ref={forwardedRef}
+                ref={ref}
                 descriptionTextStyle={countryTitleDescStyle}
                 description={translate('common.country')}
                 onPress={() => {
                     const activeRoute = Navigation.getActiveRouteWithoutParams();
-                    Navigation.navigate(ROUTES.SETTINGS_PERSONAL_DETAILS_ADDRESS_COUNTRY.getRoute(countryCode, activeRoute));
+                    Navigation.navigate(ROUTES.SETTINGS_PERSONAL_DETAILS_ADDRESS_COUNTRY.getRoute(countryCode ?? '', activeRoute));
                 }}
             />
             <View style={styles.ml5}>
@@ -66,18 +57,6 @@ function CountrySelector({errorText, value: countryCode, onInputChange, forwarde
     );
 }
 
-CountrySelector.propTypes = propTypes;
-CountrySelector.defaultProps = defaultProps;
 CountrySelector.displayName = 'CountrySelector';
 
-const CountrySelectorWithRef = React.forwardRef((props, ref) => (
-    <CountrySelector
-        // eslint-disable-next-line react/jsx-props-no-spreading
-        {...props}
-        forwardedRef={ref}
-    />
-));
-
-CountrySelectorWithRef.displayName = 'CountrySelectorWithRef';
-
-export default CountrySelectorWithRef;
+export default forwardRef(CountrySelector);

src/languages/en.ts

@@ -1,6 +1,7 @@
 import {CONST as COMMON_CONST} from 'expensify-common/lib/CONST';
 import Str from 'expensify-common/lib/str';
 import CONST from '@src/CONST';
+import type {Country} from '@src/CONST';
 import type {
     AddressLineParams,
     AlreadySignedInParams,
@@ -106,7 +107,7 @@ type StateValue = {
 
 type States = Record<keyof typeof COMMON_CONST.STATES, StateValue>;
 
-type AllCountries = Record<keyof typeof CONST.ALL_COUNTRIES, string>;
+type AllCountries = Record<Country, string>;
 
 /* eslint-disable max-len */
 export default {