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')} `}