Allow user to submit rate limit changes

src/shared/components/common/tabs.tsx

@@ -35,6 +35,7 @@ export default class Tabs extends Component<TabsProps, TabsState> {
           {this.props.tabs.map(({ key, label }) => (
             <li key={key} className="nav-item">
               <button
+                type="button"
                 className={`nav-link btn${
                   this.state?.currentTab === key ? " active" : ""
                 }`}

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

@@ -157,6 +157,10 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
                     localSiteRateLimit={
                       this.state.siteRes.site_view.local_site_rate_limit
                     }
+                    applicationQuestion={
+                      this.state.siteRes.site_view.local_site
+                        .application_question
+                    }
                   />
                 ),
               },

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

@@ -1,6 +1,9 @@
 import { Component, FormEventHandler, linkEvent } from "inferno";
-import { LocalSiteRateLimit } from "lemmy-js-client";
+import { EditSite, LocalSiteRateLimit } from "lemmy-js-client";
 import { i18n } from "../../i18next";
+import { WebSocketService } from "../../services";
+import { capitalizeFirstLetter, myAuth, wsClient } from "../../utils";
+import { Spinner } from "../common/icon";
 import Tabs from "../common/tabs";
 
 const rateLimitTypes = [
@@ -22,9 +25,11 @@ interface RateLimitsProps {
 
 interface RateLimitFormProps {
   localSiteRateLimit: LocalSiteRateLimit;
+  applicationQuestion?: string;
 }
 
 interface RateLimitFormState {
+  form: {
     message?: number;
     message_per_second?: number;
     post?: number;
@@ -37,6 +42,8 @@ interface RateLimitFormState {
     search_per_second?: number;
     register?: number;
     register_per_second?: number;
+  };
+  loading: boolean;
 }
 
 function RateLimits({
@@ -78,25 +85,52 @@ function handleRateLimitChange(
   { rateLimitType, ctx }: { rateLimitType: string; ctx: RateLimitsForm },
   event: any
 ) {
-  ctx.setState({
+  ctx.setState(prev => ({
+    ...prev,
+    form: {
+      ...prev.form,
       [rateLimitType]: Number(event.target.value),
-  });
+    },
+  }));
 }
 
 function handlePerSecondChange(
   { rateLimitType, ctx }: { rateLimitType: string; ctx: RateLimitsForm },
   event: any
 ) {
-  ctx.setState({
+  ctx.setState(prev => ({
+    ...prev,
+    form: {
+      ...prev.form,
       [`${rateLimitType}_per_second`]: Number(event.target.value),
-  });
+    },
+  }));
+}
+
+function submitRateLimitForm(i: RateLimitsForm, event: any) {
+  event.preventDefault();
+  const auth = myAuth() ?? "TODO";
+  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 }
+  );
+
+  i.setState({ loading: true });
+
+  WebSocketService.Instance.send(wsClient.editSite(form));
 }
 
 export default class RateLimitsForm extends Component<
   RateLimitFormProps,
   RateLimitFormState
 > {
-  state: RateLimitFormState = {};
+  state: RateLimitFormState = {
+    loading: false,
+    form: {},
+  };
   constructor(props: RateLimitFormProps, context) {
     super(props, context);
 
@@ -116,6 +150,8 @@ export default class RateLimitsForm extends Component<
     } = props.localSiteRateLimit;
 
     this.state = {
+      ...this.state,
+      form: {
         comment,
         comment_per_second,
         image,
@@ -128,11 +164,13 @@ export default class RateLimitsForm extends Component<
         register_per_second,
         search,
         search_per_second,
+      },
     };
   }
 
   render() {
     return (
+      <form onSubmit={linkEvent(this, submitRateLimitForm)}>
         <Tabs
           tabs={rateLimitTypes.map(rateLimitType => ({
             key: rateLimitType,
@@ -148,14 +186,41 @@ export default class RateLimitsForm extends Component<
                   handlePerSecondChange
                 )}
                 rateLimitLabel={i18n.t(`rate_limit_${rateLimitType}`)}
-              rateLimitValue={this.state[rateLimitType]}
+                rateLimitValue={this.state.form[rateLimitType]}
                 rateLimitPerSecondValue={
-                this.state[`${rateLimitType}_per_second`]
+                  this.state.form[`${rateLimitType}_per_second`]
                 }
               />
             ),
           }))}
         />
+        <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>
+      </form>
     );
   }
+
+  componentDidUpdate({ localSiteRateLimit }: RateLimitFormProps) {
+    if (
+      this.state.loading &&
+      Object.entries(localSiteRateLimit).some(
+        ([key, val]) => this.state.form[key] !== val
+      )
+    ) {
+      this.setState({ loading: false });
+    }
+  }
 }