Merge remote-tracking branch 'lemmy/main' into fix/wider-max-width-1536

[lemmy-ui.git] / src / shared / components / common / vote-buttons.tsx

diff --git a/src/shared/components/common/vote-buttons.tsx b/src/shared/components/common/vote-buttons.tsx
index b337794f6cd841f0b1ed459dd98c02710dddd555..ff12125f21328f33fa5fed7e26e050081802b390 100644 (file)
--- a/src/shared/components/common/vote-buttons.tsx
+++ b/src/shared/components/common/vote-buttons.tsx
@@ -8,11 +8,12 @@ import {
   CreatePostLike,
   PostAggregates,
 } from "lemmy-js-client";
-import { VoteType } from "../../interfaces";
+import { VoteContentType, VoteType } from "../../interfaces";
 import { I18NextService } from "../../services";
 import { Icon, Spinner } from "../common/icon";
 
 interface VoteButtonsProps {
+  voteContentType: VoteContentType;
   id: number;
   onVote: (i: CreateCommentLike | CreatePostLike) => void;
   enableDownvotes?: boolean;
@@ -46,21 +47,45 @@ const tippy = (counts: CommentAggregates | PostAggregates): string => {
 
 const handleUpvote = (i: VoteButtons) => {
   i.setState({ upvoteLoading: true });
-  i.props.onVote({
-    id: i.props.id,
-    score: newVote(VoteType.Upvote, i.props.my_vote),
-    auth: myAuthRequired(),
-  });
+
+  switch (i.props.voteContentType) {
+    case VoteContentType.Comment:
+      i.props.onVote({
+        comment_id: i.props.id,
+        score: newVote(VoteType.Upvote, i.props.my_vote),
+        auth: myAuthRequired(),
+      });
+      break;
+    case VoteContentType.Post:
+    default:
+      i.props.onVote({
+        post_id: i.props.id,
+        score: newVote(VoteType.Upvote, i.props.my_vote),
+        auth: myAuthRequired(),
+      });
+  }
+
   i.setState({ upvoteLoading: false });
 };
 
 const handleDownvote = (i: VoteButtons) => {
   i.setState({ downvoteLoading: true });
-  i.props.onVote({
-    id: i.props.id,
-    score: newVote(VoteType.Downvote, i.props.my_vote),
-    auth: myAuthRequired(),
-  });
+  switch (i.props.voteContentType) {
+    case VoteContentType.Comment:
+      i.props.onVote({
+        comment_id: i.props.id,
+        score: newVote(VoteType.Downvote, i.props.my_vote),
+        auth: myAuthRequired(),
+      });
+      break;
+    case VoteContentType.Post:
+    default:
+      i.props.onVote({
+        post_id: i.props.id,
+        score: newVote(VoteType.Downvote, i.props.my_vote),
+        auth: myAuthRequired(),
+      });
+  }
   i.setState({ downvoteLoading: false });
 };
 
@@ -81,6 +106,7 @@ export class VoteButtonsCompact extends Component<
     return (
       <div>
         <button
+          type="button"
           className={`btn-animate btn py-0 px-1 ${
             this.props.my_vote === 1 ? "text-info" : "text-muted"
           }`}
@@ -104,6 +130,7 @@ export class VoteButtonsCompact extends Component<
         </button>
         {this.props.enableDownvotes && (
           <button
+            type="button"
             className={`ms-2 btn-animate btn py-0 px-1 ${
               this.props.my_vote === -1 ? "text-danger" : "text-muted"
             }`}
@@ -147,8 +174,9 @@ export class VoteButtons extends Component<VoteButtonsProps, VoteButtonsState> {
 
   render() {
     return (
-      <div className={`vote-bar col-1 pe-0 small text-center`}>
+      <div className="vote-bar pe-0 small text-center">
         <button
+          type="button"
           className={`btn-animate btn btn-link p-0 ${
             this.props.my_vote == 1 ? "text-info" : "text-muted"
           }`}
@@ -165,7 +193,7 @@ export class VoteButtons extends Component<VoteButtonsProps, VoteButtonsState> {
         </button>
         {showScores() ? (
           <div
-            className={`unselectable pointer text-muted px-1 post-score`}
+            className="unselectable pointer text-muted px-1 post-score"
             data-tippy-content={tippy(this.props.counts)}
           >
             {numToSI(this.props.counts.score)}
@@ -175,6 +203,7 @@ export class VoteButtons extends Component<VoteButtonsProps, VoteButtonsState> {
         )}
         {this.props.enableDownvotes && (
           <button
+            type="button"
             className={`btn-animate btn btn-link p-0 ${
               this.props.my_vote == -1 ? "text-danger" : "text-muted"
             }`}