Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix new message is shown when send message #51113

39 changes: 32 additions & 7 deletions src/pages/home/report/ReportActionsList.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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(() => {
Expand Down Expand Up @@ -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.
Expand All @@ -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
*/
Expand All @@ -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;
MonilBhavsar marked this conversation as resolved.
Show resolved Hide resolved
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
Expand All @@ -236,7 +260,8 @@ function ReportActionsList({
}

return null;
}, [sortedVisibleReportActions, unreadMarkerTime]);
}, [sortedVisibleReportActions, unreadMarkerTime, accountID, prevSortedVisibleReportActionsObjects]);
prevUnreadMarkerReportActionID.current = unreadMarkerReportActionID;

/**
* Subscribe to read/unread events and update our unreadMarkerTime
Expand Down Expand Up @@ -267,23 +292,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);
hasNewestReportActionRef.current = hasNewestReportAction;
const previousLastIndex = useRef(lastActionIndex);
Expand Down Expand Up @@ -476,7 +501,7 @@ function ReportActionsList({

if (!isVisible || !isFocused) {
if (!lastMessageTime.current) {
lastMessageTime.current = sortedVisibleReportActions.at(0)?.created ?? '';
lastMessageTime.current = lastAction?.created ?? '';
}
return;
}
Expand Down
Loading