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