src/shared/components/home/admin-settings.tsx

   1 import {
   2   fetchThemeList,
   3   myAuthRequired,
   4   setIsoData,
   5   showLocal,
   6 } from "@utils/app";
   7 import { capitalizeFirstLetter } from "@utils/helpers";
   8 import { RouteDataResponse } from "@utils/types";
   9 import classNames from "classnames";
  10 import { Component, linkEvent } from "inferno";
  11 import {
  12   BannedPersonsResponse,
  13   CreateCustomEmoji,
  14   DeleteCustomEmoji,
  15   EditCustomEmoji,
  16   EditSite,
  17   GetFederatedInstancesResponse,
  18   GetSiteResponse,
  19   PersonView,
  20 } from "lemmy-js-client";
  21 import { InitialFetchRequest } from "../../interfaces";
  22 import { removeFromEmojiDataModel, updateEmojiDataModel } from "../../markdown";
  23 import { FirstLoadService, I18NextService } from "../../services";
  24 import { HttpService, RequestState } from "../../services/HttpService";
  25 import { toast } from "../../toast";
  26 import { HtmlTags } from "../common/html-tags";
  27 import { Spinner } from "../common/icon";
  28 import Tabs from "../common/tabs";
  29 import { PersonListing } from "../person/person-listing";
  30 import { EmojiForm } from "./emojis-form";
  31 import RateLimitForm from "./rate-limit-form";
  32 import { SiteForm } from "./site-form";
  33 import { TaglineForm } from "./tagline-form";
  34
  35 type AdminSettingsData = RouteDataResponse<{
  36   bannedRes: BannedPersonsResponse;
  37   instancesRes: GetFederatedInstancesResponse;
  38 }>;
  39
  40 interface AdminSettingsState {
  41   siteRes: GetSiteResponse;
  42   banned: PersonView[];
  43   currentTab: string;
  44   instancesRes: RequestState<GetFederatedInstancesResponse>;
  45   bannedRes: RequestState<BannedPersonsResponse>;
  46   leaveAdminTeamRes: RequestState<GetSiteResponse>;
  47   loading: boolean;
  48   themeList: string[];
  49   isIsomorphic: boolean;
  50 }
  51
  52 export class AdminSettings extends Component<any, AdminSettingsState> {
  53   private isoData = setIsoData<AdminSettingsData>(this.context);
  54   state: AdminSettingsState = {
  55     siteRes: this.isoData.site_res,
  56     banned: [],
  57     currentTab: "site",
  58     bannedRes: { state: "empty" },
  59     instancesRes: { state: "empty" },
  60     leaveAdminTeamRes: { state: "empty" },
  61     loading: false,
  62     themeList: [],
  63     isIsomorphic: false,
  64   };
  65
  66   constructor(props: any, context: any) {
  67     super(props, context);
  68
  69     this.handleEditSite = this.handleEditSite.bind(this);
  70     this.handleEditEmoji = this.handleEditEmoji.bind(this);
  71     this.handleDeleteEmoji = this.handleDeleteEmoji.bind(this);
  72     this.handleCreateEmoji = this.handleCreateEmoji.bind(this);
  73
  74     // Only fetch the data if coming from another route
  75     if (FirstLoadService.isFirstLoad) {
  76       const { bannedRes, instancesRes } = this.isoData.routeData;
  77
  78       this.state = {
  79         ...this.state,
  80         bannedRes,
  81         instancesRes,
  82         isIsomorphic: true,
  83       };
  84     }
  85   }
  86
  87   static async fetchInitialData({
  88     auth,
  89     client,
  90   }: InitialFetchRequest): Promise<AdminSettingsData> {
  91     return {
  92       bannedRes: await client.getBannedPersons({
  93         auth: auth as string,
  94       }),
  95       instancesRes: await client.getFederatedInstances({
  96         auth: auth as string,
  97       }),
  98     };
  99   }
 100
 101   async componentDidMount() {
 102     if (!this.state.isIsomorphic) {
 103       await this.fetchData();
 104     }
 105   }
 106
 107   get documentTitle(): string {
 108     return `${I18NextService.i18n.t("admin_settings")} - ${
 109       this.state.siteRes.site_view.site.name
 110     }`;
 111   }
 112
 113   render() {
 114     const federationData =
 115       this.state.instancesRes.state === "success"
 116         ? this.state.instancesRes.data.federated_instances
 117         : undefined;
 118
 119     return (
 120       <div className="admin-settings container-lg">
 121         <HtmlTags
 122           title={this.documentTitle}
 123           path={this.context.router.route.match.url}
 124         />
 125         <Tabs
 126           tabs={[
 127             {
 128               key: "site",
 129               label: I18NextService.i18n.t("site"),
 130               getNode: isSelected => (
 131                 <div
 132                   className={classNames("tab-pane show", {
 133                     active: isSelected,
 134                   })}
 135                   role="tabpanel"
 136                   id="site-tab-pane"
 137                 >
 138                   <h1 className="h4 mb-4">
 139                     {I18NextService.i18n.t("site_config")}
 140                   </h1>
 141                   <div className="row">
 142                     <div className="col-12 col-md-6">
 143                       <SiteForm
 144                         showLocal={showLocal(this.isoData)}
 145                         allowedInstances={federationData?.allowed}
 146                         blockedInstances={federationData?.blocked}
 147                         onSaveSite={this.handleEditSite}
 148                         siteRes={this.state.siteRes}
 149                         themeList={this.state.themeList}
 150                         loading={this.state.loading}
 151                       />
 152                     </div>
 153                     <div className="col-12 col-md-6">
 154                       {this.admins()}
 155                       <hr />
 156                       {this.bannedUsers()}
 157                     </div>
 158                   </div>
 159                 </div>
 160               ),
 161             },
 162             {
 163               key: "rate_limiting",
 164               label: "Rate Limiting",
 165               getNode: isSelected => (
 166                 <div
 167                   className={classNames("tab-pane", {
 168                     active: isSelected,
 169                   })}
 170                   role="tabpanel"
 171                   id="rate_limiting-tab-pane"
 172                 >
 173                   <RateLimitForm
 174                     rateLimits={
 175                       this.state.siteRes.site_view.local_site_rate_limit
 176                     }
 177                     onSaveSite={this.handleEditSite}
 178                     loading={this.state.loading}
 179                   />
 180                 </div>
 181               ),
 182             },
 183             {
 184               key: "taglines",
 185               label: I18NextService.i18n.t("taglines"),
 186               getNode: isSelected => (
 187                 <div
 188                   className={classNames("tab-pane", {
 189                     active: isSelected,
 190                   })}
 191                   role="tabpanel"
 192                   id="taglines-tab-pane"
 193                 >
 194                   <div className="row">
 195                     <TaglineForm
 196                       taglines={this.state.siteRes.taglines}
 197                       onSaveSite={this.handleEditSite}
 198                       loading={this.state.loading}
 199                     />
 200                   </div>
 201                 </div>
 202               ),
 203             },
 204             {
 205               key: "emojis",
 206               label: I18NextService.i18n.t("emojis"),
 207               getNode: isSelected => (
 208                 <div
 209                   className={classNames("tab-pane", {
 210                     active: isSelected,
 211                   })}
 212                   role="tabpanel"
 213                   id="emojis-tab-pane"
 214                 >
 215                   <div className="row">
 216                     <EmojiForm
 217                       onCreate={this.handleCreateEmoji}
 218                       onDelete={this.handleDeleteEmoji}
 219                       onEdit={this.handleEditEmoji}
 220                     />
 221                   </div>
 222                 </div>
 223               ),
 224             },
 225           ]}
 226         />
 227       </div>
 228     );
 229   }
 230
 231   async fetchData() {
 232     this.setState({
 233       bannedRes: { state: "loading" },
 234       instancesRes: { state: "loading" },
 235       themeList: [],
 236     });
 237
 238     const auth = myAuthRequired();
 239
 240     const [bannedRes, instancesRes, themeList] = await Promise.all([
 241       HttpService.client.getBannedPersons({ auth }),
 242       HttpService.client.getFederatedInstances({ auth }),
 243       fetchThemeList(),
 244     ]);
 245
 246     this.setState({
 247       bannedRes,
 248       instancesRes,
 249       themeList,
 250     });
 251   }
 252
 253   admins() {
 254     return (
 255       <>
 256         <h2 className="h5">
 257           {capitalizeFirstLetter(I18NextService.i18n.t("admins"))}
 258         </h2>
 259         <ul className="list-unstyled">
 260           {this.state.siteRes.admins.map(admin => (
 261             <li key={admin.person.id} className="list-inline-item">
 262               <PersonListing person={admin.person} />
 263             </li>
 264           ))}
 265         </ul>
 266         {this.leaveAdmin()}
 267       </>
 268     );
 269   }
 270
 271   leaveAdmin() {
 272     return (
 273       <button
 274         onClick={linkEvent(this, this.handleLeaveAdminTeam)}
 275         className="btn btn-danger mb-2"
 276       >
 277         {this.state.leaveAdminTeamRes.state === "loading" ? (
 278           <Spinner />
 279         ) : (
 280           I18NextService.i18n.t("leave_admin_team")
 281         )}
 282       </button>
 283     );
 284   }
 285
 286   bannedUsers() {
 287     switch (this.state.bannedRes.state) {
 288       case "loading":
 289         return (
 290           <h5>
 291             <Spinner large />
 292           </h5>
 293         );
 294       case "success": {
 295         const bans = this.state.bannedRes.data.banned;
 296         return (
 297           <>
 298             <h2 className="h5">{I18NextService.i18n.t("banned_users")}</h2>
 299             <ul className="list-unstyled">
 300               {bans.map(banned => (
 301                 <li key={banned.person.id} className="list-inline-item">
 302                   <PersonListing person={banned.person} />
 303                 </li>
 304               ))}
 305             </ul>
 306           </>
 307         );
 308       }
 309     }
 310   }
 311
 312   async handleEditSite(form: EditSite) {
 313     this.setState({ loading: true });
 314
 315     const editRes = await HttpService.client.editSite(form);
 316
 317     if (editRes.state === "success") {
 318       this.setState(s => {
 319         s.siteRes.site_view = editRes.data.site_view;
 320         // TODO: Where to get taglines from?
 321         s.siteRes.taglines = editRes.data.taglines;
 322         return s;
 323       });
 324       toast(I18NextService.i18n.t("site_saved"));
 325     }
 326
 327     this.setState({ loading: false });
 328
 329     return editRes;
 330   }
 331
 332   handleSwitchTab(i: { ctx: AdminSettings; tab: string }) {
 333     i.ctx.setState({ currentTab: i.tab });
 334   }
 335
 336   async handleLeaveAdminTeam(i: AdminSettings) {
 337     i.setState({ leaveAdminTeamRes: { state: "loading" } });
 338     this.setState({
 339       leaveAdminTeamRes: await HttpService.client.leaveAdmin({
 340         auth: myAuthRequired(),
 341       }),
 342     });
 343
 344     if (this.state.leaveAdminTeamRes.state === "success") {
 345       toast(I18NextService.i18n.t("left_admin_team"));
 346       this.context.router.history.replace("/");
 347     }
 348   }
 349
 350   async handleEditEmoji(form: EditCustomEmoji) {
 351     const res = await HttpService.client.editCustomEmoji(form);
 352     if (res.state === "success") {
 353       updateEmojiDataModel(res.data.custom_emoji);
 354     }
 355   }
 356
 357   async handleDeleteEmoji(form: DeleteCustomEmoji) {
 358     const res = await HttpService.client.deleteCustomEmoji(form);
 359     if (res.state === "success") {
 360       removeFromEmojiDataModel(res.data.id);
 361     }
 362   }
 363
 364   async handleCreateEmoji(form: CreateCustomEmoji) {
 365     const res = await HttpService.client.createCustomEmoji(form);
 366     if (res.state === "success") {
 367       updateEmojiDataModel(res.data.custom_emoji);
 368     }
 369   }
 370 }