Reactions: Fix reacting to document groups and local messages (#1700)

src/components/middle/message/ContextMenuContainer.tsx

@@ -15,7 +15,7 @@ import {
 } from '../../../modules/selectors';
 import {
   isActionMessage, isChatChannel,
-  isChatGroup, isOwnMessage, areReactionsEmpty, isUserId,
+  isChatGroup, isOwnMessage, areReactionsEmpty, isUserId, isMessageLocal,
 } from '../../../modules/helpers';
 import { SERVICE_NOTIFICATIONS_USER_ID } from '../../../config';
 import { getDayStartAt } from '../../../util/dateFormat';
@@ -429,6 +429,7 @@ export default memo(withGlobal<OwnProps>(
     const isPinned = messageListType === 'pinned';
     const isScheduled = messageListType === 'scheduled';
     const isChannel = chat && isChatChannel(chat);
+    const isLocal = isMessageLocal(message);
     const canShowSeenBy = Boolean(chat
       && seenByMaxChatMembers
       && seenByExpiresAt
@@ -440,7 +441,7 @@ export default memo(withGlobal<OwnProps>(
       && message.date > Date.now() / 1000 - seenByExpiresAt);
     const isPrivate = chat && isUserId(chat.id);
     const isAction = isActionMessage(message);
-    const canShowReactionsCount = !isChannel && !isScheduled && !isAction && !isPrivate && message.reactions
+    const canShowReactionsCount = !isLocal && !isChannel && !isScheduled && !isAction && !isPrivate && message.reactions
       && !areReactionsEmpty(message.reactions) && message.reactions.canSeeList;
     const canRemoveReaction = isPrivate && message.reactions?.results?.some((l) => l.isChosen);
     const isProtected = selectIsMessageProtected(global, message);
@@ -469,7 +470,7 @@ export default memo(withGlobal<OwnProps>(
       isPrivate,
       hasFullInfo: Boolean(chat?.fullInfo),
       canShowReactionsCount,
-      canShowReactionList: !isAction && !isScheduled && chat?.id !== SERVICE_NOTIFICATIONS_USER_ID,
+      canShowReactionList: !isLocal && !isAction && !isScheduled && chat?.id !== SERVICE_NOTIFICATIONS_USER_ID,
       canRemoveReaction,
     };
   },

src/components/middle/message/Message.tsx

@@ -565,6 +565,7 @@ const Message: FC<OwnProps & StateProps> = ({
     const meta = (
       <MessageMeta
         message={message}
+        reactionMessage={reactionMessage}
         outgoingStatus={outgoingStatus}
         signature={signature}
         withReactions={reactionsPosition === 'in-meta'}
@@ -1054,8 +1055,8 @@ export default memo(withGlobal<OwnProps>(
       shouldLoopStickers: selectShouldLoopStickers(global),
       threadInfo: actualThreadInfo,
       availableReactions: global.availableReactions,
-      defaultReaction: selectDefaultReaction(global, chatId),
-      activeReaction: global.activeReactions[id],
+      defaultReaction: isMessageLocal(message) ? undefined : selectDefaultReaction(global, chatId),
+      activeReaction: reactionMessage && global.activeReactions[reactionMessage.id],
       activeEmojiInteraction: global.activeEmojiInteraction,
       ...(isOutgoing && { outgoingStatus: selectOutgoingStatus(global, message, messageListType === 'scheduled') }),
       ...(typeof uploadProgress === 'number' && { uploadProgress }),

src/components/middle/message/MessageMeta.tsx

@@ -20,6 +20,7 @@ import './MessageMeta.scss';
 
 type OwnProps = {
   message: ApiMessage;
+  reactionMessage?: ApiMessage;
   withReactions?: boolean;
   withReactionOffset?: boolean;
   outgoingStatus?: ApiMessageOutgoingStatus;
@@ -32,11 +33,12 @@ type OwnProps = {
 const MessageMeta: FC<OwnProps> = ({
   message, outgoingStatus, signature, onClick, withReactions,
   activeReaction, withReactionOffset, availableReactions,
+  reactionMessage,
 }) => {
   const lang = useLang();
   const [isActivated, markActivated] = useFlag();
 
-  const reactions = withReactions && message.reactions?.results.filter((l) => l.count > 0);
+  const reactions = withReactions && reactionMessage?.reactions?.results.filter((l) => l.count > 0);
 
   const title = useMemo(() => {
     if (!isActivated) return undefined;

src/modules/actions/api/reactions.ts

@@ -7,11 +7,13 @@ import {
   selectChatMessage,
   selectDefaultReaction,
   selectLocalAnimatedEmojiEffectByName,
+  selectMessageIdsByGroupId,
 } from '../../selectors';
 import { addMessageReaction, subtractXForEmojiInteraction } from '../../reducers/reactions';
 import { addUsers, updateChatMessage } from '../../reducers';
 import { buildCollectionByKey, omit } from '../../../util/iteratees';
 import { ANIMATION_LEVEL_MAX } from '../../../config';
+import { isMessageLocal } from '../../helpers';
 
 addReducer('loadAvailableReactions', () => {
   (async () => {
@@ -94,8 +96,9 @@ addReducer('sendDefaultReaction', (global, actions, payload) => {
     chatId, messageId, x, y,
   } = payload;
   const reaction = selectDefaultReaction(global, chatId);
+  const message = selectChatMessage(global, chatId, messageId);
 
-  if (!reaction) return;
+  if (!reaction || !message || isMessageLocal(message)) return;
 
   actions.sendReaction({
     chatId,
@@ -108,18 +111,28 @@ addReducer('sendDefaultReaction', (global, actions, payload) => {
 
 addReducer('sendReaction', (global, actions, payload) => {
   const {
-    chatId, messageId,
-  }: { messageId: number; chatId: string } = payload;
+    chatId,
+  }: { chatId: string } = payload;
+  let { messageId } = payload;
 
   let { reaction } = payload;
 
   const chat = selectChat(global, chatId);
-  const message = selectChatMessage(global, chatId, messageId);
+  let message = selectChatMessage(global, chatId, messageId);
 
   if (!chat || !message) {
     return undefined;
   }
 
+  const isInDocumentGroup = Boolean(message.groupedId) && !message.isInAlbum;
+  const documentGroupFirstMessageId = isInDocumentGroup
+    ? selectMessageIdsByGroupId(global, chatId, message.groupedId!)![0]
+    : undefined;
+  message = isInDocumentGroup
+    ? selectChatMessage(global, chatId, documentGroupFirstMessageId!) || message
+    : message;
+  messageId = message?.id || messageId;
+
   if (message.reactions?.results?.some((l) => l.reaction === reaction && l.isChosen)) {
     reaction = undefined;
   }