From 73b15d0c8110140d68205904689803edc922839d Mon Sep 17 00:00:00 2001 From: hkopser99 <144170694+hkopser99@users.noreply.github.com> Date: Mon, 5 Feb 2024 22:52:41 +0100 Subject: [PATCH 1/4] TS Migration #25175: Update and rename AppDownloadLinks.js to AppDownloadLinks.tsx Updates related to Typescript Migration #25175. -Migrated component to Typescript -Extended MenuItemProps type as DownloadMenuItem type -Typed menu items as an array of DownloadMenuItems -Removed withWindowDimensions/withLocalize PropTypes and compose() from export per guidelines on migration -Used Hooks for localize instead for translation -Removed _ in JSX mapping of menu items. Saw other TSX files that removes and I was getting ESLint warnings. _ is noted as a best practice but given other TSX files have removed I followed suit. I also saw old ESlint ignores being used when removing _ but I didn't get flagged without this. -Removed onKeyDown attribute and blur() from MenuItem. I saw this nowhere else in the codebase and the removal had no impact on app use functionality (please advise if there's something I am missing but it appeared antiquated) -This component receives props from Navigation but I do not see elsewhere in the codebase that we are explicitly listing these as props via typescript (navigation props should inherintly apply to all pages) -TS warnings made me list translationKey as type TranslationPaths (warning only appears when not providing the translate from useLocalize() with a '' - others working on TS migrations may want to know this) -No ESlint warnings -No VSCode warnings or errors -No errors when testing -Only issue was on iOS simulator there's no App Store app so it doesn't know how to handle the download iOS click but the link is fine and it works everywhere else. -No other components or other files in codebase import this file so change from .js to .tsx should not require changes to imports anywhere. This component is routed to via its name as with other pages in codebase. --- ...pDownloadLinks.js => AppDownloadLinks.tsx} | 82 +++++++++---------- 1 file changed, 41 insertions(+), 41 deletions(-) rename src/pages/settings/{AppDownloadLinks.js => AppDownloadLinks.tsx} (58%) diff --git a/src/pages/settings/AppDownloadLinks.js b/src/pages/settings/AppDownloadLinks.tsx similarity index 58% rename from src/pages/settings/AppDownloadLinks.js rename to src/pages/settings/AppDownloadLinks.tsx index 522e15d8e9a8..f5932250cad9 100644 --- a/src/pages/settings/AppDownloadLinks.js +++ b/src/pages/settings/AppDownloadLinks.tsx @@ -1,87 +1,87 @@ -import React from 'react'; +import React, {useRef} from 'react'; import {ScrollView} from 'react-native'; -import _ from 'underscore'; +import useLocalize from '@hooks/useLocalize'; +import useThemeStyles from '@hooks/useThemeStyles'; +import Navigation from '@libs/Navigation/Navigation'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; import * as Expensicons from '@components/Icon/Expensicons'; import MenuItem from '@components/MenuItem'; import ScreenWrapper from '@components/ScreenWrapper'; -import withLocalize, {withLocalizePropTypes} from '@components/withLocalize'; -import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withWindowDimensions'; -import useThemeStyles from '@hooks/useThemeStyles'; -import compose from '@libs/compose'; -import Navigation from '@libs/Navigation/Navigation'; import * as ReportActionContextMenu from '@pages/home/report/ContextMenu/ReportActionContextMenu'; import * as Link from '@userActions/Link'; +import type { View } from 'react-native'; +import type { TranslationPaths } from '@src/languages/types'; +import type { MenuItemProps } from '@components/MenuItem'; import CONST from '@src/CONST'; +import ROUTES from '@src/ROUTES'; -const propTypes = { - ...withLocalizePropTypes, - ...windowDimensionsPropTypes, -}; - -function AppDownloadLinksPage(props) { +function AppDownloadLinksPage() { const styles = useThemeStyles(); - let popoverAnchor; + const { translate } = useLocalize(); + const popoverAnchor = useRef(null); - const menuItems = [ + type DownloadMenuItem = MenuItemProps & { + translationKey: TranslationPaths, + openAppDownloadLink: () => void, + downloadLink: string, + }; + + const menuItems: DownloadMenuItem[] = [ { translationKey: 'initialSettingsPage.appDownloadLinks.android.label', - icon: Expensicons.Android, - iconRight: Expensicons.NewWindow, - action: () => { + openAppDownloadLink: () => { Link.openExternalLink(CONST.APP_DOWNLOAD_LINKS.ANDROID); }, - link: CONST.APP_DOWNLOAD_LINKS.ANDROID, + downloadLink: CONST.APP_DOWNLOAD_LINKS.ANDROID, + icon: Expensicons.Android, + iconRight: Expensicons.NewWindow, }, { translationKey: 'initialSettingsPage.appDownloadLinks.ios.label', - icon: Expensicons.Apple, - iconRight: Expensicons.NewWindow, - action: () => { + openAppDownloadLink: () => { Link.openExternalLink(CONST.APP_DOWNLOAD_LINKS.IOS, true); }, - link: CONST.APP_DOWNLOAD_LINKS.IOS, + downloadLink: CONST.APP_DOWNLOAD_LINKS.IOS, + icon: Expensicons.Apple, + iconRight: Expensicons.NewWindow, }, { translationKey: 'initialSettingsPage.appDownloadLinks.desktop.label', - icon: Expensicons.Monitor, - iconRight: Expensicons.NewWindow, - action: () => { + openAppDownloadLink: () => { Link.openExternalLink(CONST.APP_DOWNLOAD_LINKS.DESKTOP); }, - link: CONST.APP_DOWNLOAD_LINKS.DESKTOP, + downloadLink: CONST.APP_DOWNLOAD_LINKS.DESKTOP, + icon: Expensicons.Monitor, + iconRight: Expensicons.NewWindow, }, ]; return ( Navigation.goBack()} + title={translate('initialSettingsPage.aboutPage.appDownloadLinks')} + onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_ABOUT)} /> - {_.map(menuItems, (item) => ( + {menuItems.map((item: DownloadMenuItem) => ( item.action()} - onSecondaryInteraction={(e) => ReportActionContextMenu.showContextMenu(CONST.CONTEXT_MENU_TYPES.LINK, e, item.link, popoverAnchor)} - onKeyDown={(event) => { - event.target.blur(); - }} - ref={(el) => (popoverAnchor = el)} - title={props.translate(item.translationKey)} + onPress={item.openAppDownloadLink} + onSecondaryInteraction={(e) => ReportActionContextMenu.showContextMenu(CONST.CONTEXT_MENU_TYPES.LINK, e, item.downloadLink, popoverAnchor.current)} + ref={popoverAnchor} + title={translate(item.translationKey)} icon={item.icon} - iconRight={item.iconRight} + iconRight={item.iconRight} shouldBlockSelection shouldShowRightIcon - /> + /> ))} ); } -AppDownloadLinksPage.propTypes = propTypes; AppDownloadLinksPage.displayName = 'AppDownloadLinksPage'; -export default compose(withWindowDimensions, withLocalize)(AppDownloadLinksPage); +export default AppDownloadLinksPage; + From 3297913db780c51e7100672a3fdb61aff5e66f26 Mon Sep 17 00:00:00 2001 From: hkopser99 <144170694+hkopser99@users.noreply.github.com> Date: Tue, 6 Feb 2024 21:59:50 +0100 Subject: [PATCH 2/4] Update AppDownloadLinks.tsx --- src/pages/settings/AppDownloadLinks.tsx | 25 ++++++++++++------------- 1 file changed, 12 insertions(+), 13 deletions(-) diff --git a/src/pages/settings/AppDownloadLinks.tsx b/src/pages/settings/AppDownloadLinks.tsx index f5932250cad9..009c00996d7a 100644 --- a/src/pages/settings/AppDownloadLinks.tsx +++ b/src/pages/settings/AppDownloadLinks.tsx @@ -1,29 +1,29 @@ import React, {useRef} from 'react'; import {ScrollView} from 'react-native'; -import useLocalize from '@hooks/useLocalize'; -import useThemeStyles from '@hooks/useThemeStyles'; -import Navigation from '@libs/Navigation/Navigation'; +import type {View} from 'react-native'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; import * as Expensicons from '@components/Icon/Expensicons'; import MenuItem from '@components/MenuItem'; +import type {MenuItemProps} from '@components/MenuItem'; import ScreenWrapper from '@components/ScreenWrapper'; +import useLocalize from '@hooks/useLocalize'; +import useThemeStyles from '@hooks/useThemeStyles'; +import Navigation from '@libs/Navigation/Navigation'; import * as ReportActionContextMenu from '@pages/home/report/ContextMenu/ReportActionContextMenu'; import * as Link from '@userActions/Link'; -import type { View } from 'react-native'; -import type { TranslationPaths } from '@src/languages/types'; -import type { MenuItemProps } from '@components/MenuItem'; import CONST from '@src/CONST'; +import type {TranslationPaths} from '@src/languages/types'; import ROUTES from '@src/ROUTES'; function AppDownloadLinksPage() { const styles = useThemeStyles(); - const { translate } = useLocalize(); + const {translate} = useLocalize(); const popoverAnchor = useRef(null); type DownloadMenuItem = MenuItemProps & { - translationKey: TranslationPaths, - openAppDownloadLink: () => void, - downloadLink: string, + translationKey: TranslationPaths; + openAppDownloadLink: () => void; + downloadLink: string; }; const menuItems: DownloadMenuItem[] = [ @@ -71,10 +71,10 @@ function AppDownloadLinksPage() { ref={popoverAnchor} title={translate(item.translationKey)} icon={item.icon} - iconRight={item.iconRight} + iconRight={item.iconRight} shouldBlockSelection shouldShowRightIcon - /> + /> ))} @@ -84,4 +84,3 @@ function AppDownloadLinksPage() { AppDownloadLinksPage.displayName = 'AppDownloadLinksPage'; export default AppDownloadLinksPage; - From 8b90adf32c39c5b32e44790d920266900285ca71 Mon Sep 17 00:00:00 2001 From: hkopser99 <144170694+hkopser99@users.noreply.github.com> Date: Mon, 12 Feb 2024 13:42:08 +0100 Subject: [PATCH 3/4] Update AppDownloadLinks.tsx Moved Type declaration out of component scope. --- src/pages/settings/AppDownloadLinks.tsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/pages/settings/AppDownloadLinks.tsx b/src/pages/settings/AppDownloadLinks.tsx index 009c00996d7a..5ded324e5b45 100644 --- a/src/pages/settings/AppDownloadLinks.tsx +++ b/src/pages/settings/AppDownloadLinks.tsx @@ -15,17 +15,17 @@ import CONST from '@src/CONST'; import type {TranslationPaths} from '@src/languages/types'; import ROUTES from '@src/ROUTES'; +type DownloadMenuItem = MenuItemProps & { + translationKey: TranslationPaths; + openAppDownloadLink: () => void; + downloadLink: string; +}; + function AppDownloadLinksPage() { const styles = useThemeStyles(); const {translate} = useLocalize(); const popoverAnchor = useRef(null); - type DownloadMenuItem = MenuItemProps & { - translationKey: TranslationPaths; - openAppDownloadLink: () => void; - downloadLink: string; - }; - const menuItems: DownloadMenuItem[] = [ { translationKey: 'initialSettingsPage.appDownloadLinks.android.label', From a3fbb23762043510669941c10b1e67fbe0797602 Mon Sep 17 00:00:00 2001 From: hkopser99 <144170694+hkopser99@users.noreply.github.com> Date: Wed, 14 Feb 2024 09:40:24 +0100 Subject: [PATCH 4/4] Update AppDownloadLinks.tsx Amended openAppDownloadLink and downloadLink in DownloadMenuItem back to action and link. Returned to original, simplified logic for Navigation.goBack() --- src/pages/settings/AppDownloadLinks.tsx | 23 +++++++++++------------ 1 file changed, 11 insertions(+), 12 deletions(-) diff --git a/src/pages/settings/AppDownloadLinks.tsx b/src/pages/settings/AppDownloadLinks.tsx index 5ded324e5b45..352b3772923a 100644 --- a/src/pages/settings/AppDownloadLinks.tsx +++ b/src/pages/settings/AppDownloadLinks.tsx @@ -13,12 +13,11 @@ import * as ReportActionContextMenu from '@pages/home/report/ContextMenu/ReportA import * as Link from '@userActions/Link'; import CONST from '@src/CONST'; import type {TranslationPaths} from '@src/languages/types'; -import ROUTES from '@src/ROUTES'; type DownloadMenuItem = MenuItemProps & { translationKey: TranslationPaths; - openAppDownloadLink: () => void; - downloadLink: string; + action: () => void; + link: string; }; function AppDownloadLinksPage() { @@ -29,28 +28,28 @@ function AppDownloadLinksPage() { const menuItems: DownloadMenuItem[] = [ { translationKey: 'initialSettingsPage.appDownloadLinks.android.label', - openAppDownloadLink: () => { + action: () => { Link.openExternalLink(CONST.APP_DOWNLOAD_LINKS.ANDROID); }, - downloadLink: CONST.APP_DOWNLOAD_LINKS.ANDROID, + link: CONST.APP_DOWNLOAD_LINKS.ANDROID, icon: Expensicons.Android, iconRight: Expensicons.NewWindow, }, { translationKey: 'initialSettingsPage.appDownloadLinks.ios.label', - openAppDownloadLink: () => { + action: () => { Link.openExternalLink(CONST.APP_DOWNLOAD_LINKS.IOS, true); }, - downloadLink: CONST.APP_DOWNLOAD_LINKS.IOS, + link: CONST.APP_DOWNLOAD_LINKS.IOS, icon: Expensicons.Apple, iconRight: Expensicons.NewWindow, }, { translationKey: 'initialSettingsPage.appDownloadLinks.desktop.label', - openAppDownloadLink: () => { + action: () => { Link.openExternalLink(CONST.APP_DOWNLOAD_LINKS.DESKTOP); }, - downloadLink: CONST.APP_DOWNLOAD_LINKS.DESKTOP, + link: CONST.APP_DOWNLOAD_LINKS.DESKTOP, icon: Expensicons.Monitor, iconRight: Expensicons.NewWindow, }, @@ -60,14 +59,14 @@ function AppDownloadLinksPage() { Navigation.goBack(ROUTES.SETTINGS_ABOUT)} + onBackButtonPress={() => Navigation.goBack()} /> {menuItems.map((item: DownloadMenuItem) => ( ReportActionContextMenu.showContextMenu(CONST.CONTEXT_MENU_TYPES.LINK, e, item.downloadLink, popoverAnchor.current)} + onPress={item.action} + onSecondaryInteraction={(e) => ReportActionContextMenu.showContextMenu(CONST.CONTEXT_MENU_TYPES.LINK, e, item.link, popoverAnchor.current)} ref={popoverAnchor} title={translate(item.translationKey)} icon={item.icon}