Fixing up tagline and ratelimit forms.

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

@@ -163,14 +163,24 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
             {
               key: "rate_limiting",
               label: "Rate Limiting",
-              getNode: () => <RateLimitForm onSaveSite={this.handleEditSite} />,
+              getNode: () => (
+                <RateLimitForm
+                  rateLimits={
+                    this.state.siteRes.site_view.local_site_rate_limit
+                  }
+                  onSaveSite={this.handleEditSite}
+                />
+              ),
             },
             {
               key: "taglines",
               label: i18n.t("taglines"),
               getNode: () => (
                 <div className="row">
-                  <TaglineForm onSaveSite={this.handleEditSite} />
+                  <TaglineForm
+                    taglines={this.state.siteRes.taglines}
+                    onSaveSite={this.handleEditSite}
+                  />
                 </div>
               ),
             },
@@ -254,6 +264,11 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
     const editRes = await apiWrapper(HttpService.client.editSite(form));
 
     if (editRes.state === "success") {
+      this.setState(s => {
+        s.siteRes.site_view = editRes.data.site_view;
+        s.siteRes.taglines = editRes.data.taglines;
+        return s;
+      });
       toast(i18n.t("site_saved"));
     }
 

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

@@ -1,8 +1,7 @@
 import { Component, FormEventHandler, linkEvent } from "inferno";
-import { EditSite, GetSiteResponse, SiteResponse } from "lemmy-js-client";
+import { EditSite, LocalSiteRateLimit } from "lemmy-js-client";
 import { i18n } from "../../i18next";
-import { RequestState } from "../../services/HttpService";
+import { capitalizeFirstLetter, myAuthRequired } from "../../utils";
-import { capitalizeFirstLetter, myAuthRequired, setIsoData } from "../../utils";
 import { Spinner } from "../common/icon";
 import Tabs from "../common/tabs";
 
@@ -23,11 +22,11 @@ interface RateLimitsProps {
 }
 
 interface RateLimitFormProps {
-  onSaveSite(form: EditSite): Promise<RequestState<SiteResponse>>;
+  rateLimits: LocalSiteRateLimit;
+  onSaveSite(form: EditSite): void;
 }
 
 interface RateLimitFormState {
-  siteRes: GetSiteResponse;
   form: {
     message?: number;
     message_per_second?: number;
@@ -105,7 +104,7 @@ function handlePerSecondChange(
   }));
 }
 
