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

   1 import autosize from "autosize";
   2 import { Component, linkEvent } from "inferno";
   3 import {
   4   BannedPersonsResponse,
   5   GetBannedPersons,
   6   GetSiteResponse,
   7   PersonViewSafe,
   8   SiteResponse,
   9   UserOperation,
  10   wsJsonToRes,
  11   wsUserOp,
  12 } from "lemmy-js-client";
  13 import { Subscription } from "rxjs";
  14 import { i18n } from "../../i18next";
  15 import { InitialFetchRequest } from "../../interfaces";
  16 import { WebSocketService } from "../../services";
  17 import {
  18   capitalizeFirstLetter,
  19   isBrowser,
  20   myAuth,
  21   randomStr,
  22   setIsoData,
  23   showLocal,
  24   toast,
  25   wsClient,
  26   wsSubscribe,
  27 } from "../../utils";
  28 import { HtmlTags } from "../common/html-tags";
  29 import { Spinner } from "../common/icon";
  30 import { PersonListing } from "../person/person-listing";
  31 import { EmojiForm } from "./emojis-form";
  32 import { SiteForm } from "./site-form";
  33
  34 interface AdminSettingsState {
  35   siteRes: GetSiteResponse;
  36   banned: PersonViewSafe[];
  37   loading: boolean;
  38   leaveAdminTeamLoading: boolean;
  39   currentTab: string;
  40 }
  41
  42 export class AdminSettings extends Component<any, AdminSettingsState> {
  43   private siteConfigTextAreaId = `site-config-${randomStr()}`;
  44   private isoData = setIsoData(this.context);
  45   private subscription?: Subscription;
  46   state: AdminSettingsState = {
  47     siteRes: this.isoData.site_res,
  48     banned: [],
  49     loading: true,
  50     leaveAdminTeamLoading: false,
  51     currentTab: "site",
  52   };
  53
  54   constructor(props: any, context: any) {
  55     super(props, context);
  56
  57     this.parseMessage = this.parseMessage.bind(this);
  58     this.subscription = wsSubscribe(this.parseMessage);
  59
  60     // Only fetch the data if coming from another route
  61     if (this.isoData.path == this.context.router.route.match.url) {
  62       this.state = {
  63         ...this.state,
  64         banned: (this.isoData.routeData[0] as BannedPersonsResponse).banned,
  65         loading: false,
  66       };
  67     } else {
  68       let cAuth = myAuth();
  69       if (cAuth) {
  70         WebSocketService.Instance.send(
  71           wsClient.getBannedPersons({
  72             auth: cAuth,
  73           })
  74         );
  75       }
  76     }
  77   }
  78
  79   static fetchInitialData(req: InitialFetchRequest): Promise<any>[] {
  80     let promises: Promise<any>[] = [];
  81
  82     let auth = req.auth;
  83     if (auth) {
  84       let bannedPersonsForm: GetBannedPersons = { auth };
  85       promises.push(req.client.getBannedPersons(bannedPersonsForm));
  86     }
  87
  88     return promises;
  89   }
  90
  91   componentDidMount() {
  92     if (isBrowser()) {
  93       var textarea: any = document.getElementById(this.siteConfigTextAreaId);
  94       autosize(textarea);
  95     }
  96   }
  97
  98   componentWillUnmount() {
  99     if (isBrowser()) {
 100       this.subscription?.unsubscribe();
 101     }
 102   }
 103
 104   get documentTitle(): string {
 105     return `${i18n.t("admin_settings")} - ${this.state.siteRes.site_view.site.name
 106       }`;
 107   }
 108
 109   render() {
 110     return (
 111       <div className="container-lg">
 112         {this.state.loading ? (
 113           <h5>
 114             <Spinner large />
 115           </h5>
 116         ) : (
 117           <div>
 118             <HtmlTags
 119                   title={this.documentTitle}
 120                   path={this.context.router.route.match.url}
 121                 />
 122             <ul className="nav nav-tabs mb-2">
 123               <li className="nav-item">
 124                 <button
 125                   className={`nav-link btn ${this.state.currentTab == "site" && "active"}`}
 126                   onClick={linkEvent({ ctx: this, tab: "site" }, this.handleSwitchTab) }>
 127                   {i18n.t("site")}
 128                 </button>
 129               </li>
 130               <li className="nav-item">
 131                 <button
 132                   className={`nav-link btn ${this.state.currentTab == "emojis" && "active"
 133                     }`}
 134                   onClick={linkEvent({ ctx: this, tab: "emojis" }, this.handleSwitchTab) }>
 135                   {i18n.t("emojis")}
 136                 </button>
 137               </li>
 138             </ul>
 139             {this.state.currentTab == "site" &&
 140               <div className="row"><div className="col-12 col-md-6">
 141
 142                 <SiteForm
 143                   siteRes={this.state.siteRes}
 144                   showLocal={showLocal(this.isoData)}
 145                 />
 146               </div>
 147                 <div className="col-12 col-md-6">
 148                   {this.admins()}
 149                   {this.bannedUsers()}
 150                 </div>
 151               </div>
 152             }
 153             {this.state.currentTab == "emojis" &&
 154               <div className="row">
 155                 <EmojiForm></EmojiForm>
 156               </div>
 157             }
 158           </div>
 159         )}
 160       </div>
 161     );
 162   }
 163
 164   admins() {
 165     return (
 166       <>
 167         <h5>{capitalizeFirstLetter(i18n.t("admins"))}</h5>
 168         <ul className="list-unstyled">
 169           {this.state.siteRes.admins.map(admin => (
 170             <li key={admin.person.id} className="list-inline-item">
 171               <PersonListing person={admin.person} />
 172             </li>
 173           ))}
 174         </ul>
 175         {this.leaveAdmin()}
 176       </>
 177     );
 178   }
 179
 180   leaveAdmin() {
 181     return (
 182       <button
 183         onClick={linkEvent(this, this.handleLeaveAdminTeam)}
 184         className="btn btn-danger mb-2"
 185       >
 186         {this.state.leaveAdminTeamLoading ? (
 187           <Spinner />
 188         ) : (
 189           i18n.t("leave_admin_team")
 190         )}
 191       </button>
 192     );
 193   }
 194
 195   bannedUsers() {
 196     return (
 197       <>
 198         <h5>{i18n.t("banned_users")}</h5>
 199         <ul className="list-unstyled">
 200           {this.state.banned.map(banned => (
 201             <li key={banned.person.id} className="list-inline-item">
 202               <PersonListing person={banned.person} />
 203             </li>
 204           ))}
 205         </ul>
 206       </>
 207     );
 208   }
 209
 210   handleSwitchTab(i: { ctx: AdminSettings; tab: string }, event: any) {
 211     i.ctx.setState({ currentTab: i.tab });
 212   }
 213
 214   handleLeaveAdminTeam(i: AdminSettings) {
 215     let auth = myAuth();
 216     if (auth) {
 217       i.setState({ leaveAdminTeamLoading: true });
 218       WebSocketService.Instance.send(wsClient.leaveAdmin({ auth }));
 219     }
 220   }
 221
 222   parseMessage(msg: any) {
 223     let op = wsUserOp(msg);
 224     console.log(msg);
 225     if (msg.error) {
 226       toast(i18n.t(msg.error), "danger");
 227       this.context.router.history.push("/");
 228       this.setState({ loading: false });
 229       return;
 230     } else if (op == UserOperation.EditSite) {
 231       let data = wsJsonToRes<SiteResponse>(msg);
 232       this.setState(s => ((s.siteRes.site_view = data.site_view), s));
 233       toast(i18n.t("site_saved"));
 234     } else if (op == UserOperation.GetBannedPersons) {
 235       let data = wsJsonToRes<BannedPersonsResponse>(msg);
 236       this.setState({ banned: data.banned, loading: false });
 237     } else if (op == UserOperation.LeaveAdmin) {
 238       let data = wsJsonToRes<GetSiteResponse>(msg);
 239       this.setState(s => ((s.siteRes.site_view = data.site_view), s));
 240       this.setState({ leaveAdminTeamLoading: false });
 241
 242       toast(i18n.t("left_admin_team"));
 243       this.context.router.history.push("/");
 244     }
 245   }
 246 }