Adding mod / admin distinguish. (#744)

lemmy-translations

@@ -1 +1 @@
-Subproject commit 7c3945745dcd07774b19453803f7f14ab80ab3d3
+Subproject commit 9ba11fa31001baac6bacb4eea651942cc48d41a9

package.json

@@ -77,7 +77,7 @@
     "eslint-plugin-prettier": "^4.2.1",
     "husky": "^8.0.1",
     "import-sort-style-module": "^6.0.0",
-    "lemmy-js-client": "0.17.0-rc.39",
+    "lemmy-js-client": "0.17.0-rc.41",
     "lint-staged": "^13.0.3",
     "mini-css-extract-plugin": "^2.6.1",
     "node-fetch": "^2.6.1",

src/shared/components/comment/comment-form.tsx

@@ -112,7 +112,8 @@ export class CommentForm extends Component<CommentFormProps, CommentFormState> {
       left: node => {
         if (this.props.edit) {
           let form = new EditComment({
-            content,
+            content: Some(content),
+            distinguished: None,
             form_id: this.state.formId,
             comment_id: node.comment_view.comment.id,
             auth: auth().unwrap(),

src/shared/components/comment/comment-node.tsx

@@ -15,6 +15,7 @@ import {
   CreateCommentLike,
   CreateCommentReport,
   DeleteComment,
+  EditComment,
   GetComments,
   ListingType,
   MarkCommentReplyAsRead,
@@ -171,7 +172,20 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
       this.props.admins,
       cv.creator.id
     );
+    let canModOnSelf = canMod(
+      this.props.moderators,
+      this.props.admins,
+      cv.creator.id,
+      UserService.Instance.myUserInfo,
+      true
+    );
     let canAdmin_ = canAdmin(this.props.admins, cv.creator.id);
+    let canAdminOnSelf = canAdmin(
+      this.props.admins,
+      cv.creator.id,
+      UserService.Instance.myUserInfo,
+      true
+    );
     let isMod_ = isMod(this.props.moderators, cv.creator.id);
     let isAdmin_ = isAdmin(this.props.admins, cv.creator.id);
     let amCommunityCreator_ = amCommunityCreator(
@@ -200,9 +214,12 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
       >
         <div
           id={`comment-${cv.comment.id}`}
-          className={`details comment-node py-2 ${
+          className={classNames(`details comment-node py-2`, {
-            !this.props.noBorder ? "border-top border-light" : ""
+            "border-top border-light": !this.props.noBorder,
-          } ${this.isCommentNew ? "mark" : ""}`}
+            mark:
+              this.isCommentNew ||
+              this.props.node.comment_view.comment.distinguished,
+          })}
           style={
             !this.props.noIndent &&
             this.props.node.depth &&
@@ -216,7 +233,9 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
               <span class="mr-2">
                 <PersonListing person={cv.creator} />
               </span>
-
+              {cv.comment.distinguished && (
+                <Icon icon="shield" inline classes={`text-danger mr-2`} />
+              )}
               {isMod_ && (
                 <div className="badge badge-light d-none d-sm-inline mr-2">
                   {i18n.t("mod")}
@@ -516,6 +535,34 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
                                     }`}
                                   />
                                 </button>
+
+                                {(canModOnSelf || canAdminOnSelf) && (
+                                  <button
+                                    class="btn btn-link btn-animate text-muted"
+                                    onClick={linkEvent(
+                                      this,
+                                      this.handleDistinguishClick
+                                    )}
+                                    data-tippy-content={
+                                      !cv.comment.distinguished
+                                        ? i18n.t("distinguish")
+                                        : i18n.t("undistinguish")
+                                    }
+                                    aria-label={
+                                      !cv.comment.distinguished
+                                        ? i18n.t("distinguish")
+                                        : i18n.t("undistinguish")
+                                    }
+                                  >
+                                    <Icon
+                                      icon="shield"
+                                      classes={`icon-inline ${
+                                        cv.comment.distinguished &&
+                                        "text-danger"
+                                      }`}
+                                    />
+                                  </button>
+                                )}
                               </>
                             )}
                             {/* Admins and mods can remove comments */}
@@ -1204,6 +1251,19 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
     i.setState(i.state);
   }
 
+  handleDistinguishClick(i: CommentNode) {
+    let comment = i.props.node.comment_view.comment;
+    let form = new EditComment({
+      comment_id: comment.id,
+      form_id: None, // TODO not sure about this
+      content: None,
+      distinguished: Some(!comment.distinguished),
+      auth: auth().unwrap(),
+    });
+    WebSocketService.Instance.send(wsClient.editComment(form));
+    i.setState(i.state);
+  }
+
   isPersonMentionType(
     item: CommentView | PersonMentionView | CommentReplyView
   ): item is PersonMentionView {

src/shared/components/post/post.tsx

@@ -721,6 +721,7 @@ export class Post extends Component<any, PostState> {
         this.state.commentsRes.map(r => r.comments).unwrapOr([])
       );
       this.setState(this.state);
+      setupTippy();
     } else if (op == UserOperation.SaveComment) {
       let data = wsJsonToRes<CommentResponse>(msg, CommentResponse);
       saveCommentRes(

src/shared/utils.ts

@@ -210,9 +210,10 @@ export function canMod(
 export function canAdmin(
   admins: Option<PersonViewSafe[]>,
   creator_id: number,
-  myUserInfo = UserService.Instance.myUserInfo
+  myUserInfo = UserService.Instance.myUserInfo,
+  onSelf = false
 ): boolean {
-  return canMod(None, admins, creator_id, myUserInfo);
+  return canMod(None, admins, creator_id, myUserInfo, onSelf);
 }
 
 export function isMod(
@@ -830,6 +831,7 @@ export function editCommentRes(data: CommentView, comments: CommentView[]) {
   let found = comments.find(c => c.comment.id == data.comment.id);
   if (found) {
     found.comment.content = data.comment.content;
+    found.comment.distinguished = data.comment.distinguished;
     found.comment.updated = data.comment.updated;
     found.comment.removed = data.comment.removed;
     found.comment.deleted = data.comment.deleted;

yarn.lock

@@ -5056,10 +5056,10 @@ lcid@^1.0.0:
   dependencies:
     invert-kv "^1.0.0"
 
-lemmy-js-client@0.17.0-rc.39:
+lemmy-js-client@0.17.0-rc.41:
-  version "0.17.0-rc.39"
+  version "0.17.0-rc.41"
-  resolved "https://registry.yarnpkg.com/lemmy-js-client/-/lemmy-js-client-0.17.0-rc.39.tgz#b17c5c0d9a0f36c90c17be99845a5703091ab306"
+  resolved "https://registry.yarnpkg.com/lemmy-js-client/-/lemmy-js-client-0.17.0-rc.41.tgz#a72bd41b76af834d97914d3790810efa610a6e89"
-  integrity sha512-MsKavo5xOob6DgfjyhbmXyFvXwdW4iwftStJ7Bz3ArlHXy6zGBp+2uy2rU2c5ujivNDX72ol3TupTHBtSXLs4w==
+  integrity sha512-VJ0qMXaEuOvmUxWR/jWnnoWknpNSXxbz/J29ADTn9arJEbOfTQB60ILeg8wICSRI23jzU9/0lqAZ+rjgXN0p4w==
 
 levn@^0.4.1:
   version "0.4.1"