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 { authField, mdToHtml, 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   private emptyState: 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
  35     this.state = this.emptyState;
  36     this.handleDenyReasonChange = this.handleDenyReasonChange.bind(this);
  37   }
  38
  39   render() {
  40     let a = this.props.application;
  41     let ra = this.props.application.registration_application;
  42     let accepted = a.creator_local_user.accepted_application;
  43
  44     return (
  45       <div>
  46         <div>
  47           {i18n.t("applicant")}: <PersonListing person={a.creator} />
  48         </div>
  49         <div>
  50           {i18n.t("created")}: <MomentTime showAgo data={ra} />
  51         </div>
  52         <div>{i18n.t("answer")}:</div>
  53         <div className="md-div" dangerouslySetInnerHTML={mdToHtml(ra.answer)} />
  54
  55         {a.admin && (
  56           <div>
  57             {accepted ? (
  58               <T i18nKey="approved_by">
  59                 #
  60                 <PersonListing person={a.admin} />
  61               </T>
  62             ) : (
  63               <div>
  64                 <T i18nKey="denied_by">
  65                   #
  66                   <PersonListing person={a.admin} />
  67                 </T>
  68                 <div>
  69                   {i18n.t("deny_reason")}:{" "}
  70                   <div
  71                     className="md-div d-inline-flex"
  72                     dangerouslySetInnerHTML={mdToHtml(ra.deny_reason || "")}
  73                   />
  74                 </div>
  75               </div>
  76             )}
  77           </div>
  78         )}
  79
  80         {this.state.denyExpanded && (
  81           <div class="form-group row">
  82             <label class="col-sm-2 col-form-label">
  83               {i18n.t("deny_reason")}
  84             </label>
  85             <div class="col-sm-10">
  86               <MarkdownTextArea
  87                 initialContent={this.state.denyReason}
  88                 onContentChange={this.handleDenyReasonChange}
  89                 hideNavigationWarnings
  90               />
  91             </div>
  92           </div>
  93         )}
  94         {(!ra.admin_id || (ra.admin_id && !accepted)) && (
  95           <button
  96             className="btn btn-secondary mr-2 my-2"
  97             onClick={linkEvent(this, this.handleApprove)}
  98             aria-label={i18n.t("approve")}
  99           >
 100             {i18n.t("approve")}
 101           </button>
 102         )}
 103         {(!ra.admin_id || (ra.admin_id && accepted)) && (
 104           <button
 105             className="btn btn-secondary mr-2"
 106             onClick={linkEvent(this, this.handleDeny)}
 107             aria-label={i18n.t("deny")}
 108           >
 109             {i18n.t("deny")}
 110           </button>
 111         )}
 112       </div>
 113     );
 114   }
 115
 116   handleApprove(i: RegistrationApplication) {
 117     i.setState({ denyExpanded: false });
 118     let form: ApproveRegistrationApplication = {
 119       id: i.props.application.registration_application.id,
 120       deny_reason: "",
 121       approve: true,
 122       auth: authField(),
 123     };
 124     WebSocketService.Instance.send(
 125       wsClient.approveRegistrationApplication(form)
 126     );
 127   }
 128
 129   handleDeny(i: RegistrationApplication) {
 130     if (i.state.denyExpanded) {
 131       i.setState({ denyExpanded: false });
 132       let form: ApproveRegistrationApplication = {
 133         id: i.props.application.registration_application.id,
 134         approve: false,
 135         deny_reason: i.state.denyReason,
 136         auth: authField(),
 137       };
 138       WebSocketService.Instance.send(
 139         wsClient.approveRegistrationApplication(form)
 140       );
 141     } else {
 142       i.setState({ denyExpanded: true });
 143     }
 144   }
 145
 146   handleDenyReasonChange(val: string) {
 147     this.state.denyReason = val;
 148     this.setState(this.state);
 149   }
 150 }