fedi/lemmy-ui
1
0
Fork 0
mirror of https://github.com/LemmyNet/lemmy-ui.git synced 2024-12-27 03:04:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse source
This commit is contained in:
Jay Sitter 2023-06-23 00:15:24 -04:00
parent e9341e791b
commit 787a75396b
2 changed files with 21 additions and 98 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

113
src/shared/components/comment/comment-node.tsx
View file

@ -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}
<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),
})}
>
{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
),
})}
>
{numToSI(this.commentView.counts.score)}
</span>
)}
</a>
{numToSI(this.commentView.counts.score)}
</span>
<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({

6
src/shared/components/common/vote-buttons.tsx
View file

@ -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(),
});