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               />
 106             </div>
 107           </div>
 108         )}
 109         {(ra.admin_id.isNone() || (ra.admin_id.isSome() && !accepted)) && (
 110           <button
 111             className="btn btn-secondary mr-2 my-2"
 112             onClick={linkEvent(this, this.handleApprove)}
 113             aria-label={i18n.t("approve")}
 114           >
 115             {i18n.t("approve")}
 116           </button>
 117         )}
 118         {(ra.admin_id.isNone() || (ra.admin_id.isSome() && accepted)) && (
 119           <button
 120             className="btn btn-secondary mr-2"
 121             onClick={linkEvent(this, this.handleDeny)}
 122             aria-label={i18n.t("deny")}
 123           >
 124             {i18n.t("deny")}
 125           </button>
 126         )}
 127       </div>
 128     );
 129   }
 130
 131   handleApprove(i: RegistrationApplication) {
 132     i.setState({ denyExpanded: false });
 133     let form = new ApproveRegistrationApplication({
 134       id: i.props.application.registration_application.id,
 135       deny_reason: None,
 136       approve: true,
 137       auth: auth().unwrap(),
 138     });
 139     WebSocketService.Instance.send(
 140       wsClient.approveRegistrationApplication(form)
 141     );
 142   }
 143
 144   handleDeny(i: RegistrationApplication) {
 145     if (i.state.denyExpanded) {
 146       i.setState({ denyExpanded: false });
 147       let form = new ApproveRegistrationApplication({
 148         id: i.props.application.registration_application.id,
 149         approve: false,
 150         deny_reason: i.state.denyReason,
 151         auth: auth().unwrap(),
 152       });
 153       WebSocketService.Instance.send(
 154         wsClient.approveRegistrationApplication(form)
 155       );
 156     } else {
 157       i.setState({ denyExpanded: true });
 158     }
 159   }
 160
 161   handleDenyReasonChange(val: string) {
 162     this.setState({ denyReason: Some(val) });
 163   }
 164 }