-import { showScores } from "@utils/app";
+import { myAuthRequired, newVote, showScores } from "@utils/app";
import { numToSI } from "@utils/helpers";
import classNames from "classnames";
import { Component, linkEvent } from "inferno";
-import { CommentAggregates, PostAggregates } from "lemmy-js-client";
+import {
+ CommentAggregates,
+ CreateCommentLike,
+ CreatePostLike,
+ PostAggregates,
+} from "lemmy-js-client";
+import { VoteContentType, VoteType } from "../../interfaces";
import { I18NextService } from "../../services";
import { Icon, Spinner } from "../common/icon";
-import { PostListing } from "../post/post-listing";
interface VoteButtonsProps {
- postListing: PostListing;
+ voteContentType: VoteContentType;
+ id: number;
+ onVote: (i: CreateCommentLike | CreatePostLike) => void;
enableDownvotes?: boolean;
- upvoteLoading?: boolean;
- downvoteLoading?: boolean;
- handleUpvote: (i: PostListing) => void;
- handleDownvote: (i: PostListing) => void;
counts: CommentAggregates | PostAggregates;
my_vote?: number;
}
return `${points} • ${upvotes} • ${downvotes}`;
};
+const handleUpvote = (i: VoteButtons) => {
+ i.setState({ upvoteLoading: true });
+
+ 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 });
+ 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 });
+};
+
export class VoteButtonsCompact extends Component<
VoteButtonsProps,
VoteButtonsState
return (
<div>
<button
+ type="button"
className={`btn-animate btn py-0 px-1 ${
this.props.my_vote === 1 ? "text-info" : "text-muted"
}`}
data-tippy-content={tippy(this.props.counts)}
- onClick={linkEvent(this.props.postListing, this.props.handleUpvote)}
+ onClick={linkEvent(this, handleUpvote)}
aria-label={I18NextService.i18n.t("upvote")}
aria-pressed={this.props.my_vote === 1}
>
</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"
}`}
- onClick={linkEvent(
- this.props.postListing,
- this.props.handleDownvote
- )}
+ onClick={linkEvent(this, handleDownvote)}
data-tippy-content={tippy(this.props.counts)}
aria-label={I18NextService.i18n.t("downvote")}
aria-pressed={this.props.my_vote === -1}
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"
}`}
- onClick={linkEvent(this.props.postListing, this.props.handleUpvote)}
+ onClick={linkEvent(this, handleUpvote)}
data-tippy-content={I18NextService.i18n.t("upvote")}
aria-label={I18NextService.i18n.t("upvote")}
aria-pressed={this.props.my_vote === 1}
</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)}
)}
{this.props.enableDownvotes && (
<button
+ type="button"
className={`btn-animate btn btn-link p-0 ${
this.props.my_vote == -1 ? "text-danger" : "text-muted"
}`}
- onClick={linkEvent(
- this.props.postListing,
- this.props.handleDownvote
- )}
+ onClick={linkEvent(this, handleDownvote)}
data-tippy-content={I18NextService.i18n.t("downvote")}
aria-label={I18NextService.i18n.t("downvote")}
aria-pressed={this.props.my_vote === -1}