Merge pull request #6406 from cmrd-senya/comment-expand-optimization-2

Comments expansion refactoring

Changelog.md

@@ -137,6 +137,7 @@ The command will report queues that still have jobs and launch sidekiq process f
 * Remove outdated columns from posts table [#6940](https://github.com/diaspora/diaspora/pull/6940)
 * Remove some unused routes [#6781](https://github.com/diaspora/diaspora/pull/6781)
 * Consolidate sidekiq queues [#6950](https://github.com/diaspora/diaspora/pull/6950)
+* Don't re-render the whole comment stream when adding comments [#6406](https://github.com/diaspora/diaspora/pull/6406)
 
 ## Bug fixes
 * Destroy Participation when removing interactions with a post [#5852](https://github.com/diaspora/diaspora/pull/5852)

app/assets/javascripts/app/views/comment_stream_view.js

@@ -21,16 +21,10 @@ app.views.CommentStream = app.views.Base.extend({
 
   setupBindings: function() {
     this.model.comments.bind('add', this.appendComment, this);
-    this.model.bind("commentsExpanded", this.storeTextareaValue, this);
-    this.model.bind("commentsExpanded", this.render, this);
   },
 
   postRenderTemplate : function() {
     this.model.comments.each(this.appendComment, this);
-
-    // add autoexpanders to new comment textarea
-    this.$("textarea").val(this.textareaValue);
-    autosize.update(this.$("textarea"));
   },
 
   presenter: function(){
@@ -62,34 +56,55 @@ app.views.CommentStream = app.views.Base.extend({
     }
   },
 
+  _insertPoint: 0, // An index of the comment added in the last call of this.appendComment
+
+  // This adjusts this._insertPoint according to timestamp value
+  _moveInsertPoint: function(timestamp, commentBlocks) {
+    if (commentBlocks.length === 0) {
+      this._insertPoint = 0;
+      return;
+    }
+
+    if (this._insertPoint > commentBlocks.length) {
+      this._insertPoint = commentBlocks.length;
+    }
+
+    while (this._insertPoint > 0 && timestamp < commentBlocks.eq(this._insertPoint - 1).find("time").attr("datetime")) {
+      this._insertPoint--;
+    }
+    while (this._insertPoint < commentBlocks.length &&
+        timestamp > commentBlocks.eq(this._insertPoint).find("time").attr("datetime")) {
+      this._insertPoint++;
+    }
+  },
+
   appendComment: function(comment) {
     // Set the post as the comment's parent, so we can check
     // on post ownership in the Comment view.
     comment.set({parent : this.model.toJSON()});
 
-    this.$(".comments").append(new app.views.Comment({
-      model: comment
-    }).render().el);
+    var commentHtml = new app.views.Comment({model: comment}).render().el;
+    var commentBlocks = this.$(".comments div.comment.media");
+    this._moveInsertPoint(comment.get("created_at"), commentBlocks);
+    if (this._insertPoint === commentBlocks.length) {
+      this.$(".comments").append(commentHtml);
+    } else {
+      commentBlocks.eq(this._insertPoint).before(commentHtml);
+    }
+    this._insertPoint++;
   },
 
   commentTextareaFocused: function(){
     this.$("form").removeClass('hidden').addClass("open");
   },
 
-  storeTextareaValue: function(){
-    this.textareaValue = this.$('textarea').val();
-  },
-
   expandComments: function(evt){
     if(evt){ evt.preventDefault(); }
     var self = this;
 
     this.model.comments.fetch({
       success : function(resp){
-        self.model.set({
-          comments : resp.models,
-          all_comments_loaded : true
-        });
+        self.$("div.comment.show_comments").addClass("hidden");
 
         self.model.trigger("commentsExpanded", self);
       }

app/assets/templates/comment-stream_tpl.jst.hbs

-{{#unless all_comments_loaded}}
-  <div class="show_comments comment {{#unless showExpandCommentsLink}} hidden {{/unless}}">
-    <div class="media">
-      <a href="/posts/{{id}}#comments" class="toggle_post_comments">
-        {{t "stream.more_comments" count=moreCommentsCount}}
-      </a>
-    </div>
+<div class="show_comments comment {{#unless showExpandCommentsLink}} hidden {{/unless}}">
+  <div class="media">
+    <a href="/posts/{{id}}#comments" class="toggle_post_comments">
+      {{t "stream.more_comments" count=moreCommentsCount}}
+    </a>
   </div>
-{{/unless}}
+</div>
 
 <div class="comments"> </div>
 

spec/javascripts/app/views/comment_stream_view_spec.js

@@ -5,20 +5,11 @@ describe("app.views.CommentStream", function(){
   });
 
   describe("binds", function() {
-    it("re-renders on a commentsExpanded trigger", function(){
-      spyOn(this.view, "render");
+    it("calls appendComment on insertion to the comments collection", function() {
+      spyOn(this.view, "appendComment");
       this.view.setupBindings();
-      this.view.model.trigger("commentsExpanded");
-      expect(this.view.render).toHaveBeenCalled();
-    });
-  });
-
-  describe("postRenderTemplate", function(){
-    it("autoResizes the new comment textarea", function(){
-      spyOn(window.autosize, "update");
-      this.view.postRenderTemplate();
-      expect(window.autosize.update).toHaveBeenCalled();
-      expect(window.autosize.update.calls.mostRecent().args[0].selector).toBe("textarea");
+      this.view.model.comments.push(factory.comment());
+      expect(this.view.appendComment).toHaveBeenCalled();
     });
   });
 
@@ -79,10 +70,23 @@ describe("app.views.CommentStream", function(){
       this.view.appendComment(comment);
       expect(comment.set).toHaveBeenCalled();
     });
+
+    it("sorts comments in the right order", function() {
+      this.view.render();
+      this.view.appendComment(factory.comment({"created_at": new Date(2000).toJSON(), "text": "2"}));
+      this.view.appendComment(factory.comment({"created_at": new Date(4000).toJSON(), "text": "4"}));
+      this.view.appendComment(factory.comment({"created_at": new Date(5000).toJSON(), "text": "5"}));
+      this.view.appendComment(factory.comment({"created_at": new Date(6000).toJSON(), "text": "6"}));
+      this.view.appendComment(factory.comment({"created_at": new Date(1000).toJSON(), "text": "1"}));
+      this.view.appendComment(factory.comment({"created_at": new Date(3000).toJSON(), "text": "3"}));
+
+      expect(this.view.$(".comments div.comment.media").length).toEqual(6);
+      expect(this.view.$(".comments div.comment.media div.comment-content p").text()).toEqual("123456");
+    });
   });
 
   describe("expandComments", function() {
-    it("refills the comment textbox on success", function() {
+    it("doesn't drop the comment textbox value on success", function() {
       this.view.render();
       this.view.$("textarea").val("great post!");
       this.view.expandComments();