handle loading state on community-form.tsx

src/shared/components/community/community-form.tsx

@@ -21,6 +21,7 @@ interface CommunityFormProps {
   onCancel?(): any;
   onUpsertCommunity(form: CreateCommunity | EditCommunity): void;
   enableNsfw?: boolean;
+  isLoading?: boolean;
 }
 
 interface CommunityFormState {
@@ -34,7 +35,6 @@ interface CommunityFormState {
     posting_restricted_to_mods?: boolean;
     discussion_languages?: number[];
   };
-  loading: boolean;
   submitted: boolean;
 }
 
@@ -46,7 +46,6 @@ export class CommunityForm extends Component<
 
   state: CommunityFormState = {
     form: {},
-    loading: false,
     submitted: false,
   };
 
@@ -80,7 +79,6 @@ export class CommunityForm extends Component<
           posting_restricted_to_mods: cv.community.posting_restricted_to_mods,
           discussion_languages: this.props.communityLanguages,
         },
-        loading: false,
       };
     }
   }
@@ -90,7 +88,7 @@ export class CommunityForm extends Component<
       <form onSubmit={linkEvent(this, this.handleCreateCommunitySubmit)}>
         <NavigationPrompt
           when={
-            !this.state.loading &&
+            !this.props.isLoading &&
             !!(
               this.state.form.name ||
               this.state.form.title ||
@@ -243,9 +241,9 @@ export class CommunityForm extends Component<
             <button
               type="submit"
               className="btn btn-secondary mr-2"
-              disabled={this.state.loading}
+              disabled={this.props.isLoading}
             >
-              {this.state.loading ? (
+              {this.props.isLoading ? (
                 <Spinner />
               ) : this.props.community_view ? (
                 capitalizeFirstLetter(i18n.t("save"))
@@ -270,7 +268,7 @@ export class CommunityForm extends Component<
 
   handleCreateCommunitySubmit(i: CommunityForm, event: any) {
     event.preventDefault();
-    i.setState({ loading: true, submitted: true });
+    i.setState({ submitted: true });
     const cForm = i.state.form;
     const auth = myAuthRequired();
 

src/shared/components/community/create-community.tsx

@@ -11,12 +11,14 @@ import { CommunityForm } from "./community-form";
 
 interface CreateCommunityState {
   siteRes: GetSiteResponse;
+  loading: boolean;
 }
 
 export class CreateCommunity extends Component<any, CreateCommunityState> {
   private isoData = setIsoData(this.context);
   state: CreateCommunityState = {
     siteRes: this.isoData.site_res,
+    loading: false,
   };
   constructor(props: any, context: any) {
     super(props, context);
@@ -45,6 +47,7 @@ export class CreateCommunity extends Component<any, CreateCommunityState> {
               allLanguages={this.state.siteRes.all_languages}
               siteLanguages={this.state.siteRes.discussion_languages}
               communityLanguages={this.state.siteRes.discussion_languages}
+              isLoading={this.state.loading}
             />
           </div>
         </div>
@@ -53,10 +56,15 @@ export class CreateCommunity extends Component<any, CreateCommunityState> {
   }
 
   async handleCommunityCreate(form: CreateCommunityI) {
+    this.setState({ loading: true });
+
     const res = await HttpService.client.createCommunity(form);
+
     if (res.state === "success") {
       const name = res.data.community_view.community.name;
       this.props.history.replace(`/c/${name}`);
+    } else {
+      this.setState({ loading: false });
     }
   }
 }