Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Refactor LogInWithShortLivedAuthTokenPage to a functional component #20112

Merged
merged 2 commits into from
Jun 5, 2023
Merged

Refactor LogInWithShortLivedAuthTokenPage to a functional component #20112

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9a7f659
Refactor `LogInWithShortLivedAuthTokenPage` to a function component
francoisl Jun 2, 2023
33eb814
Fix effect dependency, add missing component `displayName`
francoisl Jun 2, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
80 changes: 41 additions & 39 deletions src/pages/LogInWithShortLivedAuthTokenPage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, {Component} from 'react';
import React, {useEffect} from 'react';
import lodashGet from 'lodash/get';
import PropTypes from 'prop-types';
import {withOnyx} from 'react-native-onyx';
Expand All @@ -18,14 +18,14 @@ import TextLink from '../components/TextLink';
import ONYXKEYS from '../ONYXKEYS';

const propTypes = {
/** The parameters needed to authenticate with a short lived token are in the URL */
/** 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 */
/** 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 */
/** 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 */
Expand All @@ -35,68 +35,70 @@ const propTypes = {

...withLocalizePropTypes,

/** Whether the short lived auth token is valid */
/** Whether the short-lived auth token is valid */
isTokenValid: PropTypes.bool,
};

const defaultProps = {
isTokenValid: true,
};

class LogInWithShortLivedAuthTokenPage extends Component {
componentDidMount() {
const email = lodashGet(this.props, 'route.params.email', '');
const LogInWithShortLivedAuthTokenPage = (props) => {
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(this.props, 'route.params.shortLivedAuthToken', '') || lodashGet(this.props, 'route.params.shortLivedToken', '');
const shortLivedAuthToken = lodashGet(props, 'route.params.shortLivedAuthToken', '') || lodashGet(props, 'route.params.shortLivedToken', '');
if (shortLivedAuthToken) {
Session.signInWithShortLivedAuthToken(email, shortLivedAuthToken);
return;
}
const exitTo = lodashGet(this.props, 'route.params.exitTo', '');
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]);

if (props.isTokenValid) {
return <FullScreenLoadingIndicator />;
}

render() {
if (this.props.isTokenValid) {
return <FullScreenLoadingIndicator />;
}
return (
<View style={styles.deeplinkWrapperContainer}>
<View style={styles.deeplinkWrapperMessage}>
<View style={styles.mb2}>
<Icon
width={200}
height={164}
src={Illustrations.RocketBlue}
/>
</View>
<Text style={[styles.textHeadline, styles.textXXLarge]}>{this.props.translate('deeplinkWrapper.launching')}</Text>
<View style={styles.mt2}>
<Text style={[styles.fontSizeNormal, styles.textAlignCenter]}>
{this.props.translate('deeplinkWrapper.expired')} <TextLink onPress={() => Navigation.navigate()}>{this.props.translate('deeplinkWrapper.signIn')}</TextLink>
</Text>
</View>
</View>
<View style={styles.deeplinkWrapperFooter}>
return (
<View style={styles.deeplinkWrapperContainer}>
<View style={styles.deeplinkWrapperMessage}>
<View style={styles.mb2}>
<Icon
width={154}
height={34}
fill={colors.green}
src={Expensicons.ExpensifyWordmark}
width={200}
height={164}
src={Illustrations.RocketBlue}
/>
</View>
<Text style={[styles.textHeadline, styles.textXXLarge]}>{props.translate('deeplinkWrapper.launching')}</Text>
<View style={styles.mt2}>
<Text style={[styles.fontSizeNormal, styles.textAlignCenter]}>
{props.translate('deeplinkWrapper.expired')} <TextLink onPress={() => Navigation.navigate()}>{props.translate('deeplinkWrapper.signIn')}</TextLink>
</Text>
</View>
</View>
);
}
}
<View style={styles.deeplinkWrapperFooter}>
<Icon
width={154}
height={34}
fill={colors.green}
src={Expensicons.ExpensifyWordmark}
/>
</View>
</View>
);
};

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

export default compose(
withLocalize,
Expand Down