Merge pull request #1224 from codidact/0valt/1207/update-votes-tooltip

Dynamically update post score tooltip (#1207)

Author: Taeir

app/assets/javascripts/votes.js

@@ -2,22 +2,29 @@ $(() => {
   $(document).on('click', '.vote-button', async evt => {
     const $tgt = $(evt.target).is('button') ? $(evt.target) : $(evt.target).parents('button');
     const $post = $tgt.parents('.post');
-    const $up = $post.find('.post--votes').find('.js-upvote-count');
-    const $down = $post.find('.post--votes').find('.js-downvote-count');
+
+    const $container = $post.find(".post--votes");
+
+    const $up = $container.find('.js-upvote-count');
+    const $down = $container.find('.js-downvote-count');
     const voteType = $tgt.data('vote-type');
     const voted = $tgt.hasClass('is-active');
 
     if (voted) {
       const voteId = $tgt.attr('data-vote-id');
+
       const resp = await fetch(`/votes/${voteId}`, {
         method: 'DELETE',
         credentials: 'include',
         headers: { 'X-CSRF-Token': QPixel.csrfToken() }
       });
+
       const data = await resp.json();
+
       if (data.status === 'OK') {
         $up.text(`+${data.upvotes}`);
         $down.html(`−${data.downvotes}`);
+        $container.attr("title", `Score: ${data.score}`);
         $tgt.removeClass('is-active')
             .removeAttr('data-vote-id');
       }
@@ -34,10 +41,13 @@ $(() => {
         headers: { 'Content-Type': 'application/json', 'X-CSRF-Token': QPixel.csrfToken() },
         body: JSON.stringify({post_id: $post.data('post-id'), vote_type: voteType})
       });
+
       const data = await resp.json();
+
       if (data.status === 'modified' || data.status === 'OK') {
         $up.text(`+${data.upvotes}`);
         $down.html(`−${data.downvotes}`);
+        $container.attr("title", `Score: ${data.score}`);
         $tgt.addClass('is-active')
             .attr('data-vote-id', data.vote_id);
 

app/controllers/votes_controller.rb

@@ -42,8 +42,11 @@ def create
     AbilityQueue.add(post.user, "Vote Change on ##{post.id}")
 
     modified = !destroyed.empty?
-    state = { status: (modified ? 'modified' : 'OK'), vote_id: vote.id, upvotes: post.upvote_count,
-              downvotes: post.downvote_count }
+    state = { status: (modified ? 'modified' : 'OK'),
+              vote_id: vote.id,
+              upvotes: post.upvote_count,
+              downvotes: post.downvote_count,
+              score: post.score }
 
     render json: state
   end
@@ -59,7 +62,10 @@ def destroy
 
     if vote.destroy
       AbilityQueue.add(post.user, "Vote Change on ##{post.id}")
-      render json: { status: 'OK', upvotes: post.upvote_count, downvotes: post.downvote_count }
+      render json: { status: 'OK',
+                     upvotes: post.upvote_count,
+                     downvotes: post.downvote_count,
+                     score: post.score }
     else
       render json: { status: 'failed', message: vote.errors.full_messages.join('. ') }, status: :forbidden
     end

app/models/post.rb

@@ -164,6 +164,11 @@ def recalc_score
     sql = 'UPDATE posts SET score = (upvote_count + ?) / (upvote_count + downvote_count + (2 * ?)) WHERE id = ?'
     sanitized = ActiveRecord::Base.sanitize_sql_array([sql, variable, variable, id])
     ActiveRecord::Base.connection.execute sanitized
+
+    # ensures the updated score is immediately available
+    self.score = (upvote_count + variable).to_f / (upvote_count + downvote_count + (2 * variable))
+    # prevents AR from accidentally saving the dirty state
+    clear_attribute_changes([:score])
   end
 
   # This method will update the locked status of this post if locked_until is in the past.

app/views/posts/_expanded.html.erb

@@ -39,7 +39,7 @@
     <% if post_type.has_votes || (user_signed_in? && post.post_type.has_reactions && post.post_type.reactions.any?) %>
       <div>
         <% if post_type.has_votes %>
-          <div class="post--votes has-text-align-center" title="Score : <%= post.score %>">
+          <div class="post--votes has-text-align-center" title="Score: <%= post.score %>">
             <% existing_vote = my_vote(post) %>
             <% unless post.locked? %>
               <button class="vote-button button is-icon-only-button <%= (existing_vote&.vote_type == 1) ? 'is-active' : '' %>"