From b00615492d5d88d49c3ace6f7c947e063d9d19a6 Mon Sep 17 00:00:00 2001
From: undefined <i@undefined.moe>
Date: Sat, 14 Jan 2023 13:38:48 +0800
Subject: [PATCH] ui: fix vote button

---
 .../components/discussion/comments.page.styl         |  2 +-
 packages/ui-default/components/vote/vote.page.js     | 10 +++++++---
 .../templates/components/comments_solution.html      | 12 +++++-------
 3 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/packages/ui-default/components/discussion/comments.page.styl b/packages/ui-default/components/discussion/comments.page.styl
index 4247742e9..318865a5d 100644
--- a/packages/ui-default/components/discussion/comments.page.styl
+++ b/packages/ui-default/components/discussion/comments.page.styl
@@ -83,7 +83,7 @@ $downvote-color = red
     transition: border-color .2s linear, opacity .2s linear
     opacity: 0.5
 
-    &>form
+    &>button
       width: rem(40px)
       float: left
       position: relative
diff --git a/packages/ui-default/components/vote/vote.page.js b/packages/ui-default/components/vote/vote.page.js
index 012eeaa98..701503f55 100644
--- a/packages/ui-default/components/vote/vote.page.js
+++ b/packages/ui-default/components/vote/vote.page.js
@@ -1,4 +1,5 @@
 import $ from 'jquery';
+import Notification from 'vj/components/notification';
 import Rotator from 'vj/components/rotator';
 import { AutoloadPage } from 'vj/misc/Page';
 import { request } from 'vj/utils';
@@ -25,12 +26,15 @@ const votePage = new AutoloadPage('votePage', () => {
     const $container = $button.closest('.vote');
     const $form = $button.closest('form');
     request
-      .post($form.attr('action'), $form)
+      .post($form.attr('action'), {
+        operation: $button.attr('value'),
+        psid: $form.find('input[name="psid"]').val(),
+      })
       .then((data) => {
         setVoteState($container, data.vote, data.user_vote);
       })
-      .catch(() => {
-        // TODO(iceboy): notify failure
+      .catch((e) => {
+        Notification.error(`Failed to vote: ${ e.message}`);
       });
     return false;
   });
diff --git a/packages/ui-default/templates/components/comments_solution.html b/packages/ui-default/templates/components/comments_solution.html
index cb9bf0527..02651254a 100644
--- a/packages/ui-default/templates/components/comments_solution.html
+++ b/packages/ui-default/templates/components/comments_solution.html
@@ -86,13 +86,11 @@
       <div class="vote vote--discussion">
       {% if handler.user.hasPerm(perm.PERM_VOTE_PROBLEM_SOLUTION) %}
         <div class="vote-number rotator--enabled">{{ doc.vote }}</div>
-        <div class="vote-op clearfix">
-          <form method="post">
-            <input type="hidden" name="psid" value="{{ doc._id }}">
-            <button type="submit" name="operation" value="upvote" class="vote-button upvote{% if pssdict[doc._id].vote == 1 %} active{% endif %}" data-tooltip="{{ _('Upvote') }}" data-tooltip-pos="bottom center" aria-label="{{ _('Upvote') }}"><span class="icon icon-vote--up"></span></button>
-            <button type="submit" name="operation" value="downvote" class="vote-button downvote{% if pssdict[doc._id].vote == -1 %} active{% endif %}" data-tooltip="{{ _('Downvote') }}" data-tooltip-pos="bottom center" aria-label="{{ _('Downvote') }}"><span class="icon icon-vote--down"></span></button>
-          </form>
-        </div>
+        <form method="post" class="vote-op clearfix">
+          <input type="hidden" name="psid" value="{{ doc._id }}">
+          <button type="submit" name="operation" value="upvote" class="vote-button upvote{% if pssdict[doc._id].vote == 1 %} active{% endif %}" data-tooltip="{{ _('Upvote') }}" data-tooltip-pos="bottom center" aria-label="{{ _('Upvote') }}"><span class="icon icon-vote--up"></span></button>
+          <button type="submit" name="operation" value="downvote" class="vote-button downvote{% if pssdict[doc._id].vote == -1 %} active{% endif %}" data-tooltip="{{ _('Downvote') }}" data-tooltip-pos="bottom center" aria-label="{{ _('Downvote') }}"><span class="icon icon-vote--down"></span></button>
+        </form>
       {% else %}
         <div class="vote-number">{{ doc.vote }}</div>
       {% endif %}