fix: message sent status displayed for last outgoing message

ts/components/conversation/message/message-content/MessageStatus.tsx

@@ -6,7 +6,7 @@ import { useMessageExpirationPropsById } from '../../../../hooks/useParamSelecto
 import { useMessageStatus } from '../../../../state/selectors';
 
 import { useIsDetailMessageView } from '../../../../contexts/isDetailViewContext';
-import { getMostRecentMessageId } from '../../../../state/selectors/conversations';
+import { getMostRecentOutgoingMessageId } from '../../../../state/selectors/conversations';
 import { useSelectedIsGroupOrCommunity } from '../../../../state/selectors/selectedConversation';
 import { SpacerXS } from '../../../basic/Text';
 import { SessionIcon, SessionIconType } from '../../../icon';
@@ -122,10 +122,9 @@ function useIsExpiring(messageId: string) {
   );
 }
 
-function useIsMostRecentMessage(messageId: string) {
+function useIsMostRecentOutgoingMessage(messageId: string) {
-  const mostRecentMessageId = useSelector(getMostRecentMessageId);
+  const mostRecentOutgoingMessageId = useSelector(getMostRecentOutgoingMessageId);
-  const isMostRecentMessage = mostRecentMessageId === messageId;
+  return mostRecentOutgoingMessageId === messageId;
-  return isMostRecentMessage;
 }
 
 function MessageStatusExpireTimer(props: Pick<Props, 'messageId'>) {
@@ -180,11 +179,11 @@ function IconForExpiringMessageId({
 
 const MessageStatusSent = ({ dataTestId, messageId }: Omit<Props, 'isDetailView'>) => {
   const isExpiring = useIsExpiring(messageId);
-  const isMostRecentMessage = useIsMostRecentMessage(messageId);
+  const isMostRecentOutgoingMessage = useIsMostRecentOutgoingMessage(messageId);
   const isGroup = useSelectedIsGroupOrCommunity();
 
-  // we hide a "sent" message status which is not expiring except for the most recent message
+  // we hide the "sent" message status for a non-expiring message unless if it's the most recent outgoing message
-  if (!isExpiring && !isMostRecentMessage) {
+  if (!isExpiring && !isMostRecentOutgoingMessage) {
     return null;
   }
   return (
@@ -208,10 +207,10 @@ const MessageStatusRead = ({
   const isExpiring = useIsExpiring(messageId);
   const isGroup = useSelectedIsGroupOrCommunity();
 
-  const isMostRecentMessage = useIsMostRecentMessage(messageId);
+  const isMostRecentOutgoingMessage = useIsMostRecentOutgoingMessage(messageId);
 
   // we hide an outgoing "read" message status which is not expiring except for the most recent message
-  if (!isIncoming && !isExpiring && !isMostRecentMessage) {
+  if (!isIncoming && !isExpiring && !isMostRecentOutgoingMessage) {
     return null;
   }
 

ts/state/selectors/conversations.ts

@@ -1,6 +1,6 @@
 /* eslint-disable no-restricted-syntax */
 import { createSelector } from '@reduxjs/toolkit';
-import { filter, isEmpty, isFinite, isNumber, pick, sortBy, toNumber } from 'lodash';
+import { filter, first, isEmpty, isFinite, isNumber, pick, sortBy, toNumber } from 'lodash';
 
 import {
   ConversationLookupType,
@@ -593,6 +593,14 @@ export const getMostRecentMessageId = (state: StateType): string | null => {
   return state.conversations.mostRecentMessageId;
 };
 
+export const getMostRecentOutgoingMessageId = createSelector(
+  getSortedMessagesOfSelectedConversation,
+  (messages: Array<MessageModelPropsWithoutConvoProps>): string | undefined => {
+    return first(messages.filter(m => m.propsForMessage.direction === 'outgoing'))?.propsForMessage
+      .id;
+  }
+);
+
 export const getOldestMessageId = createSelector(
   getSortedMessagesOfSelectedConversation,
   (messages: Array<MessageModelPropsWithoutConvoProps>): string | undefined => {