Merge pull request Expensify#51113 from bernhardoj/fix/50469-new-mess…

…age-is-shown-when-send-message

Fix new message is shown when send message

src/pages/home/report/ReportActionsList.tsx

@@ -14,6 +14,7 @@ import {usePersonalDetails} from '@components/OnyxProvider';
 import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
+import usePrevious from '@hooks/usePrevious';
 import useReportScrollManager from '@hooks/useReportScrollManager';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useThemeStyles from '@hooks/useThemeStyles';
@@ -170,6 +171,7 @@ function ReportActionsList({
     const isFocused = useIsFocused();
 
     const [reportNameValuePairs] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_NAME_VALUE_PAIRS}${report?.reportID ?? -1}`);
+    const [accountID] = useOnyx(ONYXKEYS.SESSION, {selector: (session) => session?.accountID});
 
     useEffect(() => {
         const unsubscriber = Visibility.onVisibilityChange(() => {
@@ -197,6 +199,16 @@ function ReportActionsList({
             ),
         [sortedReportActions, isOffline],
     );
+    const lastAction = sortedVisibleReportActions.at(0);
+    const sortedVisibleReportActionsObjects: OnyxTypes.ReportActions = useMemo(
+        () =>
+            sortedVisibleReportActions.reduce((actions, action) => {
+                Object.assign(actions, {[action.reportActionID]: action});
+                return actions;
+            }, {}),
+        [sortedVisibleReportActions],
+    );
+    const prevSortedVisibleReportActionsObjects = usePrevious(sortedVisibleReportActionsObjects);
 
     /**
      * The timestamp for the unread marker.
@@ -213,6 +225,7 @@ function ReportActionsList({
         // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
     }, [report.reportID]);
 
+    const prevUnreadMarkerReportActionID = useRef<string | null>(null);
     /**
      * The reportActionID the unread marker should display above
      */
@@ -223,7 +236,18 @@ function ReportActionsList({
             const isNextMessageRead = !nextMessage || !isMessageUnread(nextMessage, unreadMarkerTime);
             const shouldDisplay = isCurrentMessageUnread && isNextMessageRead && !ReportActionsUtils.shouldHideNewMarker(reportAction);
             const isWithinVisibleThreshold = scrollingVerticalOffset.current < MSG_VISIBLE_THRESHOLD ? reportAction.created < (userActiveSince.current ?? '') : true;
-            return shouldDisplay && isWithinVisibleThreshold;
+
+            // If no unread marker exists, don't set an unread marker for newly added messages from the current user.
+            const isFromCurrentUser = accountID === (ReportActionsUtils.isReportPreviewAction(reportAction) ? !reportAction.childLastActorAccountID : reportAction.actorAccountID);
+            const isNewMessage = !prevSortedVisibleReportActionsObjects[reportAction.reportActionID];
+            // The unread marker will show if the action's `created` time is later than `unreadMarkerTime`.
+            // The `unreadMarkerTime` has already been updated to match the optimistic action created time,
+            // but once the new action is saved on the backend, the actual created time will be later than the optimistic one.
+            // Therefore, we also need to prevent the unread marker from appearing for previously optimistic actions.
+            const isPreviouslyOptimistic = !!prevSortedVisibleReportActionsObjects[reportAction.reportActionID]?.isOptimisticAction && !reportAction.isOptimisticAction;
+            const shouldIgnoreUnreadForCurrentUserMessage = !prevUnreadMarkerReportActionID.current && isFromCurrentUser && (isNewMessage || isPreviouslyOptimistic);
+
+            return shouldDisplay && isWithinVisibleThreshold && !shouldIgnoreUnreadForCurrentUserMessage;
         };
 
         // Scan through each visible report action until we find the appropriate action to show the unread marker
@@ -237,7 +261,8 @@ function ReportActionsList({
         }
 
         return null;
-    }, [sortedVisibleReportActions, unreadMarkerTime]);
+    }, [sortedVisibleReportActions, unreadMarkerTime, accountID, prevSortedVisibleReportActionsObjects]);
+    prevUnreadMarkerReportActionID.current = unreadMarkerReportActionID;
 
     /**
      * Subscribe to read/unread events and update our unreadMarkerTime
@@ -268,23 +293,23 @@ function ReportActionsList({
             return;
         }
 
-        const mostRecentReportActionCreated = sortedVisibleReportActions.at(0)?.created ?? '';
+        const mostRecentReportActionCreated = lastAction?.created ?? '';
         if (mostRecentReportActionCreated <= unreadMarkerTime) {
             return;
         }
 
         setUnreadMarkerTime(mostRecentReportActionCreated);
 
         // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
-    }, [sortedVisibleReportActions]);
+    }, [lastAction?.created]);
 
-    const lastActionIndex = sortedVisibleReportActions.at(0)?.reportActionID;
+    const lastActionIndex = lastAction?.reportActionID;
     const reportActionSize = useRef(sortedVisibleReportActions.length);
     const lastVisibleActionCreated =
         (transactionThreadReport?.lastVisibleActionCreated ?? '') > (report.lastVisibleActionCreated ?? '')
             ? transactionThreadReport?.lastVisibleActionCreated
             : report.lastVisibleActionCreated;
-    const hasNewestReportAction = sortedVisibleReportActions.at(0)?.created === lastVisibleActionCreated;
+    const hasNewestReportAction = lastAction?.created === lastVisibleActionCreated;
     const hasNewestReportActionRef = useRef(hasNewestReportAction);
     // eslint-disable-next-line react-compiler/react-compiler
     hasNewestReportActionRef.current = hasNewestReportAction;
@@ -478,7 +503,7 @@ function ReportActionsList({
 
         if (!isVisible || !isFocused) {
             if (!lastMessageTime.current) {
-                lastMessageTime.current = sortedVisibleReportActions.at(0)?.created ?? '';
+                lastMessageTime.current = lastAction?.created ?? '';
             }
             return;
         }