Admin Settings: Bugfixes (#1313)

* move loading state to AdminSettings, pass as prop, tweak margin on some labels, add missing bind * default loading state to false on setup.tsx, add util * rename util to make more sense * make @dessalines suggested changes
2024-11-22 20:31:13 +00:00 · 2023-06-16 11:52:47 -04:00 · 2023-06-16 11:52:47 -04:00 · 80e2c9602e
commit 80e2c9602e
parent 48ced9bd34
7 changed files with 63 additions and 34 deletions
--- a/src/shared/components/home/admin-settings.tsx
+++ b/src/shared/components/home/admin-settings.tsx
@ -39,6 +39,8 @@ interface AdminSettingsState {
  instancesRes: RequestState<GetFederatedInstancesResponse>;
  bannedRes: RequestState<BannedPersonsResponse>;
  leaveAdminTeamRes: RequestState<GetSiteResponse>;
+  emojiLoading: boolean;
+  loading: boolean;
  themeList: string[];
  isIsomorphic: boolean;
 }
@ -52,6 +54,8 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
    bannedRes: { state: "empty" },
    instancesRes: { state: "empty" },
    leaveAdminTeamRes: { state: "empty" },
+    emojiLoading: false,
+    loading: false,
    themeList: [],
    isIsomorphic: false,
  };
@ -81,6 +85,7 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
      bannedRes: { state: "loading" },
      instancesRes: { state: "loading" },
      themeList: [],
+      loading: true,
    });

    const auth = myAuthRequired();
@ -95,6 +100,7 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
      bannedRes,
      instancesRes,
      themeList,
+      loading: false,
    });
  }

@ -156,6 +162,7 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
                      onSaveSite={this.handleEditSite}
                      siteRes={this.state.siteRes}
                      themeList={this.state.themeList}
+                      loading={this.state.loading}
                    />
                  </div>
                  <div className="col-12 col-md-6">
@ -174,6 +181,7 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
                    this.state.siteRes.site_view.local_site_rate_limit
                  }
                  onSaveSite={this.handleEditSite}
+                  loading={this.state.loading}
                />
              ),
            },
@ -185,6 +193,7 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
                  <TaglineForm
                    taglines={this.state.siteRes.taglines}
                    onSaveSite={this.handleEditSite}
+                    loading={this.state.loading}
                  />
                </div>
              ),
@ -198,6 +207,7 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
                    onCreate={this.handleCreateEmoji}
                    onDelete={this.handleDeleteEmoji}
                    onEdit={this.handleEditEmoji}
+                    loading={this.state.emojiLoading}
                  />
                </div>
              ),
@ -266,6 +276,8 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
  }

  async handleEditSite(form: EditSite) {
+    this.setState({ loading: true });
+
    const editRes = await HttpService.client.editSite(form);

    if (editRes.state === "success") {
@ -278,6 +290,8 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
      toast(i18n.t("site_saved"));
    }

+    this.setState({ loading: false });
+
    return editRes;
  }

@ -300,23 +314,35 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
  }

  async handleEditEmoji(form: EditCustomEmoji) {
+    this.setState({ emojiLoading: true });
+
    const res = await HttpService.client.editCustomEmoji(form);
    if (res.state === "success") {
      updateEmojiDataModel(res.data.custom_emoji);
    }
+
+    this.setState({ emojiLoading: false });
  }

  async handleDeleteEmoji(form: DeleteCustomEmoji) {
+    this.setState({ emojiLoading: true });
+
    const res = await HttpService.client.deleteCustomEmoji(form);
    if (res.state === "success") {
      removeFromEmojiDataModel(res.data.id);
    }
+
+    this.setState({ emojiLoading: false });
  }

  async handleCreateEmoji(form: CreateCustomEmoji) {
+    this.setState({ emojiLoading: true });
+
    const res = await HttpService.client.createCustomEmoji(form);
    if (res.state === "success") {
      updateEmojiDataModel(res.data.custom_emoji);
    }
+
+    this.setState({ emojiLoading: false });
  }
 }
--- a/src/shared/components/home/emojis-form.tsx
+++ b/src/shared/components/home/emojis-form.tsx
@ -23,12 +23,12 @@ interface EmojiFormProps {
  onEdit(form: EditCustomEmoji): void;
  onCreate(form: CreateCustomEmoji): void;
  onDelete(form: DeleteCustomEmoji): void;
+  loading: boolean;
 }

 interface EmojiFormState {
  siteRes: GetSiteResponse;
  customEmojis: CustomEmojiViewForm[];
-  loading: boolean;
  page: number;
 }

