mirror of
https://github.com/LemmyNet/lemmy-ui.git
synced 2024-11-01 10:09:56 +00:00
fix!: Try to get Vote Buttons component working in Comments
This commit is contained in:
parent
e9341e791b
commit
787a75396b
2 changed files with 21 additions and 98 deletions
|
@ -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
|
||||
className={`unselectable pointer ${this.scoreColor}`}
|
||||
onClick={linkEvent(this, this.handleUpvote)}
|
||||
data-tippy-content={this.pointsTippy}
|
||||
>
|
||||
{this.state.upvoteLoading ? (
|
||||
<Spinner />
|
||||
) : (
|
||||
<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
|
||||
),
|
||||
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
|
||||
className={`btn btn-link btn-animate ${
|
||||
this.commentView.my_vote === 1
|
||||
? "text-info"
|
||||
: "text-muted"
|
||||
}`}
|
||||
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>
|
||||
)}
|
||||
<VoteButtonsCompact
|
||||
id={this.commentView.comment.id}
|
||||
onVote={this.props.onCommentVote}
|
||||
enableDownvotes={this.props.enableDownvotes}
|
||||
counts={this.commentView.counts}
|
||||
my_vote={this.commentView.my_vote}
|
||||
/>
|
||||
<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({
|
||||
|
|
|
@ -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(),
|
||||
});
|
||||
|
|
Loading…
Reference in a new issue