Refactor tabs into reuseable component

[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 ab897fe14f3b228b3347cecc2e87291dabd8f72c..3a2238ba14f4b348351b461611fa08612f5431d1 100644 (file)
--- a/src/shared/components/home/admin-settings.tsx
+++ b/src/shared/components/home/admin-settings.tsx
@@ -28,6 +28,7 @@ import {
 } from "../../utils";
 import { HtmlTags } from "../common/html-tags";
 import { Spinner } from "../common/icon";
+import Tabs from "../common/tabs";
 import { PersonListing } from "../person/person-listing";
 import { EmojiForm } from "./emojis-form";
 import { SiteForm } from "./site-form";
@@ -39,7 +40,6 @@ interface AdminSettingsState {
   banned: PersonView[];
   loading: boolean;
   leaveAdminTeamLoading: boolean;
-  currentTab: string;
 }
 
 export class AdminSettings extends Component<any, AdminSettingsState> {
@@ -51,7 +51,6 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
     banned: [],
     loading: true,
     leaveAdminTeamLoading: false,
-    currentTab: "site",
   };
 
   constructor(props: any, context: any) {
@@ -119,83 +118,56 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
   render() {
     return (
       <div className="container-lg">
+        <HtmlTags
+          title={this.documentTitle}
+          path={this.context.router.route.match.url}
+        />
         {this.state.loading ? (
           <h5>
             <Spinner large />
           </h5>
         ) : (
-          <div>
-            <HtmlTags
-              title={this.documentTitle}
-              path={this.context.router.route.match.url}
-            />
-            <ul className="nav nav-tabs mb-2">
-              <li className="nav-item">
-                <button
-                  className={`nav-link btn ${
-                    this.state.currentTab == "site" && "active"
-                  }`}
-                  onClick={linkEvent(
-                    { ctx: this, tab: "site" },
-                    this.handleSwitchTab
-                  )}
-                >
-                  {i18n.t("site")}
-                </button>
-              </li>
-              <li className="nav-item">
-                <button
-                  className={`nav-link btn ${
-                    this.state.currentTab == "taglines" && "active"
-                  }`}
-                  onClick={linkEvent(
-                    { ctx: this, tab: "taglines" },
-                    this.handleSwitchTab
-                  )}
-                >
-                  {i18n.t("taglines")}
-                </button>
-              </li>
-              <li className="nav-item">
-                <button
-                  className={`nav-link btn ${
-                    this.state.currentTab == "emojis" && "active"
-                  }`}
-                  onClick={linkEvent(
-                    { ctx: this, tab: "emojis" },
-                    this.handleSwitchTab
-                  )}
-                >
-                  {i18n.t("emojis")}
-                </button>
-              </li>
-            </ul>
-            {this.state.currentTab == "site" && (
-              <div className="row">
-                <div className="col-12 col-md-6">
-                  <SiteForm
-                    siteRes={this.state.siteRes}
-                    instancesRes={this.state.instancesRes}
-                    showLocal={showLocal(this.isoData)}
-                  />
-                </div>
-                <div className="col-12 col-md-6">
-                  {this.admins()}
-                  {this.bannedUsers()}
-                </div>
-              </div>
-            )}
-            {this.state.currentTab == "taglines" && (
-              <div className="row">
-                <TaglineForm siteRes={this.state.siteRes}></TaglineForm>
-              </div>
-            )}
-            {this.state.currentTab == "emojis" && (
-              <div className="row">
-                <EmojiForm></EmojiForm>
-              </div>
-            )}
-          </div>
+          <Tabs
+            tabs={[
+              {
+                key: "site",
+                label: i18n.t("site"),
+                getNode: () => (
+                  <div className="row">
+                    <div className="col-12 col-md-6">
+                      <SiteForm
+                        siteRes={this.state.siteRes}
+                        instancesRes={this.state.instancesRes}
+                        showLocal={showLocal(this.isoData)}
+                      />
+                    </div>
+                    <div className="col-12 col-md-6">
+                      {this.admins()}
+                      {this.bannedUsers()}
+                    </div>
+                  </div>
+                ),
+              },
+              {
+                key: "taglines",
+                label: i18n.t("taglines"),
+                getNode: () => (
+                  <div className="row">
+                    <TaglineForm siteRes={this.state.siteRes} />
+                  </div>
+                ),
+              },
+              {
+                key: "emojis",
+                label: i18n.t("emojis"),
+                getNode: () => (
+                  <div className="row">
+                    <EmojiForm />
+                  </div>
+                ),
+              },
+            ]}
+          />
         )}
       </div>
     );
@@ -247,10 +219,6 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
     );
   }
 
-  handleSwitchTab(i: { ctx: AdminSettings; tab: string }) {
-    i.ctx.setState({ currentTab: i.tab });
-  }
-
   handleLeaveAdminTeam(i: AdminSettings) {
     let auth = myAuth();
     if (auth) {