Likes Fix (button mashing and initial negative likes) (#4852)

* version updates

* squash commits

* leave note for bridge into next likes functionaliy fix

* squash commits

* leave note for bridge into next likes functionaliy fix

* disable noty notification for likes and comment likes

* fix comment template if statement

* updates

* check no debounce

* debounce likes

* debounce

app/assets/javascripts/application.js

@@ -1,4 +1,5 @@
-  // This is a manifest file that'll be compiled into application.js, which will include all the files
+/* eslint-disable no-empty-label */
+// This is a manifest file that'll be compiled into application.js, which will include all the files
 // listed below.
 //
 // Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,

app/assets/javascripts/comment.js

@@ -46,8 +46,9 @@ function insertTitleSuggestionTemplate() {
   var element = $('#text-input');
   var currentText = $('#text-input').val().trim();
   var template = "\n[propose:title]Propose your title here[/propose]";
-  if(currentText.length === 0)
-  template = "[propose:title]Propose your title here[/propose]";
+  if (currentText.length === 0) { 
+    template = "[propose:title]Propose your title here[/propose]";
+  }
   var newText = currentText+template;
   element.val(newText);
 }

app/assets/javascripts/like.js

@@ -1,58 +1,37 @@
+/* eslint-disable no-empty-label */
 /* Like button functionality of nodes */
 
-// functionalize appearance changes
-function changelikecount(value, node_id) {
-
-  var count = $('#like-count-' + node_id).html();
-  // strip parens and convert to number
-  count = parseInt(count);
-  count += value;
-  // push value back out
-  $('#like-count-' + node_id).html(count);
-
-}
-
-function shownotliked(node_id) {
-
-  $('#like-star-' + node_id)[0].className = "fa fa-star-o";
-
-}
-
-function showliked(node_id) {
-
-  $('#like-star-' + node_id)[0].className = "fa fa-star";
-
-}
-
-// support AJAX button clicking
 function clickliked() {
-
   var node_id = $(this).attr('node-id');
-  // toggle liked to not liked.
-  $.getJSON("/likes/node/" + node_id + "/delete")
-   .done(function(response) {
-    notyNotification('mint', 3000, 'success', 'topRight', 'Unliked!');
-    shownotliked(node_id);
-    changelikecount(parseInt(response), node_id);
-    $('#like-button-' + node_id).on('click', clicknotliked);
-    $('#like-button-' + node_id).off('click', clickliked);
-
-  });
-
+  changeLikeStatus(node_id, "/delete");
 }
 
 function clicknotliked() {
-
   var node_id = $(this).attr('node-id');
-  // toggle not liked to liked.
-  $.getJSON("/likes/node/" + node_id + "/create")
-   .done(function(response) {
-    notyNotification('mint', 3000, 'success', 'topRight', 'Liked!');
-    showliked(node_id);
-    changelikecount(parseInt(response), node_id);
-    $('#like-button-' + node_id).on('click', clickliked);
-    $('#like-button-' + node_id).off('click', clicknotliked);
+  changeLikeStatus(node_id, "/create");
+}
 
-  });
+function changeLikeStatus(node_id, method) {
+  $('#like-button-' + node_id).off();
+  $.getJSON("/likes/node/" + node_id + method)
+    .then(function(resp) {
+      updateLikeCount(parseInt(resp), node_id);
+      renderLikeStar(parseInt(resp), node_id);
+    })
+    .then(function(resp) {
+      let method1 = method === "/delete" ? clicknotliked : clickliked
+      $('#like-button-' + node_id).on('click', method1);
+    });
+}
 
+function updateLikeCount(value, node_id) {
+  var count = $('#like-count-' + node_id).html();
+  count = parseInt(count) + value;
+  $('#like-count-' + node_id).html(count);
 }
+
+// where fa fa-star-o is a clear star (indicating you are not currently liking)
+function renderLikeStar(value, node_id) {
+  let name = value === -1 ? "fa fa-star-o" : "fa fa-star"
+  $('#like-star-' + node_id)[0].className = name;
+}

app/views/comments/like_comment.js.erb

@@ -10,10 +10,4 @@ $("<%= str %>").css("display","none");
     $("<%= str %>").css("display","flex");
     $("<%= str %> div").first().html("<%= @likes[capitalized_emoji_name] %>");
   <% end %>
-<% end %>
-
-<% if @is_liked %>
-  notyNotification('mint', 3000, 'success', 'topRight', 'Unreacted!');
-<% else %>
-	notyNotification('mint', 3000, 'success', 'topRight', 'Reacted!');
-<% end %>
+<% end %>

app/views/like/_like.html.erb

@@ -94,18 +94,24 @@
         cache: false
       });
 
+      // opens modal to login before you can like;
       $("#open-login-like").click(function() {
         $("input[name='hash_params']").val($(this).attr("data-hashparams"));
       });
 
+      // triggers liking and unliking
       <% if current_user %>
-        $('#like-button-<%= node.id %>').on('click',<% if node.liked_by(current_user.uid) %>clickliked<% else %>clicknotliked<% end %>)
+        $('#like-button-<%= node.id %>').on('click', debounce(<% if node.liked_by(current_user.uid) %>clickliked<% else %>clicknotliked<% end %>, 200, true));
 
-        if(window.location.href.includes("#like")) {
-          $('#like-button-<%= node.id %>').click();
-        }
-        <% end %>
+        // leaving below uncommented for now - possibility useful for implement comment like functionality?
+
+        // if(window.location.href.includes("#like")) {
+        //   $('#like-button-<%= node.id %>').click();
+        // }
+
+      <% end %>
     });
