Merge pull request #2449 from yougotwill/react_send_ui_fix

React Send UI Improvments

_locales/en/messages.json

@@ -462,5 +462,7 @@
   "reactionPopupOne": "$name$",
   "reactionPopupTwo": "$name$ & $name2$",
   "reactionPopupThree": "$name$, $name2$ & $name3$",
-  "reactionPopupMany": "$name$, $name2$, $name3$ &"
+  "reactionPopupMany": "$name$, $name2$, $name3$ &",
+  "reactionListCountSingular": "And $otherSingular$ has reacted to this message",
+  "reactionListCountPlural": "And $otherPlural$ have reacted to this message"
 }

ts/components/dialog/ReactListModal.tsx

@@ -14,7 +14,7 @@ import {
 } from '../../state/ducks/modalDialog';
 import { SortedReactionList } from '../../types/Reaction';
 import { nativeEmojiData } from '../../util/emoji';
-import { sendMessageReaction } from '../../util/reactions';
+import { sendMessageReaction, SOGSReactorsFetchCount } from '../../util/reactions';
 import { Avatar, AvatarSize } from '../avatar/Avatar';
 import { Flex } from '../basic/Flex';
 import { ContactName } from '../conversation/ContactName';
@@ -36,12 +36,12 @@ const StyledReactionsContainer = styled.div`
 
 const StyledSendersContainer = styled(Flex)`
   width: 100%;
-  min-height: 350px;
+  min-height: 332px;
   height: 100%;
   max-height: 496px;
   overflow-x: hidden;
   overflow-y: auto;
-  padding: 0 16px 32px;
+  padding: 0 16px 16px;
 `;
 
 const StyledReactionBar = styled(Flex)`
@@ -159,6 +159,26 @@ const ReactionSenders = (props: ReactionSendersProps) => {
   );
 };
 
+const StyledCountText = styled.p`
+  color: var(--color-text-subtle);
+  text-align: center;
+  margin: 16px auto 0;
+`;
+
+const CountText = ({ count }: { count: number }) => {
+  return (
+    <StyledCountText>
+      {count > SOGSReactorsFetchCount + 1
+        ? window.i18n('reactionListCountPlural', [
+            window.i18n('otherPlural', [String(count - SOGSReactorsFetchCount)]),
+          ])
+        : window.i18n('reactionListCountSingular', [
+            window.i18n('otherSingular', [String(count - SOGSReactorsFetchCount)]),
+          ])}
+    </StyledCountText>
+  );
+};
+
 type Props = {
   reaction: string;
   messageId: string;
@@ -182,6 +202,7 @@ const handleSenders = (senders: Array<string>, me: string) => {
   return updatedSenders;
 };
 
+// tslint:disable-next-line: max-func-body-length
 export const ReactListModal = (props: Props): ReactElement => {
   const { reaction, messageId } = props;
 
@@ -189,6 +210,7 @@ export const ReactListModal = (props: Props): ReactElement => {
   const reactionsMap = (reactions && Object.fromEntries(reactions)) || {};
   const [currentReact, setCurrentReact] = useState('');
   const [reactAriaLabel, setReactAriaLabel] = useState<string | undefined>();
+  const [count, setCount] = useState<number | null>(null);
   const [senders, setSenders] = useState<Array<string>>([]);
   const me = UserUtils.getOurPubKeyStrFromCache();
 
@@ -230,7 +252,20 @@ export const ReactListModal = (props: Props): ReactElement => {
     if (senders.length > 0 && (!reactionsMap[currentReact]?.senders || isEmpty(_senders))) {
       setSenders([]);
     }
-  }, [currentReact, me, reaction, msgProps?.sortedReacts, reactionsMap, senders]);
+
+    if (reactionsMap[currentReact]?.count && count !== reactionsMap[currentReact]?.count) {
+      setCount(reactionsMap[currentReact].count);
+    }
+  }, [
+    count,
+    currentReact,
+    me,
+    reaction,
+    reactionsMap[currentReact]?.count,
+    msgProps?.sortedReacts,
+    reactionsMap,
+    senders,
+  ]);
 
   if (!msgProps) {
     return <></>;
@@ -320,6 +355,7 @@ export const ReactListModal = (props: Props): ReactElement => {
                 handleClose={handleClose}
               />
             )}
+            {isPublic && count && count > SOGSReactorsFetchCount && <CountText count={count} />}
           </StyledSendersContainer>
         )}
       </StyledReactListContainer>

ts/models/conversation.ts

@@ -93,6 +93,7 @@ import {
 } from '../session/apis/open_group_api/sogsv3/knownBlindedkeys';
 import { sogsV3FetchPreviewAndSaveIt } from '../session/apis/open_group_api/sogsv3/sogsV3FetchFile';
 import { Reaction } from '../types/Reaction';
+import { handleMessageReaction } from '../util/reactions';
 
 export class ConversationModel extends Backbone.Model<ConversationAttributes> {
   public updateLastMessage: () => any;
@@ -736,7 +737,7 @@ export class ConversationModel extends Backbone.Model<ConversationAttributes> {
 
         const chatMessagePrivate = new VisibleMessage(chatMessageParams);
         await getMessageQueue().sendToPubKey(destinationPubkey, chatMessagePrivate);
-
+        await handleMessageReaction(reaction, UserUtils.getOurPubKeyStrFromCache(), true);
         return;
       }
 
@@ -748,6 +749,7 @@ export class ConversationModel extends Backbone.Model<ConversationAttributes> {
         });
         // we need the return await so that errors are caught in the catch {}
         await getMessageQueue().sendToGroup(closedGroupVisibleMessage);
