From 4288aed65ed8d4536de2272dfe142c1d0766e8e2 Mon Sep 17 00:00:00 2001
From: Bernhard Owen Josephus <bernhard.josephus@gmail.com>
Date: Thu, 4 Apr 2024 22:10:21 +0800
Subject: [PATCH 1/3] fix top bar doesn't rerender when session changes

---
 .../createCustomBottomTabNavigator/TopBar.tsx         | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/TopBar.tsx b/src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/TopBar.tsx
index 38bfe4af9ab6..84d427389920 100644
--- a/src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/TopBar.tsx
+++ b/src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/TopBar.tsx
@@ -17,19 +17,21 @@ import * as Session from '@userActions/Session';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
-import type {Policy} from '@src/types/onyx';
+import type {Policy, Session as SessionType} from '@src/types/onyx';
 
 type TopBarOnyxProps = {
     policy: OnyxEntry<Policy>;
+    session: OnyxEntry<SessionType>;
 };
 
 // eslint-disable-next-line react/no-unused-prop-types
 type TopBarProps = {activeWorkspaceID?: string} & TopBarOnyxProps;
 
-function TopBar({policy}: TopBarProps) {
+function TopBar({policy, session}: TopBarProps) {
     const styles = useThemeStyles();
     const theme = useTheme();
     const {translate} = useLocalize();
+    const isAnonymousUser = session?.authTokenType === CONST.AUTH_TOKEN_TYPES.ANONYMOUS;
 
     const headerBreadcrumb = policy?.name
         ? {type: CONST.BREADCRUMB_TYPE.STRONG, text: policy.name}
@@ -57,7 +59,7 @@ function TopBar({policy}: TopBarProps) {
                         />
                     </View>
                 </View>
-                {Session.isAnonymousUser() ? (
+                {isAnonymousUser ? (
                     <SignInButton />
                 ) : (
                     <Tooltip text={translate('common.search')}>
@@ -84,4 +86,7 @@ export default withOnyx<TopBarProps, TopBarOnyxProps>({
     policy: {
         key: ({activeWorkspaceID}) => `${ONYXKEYS.COLLECTION.POLICY}${activeWorkspaceID}`,
     },
+    session: {
+        key: ONYXKEYS.SESSION,
+    },
 })(TopBar);

From 1460677b82e832bfd8ac01317016acd6ca484c95 Mon Sep 17 00:00:00 2001
From: Bernhard Owen Josephus <bernhard.josephus@gmail.com>
Date: Sat, 6 Apr 2024 00:52:29 +0800
Subject: [PATCH 2/3] add selector

---
 .../AppNavigator/createCustomBottomTabNavigator/TopBar.tsx     | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/TopBar.tsx b/src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/TopBar.tsx
index 84d427389920..30d240027ecf 100644
--- a/src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/TopBar.tsx
+++ b/src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/TopBar.tsx
@@ -21,7 +21,7 @@ import type {Policy, Session as SessionType} from '@src/types/onyx';
 
 type TopBarOnyxProps = {
     policy: OnyxEntry<Policy>;
-    session: OnyxEntry<SessionType>;
+    session: OnyxEntry<Pick<SessionType, 'authTokenType'>>;
 };
 
 // eslint-disable-next-line react/no-unused-prop-types
@@ -88,5 +88,6 @@ export default withOnyx<TopBarProps, TopBarOnyxProps>({
     },
     session: {
         key: ONYXKEYS.SESSION,
+        selector: (session) => session && {authTokenType: session.authTokenType},
     },
 })(TopBar);

From 18bc7b40ea975d4ba0f9d3c12ac2f4b36b50b4f9 Mon Sep 17 00:00:00 2001
From: Bernhard Owen Josephus <bernhard.josephus@gmail.com>
Date: Sat, 6 Apr 2024 02:12:37 +0800
Subject: [PATCH 3/3] DRY-ing code

---
 .../AppNavigator/createCustomBottomTabNavigator/TopBar.tsx  | 2 +-
 src/libs/actions/Session/index.ts                           | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/TopBar.tsx b/src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/TopBar.tsx
index 30d240027ecf..fd5282a8cfcd 100644
--- a/src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/TopBar.tsx
+++ b/src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/TopBar.tsx
@@ -31,7 +31,7 @@ function TopBar({policy, session}: TopBarProps) {
     const styles = useThemeStyles();
     const theme = useTheme();
     const {translate} = useLocalize();
-    const isAnonymousUser = session?.authTokenType === CONST.AUTH_TOKEN_TYPES.ANONYMOUS;
+    const isAnonymousUser = Session.isAnonymousUser(session);
 
     const headerBreadcrumb = policy?.name
         ? {type: CONST.BREADCRUMB_TYPE.STRONG, text: policy.name}
diff --git a/src/libs/actions/Session/index.ts b/src/libs/actions/Session/index.ts
index 17004baef43e..7f7531a094fa 100644
--- a/src/libs/actions/Session/index.ts
+++ b/src/libs/actions/Session/index.ts
@@ -2,7 +2,7 @@ import throttle from 'lodash/throttle';
 import type {ChannelAuthorizationData} from 'pusher-js/types/src/core/auth/options';
 import type {ChannelAuthorizationCallback} from 'pusher-js/with-encryption';
 import {InteractionManager, Linking, NativeModules} from 'react-native';
-import type {OnyxUpdate} from 'react-native-onyx';
+import type {OnyxEntry, OnyxUpdate} from 'react-native-onyx';
 import Onyx from 'react-native-onyx';
 import type {ValueOf} from 'type-fest';
 import * as PersistedRequests from '@libs/actions/PersistedRequests';
@@ -175,8 +175,8 @@ function signOut() {
 /**
  * Checks if the account is an anonymous account.
  */
-function isAnonymousUser(): boolean {
-    return session.authTokenType === CONST.AUTH_TOKEN_TYPES.ANONYMOUS;
+function isAnonymousUser(sessionParam?: OnyxEntry<Session>): boolean {
+    return (sessionParam?.authTokenType ?? session.authTokenType) === CONST.AUTH_TOKEN_TYPES.ANONYMOUS;
 }
 
 function hasStashedSession(): boolean {