src/shared/components/common/registration-application.tsx

   1 import { None, Option, Some } from "@sniptt/monads";
   2 import { Component, linkEvent } from "inferno";
   3 import { T } from "inferno-i18next-dess";
   4 import {
   5   ApproveRegistrationApplication,
   6   RegistrationApplicationView,
   7 } from "lemmy-js-client";
   8 import { i18n } from "../../i18next";
   9 import { WebSocketService } from "../../services";
  10 import { auth, mdToHtml, wsClient } from "../../utils";
  11 import { PersonListing } from "../person/person-listing";
  12 import { MarkdownTextArea } from "./markdown-textarea";
  13 import { MomentTime } from "./moment-time";
  14
  15 interface RegistrationApplicationProps {
  16   application: RegistrationApplicationView;
  17 }
  18
  19 interface RegistrationApplicationState {
  20   denyReason: Option<string>;
  21   denyExpanded: boolean;
  22 }
  23
  24 export class RegistrationApplication extends Component<
  25   RegistrationApplicationProps,
  26   RegistrationApplicationState
  27 > {
  28   private emptyState: RegistrationApplicationState = {
  29     denyReason: this.props.application.registration_application.deny_reason,
  30     denyExpanded: false,
  31   };
  32
  33   constructor(props: any, context: any) {
  34     super(props, context);
  35
  36     this.state = this.emptyState;
  37     this.handleDenyReasonChange = this.handleDenyReasonChange.bind(this);
  38   }
  39
  40   render() {
  41     let a = this.props.application;
  42     let ra = this.props.application.registration_application;
  43     let accepted = a.creator_local_user.accepted_application;
  44
  45     return (
  46       <div>
  47         <div>
  48           {i18n.t("applicant")}: <PersonListing person={a.creator} />
  49         </div>
  50         <div>
  51           {i18n.t("created")}:{" "}
  52           <MomentTime showAgo published={ra.published} updated={None} />
  53         </div>
  54         <div>{i18n.t("answer")}:</div>
  55         <div className="md-div" dangerouslySetInnerHTML={mdToHtml(ra.answer)} />
  56
  57         {a.admin.match({
  58           some: admin => (
  59             <div>
  60               {accepted ? (
  61                 <T i18nKey="approved_by">
  62                   #
  63                   <PersonListing person={admin} />
  64                 </T>
  65               ) : (
  66                 <div>
  67                   <T i18nKey="denied_by">
  68                     #
  69                     <PersonListing person={admin} />
  70                   </T>
  71                   {ra.deny_reason.match({
  72                     some: deny_reason => (
  73                       <div>
  74                         {i18n.t("deny_reason")}:{" "}
  75                         <div
  76                           className="md-div d-inline-flex"
  77                           dangerouslySetInnerHTML={mdToHtml(deny_reason)}
  78                         />
  79                       </div>
  80                     ),
  81                     none: <></>,
  82                   })}
  83                 </div>
  84               )}
  85             </div>
  86           ),
  87           none: <></>,
  88         })}
  89
  90         {this.state.denyExpanded && (
  91           <div className="form-group row">
  92             <label className="col-sm-2 col-form-label">
  93               {i18n.t("deny_reason")}
  94             </label>
  95             <div className="col-sm-10">
  96               <MarkdownTextArea
  97                 initialContent={this.state.denyReason}
  98                 initialLanguageId={None}
  99                 onContentChange={this.handleDenyReasonChange}
 100                 placeholder={None}
 101                 buttonTitle={None}
 102                 maxLength={None}
 103                 hideNavigationWarnings
 104                 allLanguages={[]}
 105                 siteLanguages={[]}
 106               />
 107             </div>
 108           </div>
 109         )}
 110         {(ra.admin_id.isNone() || (ra.admin_id.isSome() && !accepted)) && (
 111           <button
 112             className="btn btn-secondary mr-2 my-2"
 113             onClick={linkEvent(this, this.handleApprove)}
 114             aria-label={i18n.t("approve")}
 115           >
 116             {i18n.t("approve")}
 117           </button>
 118         )}
 119         {(ra.admin_id.isNone() || (ra.admin_id.isSome() && accepted)) && (
 120           <button
 121             className="btn btn-secondary mr-2"
 122             onClick={linkEvent(this, this.handleDeny)}
 123             aria-label={i18n.t("deny")}
 124           >
 125             {i18n.t("deny")}
 126           </button>
 127         )}
 128       </div>
 129     );
 130   }
 131
 132   handleApprove(i: RegistrationApplication) {
 133     i.setState({ denyExpanded: false });
 134     let form = new ApproveRegistrationApplication({
 135       id: i.props.application.registration_application.id,
 136       deny_reason: None,
 137       approve: true,
 138       auth: auth().unwrap(),
 139     });
 140     WebSocketService.Instance.send(
 141       wsClient.approveRegistrationApplication(form)
 142     );
 143   }
 144
 145   handleDeny(i: RegistrationApplication) {
 146     if (i.state.denyExpanded) {
 147       i.setState({ denyExpanded: false });
 148       let form = new ApproveRegistrationApplication({
 149         id: i.props.application.registration_application.id,
 150         approve: false,
 151         deny_reason: i.state.denyReason,
 152         auth: auth().unwrap(),
 153       });
 154       WebSocketService.Instance.send(
 155         wsClient.approveRegistrationApplication(form)
 156       );
 157     } else {
 158       i.setState({ denyExpanded: true });
 159     }
 160   }
 161
 162   handleDenyReasonChange(val: string) {
 163     this.setState({ denyReason: Some(val) });
 164   }
 165 }