small refactor to include thread follow button (#7314)

app/actions/local/thread.ts

@@ -10,9 +10,9 @@ import {getChannelById} from '@queries/servers/channel';
 import {getPostById} from '@queries/servers/post';
 import {getCurrentTeamId, getCurrentUserId, prepareCommonSystemValues, type PrepareCommonSystemValuesArgs, setCurrentTeamAndChannelId} from '@queries/servers/system';
 import {addChannelToTeamHistory, addTeamToTeamHistory} from '@queries/servers/team';
-import {getIsCRTEnabled, getThreadById, prepareThreadsFromReceivedPosts, queryThreadsInTeam} from '@queries/servers/thread';
+import {getThreadById, prepareThreadsFromReceivedPosts, queryThreadsInTeam} from '@queries/servers/thread';
 import {getCurrentUser} from '@queries/servers/user';
-import {dismissAllModalsAndPopToRoot, goToScreen} from '@screens/navigation';
+import {dismissAllModals, dismissAllModalsAndPopToRoot, dismissAllOverlays, goToScreen} from '@screens/navigation';
 import EphemeralStore from '@store/ephemeral_store';
 import NavigationStore from '@store/navigation_store';
 import {isTablet} from '@utils/helpers';
@@ -77,8 +77,23 @@ export const switchToThread = async (serverUrl: string, rootId: string, isFromNo
         const currentTeamId = await getCurrentTeamId(database);
         const isTabletDevice = await isTablet();
         const teamId = channel.teamId || currentTeamId;
+        const currentThreadId = EphemeralStore.getCurrentThreadId();
+
+        EphemeralStore.setCurrentThreadId(rootId);
+        if (isFromNotification) {
+            if (currentThreadId && currentThreadId === rootId && NavigationStore.getScreensInStack().includes(Screens.THREAD)) {
+                await dismissAllModals();
+                await dismissAllOverlays();
+                return {};
+            }
+
+            await dismissAllModalsAndPopToRoot();
+            await NavigationStore.waitUntilScreenIsTop(Screens.HOME);
+            if (currentTeamId !== teamId && isTabletDevice) {
+                DeviceEventEmitter.emit(Navigation.NAVIGATION_HOME, Screens.GLOBAL_THREADS);
+            }
+        }
 
-        let switchingTeams = false;
         if (currentTeamId === teamId) {
             const models = await prepareCommonSystemValues(operator, {
                 currentChannelId: channel.id,
@@ -88,7 +103,6 @@ export const switchToThread = async (serverUrl: string, rootId: string, isFromNo
             }
         } else {
             const modelPromises: Array<Promise<Model[]>> = [];
-            switchingTeams = true;
             modelPromises.push(addTeamToTeamHistory(operator, teamId, true));
             const commonValues: PrepareCommonSystemValuesArgs = {
                 currentChannelId: channel.id,
@@ -101,33 +115,6 @@ export const switchToThread = async (serverUrl: string, rootId: string, isFromNo
             }
         }
 
-        if (isFromNotification) {
-            await dismissAllModalsAndPopToRoot();
-            await NavigationStore.waitUntilScreenIsTop(Screens.HOME);
-            if (switchingTeams && isTabletDevice) {
-                DeviceEventEmitter.emit(Navigation.NAVIGATION_HOME, Screens.GLOBAL_THREADS);
-            }
-        }
-
-        // Modal right buttons
-        const rightButtons = [];
-
-        const isCRTEnabled = await getIsCRTEnabled(database);
-        if (isCRTEnabled) {
-            // CRT: Add follow/following button
-            rightButtons.push({
-                id: 'thread-follow-button',
-                component: {
-                    id: post.id,
-                    name: Screens.THREAD_FOLLOW_BUTTON,
-                    passProps: {
-                        teamId: channel.teamId,
-                        threadId: post.id,
-                    },
-                },
-            });
-        }
-
         // Get translation by user locale
         const translations = getTranslations(user.locale);
 
@@ -143,8 +130,6 @@ export const switchToThread = async (serverUrl: string, rootId: string, isFromNo
             subtitle = subtitle.replace('{channelName}', channel.displayName);
         }
 
-        EphemeralStore.setCurrentThreadId(rootId);
-
         goToScreen(Screens.THREAD, '', {rootId}, {
             topBar: {
                 title: {
@@ -159,13 +144,13 @@ export const switchToThread = async (serverUrl: string, rootId: string, isFromNo
                     noBorder: true,
                     active: true,
                 },
-                rightButtons,
             },
         });
 
         return {};
     } catch (error) {
         logError('Failed switchToThread', error);
+        EphemeralStore.setCurrentThreadId('');
         return {error};
     }
 };

app/screens/thread/index.tsx

@@ -8,6 +8,7 @@ import {distinctUntilChanged, switchMap} from 'rxjs/operators';
 
 import {observeCurrentCall} from '@calls/state';
 import {observePost} from '@queries/servers/post';
+import {observeIsCRTEnabled} from '@queries/servers/thread';
 
 import Thread from './thread';
 
@@ -20,8 +21,9 @@ const enhanced = withObservables(['rootId'], ({database, rootId}: WithDatabaseAr
     );
 
     return {
-        rootPost: observePost(database, rootId),
+        isCRTEnabled: observeIsCRTEnabled(database),
         isInACall,
+        rootPost: observePost(database, rootId),
     };
 });
 

app/screens/thread/thread.tsx

@@ -15,7 +15,7 @@ import {THREAD_ACCESSORIES_CONTAINER_NATIVE_ID} from '@constants/post_draft';
 import useAndroidHardwareBackHandler from '@hooks/android_back_handler';
 import useDidUpdate from '@hooks/did_update';
 import {useKeyboardTrackingPaused} from '@hooks/keyboard_tracking';
-import {popTopScreen} from '@screens/navigation';
+import {popTopScreen, setButtons} from '@screens/navigation';
 import EphemeralStore from '@store/ephemeral_store';
 
 import ThreadPostList from './thread_post_list';
@@ -26,8 +26,10 @@ import type {KeyboardTrackingViewRef} from 'react-native-keyboard-tracking-view'
 
 type ThreadProps = {
     componentId: AvailableScreens;
-    rootPost?: PostModel;
+    isCRTEnabled: boolean;
     isInACall: boolean;
+    rootId: string;
+    rootPost?: PostModel;
 };
 
 const edges: Edge[] = ['left', 'right'];
@@ -37,10 +39,9 @@ const styles = StyleSheet.create({
     flex: {flex: 1},
 });
 
-const Thread = ({componentId, rootPost, isInACall}: ThreadProps) => {
+const Thread = ({componentId, isCRTEnabled, rootId, rootPost, isInACall}: ThreadProps) => {
     const postDraftRef = useRef<KeyboardTrackingViewRef>(null);
     const [containerHeight, setContainerHeight] = useState(0);
-    const rootId = rootPost?.id || '';
 
     const close = () => {
         popTopScreen(componentId);
@@ -49,9 +50,27 @@ const Thread = ({componentId, rootPost, isInACall}: ThreadProps) => {
     useKeyboardTrackingPaused(postDraftRef, rootId, trackKeyboardForScreens);
     useAndroidHardwareBackHandler(componentId, close);
 
+    useEffect(() => {
+        if (isCRTEnabled && rootId) {
+            setButtons(componentId, {rightButtons: [{
+                id: `${componentId}-${rootId}`,
+                component: {
+                    id: rootId,
+                    name: Screens.THREAD_FOLLOW_BUTTON,
+                    passProps: {
+                        threadId: rootId,
+                    },
+                },
+            }]});
+        } else {
+            setButtons(componentId, {rightButtons: []});
+        }
+    }, [componentId, rootId, isCRTEnabled]);
+
     useEffect(() => {
         return () => {
             EphemeralStore.setCurrentThreadId('');
+            setButtons(componentId, {rightButtons: []});
         };
     }, []);
 
@@ -75,19 +94,19 @@ const Thread = ({componentId, rootPost, isInACall}: ThreadProps) => {
                 onLayout={onLayout}
             >
                 <RoundedHeaderContext/>
-                {Boolean(rootPost?.id) &&
+                {Boolean(rootPost) &&
                 <>
                     <View style={styles.flex}>
                         <ThreadPostList
-                            nativeID={rootPost!.id}
+                            nativeID={rootId}
                             rootPost={rootPost!}
                         />
                     </View>
                     <PostDraft
                         channelId={rootPost!.channelId}
-                        scrollViewNativeID={rootPost!.id}
+                        scrollViewNativeID={rootId}
                         accessoriesContainerID={THREAD_ACCESSORIES_CONTAINER_NATIVE_ID}
-                        rootId={rootPost!.id}
+                        rootId={rootId}
                         keyboardTracker={postDraftRef}
                         testID='thread.post_draft'
                         containerHeight={containerHeight}

app/screens/thread/thread_follow_button/index.ts

@@ -14,14 +14,12 @@ import ThreadFollowButton from './thread_follow_button';
 import type {WithDatabaseArgs} from '@typings/database/database';
 
 type Props = WithDatabaseArgs & {
-    teamId?: string;
     threadId?: string;
 };
 
-const enhanced = withObservables(['threadId'], ({teamId, threadId, database}: Props) => {
-    // Fallback in case teamId or threadId are not defined per navigation not setting the props bug.
+const enhanced = withObservables(['threadId'], ({threadId, database}: Props) => {
     const thId = threadId || EphemeralStore.getCurrentThreadId();
-    const tId = teamId ? of$(teamId) : observeTeamIdByThreadId(database, thId).pipe(
+    const tId = observeTeamIdByThreadId(database, thId).pipe(
         switchMap((t) => of$(t || '')),
     );