feat: Sort user reactions chronologically [WPB-4253]

src/script/components/MessagesList/Message/ContentMessage/ContentMessage.tsx

@@ -29,7 +29,6 @@ import {useRelativeTimestamp} from 'src/script/hooks/useRelativeTimestamp';
 import {StatusType} from 'src/script/message/StatusType';
 import {useKoSubscribableChildren} from 'Util/ComponentUtil';
 import {getMessageAriaLabel} from 'Util/conversationMessages';
-import {groupByReactionUsers} from 'Util/ReactionUtil';
 
 import {ContentAsset} from './asset';
 import {MessageActionsMenu} from './MessageActions/MessageActions';
@@ -65,7 +64,7 @@ export interface ContentMessageProps extends Omit<MessageActions, 'onClickResetS
   onClickReaction: (emoji: string) => void;
 }
 
-const ContentMessageComponent: React.FC<ContentMessageProps> = ({
+export const ContentMessageComponent: React.FC<ContentMessageProps> = ({
   conversation,
   message,
   findMessage,
@@ -102,18 +101,19 @@ const ContentMessageComponent: React.FC<ContentMessageProps> = ({
     reactions,
     status,
     user,
+    quote,
   } = useKoSubscribableChildren(message, [
     'senderName',
     'timestamp',
     'ephemeral_caption',
     'ephemeral_status',
     'assets',
-    'other_likes',
     'was_edited',
     'failedToSend',
     'reactions',
     'status',
     'user',
+    'quote',
   ]);
 
   const shouldShowAvatar = (): boolean => {
@@ -140,9 +140,6 @@ const ContentMessageComponent: React.FC<ContentMessageProps> = ({
     setActionMenuVisibility(isMessageFocused || msgFocusState);
   }, [msgFocusState, isMessageFocused]);
 
-  const reactionGroupedByUser = groupByReactionUsers(reactions);
-  const reactionsTotalCount = Array.from(reactionGroupedByUser).length;
-
   return (
     <div
       aria-label={messageAriaLabel}
@@ -187,10 +184,10 @@ const ContentMessageComponent: React.FC<ContentMessageProps> = ({
               <EphemeralTimer message={message} />
             </div>
           )}
-          {message.quote() && (
+          {quote && (
             <Quote
               conversation={conversation}
-              quote={message.quote()}
+              quote={quote}
               selfId={selfId}
               findMessage={findMessage}
               showDetail={onClickImage}
@@ -235,9 +232,8 @@ const ContentMessageComponent: React.FC<ContentMessageProps> = ({
             handleActionMenuVisibility={setActionMenuVisibility}
             contextMenu={contextMenu}
             isMessageFocused={msgFocusState}
-            messageWithSection={hasMarker}
             handleReactionClick={onClickReaction}
-            reactionsTotalCount={reactionsTotalCount}
+            reactionsTotalCount={reactions.length}
             isRemovedFromConversation={conversation.removed_from_conversation()}
           />
         )}
@@ -253,7 +249,7 @@ const ContentMessageComponent: React.FC<ContentMessageProps> = ({
 
       <MessageReactionsList
         reactions={reactions}
-        userId={selfId.id}
+        selfUserId={selfId}
         handleReactionClick={onClickReaction}
         isMessageFocused={msgFocusState}
         onTooltipReactionCountClick={() => onClickReactionDetails(message)}
@@ -263,5 +259,3 @@ const ContentMessageComponent: React.FC<ContentMessageProps> = ({
     </div>
   );
 };
-
-export {ContentMessageComponent};

src/script/components/MessagesList/Message/ContentMessage/MessageActions/MessageActions.test.tsx

@@ -31,7 +31,6 @@ const defaultProps: MessageActionsMenuProps = {
   contextMenu: {entries: ko.observable([{label: 'option1', text: 'option1'}])},
   isMessageFocused: true,
   handleActionMenuVisibility: jest.fn(),
-  messageWithSection: false,
   handleReactionClick: jest.fn(),
   reactionsTotalCount: 0,
   isRemovedFromConversation: false,

src/script/components/MessagesList/Message/ContentMessage/MessageActions/MessageActions.tsx

@@ -59,7 +59,6 @@ export interface MessageActionsMenuProps {
   contextMenu: {entries: ko.Subscribable<ContextMenuEntry[]>};
   isMessageFocused: boolean;
   handleActionMenuVisibility: (isVisible: boolean) => void;
-  messageWithSection: boolean;
   handleReactionClick: (emoji: string) => void;
   reactionsTotalCount: number;
   isRemovedFromConversation: boolean;
@@ -71,7 +70,6 @@ const MessageActionsMenu: FC<MessageActionsMenuProps> = ({
   isMessageFocused,
   handleActionMenuVisibility,
   message,
-  messageWithSection,
   handleReactionClick,
   reactionsTotalCount,
   isRemovedFromConversation,
@@ -181,7 +179,6 @@ const MessageActionsMenu: FC<MessageActionsMenuProps> = ({
               handleKeyDown={handleKeyDown}
               resetActionMenuStates={resetActionMenuStates}
               wrapperRef={wrapperRef}
-              message={message}
               handleReactionClick={handleReactionClick}
             />
             {message.isReplyable() && (

src/script/components/MessagesList/Message/ContentMessage/MessageActions/MessageReactions/MessageReactions.test.tsx

@@ -21,7 +21,6 @@ import React from 'react';
 
 import {render, act, fireEvent, waitFor} from '@testing-library/react';
 
-import {ContentMessage} from 'src/script/entity/message/ContentMessage';
 import {t} from 'Util/LocalizerUtil';
 
 import {MessageReactions, MessageReactionsProps} from './MessageReactions';
@@ -32,7 +31,6 @@ const thumbsUpEmoji = '👍';
 const likeEmoji = '❤️';
 const wrapperRef = React.createRef<HTMLDivElement>();
 const defaultProps: MessageReactionsProps = {
-  message: new ContentMessage(),
   handleReactionClick: jest.fn(),
   messageFocusedTabIndex: 0,
   currentMsgActionName: '',

src/script/components/MessagesList/Message/ContentMessage/MessageActions/MessageReactions/MessageReactions.tsx

@@ -17,9 +17,8 @@
  *
  */
 
-import {useState, useCallback, RefObject, FC, useRef} from 'react';
+import {useState, RefObject, FC, useRef} from 'react';
 
-import {ContentMessage} from 'src/script/entity/message/ContentMessage';
 import {KEY} from 'Util/KeyboardUtil';
 import {t} from 'Util/LocalizerUtil';
 
@@ -46,7 +45,6 @@ export interface MessageReactionsProps {
   handleCurrentMsgAction: (actionName: string) => void;
   resetActionMenuStates: () => void;
   wrapperRef: RefObject<HTMLDivElement>;
-  message: ContentMessage;
   handleReactionClick: (emoji: string) => void;
 }
 
@@ -58,7 +56,6 @@ const MessageReactions: FC<MessageReactionsProps> = ({
   handleKeyDown,
   resetActionMenuStates,
   wrapperRef,
-  message,
   handleReactionClick,
 }) => {
   const isThumbUpAction = currentMsgActionName === MessageActionsId.THUMBSUP;
@@ -84,93 +81,78 @@ const MessageReactions: FC<MessageReactionsProps> = ({
     setShowEmojis(false);
   };
 
-  const handleReactionCurrentState = useCallback(
-    (actionName = '') => {
-      const isActive = !!actionName;
-      handleCurrentMsgAction(actionName);
-      handleMenuOpen(isActive);
-      setShowEmojis(isActive);
-    },
-    [handleCurrentMsgAction, handleMenuOpen],
-  );
+  const handleReactionCurrentState = (actionName = '') => {
+    const isActive = !!actionName;
+    handleCurrentMsgAction(actionName);
+    handleMenuOpen(isActive);
+    setShowEmojis(isActive);
+  };
+
+  const handleEmojiBtnClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    event.stopPropagation();
+    const selectedMsgActionName = event.currentTarget.dataset.uieName;
+    if (currentMsgActionName === selectedMsgActionName) {
+      // reset on double click
+      handleReactionCurrentState('');
+    } else if (selectedMsgActionName) {
+      handleReactionCurrentState(selectedMsgActionName);
+      showReactions(event.currentTarget.getBoundingClientRect());
+    }
+  };
 
-  const handleEmojiBtnClick = useCallback(
-    (event: React.MouseEvent<HTMLButtonElement>) => {
-      event.stopPropagation();
-      const selectedMsgActionName = event.currentTarget.dataset.uieName;
+  const handleEmojiKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>) => {
+    event.stopPropagation();
+    const selectedMsgActionName = event.currentTarget.dataset.uieName;
+    handleKeyDown(event);
+    if ([KEY.SPACE, KEY.ENTER].includes(event.key)) {
       if (currentMsgActionName === selectedMsgActionName) {
         // reset on double click
         handleReactionCurrentState('');
       } else if (selectedMsgActionName) {
         handleReactionCurrentState(selectedMsgActionName);
         showReactions(event.currentTarget.getBoundingClientRect());
       }
-    },
-    [currentMsgActionName, handleReactionCurrentState],
-  );
-
-  const handleEmojiKeyDown = useCallback(
-    (event: React.KeyboardEvent<HTMLButtonElement>) => {
-      event.stopPropagation();
-      const selectedMsgActionName = event.currentTarget.dataset.uieName;
-      handleKeyDown(event);
-      if ([KEY.SPACE, KEY.ENTER].includes(event.key)) {
-        if (currentMsgActionName === selectedMsgActionName) {
-          // reset on double click
-          handleReactionCurrentState('');
-        } else if (selectedMsgActionName) {
-          handleReactionCurrentState(selectedMsgActionName);
-          showReactions(event.currentTarget.getBoundingClientRect());
-        }
-      }
-    },
-    [currentMsgActionName, handleKeyDown, handleReactionCurrentState],
-  );
+    }
+  };
 
   const showReactions = (rect: DOMRect) => {
     setPOSX(rect.x);
     setPOSY(rect.y);
   };
 
-  const handleMsgActionClick = useCallback(
-    (event: React.MouseEvent<HTMLButtonElement>) => {
-      event.stopPropagation();
-      const actionType = event.currentTarget.dataset.uieName;
-      switch (actionType) {
-        case MessageActionsId.EMOJI:
-          handleEmojiBtnClick(event);
-          break;
-        case MessageActionsId.THUMBSUP:
-          toggleActiveMenu(event);
-          handleReactionClick(thumbsUpEmoji);
-          break;
-        case MessageActionsId.HEART:
-          toggleActiveMenu(event);
-          handleReactionClick(likeEmoji);
-          break;
-      }
-    },
-    [handleEmojiBtnClick, handleReactionClick, toggleActiveMenu],
-  );
+  const handleMsgActionClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    event.stopPropagation();
+    const actionType = event.currentTarget.dataset.uieName;
+    switch (actionType) {
+      case MessageActionsId.EMOJI:
+        handleEmojiBtnClick(event);
+        break;
+      case MessageActionsId.THUMBSUP:
+        toggleActiveMenu(event);
+        handleReactionClick(thumbsUpEmoji);
+        break;
+      case MessageActionsId.HEART:
+        toggleActiveMenu(event);
+        handleReactionClick(likeEmoji);
+        break;
+    }
+  };
 
-  const handleMsgActionKeyDown = useCallback(
-    (event: React.KeyboardEvent<HTMLButtonElement>) => {
-      event.stopPropagation();
-      const actionType = event.currentTarget.dataset.uieName;
-      switch (actionType) {
-        case MessageActionsId.EMOJI:
-          handleEmojiKeyDown(event);
-          break;
-        case MessageActionsId.THUMBSUP:
-          handleKeyDown(event);
-          break;
-        case MessageActionsId.HEART:
-          handleKeyDown(event);
-          break;
-      }
-    },
-    [handleEmojiKeyDown, handleKeyDown],
-  );
+  const handleMsgActionKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>) => {
+    event.stopPropagation();
+    const actionType = event.currentTarget.dataset.uieName;
+    switch (actionType) {
+      case MessageActionsId.EMOJI:
+        handleEmojiKeyDown(event);
+        break;
+      case MessageActionsId.THUMBSUP:
+        handleKeyDown(event);
+        break;
+      case MessageActionsId.HEART:
+        handleKeyDown(event);
+        break;
+    }
+  };
 
   return (
     <>

src/script/components/MessagesList/Message/ContentMessage/MessageActions/MessageReactions/MessageReactionsList.test.tsx

@@ -20,15 +20,20 @@
 import {render, fireEvent, within} from '@testing-library/react';
 
 import {withTheme} from 'src/script/auth/util/test/TestUtil';
-import {createUuid} from 'Util/uuid';
+import {ReactionMap} from 'src/script/storage';
+import {generateQualifiedId} from 'test/helper/UserGenerator';
 
 import {MessageReactionsList, MessageReactionsListProps} from './MessageReactionsList';
 
-const reactions = {
-  '1': '😇,😊',
-  '2': '😊,👍,😉,😇',
-  '3': '😇',
-};
+const user1 = generateQualifiedId();
+const user2 = generateQualifiedId();
+const user3 = generateQualifiedId();
+const reactions: ReactionMap = [
+  ['😇', [user1, user2, user3]],
+  ['😊', [user1, user2]],
+  ['👍', [user2]],
+  ['😉', [user2]],
+];
 
 const defaultProps: MessageReactionsListProps = {
   reactions: reactions,
@@ -37,7 +42,7 @@ const defaultProps: MessageReactionsListProps = {
   isMessageFocused: false,
   onLastReactionKeyEvent: jest.fn(),
   isRemovedFromConversation: false,
-  userId: createUuid(),
+  selfUserId: generateQualifiedId(),
 };
 
 describe('MessageReactionsList', () => {

src/script/components/MessagesList/Message/ContentMessage/MessageActions/MessageReactions/MessageReactionsList.tsx

@@ -19,37 +19,34 @@
 
 import {FC} from 'react';
 
+import type {QualifiedId} from '@wireapp/api-client/lib/user/';
+
+import {ReactionMap} from 'src/script/storage';
 import {getEmojiUnicode} from 'Util/EmojiUtil';
-import {Reactions, groupByReactionUsers, sortReactionsByUserCount} from 'Util/ReactionUtil';
+import {matchQualifiedIds} from 'Util/QualifiedId';
 
 import {EmojiPill} from './EmojiPill';
 import {messageReactionWrapper} from './MessageReactions.styles';
 
 export interface MessageReactionsListProps {
-  reactions: Reactions;
+  reactions: ReactionMap;
   handleReactionClick: (emoji: string) => void;
-  userId: string;
+  selfUserId: QualifiedId;
   isMessageFocused: boolean;
   onTooltipReactionCountClick: () => void;
   onLastReactionKeyEvent: () => void;
   isRemovedFromConversation: boolean;
 }
 
 const MessageReactionsList: FC<MessageReactionsListProps> = ({reactions, ...props}) => {
-  const reactionGroupedByUser = groupByReactionUsers(reactions);
-  const reactionsGroupedByUserArray = Array.from(reactionGroupedByUser);
-  const reactionsList =
-    reactionsGroupedByUserArray.length > 1
-      ? sortReactionsByUserCount(reactionsGroupedByUserArray)
-      : reactionsGroupedByUserArray;
-  const {userId, ...emojiPillProps} = props;
+  const {selfUserId, ...emojiPillProps} = props;
 
   return (
     <div css={messageReactionWrapper} data-uie-name="message-reactions">
-      {reactionsList.map(([emoji, users], index) => {
+      {reactions.map(([emoji, users], index) => {
         const emojiUnicode = getEmojiUnicode(emoji);
-        const emojiListCount = reactionsList.length;
-        const hasUserReacted = users.includes(userId);
+        const emojiListCount = users.length;
+        const hasUserReacted = users.some(user => matchQualifiedIds(selfUserId, user));
 
         return (
           <EmojiPill