From 15ed1bac56877d525948c2ef03037b4b00a1581b Mon Sep 17 00:00:00 2001 From: Dylan Date: Tue, 16 Jan 2024 11:59:47 +0700 Subject: [PATCH 1/6] migrate GetAssistancePage to typescript --- ...ssistancePage.js => GetAssistancePage.tsx} | 67 +++++++------------ 1 file changed, 24 insertions(+), 43 deletions(-) rename src/pages/{GetAssistancePage.js => GetAssistancePage.tsx} (58%) diff --git a/src/pages/GetAssistancePage.js b/src/pages/GetAssistancePage.tsx similarity index 58% rename from src/pages/GetAssistancePage.js rename to src/pages/GetAssistancePage.tsx index a880637ca100..7b5e5665bef6 100644 --- a/src/pages/GetAssistancePage.js +++ b/src/pages/GetAssistancePage.tsx @@ -1,61 +1,47 @@ -import lodashGet from 'lodash/get'; -import PropTypes from 'prop-types'; import React from 'react'; import {ScrollView, View} from 'react-native'; -import {withOnyx} from 'react-native-onyx'; +import {OnyxEntry, withOnyx} from 'react-native-onyx'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; import * as Expensicons from '@components/Icon/Expensicons'; import * as Illustrations from '@components/Icon/Illustrations'; import ScreenWrapper from '@components/ScreenWrapper'; import Section from '@components/Section'; import Text from '@components/Text'; -import withLocalize, {withLocalizePropTypes} from '@components/withLocalize'; +import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; -import compose from '@libs/compose'; import Navigation from '@libs/Navigation/Navigation'; import * as Link from '@userActions/Link'; import * as Report from '@userActions/Report'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; +import { Account } from '@src/types/onyx'; +import { RouteProp } from '@react-navigation/native'; import ROUTES from '@src/ROUTES'; -const propTypes = { - /** Route object from navigation */ - route: PropTypes.shape({ - params: PropTypes.shape({ - /** The task ID to request the call for */ - taskID: PropTypes.string, - }), - }).isRequired, +type GetAssistanceOnyxProps = { /** The details about the account that the user is signing in with */ - account: PropTypes.shape({ - /** URL to the assigned guide's appointment booking calendar */ - guideCalendarLink: PropTypes.string, - }), - - ...withLocalizePropTypes, + account: OnyxEntry; }; -const defaultProps = { - account: { - guideCalendarLink: null, - }, +type GetAssistancePageProps = GetAssistanceOnyxProps & { + route: RouteProp<{params: {taskID: string; backTo: string}}>; }; -function GetAssistancePage(props) { +function GetAssistancePage({route, account}: GetAssistancePageProps) { const styles = useThemeStyles(); - const navigateBackTo = lodashGet(props.route, 'params.backTo', ROUTES.SETTINGS_CONTACT_METHODS); + const {translate} = useLocalize(); + const navigateBackTo = route?.params.backTo || ROUTES.SETTINGS_CONTACT_METHODS const menuItems = [ { - title: props.translate('getAssistancePage.chatWithConcierge'), + title: translate('getAssistancePage.chatWithConcierge'), onPress: () => Report.navigateToConciergeChat(), icon: Expensicons.ChatBubble, shouldShowRightIcon: true, wrapperStyle: [styles.cardMenuItem], }, { - title: props.translate('getAssistancePage.exploreHelpDocs'), + title: translate('getAssistancePage.exploreHelpDocs'), onPress: () => Link.openExternalLink(CONST.NEWHELP_URL), icon: Expensicons.QuestionMark, shouldShowRightIcon: true, @@ -65,11 +51,11 @@ function GetAssistancePage(props) { }, ]; + const guideCalendarLink = account?.guideCalendarLink // If the user is eligible for calls with their Guide, add the 'Schedule a setup call' item at the second position in the list - const guideCalendarLink = lodashGet(props.account, 'guideCalendarLink'); if (guideCalendarLink) { menuItems.splice(1, 0, { - title: props.translate('getAssistancePage.scheduleSetupCall'), + title: translate('getAssistancePage.scheduleSetupCall'), onPress: () => Link.openExternalLink(guideCalendarLink), icon: Expensicons.Phone, shouldShowRightIcon: true, @@ -82,17 +68,17 @@ function GetAssistancePage(props) { return ( Navigation.goBack(navigateBackTo)} />
- {props.translate('getAssistancePage.description')} + {translate('getAssistancePage.description')}
@@ -100,16 +86,11 @@ function GetAssistancePage(props) { ); } -GetAssistancePage.propTypes = propTypes; -GetAssistancePage.defaultProps = defaultProps; GetAssistancePage.displayName = 'GetAssistancePage'; -export default compose( - withLocalize, - withOnyx({ - account: { - key: ONYXKEYS.ACCOUNT, - selector: (account) => account && {guideCalendarLink: account.guideCalendarLink}, - }, - }), -)(GetAssistancePage); +export default withOnyx({ + account: { + key: ONYXKEYS.ACCOUNT, + selector: (account) => account && {guideCalendarLink: account.guideCalendarLink}, + }, +})(GetAssistancePage) \ No newline at end of file From 631f4d74d3f044c121ecc998982e6dbf95a2389a Mon Sep 17 00:00:00 2001 From: Dylan Date: Tue, 16 Jan 2024 13:14:34 +0700 Subject: [PATCH 2/6] migrate GetAssistancePage to typescript --- src/components/MenuItemList.tsx | 2 +- src/pages/GetAssistancePage.tsx | 13 +++++++------ 2 files changed, 8 insertions(+), 7 deletions(-) diff --git a/src/components/MenuItemList.tsx b/src/components/MenuItemList.tsx index f83f173a644f..b39701fe815a 100644 --- a/src/components/MenuItemList.tsx +++ b/src/components/MenuItemList.tsx @@ -10,7 +10,7 @@ type MenuItemLink = string | (() => Promise); type MenuItemWithLink = MenuItemProps & { /** The link to open when the menu item is clicked */ - link: MenuItemLink; + link?: MenuItemLink; }; type MenuItemListProps = { diff --git a/src/pages/GetAssistancePage.tsx b/src/pages/GetAssistancePage.tsx index 7b5e5665bef6..f44a7fa71866 100644 --- a/src/pages/GetAssistancePage.tsx +++ b/src/pages/GetAssistancePage.tsx @@ -1,6 +1,7 @@ import React from 'react'; import {ScrollView, View} from 'react-native'; -import {OnyxEntry, withOnyx} from 'react-native-onyx'; +import {withOnyx} from 'react-native-onyx'; +import type {OnyxEntry} from 'react-native-onyx/lib/types'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; import * as Expensicons from '@components/Icon/Expensicons'; import * as Illustrations from '@components/Icon/Illustrations'; @@ -14,10 +15,10 @@ import * as Link from '@userActions/Link'; import * as Report from '@userActions/Report'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; -import { Account } from '@src/types/onyx'; +import type { Account } from '@src/types/onyx'; import { RouteProp } from '@react-navigation/native'; import ROUTES from '@src/ROUTES'; - +import type {Route} from '@src/ROUTES'; type GetAssistanceOnyxProps = { /** The details about the account that the user is signing in with */ @@ -25,13 +26,13 @@ type GetAssistanceOnyxProps = { }; type GetAssistancePageProps = GetAssistanceOnyxProps & { - route: RouteProp<{params: {taskID: string; backTo: string}}>; + route: RouteProp<{params: {backTo: Route}}>; }; function GetAssistancePage({route, account}: GetAssistancePageProps) { const styles = useThemeStyles(); const {translate} = useLocalize(); - const navigateBackTo = route?.params.backTo || ROUTES.SETTINGS_CONTACT_METHODS + const navigateBackTo: Route = route?.params.backTo || ROUTES.SETTINGS_CONTACT_METHODS const menuItems = [ { title: translate('getAssistancePage.chatWithConcierge'), @@ -61,7 +62,7 @@ function GetAssistancePage({route, account}: GetAssistancePageProps) { shouldShowRightIcon: true, iconRight: Expensicons.NewWindow, wrapperStyle: [styles.cardMenuItem], - link: guideCalendarLink, + link: guideCalendarLink }); } From b82559daedf3988c3e220598db26357f2bcc3e2c Mon Sep 17 00:00:00 2001 From: Dylan Date: Tue, 16 Jan 2024 13:19:26 +0700 Subject: [PATCH 3/6] run prettier --- src/pages/GetAssistancePage.tsx | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/src/pages/GetAssistancePage.tsx b/src/pages/GetAssistancePage.tsx index f44a7fa71866..71a21dc3a28e 100644 --- a/src/pages/GetAssistancePage.tsx +++ b/src/pages/GetAssistancePage.tsx @@ -1,3 +1,4 @@ +import {RouteProp} from '@react-navigation/native'; import React from 'react'; import {ScrollView, View} from 'react-native'; import {withOnyx} from 'react-native-onyx'; @@ -15,10 +16,9 @@ import * as Link from '@userActions/Link'; import * as Report from '@userActions/Report'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; -import type { Account } from '@src/types/onyx'; -import { RouteProp } from '@react-navigation/native'; import ROUTES from '@src/ROUTES'; import type {Route} from '@src/ROUTES'; +import type {Account} from '@src/types/onyx'; type GetAssistanceOnyxProps = { /** The details about the account that the user is signing in with */ @@ -26,13 +26,14 @@ type GetAssistanceOnyxProps = { }; type GetAssistancePageProps = GetAssistanceOnyxProps & { + /** Route object from navigation */ route: RouteProp<{params: {backTo: Route}}>; }; function GetAssistancePage({route, account}: GetAssistancePageProps) { const styles = useThemeStyles(); const {translate} = useLocalize(); - const navigateBackTo: Route = route?.params.backTo || ROUTES.SETTINGS_CONTACT_METHODS + const navigateBackTo: Route = route?.params.backTo || ROUTES.SETTINGS_CONTACT_METHODS; const menuItems = [ { title: translate('getAssistancePage.chatWithConcierge'), @@ -52,8 +53,8 @@ function GetAssistancePage({route, account}: GetAssistancePageProps) { }, ]; - const guideCalendarLink = account?.guideCalendarLink // If the user is eligible for calls with their Guide, add the 'Schedule a setup call' item at the second position in the list + const guideCalendarLink = account?.guideCalendarLink; if (guideCalendarLink) { menuItems.splice(1, 0, { title: translate('getAssistancePage.scheduleSetupCall'), @@ -62,7 +63,7 @@ function GetAssistancePage({route, account}: GetAssistancePageProps) { shouldShowRightIcon: true, iconRight: Expensicons.NewWindow, wrapperStyle: [styles.cardMenuItem], - link: guideCalendarLink + link: guideCalendarLink, }); } @@ -94,4 +95,4 @@ export default withOnyx({ key: ONYXKEYS.ACCOUNT, selector: (account) => account && {guideCalendarLink: account.guideCalendarLink}, }, -})(GetAssistancePage) \ No newline at end of file +})(GetAssistancePage); From 58138404c419e7884bdf9c95ebfd456c79695bc9 Mon Sep 17 00:00:00 2001 From: Dylan Date: Tue, 16 Jan 2024 15:10:04 +0700 Subject: [PATCH 4/6] fix lint --- src/components/MenuItemList.tsx | 2 +- src/pages/GetAssistancePage.tsx | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/MenuItemList.tsx b/src/components/MenuItemList.tsx index b39701fe815a..328630974820 100644 --- a/src/components/MenuItemList.tsx +++ b/src/components/MenuItemList.tsx @@ -44,7 +44,7 @@ function MenuItemList({menuItems = [], shouldUseSingleExecution = false}: MenuIt {menuItems.map((menuItemProps) => ( secondaryInteraction(menuItemProps.link, e) : undefined} + onSecondaryInteraction={menuItemProps.link !== undefined ? (e) => secondaryInteraction(menuItemProps.link!!, e) : undefined} ref={popoverAnchor} shouldBlockSelection={!!menuItemProps.link} // eslint-disable-next-line react/jsx-props-no-spreading diff --git a/src/pages/GetAssistancePage.tsx b/src/pages/GetAssistancePage.tsx index 71a21dc3a28e..b9fb3c85d33e 100644 --- a/src/pages/GetAssistancePage.tsx +++ b/src/pages/GetAssistancePage.tsx @@ -1,4 +1,4 @@ -import {RouteProp} from '@react-navigation/native'; +import type {RouteProp} from '@react-navigation/native'; import React from 'react'; import {ScrollView, View} from 'react-native'; import {withOnyx} from 'react-native-onyx'; @@ -34,7 +34,7 @@ function GetAssistancePage({route, account}: GetAssistancePageProps) { const styles = useThemeStyles(); const {translate} = useLocalize(); const navigateBackTo: Route = route?.params.backTo || ROUTES.SETTINGS_CONTACT_METHODS; - const menuItems = [ + const menuItems: MenuItemWithLink[] = [ { title: translate('getAssistancePage.chatWithConcierge'), onPress: () => Report.navigateToConciergeChat(), @@ -54,7 +54,7 @@ function GetAssistancePage({route, account}: GetAssistancePageProps) { ]; // If the user is eligible for calls with their Guide, add the 'Schedule a setup call' item at the second position in the list - const guideCalendarLink = account?.guideCalendarLink; + const guideCalendarLink = account?.guideCalendarLink as string; if (guideCalendarLink) { menuItems.splice(1, 0, { title: translate('getAssistancePage.scheduleSetupCall'), From 95f787c1532e914337414ba6cc36f8ee44ae0b7d Mon Sep 17 00:00:00 2001 From: Dylan Date: Tue, 16 Jan 2024 15:21:02 +0700 Subject: [PATCH 5/6] fix lint --- src/components/MenuItemList.tsx | 4 ++-- src/pages/GetAssistancePage.tsx | 3 ++- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/src/components/MenuItemList.tsx b/src/components/MenuItemList.tsx index 328630974820..4ba9260e23ff 100644 --- a/src/components/MenuItemList.tsx +++ b/src/components/MenuItemList.tsx @@ -31,7 +31,7 @@ function MenuItemList({menuItems = [], shouldUseSingleExecution = false}: MenuIt * @param link the menu item link or function to get the link * @param event the interaction event */ - const secondaryInteraction = (link: MenuItemLink, event: GestureResponderEvent | MouseEvent) => { + const secondaryInteraction = (link: MenuItemLink | undefined, event: GestureResponderEvent | MouseEvent) => { if (typeof link === 'function') { link().then((url) => ReportActionContextMenu.showContextMenu(CONST.CONTEXT_MENU_TYPES.LINK, event, url, popoverAnchor.current)); } else if (link) { @@ -44,7 +44,7 @@ function MenuItemList({menuItems = [], shouldUseSingleExecution = false}: MenuIt {menuItems.map((menuItemProps) => ( secondaryInteraction(menuItemProps.link!!, e) : undefined} + onSecondaryInteraction={menuItemProps.link !== undefined ? (e) => secondaryInteraction(menuItemProps.link, e) : undefined} ref={popoverAnchor} shouldBlockSelection={!!menuItemProps.link} // eslint-disable-next-line react/jsx-props-no-spreading diff --git a/src/pages/GetAssistancePage.tsx b/src/pages/GetAssistancePage.tsx index b9fb3c85d33e..12f19b9830eb 100644 --- a/src/pages/GetAssistancePage.tsx +++ b/src/pages/GetAssistancePage.tsx @@ -6,6 +6,7 @@ import type {OnyxEntry} from 'react-native-onyx/lib/types'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; import * as Expensicons from '@components/Icon/Expensicons'; import * as Illustrations from '@components/Icon/Illustrations'; +import type {MenuItemWithLink} from '@components/MenuItemList'; import ScreenWrapper from '@components/ScreenWrapper'; import Section from '@components/Section'; import Text from '@components/Text'; @@ -54,7 +55,7 @@ function GetAssistancePage({route, account}: GetAssistancePageProps) { ]; // If the user is eligible for calls with their Guide, add the 'Schedule a setup call' item at the second position in the list - const guideCalendarLink = account?.guideCalendarLink as string; + const guideCalendarLink = account?.guideCalendarLink; if (guideCalendarLink) { menuItems.splice(1, 0, { title: translate('getAssistancePage.scheduleSetupCall'), From a91e9fbdd091594c9944b87f05a32ee700aea942 Mon Sep 17 00:00:00 2001 From: Dylan Date: Tue, 16 Jan 2024 15:31:32 +0700 Subject: [PATCH 6/6] fix lint --- src/pages/GetAssistancePage.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/GetAssistancePage.tsx b/src/pages/GetAssistancePage.tsx index 12f19b9830eb..cf3dcf98ac3b 100644 --- a/src/pages/GetAssistancePage.tsx +++ b/src/pages/GetAssistancePage.tsx @@ -34,7 +34,7 @@ type GetAssistancePageProps = GetAssistanceOnyxProps & { function GetAssistancePage({route, account}: GetAssistancePageProps) { const styles = useThemeStyles(); const {translate} = useLocalize(); - const navigateBackTo: Route = route?.params.backTo || ROUTES.SETTINGS_CONTACT_METHODS; + const navigateBackTo = route?.params.backTo || ROUTES.SETTINGS_CONTACT_METHODS.getRoute(); const menuItems: MenuItemWithLink[] = [ { title: translate('getAssistancePage.chatWithConcierge'),