Merge branch 'main' into fix/fix-badges-spacing-componentize

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

diff --git a/src/shared/components/home/site-form.tsx b/src/shared/components/home/site-form.tsx
index 382f565098ee01a56d77b8cf1839ffc51c352339..36859225a4db2c4521d8ba622757714f3c10b655 100644 (file)
--- a/src/shared/components/home/site-form.tsx
+++ b/src/shared/components/home/site-form.tsx
@@ -4,6 +4,7 @@ import {
   Component,
   InfernoKeyboardEvent,
   InfernoMouseEvent,
+  InfernoNode,
   linkEvent,
 } from "inferno";
 import {
@@ -13,6 +14,7 @@ import {
   Instance,
   ListingType,
 } from "lemmy-js-client";
+import deepEqual from "lodash.isequal";
 import { I18NextService } from "../../services";
 import { Icon, Spinner } from "../common/icon";
 import { ImageUploadForm } from "../common/image-upload-form";
@@ -55,6 +57,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
   initSiteForm(): EditSite {
     const site = this.props.siteRes.site_view.site;
     const ls = this.props.siteRes.site_view.local_site;
+
     return {
       name: site.name,
       sidebar: site.sidebar,
@@ -155,28 +158,32 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
             />
           </div>
         </div>
-        <div className="input-group mb-3">
-          <label className="me-2 col-form-label">
+        <div className="row mb-3">
+          <label className="col-sm-2 col-form-label">
             {I18NextService.i18n.t("icon")}
           </label>
-          <ImageUploadForm
-            uploadTitle={I18NextService.i18n.t("upload_icon")}
-            imageSrc={this.state.siteForm.icon}
-            onUpload={this.handleIconUpload}
-            onRemove={this.handleIconRemove}
-            rounded
-          />
+          <div className="col-sm-10">
+            <ImageUploadForm
+              uploadTitle={I18NextService.i18n.t("upload_icon")}
+              imageSrc={this.state.siteForm.icon}
+              onUpload={this.handleIconUpload}
+              onRemove={this.handleIconRemove}
+              rounded
+            />
+          </div>
         </div>
-        <div className="input-group mb-3">
-          <label className="me-2 col-form-label">
+        <div className="row mb-3">
+          <label className="col-sm-2 col-form-label">
             {I18NextService.i18n.t("banner")}
           </label>
-          <ImageUploadForm
-            uploadTitle={I18NextService.i18n.t("upload_banner")}
-            imageSrc={this.state.siteForm.banner}
-            onUpload={this.handleBannerUpload}
-            onRemove={this.handleBannerRemove}
-          />
+          <div className="col-sm-10">
+            <ImageUploadForm
+              uploadTitle={I18NextService.i18n.t("upload_banner")}
+              imageSrc={this.state.siteForm.banner}
+              onUpload={this.handleBannerUpload}
+              onRemove={this.handleBannerRemove}
+            />
+          </div>
         </div>
         <div className="mb-3 row">
           <label className="col-12 col-form-label" htmlFor="site-desc">
@@ -619,6 +626,19 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
     );
   }
 
+  componentDidUpdate(
+    prevProps: Readonly<{ children?: InfernoNode } & SiteFormProps>
+  ) {
+    if (
+      !(
+        deepEqual(prevProps.allowedInstances, this.props.allowedInstances) ||
+        deepEqual(prevProps.blockedInstances, this.props.blockedInstances)
+      )
+    ) {
+      this.setState({ siteForm: this.initSiteForm() });
+    }
+  }
+
   federatedInstanceSelect(key: InstanceKey) {
     const id = `create_site_${key}`;
     const value = this.state.instance_select[key];