Implemented group story reaction delete/DOE

ts/components/StoryViewsNRepliesModal.tsx

@@ -306,6 +306,14 @@ export const StoryViewsNRepliesModal = ({
 
   let repliesElement: JSX.Element | undefined;
 
+  function shouldCollapse(reply: ReplyType, otherReply?: ReplyType) {
+    // deleted reactions get rendered the same as deleted replies
+    return (
+      reply.conversationId === otherReply?.conversationId &&
+      (!otherReply?.reactionEmoji || Boolean(otherReply.deletedForEveryone))
+    );
+  }
+
   if (replies.length) {
     repliesElement = (
       <div
@@ -313,33 +321,19 @@ export const StoryViewsNRepliesModal = ({
         ref={containerElementRef}
       >
         {replies.map((reply, index) => {
-          return reply.reactionEmoji ? (
+          return (
-            <Reaction
+            <ReplyOrReactionMessage
               key={reply.id}
               i18n={i18n}
               reply={reply}
-              reactionEmoji={reply.reactionEmoji}
-              getPreferredBadge={getPreferredBadge}
-            />
-          ) : (
-            <Reply
-              key={reply.id}
-              i18n={i18n}
-              containerElementRef={containerElementRef}
-              reply={reply}
               deleteGroupStoryReply={() => setDeleteReplyId(reply.id)}
               deleteGroupStoryReplyForEveryone={() =>
                 setDeleteForEveryoneReplyId(reply.id)
               }
               getPreferredBadge={getPreferredBadge}
-              shouldCollapseAbove={
+              shouldCollapseAbove={shouldCollapse(reply, replies[index - 1])}
-                reply.conversationId === replies[index - 1]?.conversationId &&
+              shouldCollapseBelow={shouldCollapse(reply, replies[index + 1])}
-                !replies[index - 1]?.reactionEmoji
+              containerElementRef={containerElementRef}
-              }
-              shouldCollapseBelow={
-                reply.conversationId === replies[index + 1]?.conversationId &&
-                !replies[index + 1]?.reactionEmoji
-              }
             />
           );
         })}
@@ -505,22 +499,35 @@ export const StoryViewsNRepliesModal = ({
   );
 };
 
-type ReactionProps = {
+type ReplyOrReactionMessageProps = {
   i18n: LocalizerType;
   reply: ReplyType;
-  reactionEmoji: string;
+  deleteGroupStoryReply: (replyId: string) => void;
+  deleteGroupStoryReplyForEveryone: (replyId: string) => void;
   getPreferredBadge: PreferredBadgeSelectorType;
+  shouldCollapseAbove: boolean;
+  shouldCollapseBelow: boolean;
+  containerElementRef: React.RefObject<HTMLElement>;
+  onContextMenu?: (ev: React.MouseEvent) => void;
 };
 
-const Reaction = ({
+const ReplyOrReactionMessage = ({
   i18n,
   reply,
-  reactionEmoji,
+  deleteGroupStoryReply,
+  deleteGroupStoryReplyForEveryone,
+  containerElementRef,
   getPreferredBadge,
-}: ReactionProps): JSX.Element => {
+  shouldCollapseAbove,
-  // TODO: DESKTOP-4503 - reactions delete/doe
+  shouldCollapseBelow,
+}: ReplyOrReactionMessageProps) => {
+  const renderContent = (onContextMenu?: (ev: React.MouseEvent) => void) => {
+    if (reply.reactionEmoji && !reply.deletedForEveryone) {
       return (
-    <div className="StoryViewsNRepliesModal__reaction" key={reply.id}>
+        <div
+          className="StoryViewsNRepliesModal__reaction"
+          onContextMenu={onContextMenu}
+        >
           <div className="StoryViewsNRepliesModal__reaction--container">
             <Avatar
               acceptedMessageRequest={reply.author.acceptedMessageRequest}
@@ -552,34 +559,12 @@ const Reaction = ({
               />
             </div>
           </div>
-      <Emojify text={reactionEmoji} />
+          <Emojify text={reply.reactionEmoji} />
         </div>
       );
-};
+    }
 
-type ReplyProps = {
+    return (
-  i18n: LocalizerType;
-  reply: ReplyType;
-  deleteGroupStoryReply: (replyId: string) => void;
-  deleteGroupStoryReplyForEveryone: (replyId: string) => void;
-  getPreferredBadge: PreferredBadgeSelectorType;
-  shouldCollapseAbove: boolean;
-  shouldCollapseBelow: boolean;
-  containerElementRef: React.RefObject<HTMLElement>;
-};
-
-const Reply = ({
-  i18n,
-  reply,
-  deleteGroupStoryReply,
-  deleteGroupStoryReplyForEveryone,
-  getPreferredBadge,
-  shouldCollapseAbove,
-  shouldCollapseBelow,
-  containerElementRef,
-}: ReplyProps): JSX.Element => {
-  const renderMessage = (onContextMenu?: (ev: React.MouseEvent) => void) => (
-    <div key={reply.id}>
       <Message
         {...MESSAGE_DEFAULT_PROPS}
         author={reply.author}
@@ -607,10 +592,10 @@ const Reply = ({
         textDirection={TextDirection.Default}
         timestamp={reply.timestamp}
       />
-    </div>
     );
+  };
 
-  return reply.author.isMe ? (
+  return reply.author.isMe && !reply.deletedForEveryone ? (
     <ContextMenu
       i18n={i18n}
       key={reply.id}
@@ -629,12 +614,12 @@ const Reply = ({
     >
       {({ openMenu, menuNode }) => (
         <>
-          {renderMessage(openMenu)}
+          {renderContent(openMenu)}
           {menuNode}
         </>
       )}
     </ContextMenu>
   ) : (
-    renderMessage()
+    renderContent()
   );
 };