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