fix: Fix badge alignment and break out into component

[lemmy-ui.git] / src / shared / components / comment / comment-node.tsx

diff --git a/src/shared/components/comment/comment-node.tsx b/src/shared/components/comment/comment-node.tsx
index fcb74751a5fe17407066c575367029803b0013d0..c6b37fdb2636f8d1589704d5c3b687082c7236f6 100644 (file)
--- a/src/shared/components/comment/comment-node.tsx
+++ b/src/shared/components/comment/comment-node.tsx
@@ -62,6 +62,7 @@ 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";
@@ -196,6 +197,17 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
     return this.commentView.comment.id;
   }
 
+  get hasBadges(): boolean {
+    const cv = this.commentView;
+
+    return (
+      this.isPostCreator ||
+      isMod(cv.creator.id, this.props.moderators) ||
+      isAdmin(cv.creator.id, this.props.admins) ||
+      cv.creator.bot_account
+    );
+  }
+
   componentWillReceiveProps(
     nextProps: Readonly<{ children?: InfernoNode } & CommentNodeProps>
   ): void {
@@ -309,41 +321,19 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
                 />
               </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" />
+                <Icon icon="shield" inline classes="text-danger ms-1" />
               )}
 
-              {this.isPostCreator &&
-                this.getRoleLabelPill({
-                  label: I18NextService.i18n.t("op").toUpperCase(),
-                  tooltip: I18NextService.i18n.t("creator"),
-                  parentClasses: "text-info",
-                  shrinkToSingleLetter: false,
-                })}
-
-              {isMod_ &&
-                this.getRoleLabelPill({
-                  label: I18NextService.i18n.t("mod"),
-                  tooltip: I18NextService.i18n.t("mod"),
-                  shrunkenLabelClasses: "text-info",
-                })}
-
-              {isAdmin_ &&
-                this.getRoleLabelPill({
-                  label: I18NextService.i18n.t("admin"),
-                  tooltip: I18NextService.i18n.t("admin"),
-                  shrunkenLabelClasses: "text-danger",
-                })}
-
-              {true &&
-                this.getRoleLabelPill({
-                  label: I18NextService.i18n.t("bot_account").toLowerCase(),
-                  tooltip: I18NextService.i18n.t("bot_account"),
-                })}
+              <UserBadges
+                classNames="ms-1"
+                isPostCreator={this.isPostCreator}
+                isMod={isMod_}
+                isAdmin={isAdmin_}
+                isBot={cv.creator.bot_account}
+              />
 
               {this.props.showCommunity && (
                 <>
@@ -1199,50 +1189,6 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
     }
   }
 
-  getRoleLabelPill({
-    label,
-    tooltip,
-    parentClasses,
-    shrunkenLabelClasses,
-    hideOnMobile = false,
-    shrinkToSingleLetter = true,
-  }: {
-    label: string;
-    tooltip: string;
-    parentClasses?: string;
-    shrunkenLabelClasses?: string;
-    hideOnMobile?: boolean;
-    shrinkToSingleLetter?: boolean;
-  }) {
-    const parentClassNames = classNames(
-      `badge me-2 text-bg-light ${parentClasses}`,
-      {
-        "d-none d-md-inline": hideOnMobile,
-      }
-    );
-
-    let fullLabelClassNames = "d-none d-md-inline";
-    let shrunkenLabelClassNames = `d-inline d-md-none ${shrunkenLabelClasses}`;
-
-    if (!shrinkToSingleLetter) {
-      fullLabelClassNames = "";
-      shrunkenLabelClassNames = "d-none";
-    }
-
-    return (
-      <span
-        className={parentClassNames}
-        aria-label={tooltip}
-        data-tippy-content={tooltip}
-      >
-        <span className={fullLabelClassNames}>{label}</span>
-        <span className={shrunkenLabelClassNames}>
-          {label[0].toUpperCase()}
-        </span>
-      </span>
-    );
-  }
-
   getLinkButton(small = false) {
     const cv = this.commentView;