diff --git a/src/pages/settings/AboutPage/AboutPage.js b/src/pages/settings/AboutPage/AboutPage.tsx similarity index 73% rename from src/pages/settings/AboutPage/AboutPage.js rename to src/pages/settings/AboutPage/AboutPage.tsx index a460c95cdfe6..e6211e78ade1 100644 --- a/src/pages/settings/AboutPage/AboutPage.js +++ b/src/pages/settings/AboutPage/AboutPage.tsx @@ -1,35 +1,31 @@ import React, {useCallback, useMemo, useRef} from 'react'; import {View} from 'react-native'; +// eslint-disable-next-line no-restricted-imports +import type {GestureResponderEvent, Text as RNText} from 'react-native'; import DeviceInfo from 'react-native-device-info'; -import _ from 'underscore'; import * as Expensicons from '@components/Icon/Expensicons'; import IllustratedHeaderPageLayout from '@components/IllustratedHeaderPageLayout'; import LottieAnimations from '@components/LottieAnimations'; import MenuItemList from '@components/MenuItemList'; import Text from '@components/Text'; import TextLink from '@components/TextLink'; -import withLocalize, {withLocalizePropTypes} from '@components/withLocalize'; -import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withWindowDimensions'; +import useLocalize from '@hooks/useLocalize'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import useWaitForNavigation from '@hooks/useWaitForNavigation'; -import compose from '@libs/compose'; import * as Environment from '@libs/Environment/Environment'; import Navigation from '@libs/Navigation/Navigation'; import * as ReportActionContextMenu from '@pages/home/report/ContextMenu/ReportActionContextMenu'; import * as Link from '@userActions/Link'; import * as Report from '@userActions/Report'; import CONST from '@src/CONST'; +import type {TranslationPaths} from '@src/languages/types'; import ROUTES from '@src/ROUTES'; import SCREENS from '@src/SCREENS'; +import type IconAsset from '@src/types/utils/IconAsset'; import pkg from '../../../../package.json'; -const propTypes = { - ...withLocalizePropTypes, - ...windowDimensionsPropTypes, -}; - -function getFlavor() { +function getFlavor(): string { const bundleId = DeviceInfo.getBundleId(); if (bundleId.includes('dev')) { return ' Develop'; @@ -40,15 +36,23 @@ function getFlavor() { return ''; } -function AboutPage(props) { +type MenuItem = { + translationKey: TranslationPaths; + icon: IconAsset; + iconRight?: IconAsset; + action: () => Promise; + link?: string; +}; + +function AboutPage() { + const {translate} = useLocalize(); const theme = useTheme(); const styles = useThemeStyles(); - const {translate} = props; - const popoverAnchor = useRef(null); + const popoverAnchor = useRef(null); const waitForNavigate = useWaitForNavigation(); const menuItems = useMemo(() => { - const baseMenuItems = [ + const baseMenuItems: MenuItem[] = [ { translationKey: 'initialSettingsPage.aboutPage.appDownloadLinks', icon: Expensicons.Link, @@ -65,6 +69,7 @@ function AboutPage(props) { iconRight: Expensicons.NewWindow, action: () => { Link.openExternalLink(CONST.GITHUB_URL); + return Promise.resolve(); }, link: CONST.GITHUB_URL, }, @@ -74,6 +79,7 @@ function AboutPage(props) { iconRight: Expensicons.NewWindow, action: () => { Link.openExternalLink(CONST.UPWORK_URL); + return Promise.resolve(); }, link: CONST.UPWORK_URL, }, @@ -83,16 +89,19 @@ function AboutPage(props) { action: waitForNavigate(Report.navigateToConciergeChat), }, ]; - return _.map(baseMenuItems, (item) => ({ - key: item.translationKey, - title: translate(item.translationKey), - icon: item.icon, - iconRight: item.iconRight, - onPress: item.action, + + return baseMenuItems.map(({translationKey, icon, iconRight, action, link}: MenuItem) => ({ + key: translationKey, + title: translate(translationKey), + icon, + iconRight, + onPress: action, shouldShowRightIcon: true, - onSecondaryInteraction: !_.isEmpty(item.link) ? (e) => ReportActionContextMenu.showContextMenu(CONST.CONTEXT_MENU_TYPES.LINK, e, item.link, popoverAnchor) : undefined, + onSecondaryInteraction: link + ? (event: GestureResponderEvent | MouseEvent) => ReportActionContextMenu.showContextMenu(CONST.CONTEXT_MENU_TYPES.LINK, event, link, popoverAnchor.current) + : undefined, ref: popoverAnchor, - shouldBlockSelection: Boolean(item.link), + shouldBlockSelection: !!link, })); }, [translate, waitForNavigate]); @@ -114,15 +123,15 @@ function AboutPage(props) { return ( Navigation.goBack(ROUTES.SETTINGS)} illustration={LottieAnimations.Coin} backgroundColor={theme.PAGE_THEMES[SCREENS.SETTINGS.ABOUT].backgroundColor} overlayContent={overlayContent} > - {props.translate('footer.aboutExpensify')} - {props.translate('initialSettingsPage.aboutPage.description')} + {translate('footer.aboutExpensify')} + {translate('initialSettingsPage.aboutPage.description')} - {props.translate('initialSettingsPage.readTheTermsAndPrivacy.phrase1')}{' '} + {translate('initialSettingsPage.readTheTermsAndPrivacy.phrase1')}{' '} - {props.translate('initialSettingsPage.readTheTermsAndPrivacy.phrase2')} + {translate('initialSettingsPage.readTheTermsAndPrivacy.phrase2')} {' '} - {props.translate('initialSettingsPage.readTheTermsAndPrivacy.phrase3')}{' '} + {translate('initialSettingsPage.readTheTermsAndPrivacy.phrase3')}{' '} - {props.translate('initialSettingsPage.readTheTermsAndPrivacy.phrase4')} + {translate('initialSettingsPage.readTheTermsAndPrivacy.phrase4')} . @@ -154,7 +163,6 @@ function AboutPage(props) { ); } -AboutPage.propTypes = propTypes; AboutPage.displayName = 'AboutPage'; -export default compose(withLocalize, withWindowDimensions)(AboutPage); +export default AboutPage;