X-Git-Url: http://these/git/?a=blobdiff_plain;f=src%2Fshared%2Fcomponents%2Fhome%2Fadmin-settings.tsx;h=4924508fbe9f23105bd18894da539700d5fd308b;hb=da4fd7e39e288dd9885466452498a0366aec5b9d;hp=be244e550ca9aa5cb559e6f11dcaf3745fec0e32;hpb=d412baf758a07e900bb6cc55f7e2e600f6634476;p=lemmy-ui.git diff --git a/src/shared/components/home/admin-settings.tsx b/src/shared/components/home/admin-settings.tsx index be244e5..4924508 100644 --- a/src/shared/components/home/admin-settings.tsx +++ b/src/shared/components/home/admin-settings.tsx @@ -1,147 +1,272 @@ -import { None, Some } from "@sniptt/monads"; -import autosize from "autosize"; +import { + fetchThemeList, + myAuthRequired, + setIsoData, + showLocal, +} from "@utils/app"; +import { capitalizeFirstLetter } from "@utils/helpers"; +import { RouteDataResponse } from "@utils/types"; +import classNames from "classnames"; import { Component, linkEvent } from "inferno"; import { BannedPersonsResponse, - GetBannedPersons, + CreateCustomEmoji, + DeleteCustomEmoji, + EditCustomEmoji, + EditSite, + GetFederatedInstancesResponse, GetSiteResponse, - PersonViewSafe, - SiteResponse, - UserOperation, - wsJsonToRes, - wsUserOp, + PersonView, } from "lemmy-js-client"; -import { Subscription } from "rxjs"; -import { i18n } from "../../i18next"; import { InitialFetchRequest } from "../../interfaces"; -import { WebSocketService } from "../../services"; -import { - auth, - capitalizeFirstLetter, - isBrowser, - randomStr, - setIsoData, - showLocal, - toast, - wsClient, - wsSubscribe, -} from "../../utils"; +import { removeFromEmojiDataModel, updateEmojiDataModel } from "../../markdown"; +import { FirstLoadService, I18NextService } from "../../services"; +import { HttpService, RequestState } from "../../services/HttpService"; +import { toast } from "../../toast"; 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 RateLimitForm from "./rate-limit-form"; import { SiteForm } from "./site-form"; +import { TaglineForm } from "./tagline-form"; + +type AdminSettingsData = RouteDataResponse<{ + bannedRes: BannedPersonsResponse; + instancesRes: GetFederatedInstancesResponse; +}>; interface AdminSettingsState { siteRes: GetSiteResponse; - banned: PersonViewSafe[]; + banned: PersonView[]; + currentTab: string; + instancesRes: RequestState; + bannedRes: RequestState; + leaveAdminTeamRes: RequestState; loading: boolean; - leaveAdminTeamLoading: boolean; + themeList: string[]; + isIsomorphic: boolean; } export class AdminSettings extends Component { - private siteConfigTextAreaId = `site-config-${randomStr()}`; - private isoData = setIsoData(this.context, BannedPersonsResponse); - private subscription: Subscription; - private emptyState: AdminSettingsState = { + private isoData = setIsoData(this.context); + state: AdminSettingsState = { siteRes: this.isoData.site_res, banned: [], - loading: true, - leaveAdminTeamLoading: null, + currentTab: "site", + bannedRes: { state: "empty" }, + instancesRes: { state: "empty" }, + leaveAdminTeamRes: { state: "empty" }, + loading: false, + themeList: [], + isIsomorphic: false, }; constructor(props: any, context: any) { super(props, context); - this.state = this.emptyState; - - this.parseMessage = this.parseMessage.bind(this); - this.subscription = wsSubscribe(this.parseMessage); + this.handleEditSite = this.handleEditSite.bind(this); + this.handleEditEmoji = this.handleEditEmoji.bind(this); + this.handleDeleteEmoji = this.handleDeleteEmoji.bind(this); + this.handleCreateEmoji = this.handleCreateEmoji.bind(this); // Only fetch the data if coming from another route - if (this.isoData.path == this.context.router.route.match.url) { + if (FirstLoadService.isFirstLoad) { + const { bannedRes, instancesRes } = this.isoData.routeData; + this.state = { ...this.state, - banned: (this.isoData.routeData[0] as BannedPersonsResponse).banned, - loading: false, + bannedRes, + instancesRes, + isIsomorphic: true, }; - } else { - WebSocketService.Instance.send( - wsClient.getBannedPersons({ - auth: auth().unwrap(), - }) - ); } } - static fetchInitialData(req: InitialFetchRequest): Promise[] { - let promises: Promise[] = []; - - let bannedPersonsForm = new GetBannedPersons({ auth: req.auth.unwrap() }); - promises.push(req.client.getBannedPersons(bannedPersonsForm)); - - return promises; + static async fetchInitialData({ + auth, + client, + }: InitialFetchRequest): Promise { + return { + bannedRes: await client.getBannedPersons({ + auth: auth as string, + }), + instancesRes: await client.getFederatedInstances({ + auth: auth as string, + }), + }; } - componentDidMount() { - if (isBrowser()) { - var textarea: any = document.getElementById(this.siteConfigTextAreaId); - autosize(textarea); - } - } - - componentWillUnmount() { - if (isBrowser()) { - this.subscription.unsubscribe(); + async componentDidMount() { + if (!this.state.isIsomorphic) { + await this.fetchData(); } } get documentTitle(): string { - return this.state.siteRes.site_view.match({ - some: siteView => `${i18n.t("admin_settings")} - ${siteView.site.name}`, - none: "", - }); + return `${I18NextService.i18n.t("admin_settings")} - ${ + this.state.siteRes.site_view.site.name + }`; } render() { + const federationData = + this.state.instancesRes.state === "success" + ? this.state.instancesRes.data.federated_instances + : undefined; + return ( -
- {this.state.loading ? ( -
- -
- ) : ( -
-
- - {this.state.siteRes.site_view.match({ - some: siteView => ( - + + ( +
+

+ {I18NextService.i18n.t("site_config")} +

+
+
+ +
+
{this.admins()}
+
+
+ ), + }, + { + key: "banned_users", + label: I18NextService.i18n.t("banned_users"), + getNode: isSelected => ( +
+ {this.bannedUsers()} +
+ ), + }, + { + key: "rate_limiting", + label: "Rate Limiting", + getNode: isSelected => ( +
+ - ), - none: <>, - })} -
-
- {this.admins()} - {this.bannedUsers()} -
-
- )} +
+ ), + }, + { + key: "taglines", + label: I18NextService.i18n.t("taglines"), + getNode: isSelected => ( +
+
+ +
+
+ ), + }, + { + key: "emojis", + label: I18NextService.i18n.t("emojis"), + getNode: isSelected => ( +
+
+ +
+
+ ), + }, + ]} + />
); } + async fetchData() { + this.setState({ + bannedRes: { state: "loading" }, + instancesRes: { state: "loading" }, + themeList: [], + }); + + const auth = myAuthRequired(); + + const [bannedRes, instancesRes, themeList] = await Promise.all([ + HttpService.client.getBannedPersons({ auth }), + HttpService.client.getFederatedInstances({ auth }), + fetchThemeList(), + ]); + + this.setState({ + bannedRes, + instancesRes, + themeList, + }); + } + admins() { return ( <> -
{capitalizeFirstLetter(i18n.t("admins"))}
+

+ {capitalizeFirstLetter(I18NextService.i18n.t("admins"))} +

    {this.state.siteRes.admins.map(admin => (
  • @@ -160,59 +285,97 @@ export class AdminSettings extends Component { onClick={linkEvent(this, this.handleLeaveAdminTeam)} className="btn btn-danger mb-2" > - {this.state.leaveAdminTeamLoading ? ( + {this.state.leaveAdminTeamRes.state === "loading" ? ( ) : ( - i18n.t("leave_admin_team") + I18NextService.i18n.t("leave_admin_team") )} ); } bannedUsers() { - return ( - <> -
    {i18n.t("banned_users")}
    -
      - {this.state.banned.map(banned => ( -
    • - -
      • - ))} -
    - - ); + switch (this.state.bannedRes.state) { + case "loading": + return ( +
    + +
    + ); + case "success": { + const bans = this.state.bannedRes.data.banned; + return ( + <> +

    {I18NextService.i18n.t("banned_users")}

    +
      + {bans.map(banned => ( +
    • + +
      • + ))} +
    + + ); + } + } } - handleLeaveAdminTeam(i: AdminSettings) { - i.setState({ leaveAdminTeamLoading: true }); - WebSocketService.Instance.send( - wsClient.leaveAdmin({ auth: auth().unwrap() }) - ); + async handleEditSite(form: EditSite) { + this.setState({ loading: true }); + + const editRes = await HttpService.client.editSite(form); + + if (editRes.state === "success") { + this.setState(s => { + s.siteRes.site_view = editRes.data.site_view; + // TODO: Where to get taglines from? + s.siteRes.taglines = editRes.data.taglines; + return s; + }); + toast(I18NextService.i18n.t("site_saved")); + } + + this.setState({ loading: false }); + + return editRes; + } + + handleSwitchTab(i: { ctx: AdminSettings; tab: string }) { + i.ctx.setState({ currentTab: i.tab }); + } + + async handleLeaveAdminTeam(i: AdminSettings) { + i.setState({ leaveAdminTeamRes: { state: "loading" } }); + this.setState({ + leaveAdminTeamRes: await HttpService.client.leaveAdmin({ + auth: myAuthRequired(), + }), + }); + + if (this.state.leaveAdminTeamRes.state === "success") { + toast(I18NextService.i18n.t("left_admin_team")); + this.context.router.history.replace("/"); + } + } + + async handleEditEmoji(form: EditCustomEmoji) { + const res = await HttpService.client.editCustomEmoji(form); + if (res.state === "success") { + updateEmojiDataModel(res.data.custom_emoji); + } + } + + async handleDeleteEmoji(form: DeleteCustomEmoji) { + const res = await HttpService.client.deleteCustomEmoji(form); + if (res.state === "success") { + removeFromEmojiDataModel(res.data.id); + } } - parseMessage(msg: any) { - let op = wsUserOp(msg); - console.log(msg); - if (msg.error) { - toast(i18n.t(msg.error), "danger"); - this.context.router.history.push("/"); - this.setState({ loading: false }); - return; - } else if (op == UserOperation.EditSite) { - let data = wsJsonToRes(msg, SiteResponse); - this.setState(s => ((s.siteRes.site_view = Some(data.site_view)), s)); - toast(i18n.t("site_saved")); - } else if (op == UserOperation.GetBannedPersons) { - let data = wsJsonToRes(msg, BannedPersonsResponse); - this.setState({ banned: data.banned, loading: false }); - } else if (op == UserOperation.LeaveAdmin) { - let data = wsJsonToRes(msg, GetSiteResponse); - this.setState(s => ((s.siteRes.site_view = data.site_view), s)); - this.setState({ leaveAdminTeamLoading: false }); - - toast(i18n.t("left_admin_team")); - this.context.router.history.push("/"); + async handleCreateEmoji(form: CreateCustomEmoji) { + const res = await HttpService.client.createCustomEmoji(form); + if (res.state === "success") { + updateEmojiDataModel(res.data.custom_emoji); } } }