diff --git a/src/pages/home/report/ReportActionsList.tsx b/src/pages/home/report/ReportActionsList.tsx index 9ff8762956d7..d01efdf28e9c 100644 --- a/src/pages/home/report/ReportActionsList.tsx +++ b/src/pages/home/report/ReportActionsList.tsx @@ -168,9 +168,11 @@ function ReportActionsList({ const userActiveSince = useRef(DateUtils.getDBTime()); const lastMessageTime = useRef(null); const [isVisible, setIsVisible] = useState(Visibility.isVisible()); + const [messageManuallyMarkedUnread, setMessageManuallyMarkedUnread] = useState(0); const isFocused = useIsFocused(); const [reportNameValuePairs] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_NAME_VALUE_PAIRS}${report?.reportID ?? -1}`); + const [accountID] = useOnyx(ONYXKEYS.SESSION, {selector: (session) => session?.accountID ?? 0}); useEffect(() => { const unsubscriber = Visibility.onVisibilityChange(() => { @@ -210,6 +212,7 @@ function ReportActionsList({ const [unreadMarkerTime, setUnreadMarkerTime] = useState(report.lastReadTime ?? ''); useEffect(() => { setUnreadMarkerTime(report.lastReadTime ?? ''); + setMessageManuallyMarkedUnread(0); // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps }, [report.reportID]); @@ -222,9 +225,16 @@ function ReportActionsList({ const nextMessage = sortedVisibleReportActions[index + 1]; const isCurrentMessageUnread = isMessageUnread(reportAction, unreadMarkerTime); 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; + let shouldDisplay = isCurrentMessageUnread && isNextMessageRead && !ReportActionsUtils.shouldHideNewMarker(reportAction); + + if (shouldDisplay && !messageManuallyMarkedUnread) { + // Prevent displaying a new marker line when report action is of type "REPORT_PREVIEW" and last actor is the current user + const isFromCurrentUser = accountID === (ReportActionsUtils.isReportPreviewAction(reportAction) ? !reportAction.childLastActorAccountID : reportAction.actorAccountID); + const isWithinVisibleThreshold = scrollingVerticalOffset.current < MSG_VISIBLE_THRESHOLD ? reportAction.created < (userActiveSince.current ?? '') : true; + shouldDisplay = !isFromCurrentUser && isWithinVisibleThreshold; + } + + return shouldDisplay; }; // Scan through each visible report action until we find the appropriate action to show the unread marker @@ -236,7 +246,7 @@ function ReportActionsList({ } return null; - }, [sortedVisibleReportActions, unreadMarkerTime]); + }, [accountID, sortedVisibleReportActions, unreadMarkerTime, messageManuallyMarkedUnread]); /** * Subscribe to read/unread events and update our unreadMarkerTime @@ -244,10 +254,11 @@ function ReportActionsList({ useEffect(() => { const unreadActionSubscription = DeviceEventEmitter.addListener(`unreadAction_${report.reportID}`, (newLastReadTime: string) => { setUnreadMarkerTime(newLastReadTime); - userActiveSince.current = DateUtils.getDBTime(); + setMessageManuallyMarkedUnread(new Date().getTime()); }); const readNewestActionSubscription = DeviceEventEmitter.addListener(`readNewestAction_${report.reportID}`, (newLastReadTime: string) => { setUnreadMarkerTime(newLastReadTime); + setMessageManuallyMarkedUnread(0); }); return () => { @@ -273,6 +284,7 @@ function ReportActionsList({ } setUnreadMarkerTime(mostRecentReportActionCreated); + setMessageManuallyMarkedUnread(0); // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps }, [sortedVisibleReportActions]);