- <button
- className={`btn btn-link btn-animate ${
- this.commentView.my_vote === 1
- ? "text-info"
- : "text-muted"
- }`}
- onClick={linkEvent(this, this.handleUpvote)}
- data-tippy-content={i18n.t("upvote")}
- aria-label={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="ml-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={i18n.t("downvote")}
- aria-label={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="ml-1">
- {numToSI(this.commentView.counts.downvotes)}
- </span>
- )}
- </>
- )}
- </button>
- )}
+ <VoteButtonsCompact
+ voteContentType={VoteContentType.Comment}
+ id={this.commentView.comment.id}
+ onVote={this.props.onCommentVote}
+ enableDownvotes={this.props.enableDownvotes}
+ counts={this.commentView.counts}
+ my_vote={this.commentView.my_vote}
+ />