Merge pull request #37584 from bernhardoj/fix/36976-sign-in-banner-st…

…ill-show-after-login

Fix sign in banner still showing for a moment after login

src/CONST.ts

@@ -3338,6 +3338,10 @@ const CONST = {
     SESSION_STORAGE_KEYS: {
         INITIAL_URL: 'INITIAL_URL',
     },
+
+    AUTH_TOKEN_TYPE: {
+        ANONYMOUS: 'anonymousAccount',
+    },
 } as const;
 
 type Country = keyof typeof CONST.ALL_COUNTRIES;

src/libs/Navigation/AppNavigator/AuthScreens.tsx

@@ -81,8 +81,7 @@ Onyx.connect({
         currentAccountID = value.accountID ?? -1;
 
         if (Navigation.isActiveRoute(ROUTES.SIGN_IN_MODAL)) {
-            // This means sign in in RHP was successful, so we can dismiss the modal and subscribe to user events
-            Navigation.dismissModal();
+            // This means sign in in RHP was successful, so we can subscribe to user events
             User.subscribeToUserEvents();
         }
     },

src/libs/ReportUtils.ts

@@ -438,7 +438,7 @@ Onyx.connect({
 
         currentUserEmail = value.email;
         currentUserAccountID = value.accountID;
-        isAnonymousUser = value.authTokenType === 'anonymousAccount';
+        isAnonymousUser = value.authTokenType === CONST.AUTH_TOKEN_TYPE.ANONYMOUS;
         currentUserPrivateDomain = isEmailPublicDomain(currentUserEmail ?? '') ? '' : Str.extractEmailDomain(currentUserEmail ?? '');
     },
 });

src/libs/actions/Session/index.ts

@@ -107,7 +107,7 @@ function signOut() {
  * Checks if the account is an anonymous account.
  */
 function isAnonymousUser(): boolean {
-    return sessionAuthTokenType === 'anonymousAccount';
+    return sessionAuthTokenType === CONST.AUTH_TOKEN_TYPE.ANONYMOUS;
 }
 
 function signOutAndRedirectToSignIn(shouldReplaceCurrentScreen?: boolean) {

src/pages/home/report/ReportActionsView.js

@@ -140,7 +140,7 @@ function ReportActionsView(props) {
     }, [props.network, isReportFullyVisible]);
 
     useEffect(() => {
-        const wasLoginChangedDetected = prevAuthTokenType === 'anonymousAccount' && !props.session.authTokenType;
+        const wasLoginChangedDetected = prevAuthTokenType === CONST.AUTH_TOKEN_TYPE.ANONYMOUS && !props.session.authTokenType;
         if (wasLoginChangedDetected && didUserLogInDuringSession() && isUserCreatedPolicyRoom(props.report)) {
             if (isReportFullyVisible) {
                 openReportIfNecessary();

src/pages/home/report/ReportFooter.js

@@ -16,7 +16,6 @@ import * as ReportUtils from '@libs/ReportUtils';
 import reportPropTypes from '@pages/reportPropTypes';
 import variables from '@styles/variables';
 import * as Report from '@userActions/Report';
-import * as Session from '@userActions/Session';
 import * as Task from '@userActions/Task';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
@@ -43,6 +42,12 @@ const propTypes = {
     /** Whether to show the compose input */
     shouldShowComposeInput: PropTypes.bool,
 
+    /** Session info for the currently logged in user. */
+    session: PropTypes.shape({
+        /** Currently logged in user auth token type */
+        authTokenType: PropTypes.string,
+    }),
+
     ...windowDimensionsPropTypes,
 };
 
@@ -54,14 +59,15 @@ const defaultProps = {
     lastReportAction: null,
     isEmptyChat: true,
     shouldShowComposeInput: false,
+    session: {},
 };
 
 function ReportFooter(props) {
     const styles = useThemeStyles();
     const {isOffline} = useNetwork();
     const chatFooterStyles = {...styles.chatFooter, minHeight: !isOffline ? CONST.CHAT_FOOTER_MIN_HEIGHT : 0};
     const isArchivedRoom = ReportUtils.isArchivedRoom(props.report);
-    const isAnonymousUser = Session.isAnonymousUser();
+    const isAnonymousUser = props.session.authTokenType === CONST.AUTH_TOKEN_TYPE.ANONYMOUS;
 
     const isSmallSizeLayout = props.windowWidth - (props.isSmallScreenWidth ? 0 : variables.sideBarWidth) < variables.anonymousReportFooterBreakpoint;
     const hideComposer = !ReportUtils.canUserPerformWriteAction(props.report);
@@ -159,6 +165,9 @@ export default compose(
             key: ONYXKEYS.SHOULD_SHOW_COMPOSE_INPUT,
             initialValue: false,
         },
+        session: {
+            key: ONYXKEYS.SESSION,
+        },
     }),
 )(
     memo(
@@ -173,6 +182,7 @@ export default compose(
             prevProps.shouldShowComposeInput === nextProps.shouldShowComposeInput &&
             prevProps.windowWidth === nextProps.windowWidth &&
             prevProps.isSmallScreenWidth === nextProps.isSmallScreenWidth &&
-            prevProps.isReportReadyForDisplay === nextProps.isReportReadyForDisplay,
+            prevProps.isReportReadyForDisplay === nextProps.isReportReadyForDisplay &&
+            isEqual(prevProps.session, nextProps.session),
     ),
 );

src/pages/signin/SignInModal.tsx

@@ -1,23 +1,35 @@
-import React from 'react';
+import React, {useEffect} from 'react';
+import type {OnyxEntry} from 'react-native-onyx';
+import {withOnyx} from 'react-native-onyx';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import ScreenWrapper from '@components/ScreenWrapper';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@hooks/useTheme';
 import Navigation from '@libs/Navigation/Navigation';
-import * as Session from '@userActions/Session';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
 import SCREENS from '@src/SCREENS';
+import type {Session} from '@src/types/onyx';
 import SignInPage from './SignInPage';
 
-function SignInModal() {
+type SignInModalOnyxProps = {
+    session: OnyxEntry<Session>;
+};
+
+type SignInModalProps = SignInModalOnyxProps;
+
+function SignInModal({session}: SignInModalProps) {
     const theme = useTheme();
     const StyleUtils = useStyleUtils();
 
-    if (!Session.isAnonymousUser()) {
-        // Signing in RHP is only for anonymous users
-        Navigation.isNavigationReady().then(() => {
-            Navigation.dismissModal();
-        });
-    }
+    useEffect(() => {
+        const isAnonymousUser = session?.authTokenType === CONST.AUTH_TOKEN_TYPE.ANONYMOUS;
+        if (!isAnonymousUser) {
+            // Signing in RHP is only for anonymous users
+            Navigation.isNavigationReady().then(() => Navigation.dismissModal());
+        }
+    }, [session?.authTokenType]);
+
     return (
         <ScreenWrapper
             style={[StyleUtils.getBackgroundColorStyle(theme.PAGE_THEMES[SCREENS.RIGHT_MODAL.SIGN_IN].backgroundColor)]}
@@ -34,4 +46,6 @@ function SignInModal() {
 
 SignInModal.displayName = 'SignInModal';
 
-export default SignInModal;
+export default withOnyx<SignInModalProps, SignInModalOnyxProps>({
+    session: {key: ONYXKEYS.SESSION},
+})(SignInModal);