From 11942e755df07c08267359e036cf40b63d57c3b7 Mon Sep 17 00:00:00 2001 From: dukenv0307 <dukenv0307@gmail.com> Date: Wed, 10 Jan 2024 16:13:05 +0700 Subject: [PATCH 1/5] migrate Error page to Typescript --- .../ErrorBodyText/{index.js => index.tsx} | 17 +++++++---------- .../{index.website.js => index.website.tsx} | 0 ...nericErrorPage.js => GenericErrorPage.tsx} | 17 +++++++---------- .../{NotFoundPage.js => NotFoundPage.tsx} | 19 +++++++------------ 4 files changed, 21 insertions(+), 32 deletions(-) rename src/pages/ErrorPage/ErrorBodyText/{index.js => index.tsx} (54%) rename src/pages/ErrorPage/ErrorBodyText/{index.website.js => index.website.tsx} (100%) rename src/pages/ErrorPage/{GenericErrorPage.js => GenericErrorPage.tsx} (91%) rename src/pages/ErrorPage/{NotFoundPage.js => NotFoundPage.tsx} (55%) diff --git a/src/pages/ErrorPage/ErrorBodyText/index.js b/src/pages/ErrorPage/ErrorBodyText/index.tsx similarity index 54% rename from src/pages/ErrorPage/ErrorBodyText/index.js rename to src/pages/ErrorPage/ErrorBodyText/index.tsx index 47b765f8f5e8..44c4f0ee2968 100644 --- a/src/pages/ErrorPage/ErrorBodyText/index.js +++ b/src/pages/ErrorPage/ErrorBodyText/index.tsx @@ -1,29 +1,26 @@ import React from 'react'; import Text from '@components/Text'; import TextLink from '@components/TextLink'; -import withLocalize, {withLocalizePropTypes} from '@components/withLocalize'; +import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; import CONST from '@src/CONST'; -const propTypes = { - ...withLocalizePropTypes, -}; - -function ErrorBodyText(props) { +function ErrorBodyText() { const styles = useThemeStyles(); + const {translate} = useLocalize(); return ( <Text> - {`${props.translate('genericErrorPage.body.helpTextMobile')} `} + {`${translate('genericErrorPage.body.helpTextMobile')} `} <TextLink href={CONST.NEW_EXPENSIFY_URL} style={[styles.link]} > - {props.translate('genericErrorPage.body.helpTextWeb')} + {translate('genericErrorPage.body.helpTextWeb')} </TextLink> </Text> ); } ErrorBodyText.displayName = 'ErrorBodyText'; -ErrorBodyText.propTypes = propTypes; -export default withLocalize(ErrorBodyText); + +export default ErrorBodyText; diff --git a/src/pages/ErrorPage/ErrorBodyText/index.website.js b/src/pages/ErrorPage/ErrorBodyText/index.website.tsx similarity index 100% rename from src/pages/ErrorPage/ErrorBodyText/index.website.js rename to src/pages/ErrorPage/ErrorBodyText/index.website.tsx diff --git a/src/pages/ErrorPage/GenericErrorPage.js b/src/pages/ErrorPage/GenericErrorPage.tsx similarity index 91% rename from src/pages/ErrorPage/GenericErrorPage.js rename to src/pages/ErrorPage/GenericErrorPage.tsx index 56fb5b970084..a05ef7954ba9 100644 --- a/src/pages/ErrorPage/GenericErrorPage.js +++ b/src/pages/ErrorPage/GenericErrorPage.tsx @@ -9,7 +9,7 @@ import ImageSVG from '@components/ImageSVG'; import SafeAreaConsumer from '@components/SafeAreaConsumer'; import Text from '@components/Text'; import TextLink from '@components/TextLink'; -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'; @@ -18,20 +18,18 @@ import * as Session from '@userActions/Session'; import CONST from '@src/CONST'; import ErrorBodyText from './ErrorBodyText'; -const propTypes = { - ...withLocalizePropTypes, -}; - -function GenericErrorPage({translate}) { +function GenericErrorPage() { const theme = useTheme(); const styles = useThemeStyles(); const StyleUtils = useStyleUtils(); + const {translate} = useLocalize(); + const {resetBoundary} = useErrorBoundary(); return ( <SafeAreaConsumer> {({paddingBottom}) => ( - <View style={[styles.flex1, styles.pt10, styles.ph5, StyleUtils.getErrorPageContainerStyle(paddingBottom)]}> + <View style={[styles.flex1, styles.pt10, styles.ph5, StyleUtils.getErrorPageContainerStyle(Number(paddingBottom))]}> <View style={[styles.flex1, styles.alignItemsCenter, styles.justifyContentCenter]}> <View> <View style={styles.mb5}> @@ -78,7 +76,7 @@ function GenericErrorPage({translate}) { </View> </View> </View> - <View styles={styles.alignSelfEnd}> + <View style={styles.alignSelfEnd}> <View style={[styles.flex1, styles.flexRow, styles.justifyContentCenter]}> <ImageSVG contentFit="contain" @@ -95,7 +93,6 @@ function GenericErrorPage({translate}) { ); } -GenericErrorPage.propTypes = propTypes; GenericErrorPage.displayName = 'ErrorPage'; -export default withLocalize(GenericErrorPage); +export default GenericErrorPage; diff --git a/src/pages/ErrorPage/NotFoundPage.js b/src/pages/ErrorPage/NotFoundPage.tsx similarity index 55% rename from src/pages/ErrorPage/NotFoundPage.js rename to src/pages/ErrorPage/NotFoundPage.tsx index e10ec32732ea..968b4865a7d8 100644 --- a/src/pages/ErrorPage/NotFoundPage.js +++ b/src/pages/ErrorPage/NotFoundPage.tsx @@ -1,31 +1,26 @@ -import PropTypes from 'prop-types'; import React from 'react'; import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView'; import ScreenWrapper from '@components/ScreenWrapper'; +import Navigation from '@libs/Navigation/Navigation'; +import ROUTES from '@src/ROUTES'; -const propTypes = { - /** Method to trigger when pressing back button of the header */ - onBackButtonPress: PropTypes.func, -}; - -const defaultProps = { - onBackButtonPress: undefined, +type NotFoundPageProps = { + onBackButtonPress?: () => void; }; // eslint-disable-next-line rulesdir/no-negated-variables -function NotFoundPage(props) { +function NotFoundPage({onBackButtonPress = () => Navigation.goBack(ROUTES.HOME)}: NotFoundPageProps) { return ( <ScreenWrapper testID={NotFoundPage.displayName}> <FullPageNotFoundView shouldShow - onBackButtonPress={props.onBackButtonPress} + onBackButtonPress={onBackButtonPress} + onLinkPress={() => Navigation.dismissModal()} /> </ScreenWrapper> ); } NotFoundPage.displayName = 'NotFoundPage'; -NotFoundPage.propTypes = propTypes; -NotFoundPage.defaultProps = defaultProps; export default NotFoundPage; From e35690c510c657e5fdd85a57b155171eb42c7134 Mon Sep 17 00:00:00 2001 From: dukenv0307 <dukenv0307@gmail.com> Date: Wed, 10 Jan 2024 16:34:59 +0700 Subject: [PATCH 2/5] change style to styles --- src/pages/ErrorPage/GenericErrorPage.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/ErrorPage/GenericErrorPage.tsx b/src/pages/ErrorPage/GenericErrorPage.tsx index a05ef7954ba9..0d7fcca26954 100644 --- a/src/pages/ErrorPage/GenericErrorPage.tsx +++ b/src/pages/ErrorPage/GenericErrorPage.tsx @@ -76,7 +76,7 @@ function GenericErrorPage() { </View> </View> </View> - <View style={styles.alignSelfEnd}> + <View styles={styles.alignSelfEnd}> <View style={[styles.flex1, styles.flexRow, styles.justifyContentCenter]}> <ImageSVG contentFit="contain" From 42c20e61365b634f053b5e06f69890bc92d566cc Mon Sep 17 00:00:00 2001 From: dukenv0307 <dukenv0307@gmail.com> Date: Wed, 10 Jan 2024 17:06:21 +0700 Subject: [PATCH 3/5] remove unnecessary style --- src/pages/ErrorPage/GenericErrorPage.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/ErrorPage/GenericErrorPage.tsx b/src/pages/ErrorPage/GenericErrorPage.tsx index 0d7fcca26954..f4f1d91418c7 100644 --- a/src/pages/ErrorPage/GenericErrorPage.tsx +++ b/src/pages/ErrorPage/GenericErrorPage.tsx @@ -76,7 +76,7 @@ function GenericErrorPage() { </View> </View> </View> - <View styles={styles.alignSelfEnd}> + <View> <View style={[styles.flex1, styles.flexRow, styles.justifyContentCenter]}> <ImageSVG contentFit="contain" From 0b81d48becda7d7ffb696082b79dedc028fc6583 Mon Sep 17 00:00:00 2001 From: dukenv0307 <dukenv0307@gmail.com> Date: Wed, 10 Jan 2024 17:56:04 +0700 Subject: [PATCH 4/5] make some props as optional --- src/components/BlockingViews/FullPageNotFoundView.tsx | 4 ++-- src/pages/ErrorPage/ErrorBodyText/index.tsx | 1 + src/pages/ErrorPage/NotFoundPage.tsx | 5 +---- 3 files changed, 4 insertions(+), 6 deletions(-) diff --git a/src/components/BlockingViews/FullPageNotFoundView.tsx b/src/components/BlockingViews/FullPageNotFoundView.tsx index 5993e60861f5..807029addf5e 100644 --- a/src/components/BlockingViews/FullPageNotFoundView.tsx +++ b/src/components/BlockingViews/FullPageNotFoundView.tsx @@ -33,10 +33,10 @@ type FullPageNotFoundViewProps = { linkKey?: TranslationPaths; /** Method to trigger when pressing the back button of the header */ - onBackButtonPress: () => void; + onBackButtonPress?: () => void; /** Function to call when pressing the navigation link */ - onLinkPress: () => void; + onLinkPress?: () => void; }; // eslint-disable-next-line rulesdir/no-negated-variables diff --git a/src/pages/ErrorPage/ErrorBodyText/index.tsx b/src/pages/ErrorPage/ErrorBodyText/index.tsx index 44c4f0ee2968..d9ece1ccc35b 100644 --- a/src/pages/ErrorPage/ErrorBodyText/index.tsx +++ b/src/pages/ErrorPage/ErrorBodyText/index.tsx @@ -8,6 +8,7 @@ import CONST from '@src/CONST'; function ErrorBodyText() { const styles = useThemeStyles(); const {translate} = useLocalize(); + return ( <Text> {`${translate('genericErrorPage.body.helpTextMobile')} `} diff --git a/src/pages/ErrorPage/NotFoundPage.tsx b/src/pages/ErrorPage/NotFoundPage.tsx index 968b4865a7d8..a324b048119a 100644 --- a/src/pages/ErrorPage/NotFoundPage.tsx +++ b/src/pages/ErrorPage/NotFoundPage.tsx @@ -1,21 +1,18 @@ import React from 'react'; import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView'; import ScreenWrapper from '@components/ScreenWrapper'; -import Navigation from '@libs/Navigation/Navigation'; -import ROUTES from '@src/ROUTES'; type NotFoundPageProps = { onBackButtonPress?: () => void; }; // eslint-disable-next-line rulesdir/no-negated-variables -function NotFoundPage({onBackButtonPress = () => Navigation.goBack(ROUTES.HOME)}: NotFoundPageProps) { +function NotFoundPage({onBackButtonPress}: NotFoundPageProps) { return ( <ScreenWrapper testID={NotFoundPage.displayName}> <FullPageNotFoundView shouldShow onBackButtonPress={onBackButtonPress} - onLinkPress={() => Navigation.dismissModal()} /> </ScreenWrapper> ); From 6950bbb66297ddb9964cbe259469fb2ff02f7d2d Mon Sep 17 00:00:00 2001 From: dukenv0307 <dukenv0307@gmail.com> Date: Wed, 10 Jan 2024 17:57:46 +0700 Subject: [PATCH 5/5] fix lint --- src/pages/ErrorPage/ErrorBodyText/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/ErrorPage/ErrorBodyText/index.tsx b/src/pages/ErrorPage/ErrorBodyText/index.tsx index d9ece1ccc35b..e675e0447361 100644 --- a/src/pages/ErrorPage/ErrorBodyText/index.tsx +++ b/src/pages/ErrorPage/ErrorBodyText/index.tsx @@ -8,7 +8,7 @@ import CONST from '@src/CONST'; function ErrorBodyText() { const styles = useThemeStyles(); const {translate} = useLocalize(); - + return ( <Text> {`${translate('genericErrorPage.body.helpTextMobile')} `}