[TS migration] Migrate Signin to TypeScript

src/components/TextLink.tsx

@@ -79,4 +79,6 @@ function TextLink({href, onPress, children, style, onMouseDown = (event) => even
 
 TextLink.displayName = 'TextLink';
 
+export type {LinkProps, PressProps};
+
 export default forwardRef(TextLink);

src/pages/signin/LoginForm/BaseLoginForm.tsx

@@ -263,8 +263,7 @@ function BaseLoginForm({account, credentials, closeAccount, blurOnSubmit = false
                     autoCapitalize="none"
                     autoCorrect={false}
                     inputMode={CONST.INPUT_MODE.EMAIL}
-                    // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
-                    errorText={formError || ''}
+                    errorText={formError}
                     hasError={shouldShowServerError}
                     maxLength={CONST.LOGIN_CHARACTER_LIMIT}
                 />

src/pages/signin/LoginForm/index.native.tsx

@@ -9,8 +9,8 @@ function LoginForm({scrollPageToTop, ...rest}: LoginFormProps, ref: ForwardedRef
     const loginFormRef = useRef<InputHandle>();
 
     useImperativeHandle(ref, () => ({
-        isInputFocused: () => !!loginFormRef.current?.isInputFocused(),
-        clearDataAndFocus: (clearLogin = true) => loginFormRef.current?.clearDataAndFocus(clearLogin),
+        isInputFocused: loginFormRef.current ? loginFormRef.current.isInputFocused : () => false,
+        clearDataAndFocus: loginFormRef.current ? loginFormRef.current?.clearDataAndFocus : () => null,
     }));
 
     useEffect(() => {

src/pages/signin/SAMLSignInPage/index.native.tsx

@@ -1,6 +1,5 @@
 import React, {useCallback, useState} from 'react';
 import {withOnyx} from 'react-native-onyx';
-import type {OnyxEntry} from 'react-native-onyx';
 import WebView from 'react-native-webview';
 import type {WebViewNativeEvent} from 'react-native-webview/lib/WebViewTypes';
 import FullPageOfflineBlockingView from '@components/BlockingViews/FullPageOfflineBlockingView';
@@ -14,19 +13,9 @@ import * as Session from '@userActions/Session';
 import CONFIG from '@src/CONFIG';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
-import type {Account, Credentials} from '@src/types/onyx';
+import type {SAMLSignInPageNativeOnyxProps, SAMLSignInPageProps} from './types';
 
-type SAMLSignInPageOnyxProps = {
-    /** The credentials of the logged in person */
-    credentials: OnyxEntry<Credentials>;
-
-    /** State of the logging in user's account */
-    account: OnyxEntry<Account>;
-};
-
-type SAMLSignInPageProps = SAMLSignInPageOnyxProps;
-
-function SAMLSignInPage({credentials, account}: SAMLSignInPageProps) {
+function SAMLSignInPage({credentials, account}: SAMLSignInPageProps<SAMLSignInPageNativeOnyxProps>) {
     const samlLoginURL = `${CONFIG.EXPENSIFY.SAML_URL}?email=${credentials?.login}&referer=${CONFIG.EXPENSIFY.EXPENSIFY_CASH_REFERER}&platform=${getPlatform()}`;
     const [showNavigation, shouldShowNavigation] = useState(true);
 
@@ -42,18 +31,16 @@ function SAMLSignInPage({credentials, account}: SAMLSignInPageProps) {
             }
 
             const searchParams = new URLSearchParams(new URL(url).search);
-            if (searchParams.has('shortLivedAuthToken') && !account?.isLoading) {
+            const shortLivedAuthToken = searchParams.get('shortLivedAuthToken');
+            if (!account?.isLoading && credentials?.login && !!shortLivedAuthToken) {
                 Log.info('SAMLSignInPage - Successfully received shortLivedAuthToken. Signing in...');
-                const shortLivedAuthToken = searchParams.get('shortLivedAuthToken');
-                // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
-                Session.signInWithShortLivedAuthToken(credentials?.login || '', shortLivedAuthToken || '');
+                Session.signInWithShortLivedAuthToken(credentials.login, shortLivedAuthToken);
             }
 
             // If the login attempt is unsuccessful, set the error message for the account and redirect to sign in page
             if (searchParams.has('error')) {
                 Session.clearSignInData();
-                // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
-                Session.setAccountError(searchParams.get('error') || '');
+                Session.setAccountError(searchParams.get('error') ?? '');
                 Navigation.navigate(ROUTES.HOME);
             }
         },
@@ -91,7 +78,7 @@ function SAMLSignInPage({credentials, account}: SAMLSignInPageProps) {
 
 SAMLSignInPage.displayName = 'SAMLSignInPage';
 
-export default withOnyx<SAMLSignInPageProps, SAMLSignInPageOnyxProps>({
+export default withOnyx<SAMLSignInPageProps<SAMLSignInPageNativeOnyxProps>, SAMLSignInPageNativeOnyxProps>({
     credentials: {key: ONYXKEYS.CREDENTIALS},
     account: {key: ONYXKEYS.ACCOUNT},
 })(SAMLSignInPage);

src/pages/signin/SAMLSignInPage/index.tsx

@@ -1,19 +1,11 @@
 import React, {useEffect} from 'react';
 import {withOnyx} from 'react-native-onyx';
-import type {OnyxEntry} from 'react-native-onyx';
 import SAMLLoadingIndicator from '@components/SAMLLoadingIndicator';
 import CONFIG from '@src/CONFIG';
 import ONYXKEYS from '@src/ONYXKEYS';
-import type {Credentials} from '@src/types/onyx';
+import type {SAMLSignInPageOnyxProps, SAMLSignInPageProps} from './types';
 
-type SAMLSignInPageOnyxProps = {
-    /** The credentials of the logged in person */
-    credentials: OnyxEntry<Credentials>;
-};
-
-type SAMLSignInPageProps = SAMLSignInPageOnyxProps;
-
-function SAMLSignInPage({credentials}: SAMLSignInPageProps) {
+function SAMLSignInPage({credentials}: SAMLSignInPageProps<SAMLSignInPageOnyxProps>) {
     useEffect(() => {
         window.open(`${CONFIG.EXPENSIFY.SAML_URL}?email=${credentials?.login}&referer=${CONFIG.EXPENSIFY.EXPENSIFY_CASH_REFERER}`, '_self');
     }, [credentials?.login]);
@@ -23,6 +15,6 @@ function SAMLSignInPage({credentials}: SAMLSignInPageProps) {
 
 SAMLSignInPage.displayName = 'SAMLSignInPage';
 
-export default withOnyx<SAMLSignInPageProps, SAMLSignInPageOnyxProps>({
+export default withOnyx<SAMLSignInPageProps<SAMLSignInPageOnyxProps>, SAMLSignInPageOnyxProps>({
     credentials: {key: ONYXKEYS.CREDENTIALS},
 })(SAMLSignInPage);

src/pages/signin/SAMLSignInPage/types.ts

@@ -0,0 +1,16 @@
+import type {OnyxEntry} from 'react-native-onyx';
+import type {Account, Credentials} from '@src/types/onyx';
+
+type SAMLSignInPageOnyxProps = {
+    /** The credentials of the logged in person */
+    credentials: OnyxEntry<Credentials>;
+};
+
+type SAMLSignInPageNativeOnyxProps = SAMLSignInPageOnyxProps & {
+    /** State of the logging in user's account */
+    account: OnyxEntry<Account>;
+};
+
+type SAMLSignInPageProps<OnyxProps> = OnyxProps;
+
+export type {SAMLSignInPageProps, SAMLSignInPageNativeOnyxProps, SAMLSignInPageOnyxProps};

src/pages/signin/SignInPage.tsx

@@ -30,8 +30,8 @@ import ChooseSSOOrMagicCode from './ChooseSSOOrMagicCode';
 import EmailDeliveryFailurePage from './EmailDeliveryFailurePage';
 import LoginForm from './LoginForm';
 import type {InputHandle} from './LoginForm/types';
-import type {SignInPageLayoutRef} from './SignInPageLayout';
 import SignInPageLayout from './SignInPageLayout';
+import type {SignInPageLayoutRef} from './SignInPageLayout/types';
 import UnlinkLoginForm from './UnlinkLoginForm';
 import ValidateCodeForm from './ValidateCodeForm';
 

src/pages/signin/SignInPageLayout/BackgroundImage/index.ios.tsx

@@ -1,4 +1,3 @@
-import type {ImageStyle} from 'expo-image';
 import {Image} from 'expo-image';
 import React, {useMemo} from 'react';
 import type {ImageSourcePropType} from 'react-native';
@@ -16,7 +15,7 @@ function BackgroundImage({width, transitionDuration, isSmallScreen = false}: Bac
     return (
         <Image
             source={src as ImageSourcePropType}
-            style={[styles.signInBackground, StyleUtils.getWidthStyle(width) as ImageStyle]}
+            style={[styles.signInBackground, StyleUtils.getWidthStyle(width)]}
             transition={transitionDuration}
         />
     );

src/pages/signin/SignInPageLayout/Footer.tsx

@@ -1,10 +1,12 @@
 import React from 'react';
+import type {StyleProp, TextStyle} from 'react-native';
 import {View} from 'react-native';
 import SignInGradient from '@assets/images/home-fade-gradient--mobile.svg';
 import Hoverable from '@components/Hoverable';
 import * as Expensicons from '@components/Icon/Expensicons';
 import ImageSVG from '@components/ImageSVG';
 import Text from '@components/Text';
+import type {LinkProps, PressProps} from '@components/TextLink';
 import TextLink from '@components/TextLink';
 import useLocalize from '@hooks/useLocalize';
 import useStyleUtils from '@hooks/useStyleUtils';
@@ -16,13 +18,11 @@ import Socials from '@pages/signin/Socials';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import type {TranslationPaths} from '@src/languages/types';
+import type {SignInPageLayoutProps} from './types';
 
-type FooterProps = {
-    navigateFocus: () => void;
-    shouldShowSmallScreen?: boolean;
-};
+type FooterProps = Pick<SignInPageLayoutProps, 'navigateFocus' | 'shouldShowSmallScreen'>;
 
-type FooterColumnRow = ({onPress: () => void; link?: string} | {onPress?: () => void; link: string}) & {
+type FooterColumnRow = (LinkProps | PressProps) & {
     translationPath: TranslationPaths;
 };
 
@@ -31,44 +31,44 @@ type FooterColumnData = {
     rows: FooterColumnRow[];
 };
 
-const columns = ({navigateFocus}: {navigateFocus: () => void}): FooterColumnData[] => [
+const columns = ({navigateFocus = () => {}}: Pick<FooterProps, 'navigateFocus'>): FooterColumnData[] => [
     {
         translationPath: 'footer.features',
         rows: [
             {
-                link: CONST.FOOTER.EXPENSE_MANAGEMENT_URL,
+                href: CONST.FOOTER.EXPENSE_MANAGEMENT_URL,
                 translationPath: 'footer.expenseManagement',
             },
             {
-                link: CONST.FOOTER.SPEND_MANAGEMENT_URL,
+                href: CONST.FOOTER.SPEND_MANAGEMENT_URL,
                 translationPath: 'footer.spendManagement',
             },
             {
-                link: CONST.FOOTER.EXPENSE_REPORTS_URL,
+                href: CONST.FOOTER.EXPENSE_REPORTS_URL,
                 translationPath: 'footer.expenseReports',
             },
             {
-                link: CONST.FOOTER.COMPANY_CARD_URL,
+                href: CONST.FOOTER.COMPANY_CARD_URL,
                 translationPath: 'footer.companyCreditCard',
             },
             {
-                link: CONST.FOOTER.RECIEPT_SCANNING_URL,
+                href: CONST.FOOTER.RECIEPT_SCANNING_URL,
                 translationPath: 'footer.receiptScanningApp',
             },
             {
-                link: CONST.FOOTER.BILL_PAY_URL,
+                href: CONST.FOOTER.BILL_PAY_URL,
                 translationPath: 'footer.billPay',
             },
             {
-                link: CONST.FOOTER.INVOICES_URL,
+                href: CONST.FOOTER.INVOICES_URL,
                 translationPath: 'footer.invoicing',
             },
             {
-                link: CONST.FOOTER.PAYROLL_URL,
+                href: CONST.FOOTER.PAYROLL_URL,
                 translationPath: 'footer.payroll',
             },
             {
-                link: CONST.FOOTER.TRAVEL_URL,
+                href: CONST.FOOTER.TRAVEL_URL,
                 translationPath: 'footer.travel',
             },
         ],
@@ -77,27 +77,27 @@ const columns = ({navigateFocus}: {navigateFocus: () => void}): FooterColumnData
         translationPath: 'footer.resources',
         rows: [
             {
-                link: CONST.FOOTER.EXPENSIFY_APPROVED_URL,
+                href: CONST.FOOTER.EXPENSIFY_APPROVED_URL,
                 translationPath: 'footer.expensifyApproved',
             },
             {
-                link: CONST.FOOTER.PRESS_KIT_URL,
+                href: CONST.FOOTER.PRESS_KIT_URL,
                 translationPath: 'footer.pressKit',
             },
             {
-                link: CONST.FOOTER.SUPPORT_URL,
+                href: CONST.FOOTER.SUPPORT_URL,
                 translationPath: 'footer.support',
             },
             {
-                link: CONST.NEWHELP_URL,
+                href: CONST.NEWHELP_URL,
                 translationPath: 'footer.expensifyHelp',
             },
             {
-                link: CONST.FOOTER.COMMUNITY_URL,
+                href: CONST.FOOTER.COMMUNITY_URL,
                 translationPath: 'footer.community',
             },
             {
-                link: CONST.FOOTER.PRIVACY_URL,
+                href: CONST.FOOTER.PRIVACY_URL,
                 translationPath: 'footer.privacy',
             },
         ],
@@ -106,23 +106,23 @@ const columns = ({navigateFocus}: {navigateFocus: () => void}): FooterColumnData
         translationPath: 'footer.learnMore',
         rows: [
             {
-                link: CONST.FOOTER.ABOUT_URL,
+                href: CONST.FOOTER.ABOUT_URL,
                 translationPath: 'footer.aboutExpensify',
             },
             {
-                link: CONST.FOOTER.BLOG_URL,
+                href: CONST.FOOTER.BLOG_URL,
                 translationPath: 'footer.blog',
             },
             {
-                link: CONST.FOOTER.JOBS_URL,
+                href: CONST.FOOTER.JOBS_URL,
                 translationPath: 'footer.jobs',
             },
             {
-                link: CONST.FOOTER.ORG_URL,
+                href: CONST.FOOTER.ORG_URL,
                 translationPath: 'footer.expensifyOrg',
             },
             {
-                link: CONST.FOOTER.INVESTOR_RELATIONS_URL,
+                href: CONST.FOOTER.INVESTOR_RELATIONS_URL,
                 translationPath: 'footer.investorRelations',
             },
         ],
@@ -156,7 +156,7 @@ function Footer({shouldShowSmallScreen = false, navigateFocus}: FooterProps) {
     const footerColumns = [styles.footerColumnsContainer, columnDirection];
     const footerColumn = isVertical ? [styles.p4] : [styles.p4, isMediumScreenWidth ? styles.w50 : styles.w25];
     const footerWrapper = isVertical ? [StyleUtils.getBackgroundColorStyle(theme.signInPage), styles.overflowHidden] : [];
-    const getTextLinkStyle = (hovered: boolean) => [styles.footerRow, hovered ? styles.textBlue : {}];
+    const getTextLinkStyle: (hovered: boolean) => StyleProp<TextStyle> = (hovered) => [styles.footerRow, hovered ? styles.textBlue : {}];
     return (
         <View style={[styles.flex1]}>
             <View style={footerWrapper}>
@@ -177,26 +177,24 @@ function Footer({shouldShowSmallScreen = false, navigateFocus}: FooterProps) {
                             >
                                 <Text style={[styles.textHeadline, styles.footerTitle]}>{translate(column.translationPath)}</Text>
                                 <View style={[styles.footerRow]}>
-                                    {column.rows.map(({link, onPress, translationPath}) => (
+                                    {column.rows.map(({href, onPress, translationPath}) => (
                                         <Hoverable key={translationPath}>
                                             {(hovered) => (
                                                 <View>
-                                                    {link ? (
+                                                    {onPress ? (
                                                         <TextLink
                                                             style={getTextLinkStyle(hovered)}
-                                                            href={link}
+                                                            onPress={onPress}
                                                         >
                                                             {translate(translationPath)}
                                                         </TextLink>
                                                     ) : (
-                                                        onPress && (
-                                                            <TextLink
-                                                                style={getTextLinkStyle(hovered)}
-                                                                onPress={onPress}
-                                                            >
-                                                                {translate(translationPath)}
-                                                            </TextLink>
-                                                        )
+                                                        <TextLink
+                                                            style={getTextLinkStyle(hovered)}
+                                                            href={href}
+                                                        >
+                                                            {translate(translationPath)}
+                                                        </TextLink>
                                                     )}
                                                 </View>
                                             )}

src/pages/signin/SignInHeroCopy.tsx → src/pages/signin/SignInPageLayout/SignInHeroCopy.tsx

@@ -6,16 +6,11 @@ import useStyleUtils from '@hooks/useStyleUtils';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import variables from '@styles/variables';
+import type {SignInPageLayoutProps} from './types';
 
-type SignInHeroCopyProps = {
-    /** Override the green headline copy */
-    customHeadline?: string;
+type SignInHeroCopyProps = Pick<SignInPageLayoutProps, 'customHeadline' | 'customHeroBody'>;
 
-    /** Override the smaller hero body copy below the headline */
-    customHeroBody?: string;
-};
-
-function SignInHeroCopy({customHeadline = '', customHeroBody = ''}: SignInHeroCopyProps) {
+function SignInHeroCopy({customHeadline, customHeroBody}: SignInHeroCopyProps) {
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
     const {isMediumScreenWidth, isLargeScreenWidth} = useWindowDimensions();
@@ -30,9 +25,13 @@ function SignInHeroCopy({customHeadline = '', customHeroBody = ''}: SignInHeroCo
                     isLargeScreenWidth && StyleUtils.getFontSizeStyle(variables.fontSizeSignInHeroLarge),
                 ]}
             >
+                {/* eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing */}
                 {customHeadline || translate('login.hero.header')}
             </Text>
-            <Text style={[styles.loginHeroBody]}>{customHeroBody || translate('login.hero.body')}</Text>
+            <Text style={[styles.loginHeroBody]}>
+                {/* eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing */}
+                {customHeroBody || translate('login.hero.body')}
+            </Text>
         </View>
     );
 }