[Refactor] Convert SignInPageHero.js to TypeScript

Expensify · Feb 9, 2024 · 20ba59f · 20ba59f
1 parent eaeebb9
commit 20ba59f
Showing 1 changed file with 11 additions and 20 deletions.
diff --git a/src/pages/signin/SignInPageHero.js → src/pages/signin/SignInPageHero.tsx b/src/pages/signin/SignInPageHero.js → src/pages/signin/SignInPageHero.tsx
@@ -1,37 +1,30 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 import {View} from 'react-native';
-import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withWindowDimensions';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useThemeStyles from '@hooks/useThemeStyles';
 import variables from '@styles/variables';
+import useWindowDimensions from "@hooks/useWindowDimensions";
 import SignInHeroCopy from './SignInHeroCopy';
 import SignInHeroImage from './SignInHeroImage';
 
-const propTypes = {
+type SignInPageHeroProps = {
     /** Override the green headline copy */
-    customHeadline: PropTypes.string,
+    customHeadline?: string;
 
     /** Override the smaller hero body copy below the headline */
-    customHeroBody: PropTypes.string,
-
-    ...windowDimensionsPropTypes,
-};
-
-const defaultProps = {
-    customHeadline: '',
-    customHeroBody: '',
+    customHeroBody?: string;
 };
 
-function SignInPageHero(props) {
+function SignInPageHero({customHeadline = '', customHeroBody = ''}: SignInPageHeroProps) {
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
+    const {windowWidth, windowHeight} = useWindowDimensions();
     return (
         <View
             style={[
-                StyleUtils.getHeight(props.windowHeight < variables.signInContentMinHeight ? variables.signInContentMinHeight : props.windowHeight),
+                StyleUtils.getHeight(windowHeight < variables.signInContentMinHeight ? variables.signInContentMinHeight : windowHeight),
                 StyleUtils.getMinimumHeight(variables.signInContentMinHeight),
-                props.windowWidth <= variables.tabletResponsiveWidthBreakpoint ? styles.flexColumn : styles.flexColumn,
+                windowWidth <= variables.tabletResponsiveWidthBreakpoint ? styles.flexColumn : styles.flexColumn,
                 styles.pt20,
                 StyleUtils.getMaximumWidth(variables.signInHeroContextMaxWidth),
                 styles.alignSelfCenter,
@@ -40,16 +33,14 @@ function SignInPageHero(props) {
             <View style={[styles.flex1, styles.alignSelfCenter, styles.gap7]}>
                 <SignInHeroImage />
                 <SignInHeroCopy
-                    customHeadline={props.customHeadline}
-                    customHeroBody={props.customHeroBody}
+                    customHeadline={customHeadline}
+                    customHeroBody={customHeroBody}
                 />
             </View>
         </View>
     );
 }
 
 SignInPageHero.displayName = 'SignInPageHero';
-SignInPageHero.propTypes = propTypes;
-SignInPageHero.defaultProps = defaultProps;
 
-export default withWindowDimensions(SignInPageHero);
+export default SignInPageHero;