X-Git-Url: http://these/git/?a=blobdiff_plain;f=src%2Fshared%2Fcomponents%2Fcomment%2Fcomment-node.tsx;h=662b67be4655ed962bf051c21713a812d67a9b63;hb=61867ee73d7ba9ac6865bd6fcd1ba11f51a5f060;hp=b4d3d662641940f98f7a49e12adc9241f8f7d24f;hpb=d0dff77377a84611ab5cf624123e84c95aedf1ff;p=lemmy-ui.git

diff --git a/src/shared/components/comment/comment-node.tsx b/src/shared/components/comment/comment-node.tsx
index b4d3d66..662b67b 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";
@@ -49,19 +48,22 @@ import {
   SaveComment,
   TransferCommunity,
 } from "lemmy-js-client";
+import deepEqual from "lodash.isequal";
 import { commentTreeMaxDepth } from "../../config";
 import {
   BanType,
   CommentNodeI,
   CommentViewType,
   PurgeType,
-  VoteType,
+  VoteContentType,
 } 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 { UserBadges } from "../common/user-badges";
+import { VoteButtonsCompact } from "../common/vote-buttons";
 import { CommunityLink } from "../community/community-link";
 import { PersonListing } from "../person/person-listing";
 import { CommentForm } from "./comment-form";
@@ -198,7 +200,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
   componentWillReceiveProps(
     nextProps: Readonly<{ children?: InfernoNode } & CommentNodeProps>
   ): void {
-    if (this.props != nextProps) {
+    if (!deepEqual(this.props, nextProps)) {
       this.setState({
         showReply: false,
         showEdit: false,
@@ -282,7 +284,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`, {
@@ -307,32 +309,21 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
                   classes="icon-inline"
                 />
               </button>
-              <span className="me-2">
-                <PersonListing person={cv.creator} />
-              </span>
+
+              <PersonListing person={cv.creator} />
+
               {cv.comment.distinguished && (
-                <Icon icon="shield" inline classes={`text-danger me-2`} />
-              )}
-              {this.isPostCreator && (
-                <div className="badge text-bg-light d-none d-sm-inline me-2">
-                  {I18NextService.i18n.t("creator")}
-                </div>
-              )}
-              {isMod_ && (
-                <div className="badge text-bg-light d-none d-sm-inline me-2">
-                  {I18NextService.i18n.t("mod")}
-                </div>
-              )}
-              {isAdmin_ && (
-                <div className="badge text-bg-light d-none d-sm-inline me-2">
-                  {I18NextService.i18n.t("admin")}
-                </div>
-              )}
-              {cv.creator.bot_account && (
-                <div className="badge text-bg-light d-none d-sm-inline me-2">
-                  {I18NextService.i18n.t("bot_account").toLowerCase()}
-                </div>
+                <Icon icon="shield" inline classes="text-danger ms-1" />
               )}
+
+              <UserBadges
+                classNames="ms-1"
+                isPostCreator={this.isPostCreator}
+                isMod={isMod_}
+                isAdmin={isAdmin_}
+                isBot={cv.creator.bot_account}
+              />
+
               {this.props.showCommunity && (
                 <>
                   <span className="mx-1">{I18NextService.i18n.t("to")}</span>
@@ -343,7 +334,9 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
                   </Link>
                 </>
               )}
-              {this.linkBtn(true)}
+
+              {this.getLinkButton(true)}
+
               {cv.comment.language_id !== 0 && (
                 <span className="badge text-bg-light d-none d-sm-inline me-2">
                   {
@@ -355,29 +348,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 fw-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>
                 </>
               )}
@@ -419,8 +401,8 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
                     }
                   />
                 )}
-                <div className="d-flex justify-content-between justify-content-lg-start flex-wrap text-muted font-weight-bold">
-                  {this.props.showContext && this.linkBtn()}
+                <div className="d-flex justify-content-between justify-content-lg-start flex-wrap text-muted fw-bold">
+                  {this.props.showContext && this.getLinkButton()}
                   {this.props.markable && (
                     <button
                       className="btn btn-link btn-animate text-muted"
@@ -450,60 +432,14 @@ 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
+                        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}
+                      />
                       <button
                         className="btn btn-link btn-animate text-muted"
                         onClick={linkEvent(this, this.handleReplyClick)}
@@ -1242,7 +1178,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
     }
   }
 
-  linkBtn(small = false) {
+  getLinkButton(small = false) {
     const cv = this.commentView;
 
     const classnames = classNames("btn btn-link btn-animate text-muted", {
@@ -1482,24 +1418,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({