Merge branch 'main' into bug/fix-image-collapse-upon-vote

.eslintrc.json

@@ -3,7 +3,7 @@
   "env": {
     "browser": true
   },
-  "plugins": ["@typescript-eslint", "jsx-a11y"],
+  "plugins": ["@typescript-eslint", "jsx-a11y", "prettier"],
   "extends": [
     "eslint:recommended",
     "plugin:@typescript-eslint/recommended",
@@ -41,6 +41,7 @@
     "no-var": 0,
     "prefer-const": 1,
     "prefer-rest-params": 0,
+    "prettier/prettier": "error",
     "quote-props": 0,
     "unicorn/filename-case": 0
   }

src/shared/components/post/post-listing.tsx

@@ -961,6 +961,121 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
     );
   }
 
+  get modBanFromCommunityButton() {
+    return (
+      <button
+        className="btn btn-link btn-animate text-muted py-0"
+        onClick={linkEvent(this, this.handleModBanFromCommunityShow)}
+        aria-label={I18NextService.i18n.t("ban_from_community")}
+      >
+        {I18NextService.i18n.t("ban_from_community")}
+      </button>
+    );
+  }
+
+  get modUnbanFromCommunityButton() {
+    return (
+      <button
+        className="btn btn-link btn-animate text-muted py-0"
+        onClick={linkEvent(this, this.handleModBanFromCommunitySubmit)}
+        aria-label={I18NextService.i18n.t("unban")}
+      >
+        {this.state.banLoading ? <Spinner /> : I18NextService.i18n.t("unban")}
+      </button>
+    );
+  }
+
+  get addModToCommunityButton() {
+    return (
+      <button
+        className="btn btn-link btn-animate text-muted py-0"
+        onClick={linkEvent(this, this.handleAddModToCommunity)}
+        aria-label={
+          this.creatorIsMod_
+            ? I18NextService.i18n.t("remove_as_mod")
+            : I18NextService.i18n.t("appoint_as_mod")
+        }
+      >
+        {this.state.addModLoading ? (
+          <Spinner />
+        ) : this.creatorIsMod_ ? (
+          I18NextService.i18n.t("remove_as_mod")
+        ) : (
+          I18NextService.i18n.t("appoint_as_mod")
+        )}
+      </button>
+    );
+  }
+
+  get modBanButton() {
+    return (
+      <button
+        className="btn btn-link btn-animate text-muted py-0"
+        onClick={linkEvent(this, this.handleModBanShow)}
+        aria-label={I18NextService.i18n.t("ban_from_site")}
+      >
+        {I18NextService.i18n.t("ban_from_site")}
+      </button>
+    );
+  }
+
+  get modUnbanButton() {
+    return (
+      <button
+        className="btn btn-link btn-animate text-muted py-0"
+        onClick={linkEvent(this, this.handleModBanSubmit)}
+        aria-label={I18NextService.i18n.t("unban_from_site")}
+      >
+        {this.state.banLoading ? (
+          <Spinner />
+        ) : (
+          I18NextService.i18n.t("unban_from_site")
+        )}
+      </button>
+    );
+  }
+
+  get purgePersonButton() {
+    return (
+      <button
+        className="btn btn-link btn-animate text-muted py-0"
+        onClick={linkEvent(this, this.handlePurgePersonShow)}
+        aria-label={I18NextService.i18n.t("purge_user")}
+      >
+        {I18NextService.i18n.t("purge_user")}
+      </button>
+    );
+  }
+
+  get purgePostButton() {
+    return (
+      <button
+        className="btn btn-link btn-animate text-muted py-0"
+        onClick={linkEvent(this, this.handlePurgePostShow)}
+        aria-label={I18NextService.i18n.t("purge_post")}
+      >
+        {I18NextService.i18n.t("purge_post")}
+      </button>
+    );
+  }
+
+  get toggleAdminButton() {
+    return (
+      <button
+        className="btn btn-link btn-animate text-muted py-0"
+        onClick={linkEvent(this, this.handleAddAdmin)}
+      >
+        {this.state.addAdminLoading ? (
+          <Spinner />
+        ) : this.creatorIsAdmin_ ? (
+          I18NextService.i18n.t("remove_as_admin")
+        ) : (
+          I18NextService.i18n.t("appoint_as_admin")
+        )}
+      </button>
+    );
+  }
+
   get modRemoveButton() {
     const removed = this.postView.post.removed;
     return (
@@ -995,54 +1110,14 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
           {this.canMod_ && (
             <>
               {!this.creatorIsMod_ &&
-                (!post_view.creator_banned_from_community ? (
+                (!post_view.creator_banned_from_community
-                  <button
+                  ? this.modBanFromCommunityButton
-                    className="btn btn-link btn-animate text-muted py-0"
+                  : this.modUnbanFromCommunityButton)}
-                    onClick={linkEvent(
+              {!post_view.creator_banned_from_community &&
-                      this,
+                this.addModToCommunityButton}
-                      this.handleModBanFromCommunityShow
-                    )}
-                    aria-label={I18NextService.i18n.t("ban_from_community")}
-                  >
-                    {I18NextService.i18n.t("ban_from_community")}
-                  </button>
-                ) : (
-                  <button
-                    className="btn btn-link btn-animate text-muted py-0"
-                    onClick={linkEvent(
-                      this,
-                      this.handleModBanFromCommunitySubmit
-                    )}
-                    aria-label={I18NextService.i18n.t("unban")}
-                  >
-                    {this.state.banLoading ? (
-                      <Spinner />
-                    ) : (
-                      I18NextService.i18n.t("unban")
-                    )}
-                  </button>
-                ))}
-              {!post_view.creator_banned_from_community && (
-                <button
-                  className="btn btn-link btn-animate text-muted py-0"
-                  onClick={linkEvent(this, this.handleAddModToCommunity)}
-                  aria-label={
-                    this.creatorIsMod_
-                      ? I18NextService.i18n.t("remove_as_mod")
-                      : I18NextService.i18n.t("appoint_as_mod")
-                  }
-                >
-                  {this.state.addModLoading ? (
-                    <Spinner />
-                  ) : this.creatorIsMod_ ? (
-                    I18NextService.i18n.t("remove_as_mod")
-                  ) : (
-                    I18NextService.i18n.t("appoint_as_mod")
-                  )}
-                </button>
-              )}
             </>
           )}
+
           {/* Community creators and admins can transfer community to another mod */}
           {(amCommunityCreator(post_view.creator.id, this.props.moderators) ||
             this.canAdmin_) &&
@@ -1094,62 +1169,16 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
             <>
               {!this.creatorIsAdmin_ && (
                 <>
-                  {!isBanned(post_view.creator) ? (
+                  {!isBanned(post_view.creator)
-                    <button
+                    ? this.modBanButton
-                      className="btn btn-link btn-animate text-muted py-0"
+                    : this.modUnbanButton}
-                      onClick={linkEvent(this, this.handleModBanShow)}
+                  {this.purgePersonButton}
-                      aria-label={I18NextService.i18n.t("ban_from_site")}
+                  {this.purgePostButton}
-                    >
-                      {I18NextService.i18n.t("ban_from_site")}
-                    </button>
-                  ) : (
-                    <button
-                      className="btn btn-link btn-animate text-muted py-0"
-                      onClick={linkEvent(this, this.handleModBanSubmit)}
-                      aria-label={I18NextService.i18n.t("unban_from_site")}
-                    >
-                      {this.state.banLoading ? (
-                        <Spinner />
-                      ) : (
-                        I18NextService.i18n.t("unban_from_site")
-                      )}
-                    </button>
-                  )}
-                  <button
-                    className="btn btn-link btn-animate text-muted py-0"
-                    onClick={linkEvent(this, this.handlePurgePersonShow)}
-                    aria-label={I18NextService.i18n.t("purge_user")}
-                  >
-                    {I18NextService.i18n.t("purge_user")}
-                  </button>
-                  <button
-                    className="btn btn-link btn-animate text-muted py-0"
-                    onClick={linkEvent(this, this.handlePurgePostShow)}
-                    aria-label={I18NextService.i18n.t("purge_post")}
-                  >
-                    {I18NextService.i18n.t("purge_post")}
-                  </button>
                 </>
               )}
-              {!isBanned(post_view.creator) && post_view.creator.local && (
+              {!isBanned(post_view.creator) &&
-                <button
+                post_view.creator.local &&
-                  className="btn btn-link btn-animate text-muted py-0"
+                this.toggleAdminButton}
-                  onClick={linkEvent(this, this.handleAddAdmin)}
-                  aria-label={
-                    this.creatorIsAdmin_
-                      ? I18NextService.i18n.t("remove_as_admin")
-                      : I18NextService.i18n.t("appoint_as_admin")
-                  }
-                >
-                  {this.state.addAdminLoading ? (
-                    <Spinner />
-                  ) : this.creatorIsAdmin_ ? (
-                    I18NextService.i18n.t("remove_as_admin")
-                  ) : (
-                    I18NextService.i18n.t("appoint_as_admin")
-                  )}
-                </button>
-              )}
             </>
           )}
         </div>