From bd5f43bdb19b30683e83957117a6e941fb1bfe51 Mon Sep 17 00:00:00 2001
From: lilia <liliakai@gmail.com>
Date: Mon, 14 Sep 2015 13:30:21 -0700
Subject: [PATCH] Avoid excessive re-rendering of the inbox list

This listener is doing way more work than necessary to update the dom by
removing all the list items and re-creating them. This also causes the
bug where selected state is cleared when new messages arrive, not to
mention binding new event listeners without unbinding the old ones.

Fix by simply promoting an element to the top of the list when it's
active_at value changes, rather than re-rendering the whole list. This
could backfire if the value gets changed to an earlier timestamp but for
now we assume that won't happen.

// FREEBIE
---
 js/views/conversation_list_item_view.js | 4 +++-
 js/views/conversation_list_view.js      | 6 ++++++
 js/views/inbox_view.js                  | 2 +-
 3 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/js/views/conversation_list_item_view.js b/js/views/conversation_list_item_view.js
index 9192dd4a8..15e41b49a 100644
--- a/js/views/conversation_list_item_view.js
+++ b/js/views/conversation_list_item_view.js
@@ -8,7 +8,9 @@
     // list of conversations, showing user/group and last message sent
     Whisper.ConversationListItemView = Whisper.View.extend({
         tagName: 'div',
-        className: 'conversation-list-item contact',
+        className: function() {
+            return 'conversation-list-item contact ' + this.model.cid;
+        },
         templateName: 'conversation-preview',
         events: {
             'click': 'select'
diff --git a/js/views/conversation_list_view.js b/js/views/conversation_list_view.js
index a974489aa..1cd834f10 100644
--- a/js/views/conversation_list_view.js
+++ b/js/views/conversation_list_view.js
@@ -15,6 +15,12 @@
             var target = $(e.target).closest('.contact');
             target.siblings().removeClass('selected');
             return false;
+        },
+        moveToTop: function(conversation) {
+            var $el = this.$('.' + conversation.cid);
+            if ($el && $el.length > 0) {
+                $el.prependTo(this.el);
+            }
         }
     });
 })();
diff --git a/js/views/inbox_view.js b/js/views/inbox_view.js
index 0724fc4dd..d4ae0304e 100644
--- a/js/views/inbox_view.js
+++ b/js/views/inbox_view.js
@@ -92,7 +92,7 @@
                     collection : inboxCollection
                 }).render();
 
-                this.inboxView.listenTo(inboxCollection, 'sort', this.inboxView.render);
+                this.inboxView.listenTo(inboxCollection, 'change:active_at', this.inboxView.moveToTop);
 
                 new SocketView().render().$el.appendTo(this.$('.socket-status'));