@ -47,7 +47,6 @@ export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> {
  private isoData = setIsoData(this.context);
  private itemsPerPage = 15;
  private emptyState: EmojiFormState = {
-    loading: false,
    siteRes: this.isoData.site_res,
    customEmojis: this.isoData.site_res.custom_emojis.map((x, index) => ({
      id: x.custom_emoji.id,
@ -223,7 +222,7 @@ export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> {
                            data-tippy-content={i18n.t("save")}
                            aria-label={i18n.t("save")}
                            disabled={
-                              this.state.loading ||
+                              this.props.loading ||
                              !this.canEdit(cv) ||
                              !cv.changed
                            }
@ -243,7 +242,7 @@ export class EmojiForm extends Component<EmojiFormProps, EmojiFormState> {
                          )}
                          data-tippy-content={i18n.t("delete")}
                          aria-label={i18n.t("delete")}
-                          disabled={this.state.loading}
+                          disabled={this.props.loading}
                          title={i18n.t("delete")}
                        >
                          <Icon
--- a/src/shared/components/home/rate-limit-form.tsx
+++ b/src/shared/components/home/rate-limit-form.tsx
@ -24,6 +24,7 @@ interface RateLimitsProps {
 interface RateLimitFormProps {
  rateLimits: LocalSiteRateLimit;
  onSaveSite(form: EditSite): void;
+  loading: boolean;
 }

 interface RateLimitFormState {
@ -41,7 +42,6 @@ interface RateLimitFormState {
    register?: number;
    register_per_second?: number;
  };
-  loading: boolean;
 }

 function RateLimits({
@ -117,7 +117,6 @@ function submitRateLimitForm(i: RateLimitsForm, event: any) {
    }
  );

-  i.setState({ loading: true });
  i.props.onSaveSite(form);
 }

@ -126,7 +125,6 @@ export default class RateLimitsForm extends Component<
  RateLimitFormState
 > {
  state: RateLimitFormState = {
-    loading: false,
    form: this.props.rateLimits,
  };
  constructor(props: RateLimitFormProps, context: any) {
@ -164,9 +162,9 @@ export default class RateLimitsForm extends Component<
            <button
              type="submit"
              className="btn btn-secondary mr-2"
-              disabled={this.state.loading}
+              disabled={this.props.loading}
            >
-              {this.state.loading ? (
+              {this.props.loading ? (
                <Spinner />
              ) : (
                capitalizeFirstLetter(i18n.t("save"))
--- a/src/shared/components/home/setup.tsx
+++ b/src/shared/components/home/setup.tsx
@ -73,6 +73,7 @@ export class Setup extends Component<any, State> {
                onSaveSite={this.handleCreateSite}
                siteRes={this.state.siteRes}
                themeList={this.state.themeList}
+                loading={false}
              />
            )}
          </div>
--- a/src/shared/components/home/site-form.tsx
+++ b/src/shared/components/home/site-form.tsx
@ -12,7 +12,11 @@ import {
  ListingType,
 } from "lemmy-js-client";
 import { i18n } from "../../i18next";
-import { capitalizeFirstLetter, myAuthRequired } from "../../utils";
+import {
+  capitalizeFirstLetter,
+  myAuthRequired,
+  validInstanceTLD,
+} from "../../utils";
 import { Icon, Spinner } from "../common/icon";
 import { ImageUploadForm } from "../common/image-upload-form";
 import { LanguageSelect } from "../common/language-select";
@ -27,11 +31,11 @@ interface SiteFormProps {
  themeList?: string[];
  onSaveSite(form: EditSite): void;
  siteRes: GetSiteResponse;
+  loading: boolean;
 }

 interface SiteFormState {
  siteForm: EditSite;
-  loading: boolean;
  instance_select: {
    allowed_instances: string;
    blocked_instances: string;
@ -44,7 +48,6 @@ type InstanceKey = "allowed_instances" | "blocked_instances";
 export class SiteForm extends Component<SiteFormProps, SiteFormState> {
  state: SiteFormState = {
    siteForm: this.initSiteForm(),
-    loading: false,
    instance_select: {
      allowed_instances: "",
      blocked_instances: "",
@ -107,23 +110,21 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {

    this.handleDiscussionLanguageChange =
      this.handleDiscussionLanguageChange.bind(this);
+
    this.handleAddInstance = this.handleAddInstance.bind(this);
+    this.handleRemoveInstance = this.handleRemoveInstance.bind(this);
+
    this.handleInstanceEnterPress = this.handleInstanceEnterPress.bind(this);
    this.handleInstanceTextChange = this.handleInstanceTextChange.bind(this);
  }

-  // Necessary to stop the loading
-  componentWillReceiveProps() {
-    this.setState({ loading: false });
-  }
-
  render() {
    const siteSetup = this.props.siteRes.site_view.local_site.site_setup;
    return (
      <form onSubmit={linkEvent(this, this.handleSaveSiteSubmit)}>
        <NavigationPrompt
          when={
-            !this.state.loading &&
+            !this.props.loading &&
            !siteSetup &&
            !!(
              this.state.siteForm.name ||
@ -136,8 +137,8 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
        />
        <h5>{`${
          siteSetup
-            ? capitalizeFirstLetter(i18n.t("save"))
-            : capitalizeFirstLetter(i18n.t("name"))
+            ? capitalizeFirstLetter(i18n.t("edit"))
+            : capitalizeFirstLetter(i18n.t("setup"))
        } ${i18n.t("your_site")}`}</h5>
        <div className="form-group row">
          <label className="col-12 col-form-label" htmlFor="create-site-name">
@ -157,7 +158,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
          </div>
        </div>
        <div className="form-group">
-          <label>{i18n.t("icon")}</label>
+          <label className="mr-2">{i18n.t("icon")}</label>
          <ImageUploadForm
            uploadTitle={i18n.t("upload_icon")}
            imageSrc={this.state.siteForm.icon}
@ -167,7 +168,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
          />
        </div>
        <div className="form-group">
-          <label>{i18n.t("banner")}</label>
+          <label className="mr-2">{i18n.t("banner")}</label>
          <ImageUploadForm
            uploadTitle={i18n.t("upload_banner")}
            imageSrc={this.state.siteForm.banner}
@ -609,9 +610,9 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
            <button
              type="submit"
              className="btn btn-secondary mr-2"
-              disabled={this.state.loading}
+              disabled={this.props.loading}
            >
-              {this.state.loading ? (
+              {this.props.loading ? (
                <Spinner />
              ) : siteSetup ? (
                capitalizeFirstLetter(i18n.t("save"))
@ -717,7 +718,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
    event.preventDefault();
    const auth = myAuthRequired();
    i.setState(s => ((s.siteForm.auth = auth), s));
-    i.setState({ loading: true, submitted: true });
+    i.setState({ submitted: true });

    const stateSiteForm = i.state.siteForm;

@ -780,6 +781,11 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {

  handleAddInstance(key: InstanceKey) {
    const instance = this.state.instance_select[key].trim();
+
+    if (!validInstanceTLD(instance)) {
+      return;
+    }
+
    if (!this.state.siteForm[key]?.includes(instance)) {
      this.setState(s => ({
        ...s,
--- a/src/shared/components/home/tagline-form.tsx
+++ b/src/shared/components/home/tagline-form.tsx
@ -9,17 +9,16 @@ import { MarkdownTextArea } from "../common/markdown-textarea";
 interface TaglineFormProps {
  taglines: Array<Tagline>;
  onSaveSite(form: EditSite): void;
+  loading: boolean;
 }

 interface TaglineFormState {
  taglines: Array<string>;
-  loading: boolean;
  editingRow?: number;
 }

 export class TaglineForm extends Component<TaglineFormProps, TaglineFormState> {
  state: TaglineFormState = {
-    loading: false,
    editingRow: undefined,
    taglines: this.props.taglines.map(x => x.content),
  };
@ -30,10 +29,6 @@ export class TaglineForm extends Component<TaglineFormProps, TaglineFormState> {
    return i18n.t("taglines");
  }

-  componentWillReceiveProps() {
-    this.setState({ loading: false });
-  }
-
  render() {
    return (
      <div className="col-12">
@ -110,9 +105,9 @@ export class TaglineForm extends Component<TaglineFormProps, TaglineFormState> {
              <button
                onClick={linkEvent(this, this.handleSaveClick)}
                className="btn btn-secondary mr-2"
-                disabled={this.state.loading}
+                disabled={this.props.loading}
              >
-                {this.state.loading ? (
+                {this.props.loading ? (
                  <Spinner />
                ) : (
                  capitalizeFirstLetter(i18n.t("save"))
@ -153,7 +148,6 @@ export class TaglineForm extends Component<TaglineFormProps, TaglineFormState> {
  }

  async handleSaveClick(i: TaglineForm) {
-    i.setState({ loading: true });
    i.props.onSaveSite({
      taglines: i.state.taglines,
      auth: myAuthRequired(),
--- a/src/shared/utils.ts
+++ b/src/shared/utils.ts
@ -316,6 +316,7 @@ export function amTopMod(

 const imageRegex = /(http)?s?:?(\/\/[^"']*\.(?:jpg|jpeg|gif|png|svg|webp))/;
 const videoRegex = /(http)?s?:?(\/\/[^"']*\.(?:mp4|webm))/;
+const tldRegex = /([a-z0-9]+\.)*[a-z0-9]+\.[a-z]+/;

 export function isImage(url: string) {
  return imageRegex.test(url);
@ -329,6 +330,10 @@ export function validURL(str: string) {
  return !!new URL(str);
 }

+export function validInstanceTLD(str: string) {
+  return tldRegex.test(str);
+}
+
 export function communityRSSUrl(actorId: string, sort: string): string {
  const url = new URL(actorId);
  return `${url.origin}/feeds${url.pathname}.xml?sort=${sort}`;