From 9a7f659063d7d27bf5a923a9d0a764a3a3191cd1 Mon Sep 17 00:00:00 2001
From: Francois Laithier <francois@expensify.com>
Date: Fri, 2 Jun 2023 15:43:10 -0700
Subject: [PATCH 1/2] Refactor `LogInWithShortLivedAuthTokenPage` to a function
 component

---
 src/pages/LogInWithShortLivedAuthTokenPage.js | 70 +++++++++----------
 1 file changed, 35 insertions(+), 35 deletions(-)

diff --git a/src/pages/LogInWithShortLivedAuthTokenPage.js b/src/pages/LogInWithShortLivedAuthTokenPage.js
index 3651d34d9e26..daebd0d4bdb7 100644
--- a/src/pages/LogInWithShortLivedAuthTokenPage.js
+++ b/src/pages/LogInWithShortLivedAuthTokenPage.js
@@ -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';
@@ -43,57 +43,57 @@ 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);
             });
         }
+    }, []);
+
+    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;

From 33eb81473a0a60275a10c56a603dd5eda9740810 Mon Sep 17 00:00:00 2001
From: Francois Laithier <francois@expensify.com>
Date: Fri, 2 Jun 2023 16:04:54 -0700
Subject: [PATCH 2/2] Fix effect dependency, add missing component
 `displayName`

---
 src/pages/LogInWithShortLivedAuthTokenPage.js | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/pages/LogInWithShortLivedAuthTokenPage.js b/src/pages/LogInWithShortLivedAuthTokenPage.js
index daebd0d4bdb7..f13bce3fc4f3 100644
--- a/src/pages/LogInWithShortLivedAuthTokenPage.js
+++ b/src/pages/LogInWithShortLivedAuthTokenPage.js
@@ -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 */
@@ -35,7 +35,7 @@ const propTypes = {
 
     ...withLocalizePropTypes,
 
-    /** Whether the short lived auth token is valid */
+    /** Whether the short-lived auth token is valid */
     isTokenValid: PropTypes.bool,
 };
 
@@ -44,7 +44,6 @@ const defaultProps = {
 };
 
 const LogInWithShortLivedAuthTokenPage = (props) => {
-
     useEffect(() => {
         const email = lodashGet(props, 'route.params.email', '');
 
@@ -60,7 +59,9 @@ const LogInWithShortLivedAuthTokenPage = (props) => {
                 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 />;
@@ -97,6 +98,7 @@ const LogInWithShortLivedAuthTokenPage = (props) => {
 
 LogInWithShortLivedAuthTokenPage.propTypes = propTypes;
 LogInWithShortLivedAuthTokenPage.defaultProps = defaultProps;
+LogInWithShortLivedAuthTokenPage.displayName = 'LogInWithShortLivedAuthTokenPage';
 
 export default compose(
     withLocalize,