Refactor SPV post interactions

closes #7089

6 files changed, 80 insertions, 73 deletions

diff --git a/app/assets/javascripts/app/views/comment_stream_view.js b/app/assets/javascripts/app/views/comment_stream_view.js
index 24f05ee93..0119b3329 100644
--- a/app/assets/javascripts/app/views/comment_stream_view.js
+++ b/app/assets/javascripts/app/views/comment_stream_view.js
@@ -13,9 +13,8 @@ app.views.CommentStream = app.views.Base.extend({
     "click .toggle_post_comments": "expandComments"
   },
 
-  initialize: function(options) {
-    this.commentTemplate = options.commentTemplate;
-
+  initialize: function() {
+    this.CommentView = app.views.Comment;
     this.setupBindings();
   },
 
@@ -84,7 +83,7 @@ app.views.CommentStream = app.views.Base.extend({
     // on post ownership in the Comment view.
     comment.set({parent : this.model.toJSON()});
 
-    var commentHtml = new app.views.Comment({model: comment}).render().el;
+    var commentHtml = new this.CommentView({model: comment}).render().el;
     var commentBlocks = this.$(".comments div.comment.media");
     this._moveInsertPoint(comment.get("created_at"), commentBlocks);
     if (this._insertPoint >= commentBlocks.length) {
diff --git a/app/assets/javascripts/app/views/single-post-viewer/single_post_comment_stream.js b/app/assets/javascripts/app/views/single-post-viewer/single_post_comment_stream.js
index 63ef065f6..49ddf11db 100644
--- a/app/assets/javascripts/app/views/single-post-viewer/single_post_comment_stream.js
+++ b/app/assets/javascripts/app/views/single-post-viewer/single_post_comment_stream.js
@@ -4,7 +4,10 @@ app.views.SinglePostCommentStream = app.views.CommentStream.extend({
   tooltipSelector: "time, .control-icons a",
 
   initialize: function(){
+    this.CommentView = app.views.ExpandedComment;
     $(window).on('hashchange',this.highlightPermalinkComment);
+    this.setupBindings();
+    this.model.comments.on("reset", this.render, this);
   },
 
   highlightPermalinkComment: function() {
@@ -24,16 +27,6 @@ app.views.SinglePostCommentStream = app.views.CommentStream.extend({
     _.defer(this.highlightPermalinkComment);
   },
 
-  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.ExpandedComment({
-      model: comment
-    }).render().el);
-  },
-
   presenter: function(){
     return _.extend(this.defaultPresenter(), {
       moreCommentsCount : 0,
diff --git a/app/assets/javascripts/app/views/single-post-viewer/single_post_interaction_counts.js b/app/assets/javascripts/app/views/single-post-viewer/single_post_interaction_counts.js
new file mode 100644
index 000000000..42348627c
--- /dev/null
+++ b/app/assets/javascripts/app/views/single-post-viewer/single_post_interaction_counts.js
@@ -0,0 +1,22 @@
+// @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL-v3-or-Later
+
+app.views.SinglePostInteractionCounts = app.views.Base.extend({
+  templateName: "single-post-viewer/single-post-interaction-counts",
+  tooltipSelector: ".avatar.micro",
+
+  initialize: function() {
+    this.model.interactions.on("change", this.render, this);
+  },
+
+  presenter: function() {
+    var interactions = this.model.interactions;
+    return {
+      likes: interactions.likes.toJSON(),
+      reshares: interactions.reshares.toJSON(),
+      commentsCount: interactions.commentsCount(),
+      likesCount: interactions.likesCount(),
+      resharesCount: interactions.resharesCount()
+    };
+  }
+});
+// @license-end
diff --git a/app/assets/javascripts/app/views/single-post-viewer/single_post_interactions.js b/app/assets/javascripts/app/views/single-post-viewer/single_post_interactions.js
index 9549a74a5..ec9ea8f2f 100644
--- a/app/assets/javascripts/app/views/single-post-viewer/single_post_interactions.js
+++ b/app/assets/javascripts/app/views/single-post-viewer/single_post_interactions.js
@@ -2,28 +2,19 @@
 
 app.views.SinglePostInteractions = app.views.Base.extend({
   templateName: "single-post-viewer/single-post-interactions",
-  tooltipSelector: ".avatar.micro",
   className: "framed-content",
 
   subviews: {
-    '#comments': 'commentStreamView'
+    "#comments": "commentStreamView",
+    "#interaction-counts": "interactionCountsView"
   },
 
-  initialize : function() {
-    this.model.interactions.on('change', this.render, this);
-    this.commentStreamView = new app.views.SinglePostCommentStream({model: this.model});
+  commentStreamView: function() {
+    return new app.views.SinglePostCommentStream({model: this.model});
   },
 
-  presenter : function(){
-    var interactions = this.model.interactions;
-    return {
-      likes : interactions.likes.toJSON(),
-      comments : interactions.comments.toJSON(),
-      reshares : interactions.reshares.toJSON(),
-      commentsCount : interactions.commentsCount(),
-      likesCount : interactions.likesCount(),
-      resharesCount : interactions.resharesCount(),
-    };
-  },
+  interactionCountsView: function() {
+    return new app.views.SinglePostInteractionCounts({model: this.model});
+  }
 });
 // @license-end
diff --git a/app/assets/templates/single-post-viewer/single-post-interaction-counts_tpl.jst.hbs b/app/assets/templates/single-post-viewer/single-post-interaction-counts_tpl.jst.hbs
new file mode 100644
index 000000000..221274487
--- /dev/null
+++ b/app/assets/templates/single-post-viewer/single-post-interaction-counts_tpl.jst.hbs
@@ -0,0 +1,42 @@
+{{#if resharesCount}}
+  <div id="reshares" class="clearfix">
+    <div class="count">
+      <i class="entypo-reshare middle gray"></i>
+      <span>{{resharesCount}}</span>
+    </div>
+    <div class="interaction-avatars">
+      {{#each reshares}}
+        {{#linkToAuthor author}}
+          {{{personImage this "small" "micro"}}}
+        {{/linkToAuthor}}
+      {{/each}}
+    </div>
+  </div>
+{{/if}}
+{{#if likesCount}}
+  <div id="likes" class="clearfix">
+    <div class="count">
+      <i class="entypo-heart middle gray"></i>
+      <span>{{likesCount}}</span>
+    </div>
+    <div class="interaction-avatars">
+      {{#each likes}}
+        {{#linkToAuthor author}}
+          {{{personImage this "small" "micro"}}}
+        {{/linkToAuthor}}
+      {{/each}}
+    </div>
+  </div>
+{{/if}}
+{{#if commentsCount}}
+  <div id="comments-meta" class="clearfix">
+    <div class="count">
+      <i class="entypo-comment middle gray"></i>
+      <span>{{commentsCount}}</span>
+    </div>
+  </div>
+{{else}}
+  <div class="no-comments">
+    <h4>{{t "comments.no_comments" }}</h4>
+  </div>
+{{/if}}
diff --git a/app/assets/templates/single-post-viewer/single-post-interactions_tpl.jst.hbs b/app/assets/templates/single-post-viewer/single-post-interactions_tpl.jst.hbs
index 0e9fa60a8..a71be6f84 100644
--- a/app/assets/templates/single-post-viewer/single-post-interactions_tpl.jst.hbs
+++ b/app/assets/templates/single-post-viewer/single-post-interactions_tpl.jst.hbs
@@ -1,44 +1,4 @@
-{{#if resharesCount}}
-  <div id="reshares" class="clearfix">
-    <div class="count">
-      <i class="entypo-reshare middle gray"></i>
-      <span>{{resharesCount}}</span>
-    </div>
-    <div class="interaction-avatars">
-      {{#each reshares}}
-        {{#linkToAuthor author}}
-          {{{personImage this 'small' 'micro'}}}
-        {{/linkToAuthor}}
-      {{/each}}
-    </div>
-  </div>
-{{/if}}
-{{#if likesCount}}
-  <div id="likes" class="clearfix">
-    <div class="count">
-      <i class="entypo-heart middle gray"></i>
-      <span>{{likesCount}}</span>
-    </div>
-    <div class="interaction-avatars">
-      {{#each likes}}
-        {{#linkToAuthor author}}
-          {{{personImage this 'small' 'micro'}}}
-        {{/linkToAuthor}}
-      {{/each}}
-    </div>
-  </div>
-{{/if}}
-{{#if commentsCount}}
-  <div id="comments-meta" class="clearfix">
-    <div class="count">
-      <i class="entypo-comment middle gray"></i>
-      <span>{{commentsCount}}</span>
-    </div>
-  </div>
-{{else}}
-  <div class="no-comments">
-    <h4>{{t "comments.no_comments" }}</h4>
-  </div>
-{{/if}}
-<div id='comments'>
+<div id="interaction-counts">
+</div>
+<div id="comments">
 </div>