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

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