From ff810533104d4cb05c2f322ec792f535dee70a39 Mon Sep 17 00:00:00 2001 From: Hezekiel Tamire Date: Mon, 25 Dec 2023 13:20:26 +0300 Subject: [PATCH 1/9] migrate BaseLocationErrorMessage to ts --- ...essage.js => BaseLocationErrorMessage.tsx} | 21 ++++++------------- 1 file changed, 6 insertions(+), 15 deletions(-) rename src/components/LocationErrorMessage/{BaseLocationErrorMessage.js => BaseLocationErrorMessage.tsx} (82%) diff --git a/src/components/LocationErrorMessage/BaseLocationErrorMessage.js b/src/components/LocationErrorMessage/BaseLocationErrorMessage.tsx similarity index 82% rename from src/components/LocationErrorMessage/BaseLocationErrorMessage.js rename to src/components/LocationErrorMessage/BaseLocationErrorMessage.tsx index d90783d94ad5..0094613e3a11 100644 --- a/src/components/LocationErrorMessage/BaseLocationErrorMessage.js +++ b/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,26 +6,20 @@ 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 withLocalize, {WithLocalizeProps} from '@components/withLocalize'; 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 LocationErrorMessagePropTypes from './types'; -const propTypes = { +type BaseLocationErrorMessageProps = LocationErrorMessagePropTypes & WithLocalizeProps & { /** 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, translate}: BaseLocationErrorMessageProps) { const theme = useTheme(); const styles = useThemeStyles(); const StyleUtils = useStyleUtils(); @@ -59,7 +52,7 @@ function BaseLocationErrorMessage({onClose, onAllowLocationLinkPress, locationEr ) : ( {translate('location.notFound')} )} - + Date: Mon, 25 Dec 2023 13:20:48 +0300 Subject: [PATCH 2/9] migrate index.js to ts --- .../LocationErrorMessage/{index.js => index.tsx} | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) rename src/components/LocationErrorMessage/{index.js => index.tsx} (64%) diff --git a/src/components/LocationErrorMessage/index.js b/src/components/LocationErrorMessage/index.tsx similarity index 64% rename from src/components/LocationErrorMessage/index.js rename to src/components/LocationErrorMessage/index.tsx index 60fb4489799e..dbb3041eb496 100644 --- a/src/components/LocationErrorMessage/index.js +++ b/src/components/LocationErrorMessage/index.tsx @@ -2,14 +2,15 @@ import React from 'react'; import {Linking} from 'react-native'; import CONST from '@src/CONST'; import BaseLocationErrorMessage from './BaseLocationErrorMessage'; -import * as locationErrorMessagePropTypes from './locationErrorMessagePropTypes'; +import LocationErrorMessagePropTypes from './types'; /** Opens expensify help site in a new browser tab */ -const navigateToExpensifyHelpSite = () => { +const navigateToExpensifyHelpSite = (): void => { Linking.openURL(CONST.NEWHELP_URL); }; -function LocationErrorMessage(props) { +function LocationErrorMessage(props: LocationErrorMessagePropTypes) { + return ( Date: Mon, 25 Dec 2023 13:21:17 +0300 Subject: [PATCH 3/9] migrate index.native.js to ts --- .../{index.native.js => index.native.tsx} | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) rename src/components/LocationErrorMessage/{index.native.js => index.native.tsx} (63%) diff --git a/src/components/LocationErrorMessage/index.native.js b/src/components/LocationErrorMessage/index.native.tsx similarity index 63% rename from src/components/LocationErrorMessage/index.native.js rename to src/components/LocationErrorMessage/index.native.tsx index 467018538b6e..6c4f710c512e 100644 --- a/src/components/LocationErrorMessage/index.native.js +++ b/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 LocationErrorMessagePropTypes from './types'; /** Opens app level settings from the native system settings */ -const openAppSettings = () => { +const openAppSettings = (): void => { Linking.openSettings(); }; -function LocationErrorMessage(props) { +function LocationErrorMessage(props: LocationErrorMessagePropTypes) { return ( Date: Mon, 25 Dec 2023 13:21:35 +0300 Subject: [PATCH 4/9] types.ts --- ...cationErrorMessagePropTypes.js => types.ts} | 18 ++++++------------ 1 file changed, 6 insertions(+), 12 deletions(-) rename src/components/LocationErrorMessage/{locationErrorMessagePropTypes.js => types.ts} (58%) diff --git a/src/components/LocationErrorMessage/locationErrorMessagePropTypes.js b/src/components/LocationErrorMessage/types.ts similarity index 58% rename from src/components/LocationErrorMessage/locationErrorMessagePropTypes.js rename to src/components/LocationErrorMessage/types.ts index 2ec3c5b15df7..764840b247ac 100644 --- a/src/components/LocationErrorMessage/locationErrorMessagePropTypes.js +++ b/src/components/LocationErrorMessage/types.ts @@ -1,9 +1,7 @@ -import PropTypes from 'prop-types'; - -const propTypes = { +type LocationErrorMessagePropTypes = { /** A callback that runs when close icon is pressed */ - onClose: PropTypes.func.isRequired, - + + onClose: () => void; /** * The location error code from onyx * - code -1 = location not supported (web only) @@ -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 LocationErrorMessagePropTypes; \ No newline at end of file From 5d4e63ed3bc39d27b55b51de022f06b59b80224b Mon Sep 17 00:00:00 2001 From: Hezekiel Tamire Date: Tue, 26 Dec 2023 13:32:36 +0300 Subject: [PATCH 5/9] fix: run prettier --- .../LocationErrorMessage/BaseLocationErrorMessage.tsx | 11 ++++++----- src/components/LocationErrorMessage/index.tsx | 3 ++- src/components/LocationErrorMessage/types.ts | 6 +++--- 3 files changed, 11 insertions(+), 9 deletions(-) diff --git a/src/components/LocationErrorMessage/BaseLocationErrorMessage.tsx b/src/components/LocationErrorMessage/BaseLocationErrorMessage.tsx index 0094613e3a11..7375aae676ac 100644 --- a/src/components/LocationErrorMessage/BaseLocationErrorMessage.tsx +++ b/src/components/LocationErrorMessage/BaseLocationErrorMessage.tsx @@ -14,10 +14,11 @@ import colors from '@styles/theme/colors'; import CONST from '@src/CONST'; import LocationErrorMessagePropTypes from './types'; -type BaseLocationErrorMessageProps = LocationErrorMessagePropTypes & WithLocalizeProps & { - /** A callback that runs when 'allow location permission' link is pressed */ - onAllowLocationLinkPress: () => void; -}; +type BaseLocationErrorMessageProps = LocationErrorMessagePropTypes & + WithLocalizeProps & { + /** A callback that runs when 'allow location permission' link is pressed */ + onAllowLocationLinkPress: () => void; + }; function BaseLocationErrorMessage({onClose, onAllowLocationLinkPress, locationErrorCode, translate}: BaseLocationErrorMessageProps) { const theme = useTheme(); @@ -52,7 +53,7 @@ function BaseLocationErrorMessage({onClose, onAllowLocationLinkPress, locationEr ) : ( {translate('location.notFound')} )} - + { }; function LocationErrorMessage(props: LocationErrorMessagePropTypes) { - + console.log('testing ', props); + return ( void; /** * The location error code from onyx @@ -10,6 +10,6 @@ type LocationErrorMessagePropTypes = { * - code 3 = location fetch timeout */ locationErrorCode?: -1 | 1 | 2 | 3; -} +}; -export default LocationErrorMessagePropTypes; \ No newline at end of file +export default LocationErrorMessagePropTypes; From 0b284befd61c99bd5ac81e9cde2fbc16e336e941 Mon Sep 17 00:00:00 2001 From: Hezekiel Tamire Date: Tue, 26 Dec 2023 17:41:51 +0300 Subject: [PATCH 6/9] run prettier --- src/components/LocationErrorMessage/index.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/components/LocationErrorMessage/index.tsx b/src/components/LocationErrorMessage/index.tsx index 7a8a301421b0..48eaf9bb4ba9 100644 --- a/src/components/LocationErrorMessage/index.tsx +++ b/src/components/LocationErrorMessage/index.tsx @@ -10,8 +10,6 @@ const navigateToExpensifyHelpSite = (): void => { }; function LocationErrorMessage(props: LocationErrorMessagePropTypes) { - console.log('testing ', props); - return ( Date: Thu, 28 Dec 2023 21:08:17 +0300 Subject: [PATCH 7/9] run prettier --- .../LocationErrorMessage/BaseLocationErrorMessage.tsx | 5 +++-- src/components/LocationErrorMessage/index.native.tsx | 7 ++++--- src/components/LocationErrorMessage/index.tsx | 7 ++++--- src/components/LocationErrorMessage/types.ts | 5 +++-- 4 files changed, 14 insertions(+), 10 deletions(-) diff --git a/src/components/LocationErrorMessage/BaseLocationErrorMessage.tsx b/src/components/LocationErrorMessage/BaseLocationErrorMessage.tsx index 7375aae676ac..513bab9d32d8 100644 --- a/src/components/LocationErrorMessage/BaseLocationErrorMessage.tsx +++ b/src/components/LocationErrorMessage/BaseLocationErrorMessage.tsx @@ -12,9 +12,9 @@ import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import colors from '@styles/theme/colors'; import CONST from '@src/CONST'; -import LocationErrorMessagePropTypes from './types'; +import LocationErrorMessageProps from './types'; -type BaseLocationErrorMessageProps = LocationErrorMessagePropTypes & +type BaseLocationErrorMessageProps = LocationErrorMessageProps & WithLocalizeProps & { /** A callback that runs when 'allow location permission' link is pressed */ onAllowLocationLinkPress: () => void; @@ -75,4 +75,5 @@ function BaseLocationErrorMessage({onClose, onAllowLocationLinkPress, locationEr } BaseLocationErrorMessage.displayName = 'BaseLocationErrorMessage'; + export default withLocalize(BaseLocationErrorMessage); diff --git a/src/components/LocationErrorMessage/index.native.tsx b/src/components/LocationErrorMessage/index.native.tsx index 6c4f710c512e..3f3813084a47 100644 --- a/src/components/LocationErrorMessage/index.native.tsx +++ b/src/components/LocationErrorMessage/index.native.tsx @@ -1,14 +1,14 @@ import React from 'react'; import {Linking} from 'react-native'; import BaseLocationErrorMessage from './BaseLocationErrorMessage'; -import LocationErrorMessagePropTypes from './types'; +import LocationErrorMessageProps from './types'; /** Opens app level settings from the native system settings */ -const openAppSettings = (): void => { +const openAppSettings = () => { Linking.openSettings(); }; -function LocationErrorMessage(props: LocationErrorMessagePropTypes) { +function LocationErrorMessage(props: LocationErrorMessageProps) { return ( { +const navigateToExpensifyHelpSite = () => { Linking.openURL(CONST.NEWHELP_URL); }; -function LocationErrorMessage(props: LocationErrorMessagePropTypes) { +function LocationErrorMessage(props: LocationErrorMessageProps) { return ( void; + /** * The location error code from onyx * - code -1 = location not supported (web only) @@ -12,4 +13,4 @@ type LocationErrorMessagePropTypes = { locationErrorCode?: -1 | 1 | 2 | 3; }; -export default LocationErrorMessagePropTypes; +export default LocationErrorMessageProps; From 80dde02ad927b3e49fc5124dccf79b976b133e32 Mon Sep 17 00:00:00 2001 From: Hezekiel Tamire <39636266+HezekielT@users.noreply.github.com> Date: Fri, 29 Dec 2023 10:56:43 +0300 Subject: [PATCH 8/9] Update src/components/LocationErrorMessage/types.ts Co-authored-by: VickyStash --- src/components/LocationErrorMessage/types.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/LocationErrorMessage/types.ts b/src/components/LocationErrorMessage/types.ts index e3bf0eb26347..41b71dbc3c69 100644 --- a/src/components/LocationErrorMessage/types.ts +++ b/src/components/LocationErrorMessage/types.ts @@ -1,6 +1,5 @@ type LocationErrorMessageProps = { /** A callback that runs when close icon is pressed */ - onClose: () => void; /** From 1d29f347c9a92a544f8799c2b3eb6803460bd525 Mon Sep 17 00:00:00 2001 From: Hezekiel Tamire Date: Tue, 2 Jan 2024 10:03:39 +0300 Subject: [PATCH 9/9] use useLocalize hook instead of withLocalize --- .../BaseLocationErrorMessage.tsx | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) diff --git a/src/components/LocationErrorMessage/BaseLocationErrorMessage.tsx b/src/components/LocationErrorMessage/BaseLocationErrorMessage.tsx index 513bab9d32d8..ceeb33d5e6bc 100644 --- a/src/components/LocationErrorMessage/BaseLocationErrorMessage.tsx +++ b/src/components/LocationErrorMessage/BaseLocationErrorMessage.tsx @@ -6,7 +6,7 @@ import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeed import Text from '@components/Text'; import TextLink from '@components/TextLink'; import Tooltip from '@components/Tooltip'; -import withLocalize, {WithLocalizeProps} from '@components/withLocalize'; +import useLocalize from '@hooks/useLocalize'; import useStyleUtils from '@hooks/useStyleUtils'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; @@ -14,16 +14,17 @@ import colors from '@styles/theme/colors'; import CONST from '@src/CONST'; import LocationErrorMessageProps from './types'; -type BaseLocationErrorMessageProps = LocationErrorMessageProps & - WithLocalizeProps & { - /** A callback that runs when 'allow location permission' link is pressed */ - onAllowLocationLinkPress: () => void; - }; +type BaseLocationErrorMessageProps = LocationErrorMessageProps & { + /** A callback that runs when 'allow location permission' link is pressed */ + onAllowLocationLinkPress: () => void; +}; -function BaseLocationErrorMessage({onClose, onAllowLocationLinkPress, locationErrorCode, translate}: BaseLocationErrorMessageProps) { +function BaseLocationErrorMessage({onClose, onAllowLocationLinkPress, locationErrorCode}: BaseLocationErrorMessageProps) { const theme = useTheme(); const styles = useThemeStyles(); const StyleUtils = useStyleUtils(); + const {translate} = useLocalize(); + if (!locationErrorCode) { return null; } @@ -76,4 +77,4 @@ function BaseLocationErrorMessage({onClose, onAllowLocationLinkPress, locationEr BaseLocationErrorMessage.displayName = 'BaseLocationErrorMessage'; -export default withLocalize(BaseLocationErrorMessage); +export default BaseLocationErrorMessage;