From: Jay Sitter <jay@jaysitter.com> Date: Fri, 23 Jun 2023 04:15:24 +0000 (-0400) Subject: fix!: Try to get Vote Buttons component working in Comments X-Git-Url: http://these/git/%7B%27/docs/static/%24%7B%60data:application/manifest%20json;base64%2C%24%7Bawait?a=commitdiff_plain;h=787a75396be6132a9a2e3b427d8013d56a2f7c79;p=lemmy-ui.git fix!: Try to get Vote Buttons component working in Comments --- diff --git a/src/shared/components/comment/comment-node.tsx b/src/shared/components/comment/comment-node.tsx index b558d14..d38a7af 100644 --- a/src/shared/components/comment/comment-node.tsx +++ b/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 - 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({ diff --git a/src/shared/components/common/vote-buttons.tsx b/src/shared/components/common/vote-buttons.tsx index bba82ba..b337794 100644 --- a/src/shared/components/common/vote-buttons.tsx +++ b/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(), });