voting buttons - handle existing votes for same comment

app/community/routes.py

@@ -237,8 +237,55 @@ def show_post(post_id: int):
         flash('Your comment has been added.')
         # todo: flush cache
         # todo: federation
-        replies = post_replies(post.id, 'top', show_first=reply.id)
+        return redirect(url_for('community.show_post', post_id=post_id))    # redirect to current page to avoid refresh resubmitting the form
     else:
         replies = post_replies(post.id, 'top')
     return render_template('community/post.html', title=post.title, post=post, is_moderator=is_moderator,
                            canonical=post.ap_id, form=form, replies=replies)
+
+
+@bp.route('/comment/<int:comment_id>/<vote_direction>', methods=['POST'])
+def comment_vote(comment_id, vote_direction):
+    upvoted_class = downvoted_class = ''
+    comment = PostReply.query.get_or_404(comment_id)
+    existing_vote = PostReplyVote.query.filter_by(user_id=current_user.id, post_reply_id=comment.id).first()
+    if existing_vote:
+        if existing_vote.effect > 0:        # previous vote was up
+            if vote_direction == 'upvote':  # new vote is also up, so remove it
+                db.session.delete(existing_vote)
+                comment.up_votes -= 1
+                comment.score -= 1
+            else:                           # new vote is down while previous vote was up, so reverse their previous vote
+                existing_vote.effect = -1
+                comment.up_votes -= 1
+                comment.down_votes += 1
+                comment.score -= 2
+                downvoted_class = 'voted_down'
+        else:                               # previous vote was down
+            if vote_direction == 'upvote':  # new vote is upvote
+                existing_vote.effect = 1
+                comment.up_votes += 1
+                comment.down_votes -= 1
+                comment.score += 1
+                upvoted_class = 'voted_up'
+            else:                           # reverse a previous downvote
+                db.session.delete(existing_vote)
+                comment.down_votes -= 1
+                comment.score += 2
+    else:
+        if vote_direction == 'upvote':
+            effect = 1
+            comment.up_votes += 1
+            comment.score += 1
+            upvoted_class = 'voted_up'
+        else:
+            effect = -1
+            comment.down_votes += 1
+            comment.score -= 1
+            downvoted_class = 'voted_down'
+        vote = PostReplyVote(user_id=current_user.id, post_reply_id=comment_id, author_id=comment.user_id, effect=effect)
+        db.session.add(vote)
+    db.session.commit()
+    return render_template('community/_voting_buttons.html', comment=comment,
+                           upvoted_class=upvoted_class,
+                           downvoted_class=downvoted_class)

app/static/structure.css

@@ -370,6 +370,7 @@ fieldset legend {
 .comment .voting_buttons .upvote_button, .comment .voting_buttons .downvote_button {
   padding-left: 3px;
   border-radius: 3px;
+  cursor: pointer;
 }
 .comment .voting_buttons .upvote_button.digits_4, .comment .voting_buttons .downvote_button.digits_4 {
   width: 68px;
@@ -380,6 +381,14 @@ fieldset legend {
 .comment .voting_buttons .upvote_button.digits_6, .comment .voting_buttons .downvote_button.digits_6 {
   width: 84px;
 }
+.comment .voting_buttons .upvote_button.voted_up, .comment .voting_buttons .downvote_button.voted_up {
+  color: green;
+  font-weight: bold;
+}
+.comment .voting_buttons .upvote_button.voted_down, .comment .voting_buttons .downvote_button.voted_down {
+  color: darkred;
+  font-weight: bold;
+}
 .comment .voting_buttons .downvote_button {
   margin-top: 5px;
 }

app/static/structure.scss

@@ -171,6 +171,7 @@ nav, etc which are used site-wide */
     .upvote_button, .downvote_button {
       padding-left: 3px;
       border-radius: 3px;
+      cursor: pointer;
 
       &.digits_4 {
         width: 68px;
@@ -183,6 +184,15 @@ nav, etc which are used site-wide */
       &.digits_6 {
         width: 84px;
       }
+
+      &.voted_up {
+        color: green;
+        font-weight: bold;
+      }
+      &.voted_down {
+        color: darkred;
+        font-weight: bold;
+      }
     }
 
     .downvote_button {

app/templates/community/_voting_buttons.html

@@ -0,0 +1,10 @@
+<div class="upvote_button digits_{{ digits(comment.up_votes) }} {{ upvoted_class }}"
+ hx-post="/community/comment/{{ comment.id }}/upvote" hx-trigger="click throttle:1s" hx-target="closest .voting_buttons">
+        <span class="fe fe-arrow-up"></span>
+        {{ comment.up_votes }}
+</div>
+<div class="downvote_button digits_{{ digits(comment.down_votes) }} {{ downvoted_class }}"
+ hx-post="/community/comment/{{ comment.id }}/downvote" hx-trigger="click throttle:1s" hx-target="closest .voting_buttons">
+        <span class="fe fe-arrow-down"></span>
+        {{ comment.down_votes }}
+</div>

app/templates/community/post.html

@@ -82,12 +82,9 @@
                 {% macro render_comment(comment) %}
                     <div class="comment" style="margin-left: {{ comment['comment'].depth * 20 }}px;">
                         <div class="voting_buttons">
-                            <div class="upvote_button digits_{{ digits(comment['comment'].up_votes) }}"><a href="#"><span class="fe fe-arrow-up"></span>
+                            {% with comment=comment['comment'] %}
-                                {{ comment['comment'].up_votes }}</a>
+                                {% include "community/_voting_buttons.html" %}
-                            </div>
+                            {% endwith %}
-                            <div class="downvote_button digits_{{ digits(comment['comment'].down_votes) }}"><a href="#"><span class="fe fe-arrow-down"></span>
-                                {{ comment['comment'].down_votes }}</a>
-                            </div>
                         </div>
                         <div class="hide_button"><a href="#">[-] hide</a></div>
                         <div class="comment_author">