Avoid rendering messages with duplicate IDs

This is motivated by a race condition when loading archived messages (calling Candy.View.Pane.Message.show) at the same time as rendering an incoming message, such as when a 1-on-1 message arrives and auto-opens a new pane for the chat partner.

Author: benlangfeld

src/view/pane/message.js

@@ -110,8 +110,20 @@ Candy.View.Pane = (function(self, $) {
         timestamp = Candy.Util.iso8601toDate(timestamp);
       }
 
+      var messagePane = self.Room.getPane(roomJid, ".message-pane");
+      var messageId;
+      if (stanza) {
+        messageId = $(stanza).attr('id');
+        if (messageId) {
+          var existingMessage = messagePane.find('[data-message-id="' + messageId + '"]');
+          if (messageId && existingMessage.length > 0) {
+            // This message ID has already been rendered
+            return false;
+          }
+        }
+      }
+
       // Before we add the new message, check to see if we should be automatically scrolling or not.
-      var messagePane = self.Room.getPane(roomJid, '.message-pane');
       var enableScroll = ((messagePane.scrollTop() + messagePane.outerHeight()) === messagePane.prop('scrollHeight')) || !$(messagePane).is(':visible');
       Candy.View.Pane.Chat.rooms[roomJid].enableScroll = enableScroll;
 
@@ -158,7 +170,8 @@ Candy.View.Pane = (function(self, $) {
           time: Candy.Util.localizedTime(timestamp),
           timestamp: timestamp.toISOString(),
           roomjid: roomJid,
-          from: from
+          from: from,
+          id: messageId
         },
         stanza: stanza
       };
@@ -246,6 +259,8 @@ Candy.View.Pane = (function(self, $) {
        *   (String) message - Message text
        */
       $(Candy).triggerHandler('candy:view.message.after-show', evtData);
+
+      return true;
     }
   };
 

src/view/template.js

@@ -89,7 +89,7 @@ Candy.View.Template = (function(self){
 
 	self.Message = {
 		pane: '<div class="message-pane-wrapper"><ul class="message-pane"></ul></div>',
-		item: '<li><small data-timestamp="{{timestamp}}">{{time}}</small><div>' +
+		item: '<li data-message-id="{{id}}"><small data-timestamp="{{timestamp}}">{{time}}</small><div>' +
 				'<a class="label" href="#" class="name">{{displayName}}</a>' +
 				'<span class="spacer">▸</span>{{{message}}}</div></li>'
 	};