[TS migration] Migrate 'LocationErrorMessage' component to TypeScript

src/components/LocationErrorMessage/BaseLocationErrorMessage.js → src/components/LocationErrorMessage/BaseLocationErrorMessage.tsx

@@ -1,4 +1,3 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 import {View} from 'react-native';
 import Icon from '@components/Icon';
@@ -7,29 +6,25 @@ import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeed
 import Text from '@components/Text';
 import TextLink from '@components/TextLink';
 import Tooltip from '@components/Tooltip';
-import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useLocalize from '@hooks/useLocalize';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import colors from '@styles/theme/colors';
 import CONST from '@src/CONST';
-import * as locationErrorMessagePropTypes from './locationErrorMessagePropTypes';
+import LocationErrorMessageProps from './types';
 
-const propTypes = {
+type BaseLocationErrorMessageProps = LocationErrorMessageProps & {
     /** A callback that runs when 'allow location permission' link is pressed */
-    onAllowLocationLinkPress: PropTypes.func.isRequired,
-
-    // eslint-disable-next-line react/forbid-foreign-prop-types
-    ...locationErrorMessagePropTypes.propTypes,
-
-    /* Onyx Props */
-    ...withLocalizePropTypes,
+    onAllowLocationLinkPress: () => void;
 };
 
-function BaseLocationErrorMessage({onClose, onAllowLocationLinkPress, locationErrorCode, translate}) {
+function BaseLocationErrorMessage({onClose, onAllowLocationLinkPress, locationErrorCode}: BaseLocationErrorMessageProps) {
     const theme = useTheme();
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
+    const {translate} = useLocalize();
+
     if (!locationErrorCode) {
         return null;
     }
@@ -81,6 +76,5 @@ function BaseLocationErrorMessage({onClose, onAllowLocationLinkPress, locationEr
 }
 
 BaseLocationErrorMessage.displayName = 'BaseLocationErrorMessage';
-BaseLocationErrorMessage.propTypes = propTypes;
-BaseLocationErrorMessage.defaultProps = locationErrorMessagePropTypes.defaultProps;
-export default withLocalize(BaseLocationErrorMessage);
+
+export default BaseLocationErrorMessage;

src/components/LocationErrorMessage/index.native.js → src/components/LocationErrorMessage/index.native.tsx

@@ -1,14 +1,14 @@
 import React from 'react';
 import {Linking} from 'react-native';
 import BaseLocationErrorMessage from './BaseLocationErrorMessage';
-import * as locationErrorMessagePropTypes from './locationErrorMessagePropTypes';
+import LocationErrorMessageProps from './types';
 
 /** Opens app level settings from the native system settings  */
 const openAppSettings = () => {
     Linking.openSettings();
 };
 
-function LocationErrorMessage(props) {
+function LocationErrorMessage(props: LocationErrorMessageProps) {
     return (
         <BaseLocationErrorMessage
             // eslint-disable-next-line react/jsx-props-no-spreading
@@ -19,6 +19,5 @@ function LocationErrorMessage(props) {
 }
 
 LocationErrorMessage.displayName = 'LocationErrorMessage';
-LocationErrorMessage.propTypes = locationErrorMessagePropTypes.propTypes;
-LocationErrorMessage.defaultProps = locationErrorMessagePropTypes.defaultProps;
+
 export default LocationErrorMessage;

src/components/LocationErrorMessage/index.js → src/components/LocationErrorMessage/index.tsx

@@ -2,14 +2,14 @@ import React from 'react';
 import {Linking} from 'react-native';
 import CONST from '@src/CONST';
 import BaseLocationErrorMessage from './BaseLocationErrorMessage';
-import * as locationErrorMessagePropTypes from './locationErrorMessagePropTypes';
+import LocationErrorMessageProps from './types';
 
 /** Opens expensify help site in a new browser tab */
 const navigateToExpensifyHelpSite = () => {
     Linking.openURL(CONST.NEWHELP_URL);
 };
 
-function LocationErrorMessage(props) {
+function LocationErrorMessage(props: LocationErrorMessageProps) {
     return (
         <BaseLocationErrorMessage
             // eslint-disable-next-line react/jsx-props-no-spreading
@@ -20,6 +20,5 @@ function LocationErrorMessage(props) {
 }
 
 LocationErrorMessage.displayName = 'LocationErrorMessage';
-LocationErrorMessage.propTypes = locationErrorMessagePropTypes.propTypes;
-LocationErrorMessage.defaultProps = locationErrorMessagePropTypes.defaultProps;
+
 export default LocationErrorMessage;

src/components/LocationErrorMessage/locationErrorMessagePropTypes.js → src/components/LocationErrorMessage/types.ts

@@ -1,8 +1,6 @@
-import PropTypes from 'prop-types';
-
-const propTypes = {
+type LocationErrorMessageProps = {
     /** A callback that runs when close icon is pressed */
-    onClose: PropTypes.func.isRequired,
+    onClose: () => void;
 
     /**
      * The location error code from onyx
@@ -11,11 +9,7 @@ const propTypes = {
      * - code 2 = location is unavailable or there is some connection issue
      * - code 3 = location fetch timeout
      */
-    locationErrorCode: PropTypes.oneOf([-1, 1, 2, 3]),
-};
-
-const defaultProps = {
-    locationErrorCode: null,
+    locationErrorCode?: -1 | 1 | 2 | 3;
 };
 
-export {propTypes, defaultProps};
+export default LocationErrorMessageProps;