-async function submitRateLimitForm(i: RateLimitsForm, event: any) {
+function submitRateLimitForm(i: RateLimitsForm, event: any) {
   event.preventDefault();
   const auth = myAuthRequired();
   const form: EditSite = Object.entries(i.state.form).reduce(
@@ -115,67 +114,23 @@ async function submitRateLimitForm(i: RateLimitsForm, event: any) {
     },
     {
       auth,
-      application_question:
-        i.state.siteRes.site_view.local_site.application_question,
     }
   );
 
   i.setState({ loading: true });
-
+  i.props.onSaveSite(form);
-  const res = await i.props.onSaveSite(form);
-
-  if (res.state === "success") {
-    i.setState(s => ((s.siteRes.site_view = res.data.site_view), s));
-  }
-
-  i.setState({ loading: false });
 }
 
 export default class RateLimitsForm extends Component<
   RateLimitFormProps,
   RateLimitFormState
 > {
-  private isoData = setIsoData(this.context);
   state: RateLimitFormState = {
-    siteRes: this.isoData.site_res,
     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,
-    } = this.state.siteRes.site_view.local_site_rate_limit;
-
-    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() {

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

@@ -1,33 +1,27 @@
 import { Component, InfernoMouseEvent, linkEvent } from "inferno";
-import { EditSite, GetSiteResponse, SiteResponse } from "lemmy-js-client";
+import { EditSite, Tagline } from "lemmy-js-client";
 import { i18n } from "../../i18next";
-import { RequestState } from "../../services/HttpService";
+import { capitalizeFirstLetter, myAuthRequired } from "../../utils";
-import { capitalizeFirstLetter, myAuthRequired, setIsoData } from "../../utils";
 import { HtmlTags } from "../common/html-tags";
 import { Icon, Spinner } from "../common/icon";
 import { MarkdownTextArea } from "../common/markdown-textarea";
 
 interface TaglineFormProps {
-  onSaveSite(form: EditSite): Promise<RequestState<SiteResponse>>;
+  taglines: Array<Tagline>;
+  onSaveSite(form: EditSite): void;
 }
 
 interface TaglineFormState {
-  siteRes: GetSiteResponse;
+  taglines: Array<string>;
-  siteForm: EditSite;
   loading: boolean;
   editingRow?: number;
 }
 
 export class TaglineForm extends Component<TaglineFormProps, TaglineFormState> {
-  private isoData = setIsoData(this.context);
   state: TaglineFormState = {
     loading: false,
-    siteRes: this.isoData.site_res,
     editingRow: undefined,
-    siteForm: {
+    taglines: this.props.taglines.map(x => x.content),
-      taglines: this.state.siteRes.taglines?.map(x => x.content),
-      auth: "TODO",
-    },
   };
   constructor(props: any, context: any) {
     super(props, context);
@@ -55,7 +49,7 @@ export class TaglineForm extends Component<TaglineFormProps, TaglineFormState> {
               <th style="width:121px"></th>
             </thead>
             <tbody>
-              {this.state.siteForm.taglines?.map((cv, index) => (
+              {this.state.taglines.map((cv, index) => (
                 <tr key={index}>
                   <td>
                     {this.state.editingRow == index && (
@@ -65,8 +59,8 @@ export class TaglineForm extends Component<TaglineFormProps, TaglineFormState> {
                           this.handleTaglineChange(this, index, s)
                         }
                         hideNavigationWarnings
-                        allLanguages={this.state.siteRes.all_languages}
+                        allLanguages={[]}
-                        siteLanguages={this.state.siteRes.discussion_languages}
+                        siteLanguages={[]}
                       />
                     )}
                     {this.state.editingRow != index && <div>{cv}</div>}
@@ -75,7 +69,7 @@ export class TaglineForm extends Component<TaglineFormProps, TaglineFormState> {
                     <button
                       className="btn btn-link btn-animate text-muted"
                       onClick={linkEvent(
-                        { form: this, index: index },
+                        { i: this, index: index },
                         this.handleEditTaglineClick
                       )}
                       data-tippy-content={i18n.t("edit")}
@@ -87,7 +81,7 @@ export class TaglineForm extends Component<TaglineFormProps, TaglineFormState> {
                     <button
                       className="btn btn-link btn-animate text-muted"
                       onClick={linkEvent(
-                        { form: this, index: index },
+                        { i: this, index: index },
                         this.handleDeleteTaglineClick
                       )}
                       data-tippy-content={i18n.t("delete")}
@@ -132,51 +126,33 @@ export class TaglineForm extends Component<TaglineFormProps, TaglineFormState> {
   }
 
   handleTaglineChange(i: TaglineForm, index: number, val: string) {
-    let taglines = i.state.siteForm.taglines;
+    const newTaglines = [...i.state.taglines];
-    if (taglines) {
+    newTaglines[index] = val;
-      taglines[index] = val;
+    i.setState({ taglines: newTaglines });
-      i.setState(i.state);
-    }
   }
 
-  handleDeleteTaglineClick(
+  handleDeleteTaglineClick(d: { i: TaglineForm; index: number }, event: any) {
-    props: { form: TaglineForm; index: number },
-    event: any
-  ) {
     event.preventDefault();
-    let taglines = props.form.state.siteForm.taglines;
+    const newTaglines = [...d.i.state.taglines];
-    if (taglines) {
+    newTaglines.splice(d.index, 1);
-      taglines.splice(props.index, 1);
+    d.i.setState({ taglines: newTaglines, editingRow: undefined });
-      props.form.state.siteForm.taglines = undefined;
-      props.form.setState(props.form.state);
-      props.form.state.siteForm.taglines = taglines;
-      props.form.setState({ ...props.form.state, editingRow: undefined });
-    }
   }
 
-  handleEditTaglineClick(
+  handleEditTaglineClick(d: { i: TaglineForm; index: number }, event: any) {
-    props: { form: TaglineForm; index: number },
-    event: any
-  ) {
     event.preventDefault();
-    if (this.state.editingRow == props.index) {
+    if (this.state.editingRow == d.index) {
-      props.form.setState({ editingRow: undefined });
+      d.i.setState({ editingRow: undefined });
     } else {
-      props.form.setState({ editingRow: props.index });
+      d.i.setState({ editingRow: d.index });
     }
   }
 
   async handleSaveClick(i: TaglineForm) {
-    const auth = myAuthRequired();
-    i.setState(s => ((s.siteForm.auth = auth), s));
     i.setState({ loading: true });
-    const editRes = await i.props.onSaveSite(i.state.siteForm);
+    i.props.onSaveSite({
-
+      taglines: i.state.taglines,
-    if (editRes.state === "success") {
+      auth: myAuthRequired(),
-      i.setState(s => ((s.siteRes.site_view = editRes.data.site_view), s));
+    });
-    }
-
-    i.setState({ loading: false });
   }
 
   handleAddTaglineClick(
@@ -184,13 +160,12 @@ export class TaglineForm extends Component<TaglineFormProps, TaglineFormState> {
     event: InfernoMouseEvent<HTMLButtonElement>
   ) {
     event.preventDefault();
-    if (!i.state.siteForm.taglines) {
+    const newTaglines = [...i.state.taglines];
-      i.state.siteForm.taglines = [];
+    newTaglines.push("");
-    }
+
-    i.state.siteForm.taglines.push("");
     i.setState({
-      ...i.state,
+      taglines: newTaglines,
-      editingRow: i.state.siteForm.taglines.length - 1,
+      editingRow: newTaglines.length - 1,
     });
   }
 }