Merge pull request #34219 from dukenv0307/fix/25193

Migrate Error page to Typescript
Expensify · Jan 15, 2024 · e85c339 · e85c339
2 parents 8480295 + 6950bbb
commit e85c339
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 34 deletions.
diff --git 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.js → src/pages/ErrorPage/ErrorBodyText/index.tsx b/src/pages/ErrorPage/ErrorBodyText/index.js → src/pages/ErrorPage/ErrorBodyText/index.tsx
@@ -1,29 +1,27 @@
 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/.../ErrorPage/ErrorBodyText/index.website.js → ...ErrorPage/ErrorBodyText/index.website.tsx b/.../ErrorPage/ErrorBodyText/index.website.js → ...ErrorPage/ErrorBodyText/index.website.tsx
diff --git a/src/pages/ErrorPage/GenericErrorPage.js → src/pages/ErrorPage/GenericErrorPage.tsx b/src/pages/ErrorPage/GenericErrorPage.js → 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>
                         <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 → src/pages/ErrorPage/NotFoundPage.tsx b/src/pages/ErrorPage/NotFoundPage.js → src/pages/ErrorPage/NotFoundPage.tsx
@@ -1,31 +1,23 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView';
 import ScreenWrapper from '@components/ScreenWrapper';
 
-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}: NotFoundPageProps) {
     return (
         <ScreenWrapper testID={NotFoundPage.displayName}>
             <FullPageNotFoundView
                 shouldShow
-                onBackButtonPress={props.onBackButtonPress}
+                onBackButtonPress={onBackButtonPress}
             />
         </ScreenWrapper>
     );
 }
 
 NotFoundPage.displayName = 'NotFoundPage';
-NotFoundPage.propTypes = propTypes;
-NotFoundPage.defaultProps = defaultProps;
 
 export default NotFoundPage;