fix!: Try to get Vote Buttons component working in Comments

src/shared/components/comment/comment-node.tsx

@@ -3,7 +3,6 @@ import {
   getCommentParentId,
   myAuth,
   myAuthRequired,
-  newVote,
   showScores,
 } from "@utils/app";
 import { futureDaysToUnixTime, numToSI } from "@utils/helpers";
@@ -53,13 +52,13 @@ import {
   CommentNodeI,
   CommentViewType,
   PurgeType,
-  VoteType,
 } from "../../interfaces";
 import { mdToHtml, mdToHtmlNoImages } from "../../markdown";
 import { I18NextService, UserService } from "../../services";
 import { setupTippy } from "../../tippy";
 import { Icon, PurgeWarning, Spinner } from "../common/icon";
 import { MomentTime } from "../common/moment-time";
+import { VoteButtonsCompact } from "../common/vote-buttons";
 import { CommunityLink } from "../community/community-link";
 import { PersonListing } from "../person/person-listing";
 import { CommentForm } from "./comment-form";
@@ -280,7 +279,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
       node.comment_view.counts.child_count > 0;
 
     return (
-      <li className="comment" role="comment">
+      <li className="comment">
         <article
           id={`comment-${cv.comment.id}`}
           className={classNames(`details comment-node py-2`, {
@@ -353,29 +352,18 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
               )}
               {/* This is an expanding spacer for mobile */}
               <div className="me-lg-5 flex-grow-1 flex-lg-grow-0 unselectable pointer mx-2" />
+
               {showScores() && (
                 <>
-                  <a
+                  <span
-                    className={`unselectable pointer ${this.scoreColor}`}
+                    className="me-1 font-weight-bold"
-                    onClick={linkEvent(this, this.handleUpvote)}
+                    aria-label={I18NextService.i18n.t("number_of_points", {
-                    data-tippy-content={this.pointsTippy}
+                      count: Number(this.commentView.counts.score),
+                      formattedCount: numToSI(this.commentView.counts.score),
+                    })}
                   >
-                    {this.state.upvoteLoading ? (
+                    {numToSI(this.commentView.counts.score)}
-                      <Spinner />
+                  </span>
-                    ) : (
-                      <span
-                        className="me-1 font-weight-bold"
-                        aria-label={I18NextService.i18n.t("number_of_points", {
-                          count: Number(this.commentView.counts.score),
-                          formattedCount: numToSI(
-                            this.commentView.counts.score
-                          ),
-                        })}
-                      >
-                        {numToSI(this.commentView.counts.score)}
-                      </span>
-                    )}
-                  </a>
                   <span className="me-1">•</span>
                 </>
               )}
@@ -448,60 +436,13 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
                   )}
                   {UserService.Instance.myUserInfo && !this.props.viewOnly && (
                     <>
-                      <button
+                      <VoteButtonsCompact
-                        className={`btn btn-link btn-animate ${
+                        id={this.commentView.comment.id}
-                          this.commentView.my_vote === 1
+                        onVote={this.props.onCommentVote}
-                            ? "text-info"
+                        enableDownvotes={this.props.enableDownvotes}
-                            : "text-muted"
+                        counts={this.commentView.counts}
-                        }`}
+                        my_vote={this.commentView.my_vote}
-                        onClick={linkEvent(this, this.handleUpvote)}
+                      />
-                        data-tippy-content={I18NextService.i18n.t("upvote")}
-                        aria-label={I18NextService.i18n.t("upvote")}
-                        aria-pressed={this.commentView.my_vote === 1}
-                      >
-                        {this.state.upvoteLoading ? (
-                          <Spinner />
-                        ) : (
-                          <>
-                            <Icon icon="arrow-up1" classes="icon-inline" />
-                            {showScores() &&
-                              this.commentView.counts.upvotes !==
-                                this.commentView.counts.score && (
-                                <span className="ms-1">
-                                  {numToSI(this.commentView.counts.upvotes)}
-                                </span>
-                              )}
-                          </>
-                        )}
-                      </button>
-                      {this.props.enableDownvotes && (
-                        <button
-                          className={`btn btn-link btn-animate ${
-                            this.commentView.my_vote === -1
-                              ? "text-danger"
-                              : "text-muted"
-                          }`}
-                          onClick={linkEvent(this, this.handleDownvote)}
-                          data-tippy-content={I18NextService.i18n.t("downvote")}
-                          aria-label={I18NextService.i18n.t("downvote")}
-                          aria-pressed={this.commentView.my_vote === -1}
-                        >
-                          {this.state.downvoteLoading ? (
-                            <Spinner />
-                          ) : (
-                            <>
-                              <Icon icon="arrow-down1" classes="icon-inline" />
-                              {showScores() &&
-                                this.commentView.counts.upvotes !==
-                                  this.commentView.counts.score && (
-                                  <span className="ms-1">
-                                    {numToSI(this.commentView.counts.downvotes)}
-                                  </span>
-                                )}
-                            </>
-                          )}
-                        </button>
-                      )}
                       <button
                         className="btn btn-link btn-animate text-muted"
                         onClick={linkEvent(this, this.handleReplyClick)}
@@ -1480,24 +1421,6 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
     });
   }
 
-  handleUpvote(i: CommentNode) {
-    i.setState({ upvoteLoading: true });
-    i.props.onCommentVote({
-      comment_id: i.commentId,
-      score: newVote(VoteType.Upvote, i.commentView.my_vote),
-      auth: myAuthRequired(),
-    });
-  }
-
-  handleDownvote(i: CommentNode) {
-    i.setState({ downvoteLoading: true });
-    i.props.onCommentVote({
-      comment_id: i.commentId,
-      score: newVote(VoteType.Downvote, i.commentView.my_vote),
-      auth: myAuthRequired(),
-    });
-  }
-
   handleBlockPerson(i: CommentNode) {
     i.setState({ blockPersonLoading: true });
     i.props.onBlockPerson({

src/shared/components/common/vote-buttons.tsx

@@ -14,7 +14,7 @@ import { Icon, Spinner } from "../common/icon";
 
 interface VoteButtonsProps {
   id: number;
-  onVote: (i: CreatePostLike | CreateCommentLike) => void;
+  onVote: (i: CreateCommentLike | CreatePostLike) => void;
   enableDownvotes?: boolean;
   counts: CommentAggregates | PostAggregates;
   my_vote?: number;
@@ -47,7 +47,7 @@ const tippy = (counts: CommentAggregates | PostAggregates): string => {
 const handleUpvote = (i: VoteButtons) => {
   i.setState({ upvoteLoading: true });
   i.props.onVote({
-    post_id: i.props.id,
+    id: i.props.id,
     score: newVote(VoteType.Upvote, i.props.my_vote),
     auth: myAuthRequired(),
   });
@@ -57,7 +57,7 @@ const handleUpvote = (i: VoteButtons) => {
 const handleDownvote = (i: VoteButtons) => {
   i.setState({ downvoteLoading: true });
   i.props.onVote({
-    post_id: i.props.id,
+    id: i.props.id,
     score: newVote(VoteType.Downvote, i.props.my_vote),
     auth: myAuthRequired(),
   });