Skip to content

Commit

Permalink
Merge pull request #33062 from callstack-internal/pac-guerreiro/refac…
Browse files Browse the repository at this point in the history
…tor/migrate-loginwithshortlivedauthtokenpage-to-typescript

[TS migration] Migrate 'LogInWithShortLivedAuthToken' page to TypeScript
  • Loading branch information
amyevans authored Jan 15, 2024
2 parents 35a507d + 3e2413e commit 996937b
Show file tree
Hide file tree
Showing 2 changed files with 23 additions and 45 deletions.
10 changes: 6 additions & 4 deletions src/libs/Navigation/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import type {CommonActions, NavigationContainerRefWithCurrent, NavigationHelpers
import type {ValueOf} from 'type-fest';
import type CONST from '@src/CONST';
import type NAVIGATORS from '@src/NAVIGATORS';
import type {Route as Routes} from '@src/ROUTES';
import type SCREENS from '@src/SCREENS';

type NavigationRef = NavigationContainerRefWithCurrent<RootStackParamList>;
Expand Down Expand Up @@ -378,10 +379,11 @@ type RightModalNavigatorParamList = {
type PublicScreensParamList = {
[SCREENS.HOME]: undefined;
[SCREENS.TRANSITION_BETWEEN_APPS]: {
shouldForceLogin: string;
email: string;
shortLivedAuthToken: string;
exitTo: string;
email?: string;
error?: string;
shortLivedAuthToken?: string;
shortLivedToken?: string;
exitTo?: Routes;
};
[SCREENS.VALIDATE_LOGIN]: {
accountID: string;
Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import lodashGet from 'lodash/get';
import PropTypes from 'prop-types';
import type {StackScreenProps} from '@react-navigation/stack';
import React, {useEffect} from 'react';
import {View} from 'react-native';
import type {OnyxEntry} from 'react-native-onyx';
import {withOnyx} from 'react-native-onyx';
import FullScreenLoadingIndicator from '@components/FullscreenLoadingIndicator';
import Icon from '@components/Icon';
Expand All @@ -13,72 +13,50 @@ import useLocalize from '@hooks/useLocalize';
import useTheme from '@hooks/useTheme';
import useThemeStyles from '@hooks/useThemeStyles';
import Navigation from '@libs/Navigation/Navigation';
import type {PublicScreensParamList} from '@libs/Navigation/types';
import * as Session from '@userActions/Session';
import ONYXKEYS from '@src/ONYXKEYS';
import type SCREENS from '@src/SCREENS';
import type {Account} from '@src/types/onyx';

const propTypes = {
/** The parameters needed to authenticate with a short-lived token are in the URL */
route: PropTypes.shape({
/** Each parameter passed via the URL */
params: PropTypes.shape({
/** Short-lived authToken to sign in a user */
shortLivedAuthToken: PropTypes.string,

/** Short-lived authToken to sign in as a user, if they are coming from the old mobile app */
shortLivedToken: PropTypes.string,

/** The email of the transitioning user */
email: PropTypes.string,
}),
}).isRequired,

type LogInWithShortLivedAuthTokenPageOnyxProps = {
/** The details about the account that the user is signing in with */
account: PropTypes.shape({
/** Whether a sign is loading */
isLoading: PropTypes.bool,
}),
account: OnyxEntry<Account>;
};

const defaultProps = {
account: {
isLoading: false,
},
};
type LogInWithShortLivedAuthTokenPageProps = LogInWithShortLivedAuthTokenPageOnyxProps & StackScreenProps<PublicScreensParamList, typeof SCREENS.TRANSITION_BETWEEN_APPS>;

function LogInWithShortLivedAuthTokenPage(props) {
function LogInWithShortLivedAuthTokenPage({route, account}: LogInWithShortLivedAuthTokenPageProps) {
const theme = useTheme();
const styles = useThemeStyles();
const {translate} = useLocalize();
const {email = '', shortLivedAuthToken = '', shortLivedToken = '', exitTo, error} = route?.params ?? {};

useEffect(() => {
const email = lodashGet(props, 'route.params.email', '');

// We have to check for both shortLivedAuthToken and shortLivedToken, as the old mobile app uses shortLivedToken, and is not being actively updated.
const shortLivedAuthToken = lodashGet(props, 'route.params.shortLivedAuthToken', '') || lodashGet(props, 'route.params.shortLivedToken', '');
const token = shortLivedAuthToken || shortLivedToken;

// Try to authenticate using the shortLivedToken if we're not already trying to load the accounts
if (shortLivedAuthToken && !props.account.isLoading) {
Session.signInWithShortLivedAuthToken(email, shortLivedAuthToken);
if (token && !account?.isLoading) {
Session.signInWithShortLivedAuthToken(email, token);
return;
}

// If an error is returned as part of the route, ensure we set it in the onyxData for the account
const error = lodashGet(props, 'route.params.error', '');
if (error) {
Session.setAccountError(error);
}

const exitTo = lodashGet(props, 'route.params.exitTo', '');
if (exitTo) {
Navigation.isNavigationReady().then(() => {
Navigation.navigate(exitTo);
});
}
// The only dependencies of the effect are based on props.route
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [props.route]);
}, [route]);

if (props.account.isLoading) {
if (account?.isLoading) {
return <FullScreenLoadingIndicator />;
}

Expand All @@ -94,7 +72,7 @@ function LogInWithShortLivedAuthTokenPage(props) {
</View>
<Text style={[styles.textHeadline, styles.textXXLarge]}>{translate('deeplinkWrapper.launching')}</Text>
<View style={styles.mt2}>
<Text style={[styles.fontSizeNormal, styles.textAlignCenter]}>
<Text style={styles.textAlignCenter}>
{translate('deeplinkWrapper.expired')}{' '}
<TextLink
onPress={() => {
Expand All @@ -119,10 +97,8 @@ function LogInWithShortLivedAuthTokenPage(props) {
);
}

LogInWithShortLivedAuthTokenPage.propTypes = propTypes;
LogInWithShortLivedAuthTokenPage.defaultProps = defaultProps;
LogInWithShortLivedAuthTokenPage.displayName = 'LogInWithShortLivedAuthTokenPage';

export default withOnyx({
export default withOnyx<LogInWithShortLivedAuthTokenPageProps, LogInWithShortLivedAuthTokenPageOnyxProps>({
account: {key: ONYXKEYS.ACCOUNT},
})(LogInWithShortLivedAuthTokenPage);

0 comments on commit 996937b

Please sign in to comment.