component classes v2

[lemmy-ui.git] / src / shared / components / home / rate-limit-form.tsx

diff --git a/src/shared/components/home/rate-limit-form.tsx b/src/shared/components/home/rate-limit-form.tsx
index d4b68beb7fa47255bf70c2880b906561fecdd172..1b2e281b243402bd7802269e7c07a22a379493ce 100644 (file)
--- a/src/shared/components/home/rate-limit-form.tsx
+++ b/src/shared/components/home/rate-limit-form.tsx
@@ -1,8 +1,7 @@
 import { Component, FormEventHandler, linkEvent } from "inferno";
 import { EditSite, LocalSiteRateLimit } from "lemmy-js-client";
 import { i18n } from "../../i18next";
-import { WebSocketService } from "../../services";
-import { capitalizeFirstLetter, myAuth, wsClient } from "../../utils";
+import { capitalizeFirstLetter, myAuthRequired } from "../../utils";
 import { Spinner } from "../common/icon";
 import Tabs from "../common/tabs";
 
@@ -18,14 +17,14 @@ const rateLimitTypes = [
 interface RateLimitsProps {
   handleRateLimit: FormEventHandler<HTMLInputElement>;
   handleRateLimitPerSecond: FormEventHandler<HTMLInputElement>;
-  rateLimitLabel: string;
   rateLimitValue?: number;
   rateLimitPerSecondValue?: number;
 }
 
 interface RateLimitFormProps {
-  localSiteRateLimit: LocalSiteRateLimit;
-  applicationQuestion?: string;
+  rateLimits: LocalSiteRateLimit;
+  onSaveSite(form: EditSite): void;
+  loading: boolean;
 }
 
 interface RateLimitFormState {
@@ -43,40 +42,38 @@ interface RateLimitFormState {
     register?: number;
     register_per_second?: number;
   };
-  loading: boolean;
 }
 
 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 className="mb-3 row">
+      <div className="col-md-6">
+        <label htmlFor="rate-limit">{i18n.t("rate_limit")}</label>
+        <input
+          type="number"
+          id="rate-limit"
+          className="form-control"
+          min={0}
+          value={rateLimitValue}
+          onInput={handleRateLimit}
+        />
+      </div>
+      <div className="col-md-6">
+        <label htmlFor="rate-limit-per-second">{i18n.t("per_second")}</label>
+        <input
+          type="number"
+          id="rate-limit-per-second"
+          className="form-control"
+          min={0}
+          value={rateLimitPerSecondValue}
+          onInput={handleRateLimitPerSecond}
+        />
+      </div>
     </div>
   );
 }
@@ -109,18 +106,18 @@ function handlePerSecondChange(
 
 function submitRateLimitForm(i: RateLimitsForm, event: any) {
   event.preventDefault();
-  const auth = myAuth() ?? "TODO";
+  const auth = myAuthRequired();
   const form: EditSite = Object.entries(i.state.form).reduce(
     (acc, [key, val]) => {
       acc[`rate_limit_${key}`] = val;
       return acc;
     },
-    { auth, application_question: i.props.applicationQuestion }
+    {
+      auth,
+    }
   );
 
-  i.setState({ loading: true });
-
-  WebSocketService.Instance.send(wsClient.editSite(form));
+  i.props.onSaveSite(form);
 }
 
 export default class RateLimitsForm extends Component<
@@ -128,54 +125,23 @@ export default class RateLimitsForm extends Component<
   RateLimitFormState
 > {
   state: RateLimitFormState = {
-    loading: false,
-    form: {},
+    form: this.props.rateLimits,
   };
-  constructor(props: RateLimitFormProps, context) {
+  constructor(props: RateLimitFormProps, context: any) {
     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 = {
-      ...this.state,
-      form: {
-        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 (
-      <form onSubmit={linkEvent(this, submitRateLimitForm)}>
-        <h5>Rate Limit Options</h5>
+      <form
+        className="rate-limit-form"
+        onSubmit={linkEvent(this, submitRateLimitForm)}
+      >
+        <h5>{i18n.t("rate_limit_header")}</h5>
         <Tabs
           tabs={rateLimitTypes.map(rateLimitType => ({
             key: rateLimitType,
-            label: rateLimitType,
+            label: i18n.t(`rate_limit_${rateLimitType}`),
             getNode: () => (
               <RateLimits
                 handleRateLimit={linkEvent(
@@ -186,7 +152,6 @@ export default class RateLimitsForm extends Component<
                   { rateLimitType, ctx: this },
                   handlePerSecondChange
                 )}
-                rateLimitLabel={i18n.t(`rate_limit_${rateLimitType}`)}
                 rateLimitValue={this.state.form[rateLimitType]}
                 rateLimitPerSecondValue={
                   this.state.form[`${rateLimitType}_per_second`]
@@ -195,33 +160,20 @@ export default class RateLimitsForm extends Component<
             ),
           }))}
         />
-        <div className="form-group row">
-          <div className="col-12">
-            <button
-              type="submit"
-              className="btn btn-secondary mr-2"
-              disabled={this.state.loading}
-            >
-              {this.state.loading ? (
-                <Spinner />
-              ) : (
-                capitalizeFirstLetter(i18n.t("save"))
-              )}
-            </button>
-          </div>
+        <div className="col-12 mb-3">
+          <button
+            type="submit"
+            className="btn btn-secondary me-2"
+            disabled={this.props.loading}
+          >
+            {this.props.loading ? (
+              <Spinner />
+            ) : (
+              capitalizeFirstLetter(i18n.t("save"))
+            )}
+          </button>
         </div>
       </form>
     );
   }
-
-  componentDidUpdate({ localSiteRateLimit }: RateLimitFormProps) {
-    if (
-      this.state.loading &&
-      Object.entries(localSiteRateLimit).some(
-        ([key, val]) => this.state.form[key] !== val
-      )
-    ) {
-      this.setState({ loading: false });
-    }
-  }
 }