ensure post votes score tooltip is updated on vote success (closes #1207

)
codidact · Oct 23, 2023 · 3b3d8db · 3b3d8db
1 parent be6f490
commit 3b3d8db
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 6 deletions.
diff --git a/app/assets/javascripts/votes.js b/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(`&minus;${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(`&minus;${data.downvotes}`);
+        $container.attr("title", `Score: ${data.score}`);
         $tgt.addClass('is-active')
             .attr('data-vote-id', data.vote_id);
 

diff --git a/app/controllers/votes_controller.rb b/app/controllers/votes_controller.rb
@@ -41,9 +41,15 @@ def create
 
     AbilityQueue.add(post.user, "Vote Change on ##{post.id}")
 
+    post = Post.find(params[: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
@@ -58,8 +64,14 @@ def destroy
     end
 
     if vote.destroy
+      post = Post.find(post.id)
+
       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

diff --git a/app/views/posts/_expanded.html.erb b/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' : '' %>"