Allow multiple reactions to stories

signalapp · Apr 28, 2022 · 6d576ed · 6d576ed
1 parent 42554eb
commit 6d576ed
Show file tree

Hide file tree

Showing 9 changed files with 211 additions and 119 deletions.
diff --git a/ts/components/StoryListItem.tsx b/ts/components/StoryListItem.tsx
@@ -40,7 +40,6 @@ export type StoryViewType = {
   isHidden?: boolean;
   isUnread?: boolean;
   messageId: string;
-  selectedReaction?: string;
   sender: Pick<
     ConversationType,
     | 'acceptedMessageRequest'

diff --git a/ts/jobs/helpers/sendReaction.ts b/ts/jobs/helpers/sendReaction.ts
@@ -313,7 +313,8 @@ export async function sendReaction(
     const newReactions = reactionUtil.markOutgoingReactionSent(
       getReactions(message),
       pendingReaction,
-      successfulConversationIds
+      successfulConversationIds,
+      message.attributes
     );
     setReactions(message, newReactions);
 

diff --git a/ts/models/messages.ts b/ts/models/messages.ts
@@ -152,6 +152,7 @@ import { shouldDownloadStory } from '../util/shouldDownloadStory';
 import { shouldShowStoriesView } from '../state/selectors/stories';
 import type { ContactWithHydratedAvatar } from '../textsecure/SendMessage';
 import { SeenStatus } from '../MessageSeenStatus';
+import { isNewReactionReplacingPrevious } from '../reactions/util';
 
 /* eslint-disable camelcase */
 /* eslint-disable more/no-then */
@@ -233,12 +234,7 @@ export class MessageModel extends window.Backbone.Model<MessageAttributesType> {
     const { storyChanged } = window.reduxActions.stories;
 
     if (isStory(this.attributes)) {
-      const ourConversationId =
-        window.ConversationController.getOurConversationIdOrThrow();
-      const storyData = getStoryDataFromMessageAttributes(
-        this.attributes,
-        ourConversationId
-      );
+      const storyData = getStoryDataFromMessageAttributes(this.attributes);
 
       if (!storyData) {
         return;
@@ -2892,14 +2888,15 @@ export class MessageModel extends window.Backbone.Model<MessageAttributesType> {
 
       const reactions = reactionUtil.addOutgoingReaction(
         this.get('reactions') || [],
-        newReaction
+        newReaction,
+        isStory(this.attributes)
       );
       this.set({ reactions });
     } else {
       const oldReactions = this.get('reactions') || [];
       let reactions: Array<MessageReactionType>;
-      const oldReaction = oldReactions.find(
-        re => re.fromId === reaction.get('fromId')
+      const oldReaction = oldReactions.find(re =>
+        isNewReactionReplacingPrevious(re, reaction.attributes, this.attributes)
       );
       if (oldReaction) {
         this.clearNotifications(oldReaction);
@@ -2914,12 +2911,20 @@ export class MessageModel extends window.Backbone.Model<MessageAttributesType> {
         if (reaction.get('source') === ReactionSource.FromSync) {
           reactions = oldReactions.filter(
             re =>
-              re.fromId !== reaction.get('fromId') ||
-              re.timestamp > reaction.get('timestamp')
+              !isNewReactionReplacingPrevious(
+                re,
+                reaction.attributes,
+                this.attributes
+              ) || re.timestamp > reaction.get('timestamp')
           );
         } else {
           reactions = oldReactions.filter(
-            re => re.fromId !== reaction.get('fromId')
+            re =>
+              !isNewReactionReplacingPrevious(
+                re,
+                reaction.attributes,
+                this.attributes
+              )
           );
         }
         this.set({ reactions });
@@ -2948,7 +2953,12 @@ export class MessageModel extends window.Backbone.Model<MessageAttributesType> {
         }
 
         reactions = oldReactions.filter(
-          re => re.fromId !== reaction.get('fromId')
+          re =>
+            !isNewReactionReplacingPrevious(
+              re,
+              reaction.attributes,
+              this.attributes
+            )
         );
         reactions.push(reactionToAdd);
         this.set({ reactions });

diff --git a/ts/reactions/util.ts b/ts/reactions/util.ts
@@ -2,8 +2,12 @@
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import { findLastIndex, has, identity, omit, negate } from 'lodash';
-import type { MessageReactionType } from '../model-types.d';
+import type {
+  MessageAttributesType,
+  MessageReactionType,
+} from '../model-types.d';
 import { areObjectEntriesEqual } from '../util/areObjectEntriesEqual';
+import { isStory } from '../state/selectors/message';
 
 const isReactionEqual = (
   a: undefined | Readonly<MessageReactionType>,
@@ -31,8 +35,13 @@ const isOutgoingReactionCompletelyUnsent = ({
 
 export function addOutgoingReaction(
   oldReactions: ReadonlyArray<MessageReactionType>,
-  newReaction: Readonly<MessageReactionType>
+  newReaction: Readonly<MessageReactionType>,
+  isStoryMessage = false
 ): Array<MessageReactionType> {
+  if (isStoryMessage) {
+    return [...oldReactions, newReaction];
+  }
+
   const pendingOutgoingReactions = new Set(
     oldReactions.filter(isOutgoingReactionPending)
   );
@@ -101,6 +110,17 @@ export function* getUnsentConversationIds({
   }
 }
 
+// This function is used when filtering reactions so that we can limit normal
+// messages to a single reactions but allow multiple reactions from the same
+// sender for stories.
+export function isNewReactionReplacingPrevious(
+  reaction: MessageReactionType,
+  newReaction: MessageReactionType,
+  messageAttributes: MessageAttributesType
+): boolean {
+  return !isStory(messageAttributes) && reaction.fromId === newReaction.fromId;
+}
+
 export const markOutgoingReactionFailed = (
   reactions: Array<MessageReactionType>,
   reaction: Readonly<MessageReactionType>
@@ -116,7 +136,8 @@ export const markOutgoingReactionFailed = (
 export const markOutgoingReactionSent = (
   reactions: ReadonlyArray<MessageReactionType>,
   reaction: Readonly<MessageReactionType>,
-  conversationIdsSentTo: Iterable<string>
+  conversationIdsSentTo: Iterable<string>,
+  messageAttributes: MessageAttributesType
 ): Array<MessageReactionType> => {
   const result: Array<MessageReactionType> = [];
 
@@ -135,7 +156,8 @@ export const markOutgoingReactionSent = (
     if (!isReactionEqual(re, reaction)) {
       const shouldKeep = !isFullySent
         ? true
-        : re.fromId !== reaction.fromId || re.timestamp > reaction.timestamp;
+        : !isNewReactionReplacingPrevious(re, reaction, messageAttributes) ||
+          re.timestamp > reaction.timestamp;
       if (shouldKeep) {
         result.push(re);
       }

diff --git a/ts/services/storyLoader.ts b/ts/services/storyLoader.ts
@@ -17,8 +17,7 @@ export async function loadStories(): Promise<void> {
 }
 
 export function getStoryDataFromMessageAttributes(
-  message: MessageAttributesType,
-  ourConversationId?: string
+  message: MessageAttributesType
 ): StoryDataType | undefined {
   const { attachments } = message;
   const unresolvedAttachment = attachments ? attachments[0] : undefined;
@@ -33,17 +32,13 @@ export function getStoryDataFromMessageAttributes(
     ? getAttachmentsForMessage(message)
     : [unresolvedAttachment];
 
-  const selectedReaction = (
-    (message.reactions || []).find(re => re.fromId === ourConversationId) || {}
-  ).emoji;
-
   return {
     attachment,
     messageId: message.id,
-    selectedReaction,
     ...pick(message, [
       'conversationId',
       'deletedForEveryone',
+      'reactions',
       'readStatus',
       'sendStateByConversationId',
       'source',
@@ -57,11 +52,8 @@ export function getStoryDataFromMessageAttributes(
 export function getStoriesForRedux(): Array<StoryDataType> {
   strictAssert(storyData, 'storyData has not been loaded');
 
-  const ourConversationId =
-    window.ConversationController.getOurConversationId();
-
   const stories = storyData
-    .map(story => getStoryDataFromMessageAttributes(story, ourConversationId))
+    .map(getStoryDataFromMessageAttributes)
     .filter(isNotNil);
 
   storyData = undefined;

diff --git a/ts/state/ducks/stories.ts b/ts/state/ducks/stories.ts
@@ -37,11 +37,11 @@ import { viewedReceiptsJobQueue } from '../../jobs/viewedReceiptsJobQueue';
 export type StoryDataType = {
   attachment?: AttachmentType;
   messageId: string;
-  selectedReaction?: string;
 } & Pick<
   MessageAttributesType,
   | 'conversationId'
   | 'deletedForEveryone'
+  | 'reactions'
   | 'readStatus'
   | 'sendStateByConversationId'
   | 'source'
@@ -65,7 +65,6 @@ export type StoriesStateType = {
 
 const LOAD_STORY_REPLIES = 'stories/LOAD_STORY_REPLIES';
 const MARK_STORY_READ = 'stories/MARK_STORY_READ';
-const REACT_TO_STORY = 'stories/REACT_TO_STORY';
 const REPLY_TO_STORY = 'stories/REPLY_TO_STORY';
 export const RESOLVE_ATTACHMENT_URL = 'stories/RESOLVE_ATTACHMENT_URL';
 const STORY_CHANGED = 'stories/STORY_CHANGED';
@@ -84,14 +83,6 @@ type MarkStoryReadActionType = {
   payload: string;
 };
 
-type ReactToStoryActionType = {
-  type: typeof REACT_TO_STORY;
-  payload: {
-    messageId: string;
-    selectedReaction: string;
-  };
-};
-
 type ReplyToStoryActionType = {
   type: typeof REPLY_TO_STORY;
   payload: MessageAttributesType;
@@ -119,7 +110,6 @@ export type StoriesActionType =
   | MarkStoryReadActionType
   | MessageChangedActionType
   | MessageDeletedActionType
-  | ReactToStoryActionType
   | ReplyToStoryActionType
   | ResolveAttachmentUrlActionType
   | StoryChangedActionType
@@ -286,27 +276,24 @@ function queueStoryDownload(
 
 function reactToStory(
   nextReaction: string,
-  messageId: string,
-  previousReaction?: string
-): ThunkAction<void, RootStateType, unknown, ReactToStoryActionType> {
+  messageId: string
+): ThunkAction<void, RootStateType, unknown, NoopActionType> {
   return async dispatch => {
     try {
       await enqueueReactionForSend({
         messageId,
         emoji: nextReaction,
-        remove: nextReaction === previousReaction,
-      });
-      dispatch({
-        type: REACT_TO_STORY,
-        payload: {
-          messageId,
-          selectedReaction: nextReaction,
-        },
+        remove: false,
       });
     } catch (error) {
       log.error('Error enqueuing reaction', error, messageId, nextReaction);
       showToast(ToastReactionFailed);
     }
+
+    dispatch({
+      type: 'NOOP',
+      payload: null,
+    });
   };
 }
 
@@ -403,8 +390,8 @@ export function reducer(
       'conversationId',
       'deletedForEveryone',
       'messageId',
+      'reactions',
       'readStatus',
-      'selectedReaction',
       'sendStateByConversationId',
       'source',
       'sourceUuid',
@@ -424,9 +411,14 @@ export function reducer(
         !isDownloaded(prevStory.attachment) &&
         isDownloaded(newStory.attachment);
       const readStatusChanged = prevStory.readStatus !== newStory.readStatus;
+      const reactionsChanged =
+        prevStory.reactions?.length !== newStory.reactions?.length;
 
       const shouldReplace =
-        isDownloadingAttachment || hasAttachmentDownloaded || readStatusChanged;
+        isDownloadingAttachment ||
+        hasAttachmentDownloaded ||
+        readStatusChanged ||
+        reactionsChanged;
       if (!shouldReplace) {
         return state;
       }
@@ -448,22 +440,6 @@ export function reducer(
     };
   }
 
-  if (action.type === REACT_TO_STORY) {
-    return {
-      ...state,
-      stories: state.stories.map(story => {
-        if (story.messageId === action.payload.messageId) {
-          return {
-            ...story,
-            selectedReaction: action.payload.selectedReaction,
-          };
-        }
-
-        return story;
-      }),
-    };
-  }
-
   if (action.type === MARK_STORY_READ) {
     return {
       ...state,