Merge pull request #935 from Bilb/fix-contextmenu-cache-conversation-view

Fix menu cache conversation view

js/models/conversations.js

@@ -330,9 +330,13 @@
     resetMessageSelection() {
       this.selectedMessages.clear();
       this.messageCollection.forEach(m => {
-        // eslint-disable-next-line no-param-reassign
+        // on change for ALL messages without real changes is a really costly operation
-        m.selected = false;
+        // -> cause refresh of the whole conversation view even if not a single message was selected
-        m.trigger('change');
+        if (m.selected) {
+          // eslint-disable-next-line no-param-reassign
+          m.selected = false;
+          m.trigger('change');
+        }
       });
 
       this.trigger('message-selection-changed');

ts/components/conversation/Message.tsx

@@ -213,7 +213,7 @@ export class Message extends React.PureComponent<Props, State> {
   }
 
   public renderMetadataBadges() {
-    const { direction, isPublic, senderIsModerator } = this.props;
+    const { direction, isPublic, senderIsModerator, id } = this.props;
 
     const badges = [isPublic && 'Public', senderIsModerator && 'Mod'];
 
@@ -224,7 +224,7 @@ export class Message extends React.PureComponent<Props, State> {
         }
 
         return (
-          <>
+          <div key={`${id}-${badgeText}`}>
             <span className="module-message__metadata__badge--separator">
               &nbsp;•&nbsp;
             </span>
@@ -239,7 +239,7 @@ export class Message extends React.PureComponent<Props, State> {
             >
               {badgeText}
             </span>
-          </>
+          </div>
         );
       })
       .filter(i => !!i);
@@ -1064,9 +1064,13 @@ export class Message extends React.PureComponent<Props, State> {
 
     // This id is what connects our triple-dot click with our associated pop-up menu.
     //   It needs to be unique.
-    const triggerId = String(id || `${authorPhoneNumber}-${timestamp}`);
+    // The Date.now() is a workaround to be sure a single triggerID with this id exists
-    const rightClickTriggerId = `${authorPhoneNumber}-ctx-${timestamp}`;
+    const triggerId = id
-
+      ? String(`${id}-${Date.now()}`)
+      : String(`${authorPhoneNumber}-${timestamp}`);
+    const rightClickTriggerId = id
+      ? String(`${id}-ctx-${Date.now()}`)
+      : String(`${authorPhoneNumber}-ctx-${timestamp}`);
     if (expired) {
       return null;
     }