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

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