component classes v2

[lemmy-ui.git] / src / shared / components / home / admin-settings.tsx

diff --git a/src/shared/components/home/admin-settings.tsx b/src/shared/components/home/admin-settings.tsx
index 11be72579c4ca410b3a667f878a430e7a6a0d7b8..1de9f8751a2178beb6e59cd061423a8e00750e3f 100644 (file)
--- a/src/shared/components/home/admin-settings.tsx
+++ b/src/shared/components/home/admin-settings.tsx
@@ -34,8 +34,8 @@ import { SiteForm } from "./site-form";
 import { TaglineForm } from "./tagline-form";
 
 type AdminSettingsData = RouteDataResponse<{
-  bannedPersonsResponse: BannedPersonsResponse;
-  federatedInstancesResponse: GetFederatedInstancesResponse;
+  bannedRes: BannedPersonsResponse;
+  instancesRes: GetFederatedInstancesResponse;
 }>;
 
 interface AdminSettingsState {
@@ -45,6 +45,8 @@ interface AdminSettingsState {
   instancesRes: RequestState<GetFederatedInstancesResponse>;
   bannedRes: RequestState<BannedPersonsResponse>;
   leaveAdminTeamRes: RequestState<GetSiteResponse>;
+  emojiLoading: boolean;
+  loading: boolean;
   themeList: string[];
   isIsomorphic: boolean;
 }
@@ -58,6 +60,8 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
     bannedRes: { state: "empty" },
     instancesRes: { state: "empty" },
     leaveAdminTeamRes: { state: "empty" },
+    emojiLoading: false,
+    loading: false,
     themeList: [],
     isIsomorphic: false,
   };
@@ -72,10 +76,7 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
 
     // Only fetch the data if coming from another route
     if (FirstLoadService.isFirstLoad) {
-      const {
-        bannedPersonsResponse: bannedRes,
-        federatedInstancesResponse: instancesRes,
-      } = this.isoData.routeData;
+      const { bannedRes, instancesRes } = this.isoData.routeData;
 
       this.state = {
         ...this.state,
@@ -91,10 +92,10 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
     client,
   }: InitialFetchRequest): Promise<AdminSettingsData> {
     return {
-      bannedPersonsResponse: await client.getBannedPersons({
+      bannedRes: await client.getBannedPersons({
         auth: auth as string,
       }),
-      federatedInstancesResponse: await client.getFederatedInstances({
+      instancesRes: await client.getFederatedInstances({
         auth: auth as string,
       }),
     };
@@ -119,7 +120,7 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
         : undefined;
 
     return (
-      <div className="container-lg">
+      <div className="admin-settings container-lg">
         <HtmlTags
           title={this.documentTitle}
           path={this.context.router.route.match.url}
@@ -139,6 +140,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">
@@ -157,6 +159,7 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
                     this.state.siteRes.site_view.local_site_rate_limit
                   }
                   onSaveSite={this.handleEditSite}
+                  loading={this.state.loading}
                 />
               ),
             },
@@ -168,6 +171,7 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
                   <TaglineForm
                     taglines={this.state.siteRes.taglines}
                     onSaveSite={this.handleEditSite}
+                    loading={this.state.loading}
                   />
                 </div>
               ),
@@ -181,6 +185,7 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
                     onCreate={this.handleCreateEmoji}
                     onDelete={this.handleDeleteEmoji}
                     onEdit={this.handleEditEmoji}
+                    loading={this.state.emojiLoading}
                   />
                 </div>
               ),
@@ -271,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") {
@@ -283,6 +290,8 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
       toast(i18n.t("site_saved"));
     }
 
+    this.setState({ loading: false });
+
     return editRes;
   }
 
@@ -305,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 });
   }
 }