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 8f2a1a81603d6e51b4c1f90b1552f1f31fd9fdfc..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";
 
@@ -23,8 +22,9 @@ interface RateLimitsProps {
 }
 
 interface RateLimitFormProps {
-  localSiteRateLimit: LocalSiteRateLimit;
-  applicationQuestion?: string;
+  rateLimits: LocalSiteRateLimit;
+  onSaveSite(form: EditSite): void;
+  loading: boolean;
 }
 
 interface RateLimitFormState {
@@ -42,7 +42,6 @@ interface RateLimitFormState {
     register?: number;
     register_per_second?: number;
   };
-  loading: boolean;
 }
 
 function RateLimits({
@@ -52,29 +51,29 @@ function RateLimits({
   rateLimitValue,
 }: RateLimitsProps) {
   return (
-    <div className="form-group row">
-      <label className="col-12 col-form-label" htmlFor="rate-limit">
-        {i18n.t("rate_limit")}
-      </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>
   );
 }
@@ -107,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<
@@ -126,49 +125,18 @@ 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)}>
+      <form
+        className="rate-limit-form"
+        onSubmit={linkEvent(this, submitRateLimitForm)}
+      >
         <h5>{i18n.t("rate_limit_header")}</h5>
         <Tabs
           tabs={rateLimitTypes.map(rateLimitType => ({
@@ -192,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 });
-    }
-  }
 }