+        await handleMessageReaction(reaction, UserUtils.getOurPubKeyStrFromCache(), true);
         return;
       }
 

ts/receiver/dataMessage.ts

@@ -321,7 +321,11 @@ async function handleSwarmMessage(
     // this call has to be made inside the queueJob!
     // We handle reaction DataMessages separately
     if (!msgModel.get('isPublic') && rawDataMessage.reaction) {
-      await handleMessageReaction(rawDataMessage.reaction, msgModel.get('source'));
+      await handleMessageReaction(
+        rawDataMessage.reaction,
+        msgModel.get('source'),
+        isUsFromCache(msgModel.get('source'))
+      );
       confirm();
       return;
     }

ts/test/session/unit/reactions/ReactionMessage_test.ts

@@ -54,7 +54,8 @@ describe('ReactionMessage', () => {
     // Handling reaction
     const updatedMessage = await handleMessageReaction(
       reaction as SignalService.DataMessage.IReaction,
-      ourNumber
+      ourNumber,
+      true
     );
 
     expect(updatedMessage?.get('reacts'), 'original message should have reacts').to.not.be
@@ -85,7 +86,8 @@ describe('ReactionMessage', () => {
     // Handling reaction
     const updatedMessage = await handleMessageReaction(
       reaction as SignalService.DataMessage.IReaction,
-      ourNumber
+      ourNumber,
+      true
     );
 
     expect(updatedMessage?.get('reacts'), 'original message reacts should be undefined').to.be

ts/types/LocalizerKeys.ts

@@ -69,6 +69,7 @@ export type LocalizerKeys =
   | 'notificationsSettingsTitle'
   | 'ringing'
   | 'tookAScreenshot'
+  | 'reactionListCountPlural'
   | 'from'
   | 'thisMonth'
   | 'next'
@@ -277,6 +278,7 @@ export type LocalizerKeys =
   | 'mainMenuFile'
   | 'callMissed'
   | 'getStarted'
+  | 'reactionListCountSingular'
   | 'unblockUser'
   | 'blockUser'
   | 'clearAllConfirmationTitle'

ts/types/Reaction.ts

@@ -124,7 +124,7 @@ export type ReactionList = Record<
     count: number;
     index: number; // relies on reactsIndex in the message model
     senders: Array<string>;
-    you?: boolean; // whether we are in the senders because sometimes we dont have the full list of senders yet.
+    you: boolean; // whether we are in the senders list, used within 1-1 and closed groups for ignoring duplicate data messages, used within opengroups since we dont always have the full list of senders.
   }
 >;
 

ts/util/reactions.ts

@@ -139,7 +139,8 @@ export const sendMessageReaction = async (messageId: string, emoji: string) => {
  */
 export const handleMessageReaction = async (
   reaction: SignalService.DataMessage.IReaction,
-  sender: string
+  sender: string,
+  you: boolean
 ) => {
   if (!reaction.emoji) {
     window?.log?.warn(`There is no emoji for the reaction ${reaction}.`);
@@ -151,22 +152,27 @@ export const handleMessageReaction = async (
     return;
   }
 
-  if (originalMessage.get('isPublic')) {
-    window.log.warn("handleMessageReaction() shouldn't be used in opengroups");
-    return;
-  }
-
   const reacts: ReactionList = originalMessage.get('reacts') ?? {};
   reacts[reaction.emoji] = reacts[reaction.emoji] || { count: null, senders: [] };
   const details = reacts[reaction.emoji] ?? {};
   const senders = details.senders;
   let count = details.count || 0;
 
-  window.log.info(
-    `${sender} ${reaction.action === Action.REACT ? 'added' : 'removed'} a ${
-      reaction.emoji
-    } reaction`
-  );
+  if (originalMessage.get('isPublic')) {
+    window.log.warn("handleMessageReaction() shouldn't be used in opengroups");
+    return;
+  } else {
+    if (details.you && senders.includes(sender)) {
+      if (reaction.action === Action.REACT) {
+        window.log.warn('Received duplicate message for your reaction. Ignoring it');
+        return;
+      } else {
+        details.you = false;
+      }
+    } else {
+      details.you = you;
+    }
+  }
 
   switch (reaction.action) {
     case Action.REACT:
@@ -191,6 +197,7 @@ export const handleMessageReaction = async (
   if (count > 0) {
     reacts[reaction.emoji].count = count;
     reacts[reaction.emoji].senders = details.senders;
+    reacts[reaction.emoji].you = details.you;
 
     if (details && details.index === undefined) {
       reacts[reaction.emoji].index = originalMessage.get('reactsIndex') ?? 0;
@@ -206,6 +213,14 @@ export const handleMessageReaction = async (
   });
 
   await originalMessage.commit();
+
+  if (!you) {
+    window.log.info(
+      `${sender} ${reaction.action === Action.REACT ? 'added' : 'removed'} a ${
+        reaction.emoji
+      } reaction`
+    );
+  }
   return originalMessage;
 };