LemmyNet
/
lemmy-ui
mirror of https://github.com/LemmyNet/lemmy-ui.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Refactor tabs into reuseable component

This commit is contained in:
abias 2023-05-20 15:39:12 -04:00
parent 0d30f4c731
commit b1a7a679f0
4 changed files with 134 additions and 116 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
src/shared/components/common/tabs.tsx Normal file
View File

@ -0,0 +1,54 @@
import { Component, InfernoNode, linkEvent } from "inferno";
interface TabItem {
key: string;
getNode: () => InfernoNode;
label: string;
}
interface TabsProps {
tabs: TabItem[];
}
interface TabsState {
currentTab: string;
}
function handleSwitchTab({ ctx, tab }: { ctx: Tabs; tab: string }) {
console.log(tab);
ctx.setState({ currentTab: tab });
}
export default class Tabs extends Component<TabsProps, TabsState> {
constructor(props: TabsProps, context) {
super(props, context);
this.state = {
currentTab: props.tabs.length > 0 ? props.tabs[0].key : "",
};
}
render() {
return (
<div>
<ul className="nav nav-tabs mb-2">
{this.props.tabs.map(({ key, label }) => (
<li key={key} className="nav-item">
<button
className={`nav-link btn${
this.state?.currentTab === key ? " active" : ""
}`}
onClick={linkEvent({ ctx: this, tab: key }, handleSwitchTab)}
>
{label}
</button>
</li>
))}
</ul>
{this.props.tabs
.find(tab => tab.key === this.state?.currentTab)
?.getNode()}
</div>
);
}
}

124
src/shared/components/home/admin-settings.tsx
View File

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

11
src/shared/components/home/rate-limit-form.tsx Normal file
View File

@ -0,0 +1,11 @@
import { Component } from "inferno";
export default class RateLimitForm extends Component {
constructor(props, context) {
super(props, context);
}
render() {
return <></>;
}
}

61
src/shared/components/person/settings.tsx
View File

@ -54,6 +54,7 @@ import { ListingTypeSelect } from "../common/listing-type-select";
import { MarkdownTextArea } from "../common/markdown-textarea"; import { MarkdownTextArea } from "../common/markdown-textarea";
import { SearchableSelect } from "../common/searchable-select"; import { SearchableSelect } from "../common/searchable-select";
import { SortSelect } from "../common/sort-select"; import { SortSelect } from "../common/sort-select";
import Tabs from "../common/tabs";
import { CommunityLink } from "../community/community-link"; import { CommunityLink } from "../community/community-link";
import { PersonListing } from "./person-listing"; import { PersonListing } from "./person-listing";
@ -176,6 +177,8 @@ export class Settings extends Component<any, SettingsState> {
this.handleBannerUpload = this.handleBannerUpload.bind(this); this.handleBannerUpload = this.handleBannerUpload.bind(this);
this.handleBannerRemove = this.handleBannerRemove.bind(this); this.handleBannerRemove = this.handleBannerRemove.bind(this);
this.userSettings = this.userSettings.bind(this);
this.blockCards = this.blockCards.bind(this);
this.parseMessage = this.parseMessage.bind(this); this.parseMessage = this.parseMessage.bind(this);
this.subscription = wsSubscribe(this.parseMessage); this.subscription = wsSubscribe(this.parseMessage);
@ -253,44 +256,26 @@ export class Settings extends Component<any, SettingsState> {
render() { render() {
return ( return (
<div className="container-lg"> <div className="container-lg">
<> <HtmlTags
<HtmlTags title={this.documentTitle}
title={this.documentTitle} path={this.context.router.route.match.url}
path={this.context.router.route.match.url} description={this.documentTitle}
description={this.documentTitle} image={this.state.saveUserSettingsForm.avatar}
image={this.state.saveUserSettingsForm.avatar} />
/> <Tabs
<ul className="nav nav-tabs mb-2"> tabs={[
<li className="nav-item"> {
<button key: "settings",
className={`nav-link btn ${ label: i18n.t("settings"),
this.state.currentTab == "settings" && "active" getNode: this.userSettings,
}`} },
onClick={linkEvent( {
{ ctx: this, tab: "settings" }, key: "blocks",
this.handleSwitchTab label: i18n.t("blocks"),
)} getNode: this.blockCards,
> },
{i18n.t("settings")} ]}
</button> />
</li>
<li className="nav-item">
<button
className={`nav-link btn ${
this.state.currentTab == "blocks" && "active"
}`}
onClick={linkEvent(
{ ctx: this, tab: "blocks" },
this.handleSwitchTab
)}
>
{i18n.t("blocks")}
</button>
</li>
</ul>
{this.state.currentTab == "settings" && this.userSettings()}
{this.state.currentTab == "blocks" && this.blockCards()}
</>
</div> </div>
); );
} }