From eadef452904e33377f518dd411b9c719480369db Mon Sep 17 00:00:00 2001
From: Josh Perez <60019601+josh-signal@users.noreply.github.com>
Date: Thu, 25 Aug 2022 12:10:56 -0400
Subject: [PATCH] Fix story group replies rendering

---
 ts/components/StoryViewer.tsx                     |  3 +--
 ts/components/StoryViewsNRepliesModal.stories.tsx |  4 ----
 ts/components/StoryViewsNRepliesModal.tsx         | 15 +++++++++------
 ts/components/conversation/Message.tsx            |  3 ++-
 ts/state/selectors/stories.ts                     |  6 +++++-
 ts/util/sendStoryMessage.ts                       |  1 +
 6 files changed, 18 insertions(+), 14 deletions(-)

diff --git a/ts/components/StoryViewer.tsx b/ts/components/StoryViewer.tsx
index 182c979a9..8dfe6e0c3 100644
--- a/ts/components/StoryViewer.tsx
+++ b/ts/components/StoryViewer.tsx
@@ -675,7 +675,7 @@ export const StoryViewer = ({
                               components={[<strong>{viewCount}</strong>]}
                             />
                           ))}
-                        {viewCount > 0 && replyCount > 0 && ' '}
+                        {(sendState || viewCount > 0) && replyCount > 0 && ' '}
                         {replyCount > 0 &&
                           (replyCount === 1 ? (
                             <Intl
@@ -751,7 +751,6 @@ export const StoryViewer = ({
             getPreferredBadge={getPreferredBadge}
             i18n={i18n}
             isGroupStory={isGroupStory}
-            isMyStory={isMe}
             onClose={() => setHasStoryViewsNRepliesModal(false)}
             onReact={emoji => {
               onReactToStory(emoji, story);
diff --git a/ts/components/StoryViewsNRepliesModal.stories.tsx b/ts/components/StoryViewsNRepliesModal.stories.tsx
index aab682500..fdf568ad2 100644
--- a/ts/components/StoryViewsNRepliesModal.stories.tsx
+++ b/ts/components/StoryViewsNRepliesModal.stories.tsx
@@ -31,9 +31,6 @@ export default {
     i18n: {
       defaultValue: i18n,
     },
-    isMyStory: {
-      defaultValue: false,
-    },
     onClose: { action: true },
     onSetSkinTone: { action: true },
     onReact: { action: true },
@@ -168,7 +165,6 @@ CanReply.storyName = 'Can reply';
 
 export const ViewsOnly = Template.bind({});
 ViewsOnly.args = {
-  isMyStory: true,
   views: getViewsAndReplies().views,
 };
 ViewsOnly.storyName = 'Views only';
diff --git a/ts/components/StoryViewsNRepliesModal.tsx b/ts/components/StoryViewsNRepliesModal.tsx
index 4bf7a2157..b2d7fc2c1 100644
--- a/ts/components/StoryViewsNRepliesModal.tsx
+++ b/ts/components/StoryViewsNRepliesModal.tsx
@@ -89,7 +89,6 @@ export type PropsType = {
   getPreferredBadge: PreferredBadgeSelectorType;
   i18n: LocalizerType;
   isGroupStory?: boolean;
-  isMyStory?: boolean;
   onClose: () => unknown;
   onReact: (emoji: string) => unknown;
   onReply: (
@@ -116,7 +115,6 @@ export const StoryViewsNRepliesModal = ({
   getPreferredBadge,
   i18n,
   isGroupStory,
-  isMyStory,
   onClose,
   onReact,
   onReply,
@@ -173,7 +171,7 @@ export const StoryViewsNRepliesModal = ({
 
   let composerElement: JSX.Element | undefined;
 
-  if (!isMyStory && canReply) {
+  if (canReply) {
     composerElement = (
       <>
         {!isGroupStory && (
@@ -293,7 +291,9 @@ export const StoryViewsNRepliesModal = ({
                   <div className="StoryViewsNRepliesModal__reply--title">
                     <ContactName
                       contactNameColor={reply.contactNameColor}
-                      title={reply.author.title}
+                      title={
+                        reply.author.isMe ? i18n('you') : reply.author.title
+                      }
                     />
                   </div>
                   {i18n('StoryViewsNRepliesModal__reacted')}
@@ -312,6 +312,7 @@ export const StoryViewsNRepliesModal = ({
               <Message
                 {...MESSAGE_DEFAULT_PROPS}
                 author={reply.author}
+                contactNameColor={reply.contactNameColor}
                 containerElementRef={containerElementRef}
                 conversationColor="ultramarine"
                 conversationId={reply.conversationId}
@@ -326,10 +327,12 @@ export const StoryViewsNRepliesModal = ({
                 readStatus={reply.readStatus}
                 renderingContext="StoryViewsNRepliesModal"
                 shouldCollapseAbove={
-                  reply.conversationId === replies[index - 1]?.conversationId
+                  reply.conversationId === replies[index - 1]?.conversationId &&
+                  !replies[index - 1]?.reactionEmoji
                 }
                 shouldCollapseBelow={
-                  reply.conversationId === replies[index + 1]?.conversationId
+                  reply.conversationId === replies[index + 1]?.conversationId &&
+                  !replies[index + 1]?.reactionEmoji
                 }
                 shouldHideMetadata={false}
                 text={reply.body}
diff --git a/ts/components/conversation/Message.tsx b/ts/components/conversation/Message.tsx
index 90413ca47..b53dd6f57 100644
--- a/ts/components/conversation/Message.tsx
+++ b/ts/components/conversation/Message.tsx
@@ -858,6 +858,7 @@ export class Message extends React.PureComponent<Props, State> {
     const {
       author,
       contactNameColor,
+      i18n,
       isSticker,
       isTapToView,
       isTapToViewExpired,
@@ -879,7 +880,7 @@ export class Message extends React.PureComponent<Props, State> {
       <div className={moduleName}>
         <ContactName
           contactNameColor={contactNameColor}
-          title={author.title}
+          title={author.isMe ? i18n('you') : author.title}
           module={moduleName}
         />
       </div>
diff --git a/ts/state/selectors/stories.ts b/ts/state/selectors/stories.ts
index 4669594f0..6e0d15b34 100644
--- a/ts/state/selectors/stories.ts
+++ b/ts/state/selectors/stories.ts
@@ -341,7 +341,11 @@ export const getStories = createSelector(
           stories: [storyView, ...existingMyStory.stories],
         });
 
-        return;
+        // If it's a group story we still want it to render as part of regular
+        // stories or hidden stories.
+        if (story.storyDistributionListId) {
+          return;
+        }
       }
 
       let storiesMap: Map<string, ConversationStoryType>;
diff --git a/ts/util/sendStoryMessage.ts b/ts/util/sendStoryMessage.ts
index df746a0e2..240d03887 100644
--- a/ts/util/sendStoryMessage.ts
+++ b/ts/util/sendStoryMessage.ts
@@ -217,6 +217,7 @@ export async function sendStoryMessage(
       const messageAttributes =
         await window.Signal.Migrations.upgradeMessageSchema({
           attachments,
+          canReplyToStory: true,
           conversationId,
           expireTimer: DAY / SECOND,
           id: UUID.generate().toString(),