Merge pull request #27162 from rayane-djouah/Fix-Report-Conversation-…

…history-does-not-scroll-down-after-sending-a-message-and-IOU

src/pages/home/report/ReportActionsList.js

@@ -74,6 +74,12 @@ const MSG_VISIBLE_THRESHOLD = 250;
 // the useRef value gets reset when the reportID changes, so we use a global variable to keep track
 let prevReportID = null;
 
+// In the component we are subscribing to the arrival of new actions.
+// As there is the possibility that there are multiple instances of a ReportScreen
+// for the same report, we only ever want one subscription to be active, as
+// the subscriptions could otherwise be conflicting.
+const newActionUnsubscribeMap = {};
+
 /**
  * Create a unique key for each action in the FlatList.
  * We use the reportActionID that is a string representation of a random 64-bit int, which should be
@@ -176,6 +182,44 @@ function ReportActionsList({
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [report.lastReadTime]);
 
+    useEffect(() => {
+        // Why are we doing this, when in the cleanup of the useEffect we are already calling the unsubscribe function?
+        // Answer: On web, when navigating to another report screen, the previous report screen doesn't get unmounted,
+        //         meaning that the cleanup might not get called. When we then open a report we had open already previosuly, a new
+        //         ReportScreen will get created. Thus, we have to cancel the earlier subscription of the previous screen,
+        //         because the two subscriptions could conflict!
+        //         In case we return to the previous screen (e.g. by web back navigation) the useEffect for that screen would
+        //         fire again, as the focus has changed and will set up the subscription correctly again.
+        const previousSubUnsubscribe = newActionUnsubscribeMap[report.reportID];
+        if (previousSubUnsubscribe) {
+            previousSubUnsubscribe();
+        }
+
+        // This callback is triggered when a new action arrives via Pusher and the event is emitted from Report.js. This allows us to maintain
+        // a single source of truth for the "new action" event instead of trying to derive that a new action has appeared from looking at props.
+        const unsubscribe = Report.subscribeToNewActionEvent(report.reportID, (isFromCurrentUser) => {
+            // If a new comment is added and it's from the current user scroll to the bottom otherwise leave the user positioned where
+            // they are now in the list.
+            if (!isFromCurrentUser) {
+                return;
+            }
+            reportScrollManager.scrollToBottom();
+        });
+
+        const cleanup = () => {
+            if (unsubscribe) {
+                unsubscribe();
+            }
+            Report.unsubscribeFromReportChannel(report.reportID);
+        };
+
+        newActionUnsubscribeMap[report.reportID] = cleanup;
+
+        return cleanup;
+
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [report.reportID]);
+
     /**
      * Show/hide the new floating message counter when user is scrolling back/forth in the history of messages.
      */