+
     $('body').on('click', function (e) { // If there's a click event in the body
       $('[rel=popover]').each(function () { // For each popover
         /*

app/views/notes/_notes.html.erb

@@ -34,7 +34,7 @@
 	    <%= distance_of_time_in_words(Time.at(node.latest.timestamp), Time.current, { include_seconds: false, scope: 'datetime.time_ago_in_words' }) %>
           <% end %>
           | <i class="fa fa-eye"></i> <%= number_with_delimiter(node.totalviews) %> <span class="hidden-xs hidden-sm"><%= t('notes._notes.views') %></span>
-          | <i style="<% if node.likes > 0 %>color:#db4;<% else %>color:#888;<% end %>" class="fa fa-star-o"></i> <%= node.likes %>
+          | <i style="<% if node.likers.length > 0 %>color:#db4;<% else %>color:#888;<% end %>" class="fa fa-star-o"></i> <%= node.likers.length %>
         </small></p>
 
         <div class="content" style="margin:auto">

package.json

@@ -63,4 +63,4 @@
   "engines": {
     "yarn": ">= 1.0.0"
   }
-}
+}

spec/javascripts/comment_spec.js

@@ -0,0 +1,23 @@
+/* eslint-disable no-empty-label */
+/* eslint-disable no-unused-expressions */
+//= require comment_expand
+
+describe("Comments", function() {
+
+  it("shows expand comment button with remaining comment count", function() {
+
+    fixture.load('comment_expand.html');
+
+    expand_comments(0);
+    expect($('#answer-0-expand').html()).to.eql('View 2 previous comments');
+
+    expand_comments(0);
+    expect($('#answer-0-expand').css('display')).to.eql('none');
+
+  });
+
+  it("loads up i18n-js library properly", function() {
+    expect(I18n.t('js.dashboard.selected_updates')).to.eql('Selected updates')
+  });
+
+});

spec/javascripts/fixtures/unlike.html

@@ -1,11 +1,9 @@
 <ul class="btn-group">
-
-  <li rel="tooltip" title="Helpful? Like it and get updates!" class="btn btn-default btn-sm btn-like" node-id="1" id="like-button-1"><span id="like-star-1" class="fa fa-star"></span> <span id="like-count-1">1</span></li>
-
+  <li rel="tooltip" title="Helpful? Like it and get updates!" class="btn btn-default btn-sm btn-like" node-id="1" id="like-button-1"><span id="like-star-1" class="fa fa-star"></span><span id="like-count-1">1</span></li>
 </ul>
 
 <script>
-  jQuery(document).ready(function() {
-      $('#like-button-1').on('click', clickliked);
-  })
-</script>
+   $(document).ready(function () {
+      $("#like-button-1").click();
+    })
+</script>

spec/javascripts/helpers/mock-ajax.js

@@ -1,3 +1,4 @@
+/* eslint-disable no-empty-label */
 /*
 
 Jasmine-Ajax - v3.2.0: a set of helpers for testing AJAX requests under the Jasmine

spec/javascripts/inline_grids_spec.js

@@ -1,3 +1,5 @@
+/* eslint-disable no-empty-label */
+
 var editor;
 
 fixture.preload("inline_grid.html");

spec/javascripts/like_spec.js

@@ -0,0 +1,79 @@
+/* eslint-disable no-empty-label */
+/* eslint-disable no-unused-expressions */
+//= require like
+
+fixture.preload('index.html', 'unlike.html');
+
+describe("Like Button", function () {
+
+  beforeEach(function () {
+    fixture.load('index.html', 'unlike.html');
+  });
+
+  afterEach(function () {
+    ajaxStub.restore();
+  });
+
+  it("triggers an ajax request", function() {
+
+    ajaxStub = sinon.stub($, 'ajax', function (object) {
+      response = object.url === '/likes/node/1/create' ? '4' : 'none'
+
+      var d = $.Deferred();
+      response === '4' ? d.resolve(response) : d.reject(response);
+      return d.promise();
+
+    });
+
+    $("#like-button-1").click();
+
+    expect(ajaxStub).to.have.been.called;
+
+  });
+
+
+  it("it unlikes when already liked", function() {
+
+    ajaxStub = sinon.stub($, 'ajax', function (object) {
+      response = object.url === '/likes/node/1/delete' ? '4' : 'none'
+
+      // check this if you have trouble faking a server response:
+      // if (response === '4') {
+      //   console.log('Faked response to:', object.url)
+      // } else {
+      //   console.log('Failed to fake response to:', object.url);
+      // }
+
+      var d = $.Deferred();
+      response === '4' ? d.resolve(response) : d.reject(response);
+      return d.promise();
+
+    });
+
+       // should trigger the following and our ajaxSpy should return a fake response of "4":
+       // jQuery.getJSON("/likes/node/1/delete").done(function(data){
+       //   response = data;
+       // })
+
+      $("#like-button-1").click();
+      expect($('#like-count-1').html()).to.eql('0');
+
+  });
+
+  it("it toggles the like star render", function () {
+
+    ajaxStub = sinon.stub($, 'ajax', function (object) {
+      response = object.url === '/likes/node/1/delete' ? '4' : 'none'
+
+      var d = $.Deferred();
+      response === '4' ? d.resolve(response) : d.reject(response);
+      return d.promise();
+
+    });
+
+    $("#like-button-1").click();
+    expect($('#like-star-1')[0].className).to.eql('fa fa-star-o');
+
+  });
+
+});