Put rate limit options in its own tab

src/shared/components/home/admin-settings.tsx

@@ -31,6 +31,7 @@ import { Spinner } from "../common/icon";
 import Tabs from "../common/tabs";
 import { PersonListing } from "../person/person-listing";
 import { EmojiForm } from "./emojis-form";
+import RateLimitForm from "./rate-limit-form";
 import { SiteForm } from "./site-form";
 import { TaglineForm } from "./tagline-form";
 
@@ -148,6 +149,17 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
                   </div>
                 ),
               },
+              {
+                key: "rate_limiting",
+                label: "Rate Limiting",
+                getNode: () => (
+                  <RateLimitForm
+                    localSiteRateLimit={
+                      this.state.siteRes.site_view.local_site_rate_limit
+                    }
+                  />
+                ),
+              },
               {
                 key: "taglines",
                 label: i18n.t("taglines"),

src/shared/components/home/rate-limit-form.tsx

@@ -1,11 +1,161 @@
-import { Component } from "inferno";
+import { Component, FormEventHandler, linkEvent } from "inferno";
+import { LocalSiteRateLimit } from "lemmy-js-client";
+import { i18n } from "../../i18next";
+import Tabs from "../common/tabs";
 
-export default class RateLimitForm extends Component {
+const rateLimitTypes = [
-  constructor(props, context) {
+  "message",
+  "post",
+  "image",
+  "comment",
+  "search",
+  "register",
+] as const;
+
+interface RateLimitsProps {
+  handleRateLimit: FormEventHandler<HTMLInputElement>;
+  handleRateLimitPerSecond: FormEventHandler<HTMLInputElement>;
+  rateLimitLabel: string;
+  rateLimitValue?: number;
+  rateLimitPerSecondValue?: number;
+}
+
+interface RateLimitFormProps {
+  localSiteRateLimit: LocalSiteRateLimit;
+}
+
+interface RateLimitFormState {
+  message?: number;
+  message_per_second?: number;
+  post?: number;
+  post_per_second?: number;
+  comment?: number;
+  comment_per_second?: number;
+  image?: number;
+  image_per_second?: number;
+  search?: number;
+  search_per_second?: number;
+  register?: number;
+  register_per_second?: number;
+}
+
+function RateLimits({
+  handleRateLimit,
+  handleRateLimitPerSecond,
+  rateLimitLabel,
+  rateLimitPerSecondValue,
+  rateLimitValue,
+}: RateLimitsProps) {
+  return (
+    <div className="form-group row">
+      <label className="col-12 col-form-label" htmlFor="rate-limit">
+        {rateLimitLabel}
+      </label>
+      <input
+        type="number"
+        id="rate-limit"
+        className="form-control col-12"
+        min={0}
+        value={rateLimitValue}
+        onInput={handleRateLimit}
+      />
+      <label className="col-12 col-form-label" htmlFor="rate-limit-per-second">
+        {i18n.t("per_second")}
+      </label>
+      <input
+        type="number"
+        id="rate-limit-per-second"
+        className="form-control col-12"
+        min={0}
+        value={rateLimitPerSecondValue}
+        onInput={handleRateLimitPerSecond}
+      />
+    </div>
+  );
+}
+
+function handleRateLimitChange(
+  { rateLimitType, ctx }: { rateLimitType: string; ctx: RateLimitsForm },
+  event: any
+) {
+  ctx.setState({
+    [rateLimitType]: Number(event.target.value),
+  });
+}
+
+function handlePerSecondChange(
+  { rateLimitType, ctx }: { rateLimitType: string; ctx: RateLimitsForm },
+  event: any
+) {
+  ctx.setState({
+    [`${rateLimitType}_per_second`]: Number(event.target.value),
+  });
+}
+
+export default class RateLimitsForm extends Component<
+  RateLimitFormProps,
+  RateLimitFormState
+> {
+  state: RateLimitFormState = {};
+  constructor(props: RateLimitFormProps, context) {
     super(props, context);
+
+    const {
+      comment,
+      comment_per_second,
+      image,
+      image_per_second,
+      message,
+      message_per_second,
+      post,
+      post_per_second,
+      register,
+      register_per_second,
+      search,
+      search_per_second,
+    } = props.localSiteRateLimit;
+
+    this.state = {
+      comment,
+      comment_per_second,
+      image,
+      image_per_second,
+      message,
+      message_per_second,
+      post,
+      post_per_second,
+      register,
+      register_per_second,
+      search,
+      search_per_second,
+    };
   }
 
   render() {
-    return <></>;
+    return (
+      <Tabs
+        tabs={rateLimitTypes.map(rateLimitType => ({
+          key: rateLimitType,
+          label: rateLimitType,
+          getNode: () => (
+            <RateLimits
+              handleRateLimit={linkEvent(
+                { rateLimitType, ctx: this },
+                handleRateLimitChange
+              )}
+              handleRateLimitPerSecond={linkEvent(
+                { rateLimitType, ctx: this },
+                handlePerSecondChange
+              )}
+              rateLimitLabel={i18n.t(`rate_limit_${rateLimitType}`)}
+              rateLimitValue={this.state[rateLimitType]}
+              rateLimitPerSecondValue={
+                this.state[`${rateLimitType}_per_second`]
+              }
+            />
+          ),
+        }))}
+      />
+    );
   }
 }

src/shared/components/home/site-form.tsx

@@ -78,7 +78,6 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
 
     let site = this.props.siteRes.site_view.site;
     let ls = this.props.siteRes.site_view.local_site;
-    let lsrl = this.props.siteRes.site_view.local_site_rate_limit;
     this.state = {
       ...this.state,
       siteForm: {
@@ -103,18 +102,6 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
         discussion_languages: this.props.siteRes.discussion_languages,
         slur_filter_regex: ls.slur_filter_regex,
         actor_name_max_length: ls.actor_name_max_length,
-        rate_limit_message: lsrl.message,
-        rate_limit_message_per_second: lsrl.message_per_second,
-        rate_limit_comment: lsrl.comment,
-        rate_limit_comment_per_second: lsrl.comment_per_second,
-        rate_limit_image: lsrl.image,
-        rate_limit_image_per_second: lsrl.image_per_second,
-        rate_limit_post: lsrl.post,
-        rate_limit_post_per_second: lsrl.post_per_second,
-        rate_limit_register: lsrl.register,
-        rate_limit_register_per_second: lsrl.register_per_second,
-        rate_limit_search: lsrl.search,
-        rate_limit_search_per_second: lsrl.search_per_second,
         federation_enabled: ls.federation_enabled,
         federation_debug: ls.federation_debug,
         federation_worker_count: ls.federation_worker_count,
@@ -655,238 +642,6 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
               </div>
             </div>
           )}
-          <div className="form-group row">
-            <label
-              className="col-12 col-form-label"
-              htmlFor="create-site-rate-limit-message"
-            >
-              {i18n.t("rate_limit_message")}
-            </label>
-            <div className="col-12">
-              <input
-                type="number"
-                id="create-site-rate-limit-message"
-                className="form-control"
-                min={0}
-                value={this.state.siteForm.rate_limit_message}
-                onInput={linkEvent(this, this.handleSiteRateLimitMessage)}
-              />
-            </div>
-          </div>
-          <div className="form-group row">
-            <label
-              className="col-12 col-form-label"
-              htmlFor="create-site-rate-limit-message-per-second"
-            >
-              {i18n.t("per_second")}
-            </label>
-            <div className="col-12">
-              <input
-                type="number"
-                id="create-site-rate-limit-message-per-second"
-                className="form-control"
-                min={0}
-                value={this.state.siteForm.rate_limit_message_per_second}
-                onInput={linkEvent(
-                  this,
-                  this.handleSiteRateLimitMessagePerSecond
-                )}
-              />
-            </div>
-          </div>
-          <div className="form-group row">
-            <label
-              className="col-12 col-form-label"
-              htmlFor="create-site-rate-limit-post"
-            >
-              {i18n.t("rate_limit_post")}
-            </label>
-            <div className="col-12">
-              <input
-                type="number"
-                id="create-site-rate-limit-post"
-                className="form-control"
-                min={0}
-                value={this.state.siteForm.rate_limit_post}
-                onInput={linkEvent(this, this.handleSiteRateLimitPost)}
-              />
-            </div>
-          </div>
-          <div className="form-group row">
-            <label
-              className="col-12 col-form-label"
-              htmlFor="create-site-rate-limit-post-per-second"
-            >
-              {i18n.t("per_second")}
-            </label>
-            <div className="col-12">
-              <input
-                type="number"
-                id="create-site-rate-limit-post-per-second"
-                className="form-control"
-                min={0}
-                value={this.state.siteForm.rate_limit_post_per_second}
-                onInput={linkEvent(this, this.handleSiteRateLimitPostPerSecond)}
-              />
-            </div>
-          </div>
-          <div className="form-group row">
-            <label
-              className="col-12 col-form-label"
-              htmlFor="create-site-rate-limit-register"
-            >
-              {i18n.t("rate_limit_register")}
-            </label>
-            <div className="col-12">
-              <input
-                type="number"
-                id="create-site-rate-limit-register"
-                className="form-control"
-                min={0}
-                value={this.state.siteForm.rate_limit_register}
-                onInput={linkEvent(this, this.handleSiteRateLimitRegister)}
-              />
-            </div>
-          </div>
-          <div className="form-group row">
-            <label
-              className="col-12 col-form-label"
-              htmlFor="create-site-rate-limit-register-per-second"
-            >
-              {i18n.t("per_second")}
-            </label>
-            <div className="col-12">
-              <input
-                type="number"
-                id="create-site-rate-limit-register-per-second"
-                className="form-control"
-                min={0}
-                value={this.state.siteForm.rate_limit_register_per_second}
-                onInput={linkEvent(
-                  this,
-                  this.handleSiteRateLimitRegisterPerSecond
-                )}
-              />
-            </div>
-          </div>
-          <div className="form-group row">
-            <label
-              className="col-12 col-form-label"
-              htmlFor="create-site-rate-limit-image"
-            >
-              {i18n.t("rate_limit_image")}
-            </label>
-            <div className="col-12">
-              <input
-                type="number"
-                id="create-site-rate-limit-image"
-                className="form-control"
-                min={0}
-                value={this.state.siteForm.rate_limit_image}
-                onInput={linkEvent(this, this.handleSiteRateLimitImage)}
-              />
-            </div>
-          </div>
-          <div className="form-group row">
-            <label
-              className="col-12 col-form-label"
-              htmlFor="create-site-rate-limit-image-per-second"
-            >
-              {i18n.t("per_second")}
-            </label>
-            <div className="col-12">
-              <input
-                type="number"
-                id="create-site-rate-limit-image-per-second"
-                className="form-control"
-                min={0}
-                value={this.state.siteForm.rate_limit_image_per_second}
-                onInput={linkEvent(
-                  this,
-                  this.handleSiteRateLimitImagePerSecond
-                )}
-              />
-            </div>
-          </div>
-          <div className="form-group row">
-            <label
-              className="col-12 col-form-label"
-              htmlFor="create-site-rate-limit-comment"
-            >
-              {i18n.t("rate_limit_comment")}
-            </label>
-            <div className="col-12">
-              <input
-                type="number"
-                id="create-site-rate-limit-comment"
-                className="form-control"
-                min={0}
-                value={this.state.siteForm.rate_limit_comment}
-                onInput={linkEvent(this, this.handleSiteRateLimitComment)}
-              />
-            </div>
-          </div>
-          <div className="form-group row">
-            <label
-              className="col-12 col-form-label"
-              htmlFor="create-site-rate-limit-comment-per-second"
-            >
-              {i18n.t("per_second")}
-            </label>
-            <div className="col-12">
-              <input
-                type="number"
-                id="create-site-rate-limit-comment-per-second"
-                className="form-control"
-                min={0}
-                value={this.state.siteForm.rate_limit_comment_per_second}
-                onInput={linkEvent(
-                  this,
-                  this.handleSiteRateLimitCommentPerSecond
-                )}
-              />
-            </div>
-          </div>
-          <div className="form-group row">
-            <label
-              className="col-12 col-form-label"
-              htmlFor="create-site-rate-limit-search"
-            >
-              {i18n.t("rate_limit_search")}
-            </label>
-            <div className="col-12">
-              <input
-                type="number"
-                id="create-site-rate-limit-search"
-                className="form-control"
-                min={0}
-                value={this.state.siteForm.rate_limit_search}
-                onInput={linkEvent(this, this.handleSiteRateLimitSearch)}
-              />
-            </div>
-          </div>
-          <div className="form-group row">
-            <label
-              className="col-12 col-form-label"
-              htmlFor="create-site-rate-limit-search-per-second"
-            >
-              {i18n.t("per_second")}
-            </label>
-            <div className="col-12">
-              <input
-                type="number"
-                id="create-site-rate-limit-search-per-second"
-                className="form-control"
-                min={0}
-                value={this.state.siteForm.rate_limit_search_per_second}
-                onInput={linkEvent(
-                  this,
-                  this.handleSiteRateLimitSearchPerSecond
-                )}
-              />
-            </div>
-          </div>
-
           <div className="form-group row">
             <div className="col-12">
               <button
@@ -1018,18 +773,6 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
         legal_information: sForm.legal_information,
         slur_filter_regex: sForm.slur_filter_regex,
         actor_name_max_length: sForm.actor_name_max_length,
-        rate_limit_message: sForm.rate_limit_message,
-        rate_limit_message_per_second: sForm.rate_limit_message_per_second,
-        rate_limit_comment: sForm.rate_limit_comment,
-        rate_limit_comment_per_second: sForm.rate_limit_comment_per_second,
-        rate_limit_image: sForm.rate_limit_image,
-        rate_limit_image_per_second: sForm.rate_limit_image_per_second,
-        rate_limit_post: sForm.rate_limit_post,
-        rate_limit_post_per_second: sForm.rate_limit_post_per_second,
-        rate_limit_register: sForm.rate_limit_register,
-        rate_limit_register_per_second: sForm.rate_limit_register_per_second,
-        rate_limit_search: sForm.rate_limit_search,
-        rate_limit_search_per_second: sForm.rate_limit_search_per_second,
         federation_enabled: sForm.federation_enabled,
         federation_debug: sForm.federation_debug,
         federation_worker_count: sForm.federation_worker_count,
@@ -1218,96 +961,6 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
     );
   }
 
-  handleSiteRateLimitMessage(i: SiteForm, event: any) {
-    i.setState(
-      s => ((s.siteForm.rate_limit_message = Number(event.target.value)), s)
-    );
-  }
-
-  handleSiteRateLimitMessagePerSecond(i: SiteForm, event: any) {
-    i.setState(
-      s => (
-        (s.siteForm.rate_limit_message_per_second = Number(event.target.value)),
-        s
-      )
-    );
-  }
-
-  handleSiteRateLimitPost(i: SiteForm, event: any) {
-    i.setState(
-      s => ((s.siteForm.rate_limit_post = Number(event.target.value)), s)
-    );
-  }
-
-  handleSiteRateLimitPostPerSecond(i: SiteForm, event: any) {
-    i.setState(
-      s => (
-        (s.siteForm.rate_limit_post_per_second = Number(event.target.value)), s
-      )
-    );
-  }
-
-  handleSiteRateLimitImage(i: SiteForm, event: any) {
-    i.setState(
-      s => ((s.siteForm.rate_limit_image = Number(event.target.value)), s)
-    );
-  }
-
-  handleSiteRateLimitImagePerSecond(i: SiteForm, event: any) {
-    i.setState(
-      s => (
-        (s.siteForm.rate_limit_image_per_second = Number(event.target.value)), s
-      )
-    );
-  }
-
-  handleSiteRateLimitComment(i: SiteForm, event: any) {
-    i.setState(
-      s => ((s.siteForm.rate_limit_comment = Number(event.target.value)), s)
-    );
-  }
-
-  handleSiteRateLimitCommentPerSecond(i: SiteForm, event: any) {
-    i.setState(
-      s => (
-        (s.siteForm.rate_limit_comment_per_second = Number(event.target.value)),
-        s
-      )
-    );
-  }
-
-  handleSiteRateLimitSearch(i: SiteForm, event: any) {
-    i.setState(
-      s => ((s.siteForm.rate_limit_search = Number(event.target.value)), s)
-    );
-  }
-
-  handleSiteRateLimitSearchPerSecond(i: SiteForm, event: any) {
-    i.setState(
-      s => (
-        (s.siteForm.rate_limit_search_per_second = Number(event.target.value)),
-        s
-      )
-    );
-  }
-
-  handleSiteRateLimitRegister(i: SiteForm, event: any) {
-    i.setState(
-      s => ((s.siteForm.rate_limit_register = Number(event.target.value)), s)
-    );
-  }
-
-  handleSiteRateLimitRegisterPerSecond(i: SiteForm, event: any) {
-    i.setState(
-      s => (
-        (s.siteForm.rate_limit_register_per_second = Number(
-          event.target.value
-        )),
-        s
-      )
-    );
-  }
-
   handleSiteFederationEnabled(i: SiteForm, event: any) {
     i.state.siteForm.federation_enabled = event.target.checked;
     i.setState(i.state);