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

import { None, Option, Some } from "@sniptt/monads";
import { Component, linkEvent } from "inferno";
import { T } from "inferno-i18next-dess";
import {
  ApproveRegistrationApplication,
  RegistrationApplicationView,
} from "lemmy-js-client";
import { i18n } from "../../i18next";
import { WebSocketService } from "../../services";
import { auth, mdToHtml, wsClient } from "../../utils";
import { PersonListing } from "../person/person-listing";
import { MarkdownTextArea } from "./markdown-textarea";
import { MomentTime } from "./moment-time";

interface RegistrationApplicationProps {
  application: RegistrationApplicationView;
}

interface RegistrationApplicationState {
  denyReason: Option<string>;
  denyExpanded: boolean;
}

export class RegistrationApplication extends Component<
  RegistrationApplicationProps,
  RegistrationApplicationState
> {
  private emptyState: RegistrationApplicationState = {
    denyReason: this.props.application.registration_application.deny_reason,
    denyExpanded: false,
  };

  constructor(props: any, context: any) {
    super(props, context);

    this.state = this.emptyState;
    this.handleDenyReasonChange = this.handleDenyReasonChange.bind(this);
  }

  render() {
    let a = this.props.application;
    let ra = this.props.application.registration_application;
    let accepted = a.creator_local_user.accepted_application;

    return (
      <div>
        <div>
          {i18n.t("applicant")}: <PersonListing person={a.creator} />
        </div>
        <div>
          {i18n.t("created")}:{" "}
          <MomentTime showAgo published={ra.published} updated={None} />
        </div>
        <div>{i18n.t("answer")}:</div>
        <div className="md-div" dangerouslySetInnerHTML={mdToHtml(ra.answer)} />

        {a.admin.match({
          some: admin => (
            <div>
              {accepted ? (
                <T i18nKey="approved_by">
                  #
                  <PersonListing person={admin} />
                </T>
              ) : (
                <div>
                  <T i18nKey="denied_by">
                    #
                    <PersonListing person={admin} />
                  </T>
                  {ra.deny_reason.match({
                    some: deny_reason => (
                      <div>
                        {i18n.t("deny_reason")}:{" "}
                        <div
                          className="md-div d-inline-flex"
                          dangerouslySetInnerHTML={mdToHtml(deny_reason)}
                        />
                      </div>
                    ),
                    none: <></>,
                  })}
                </div>
              )}
            </div>
          ),
          none: <></>,
        })}

        {this.state.denyExpanded && (
          <div className="form-group row">
            <label className="col-sm-2 col-form-label">
              {i18n.t("deny_reason")}
            </label>
            <div className="col-sm-10">
              <MarkdownTextArea
                initialContent={this.state.denyReason}
                initialLanguageId={None}
                onContentChange={this.handleDenyReasonChange}
                placeholder={None}
                buttonTitle={None}
                maxLength={None}
                hideNavigationWarnings
                allLanguages={[]}
              />
            </div>
          </div>
        )}
        {(ra.admin_id.isNone() || (ra.admin_id.isSome() && !accepted)) && (
          <button
            className="btn btn-secondary mr-2 my-2"
            onClick={linkEvent(this, this.handleApprove)}
            aria-label={i18n.t("approve")}
          >
            {i18n.t("approve")}
          </button>
        )}
        {(ra.admin_id.isNone() || (ra.admin_id.isSome() && accepted)) && (
          <button
            className="btn btn-secondary mr-2"
            onClick={linkEvent(this, this.handleDeny)}
            aria-label={i18n.t("deny")}
          >
            {i18n.t("deny")}
          </button>
        )}
      </div>
    );
  }

  handleApprove(i: RegistrationApplication) {
    i.setState({ denyExpanded: false });
    let form = new ApproveRegistrationApplication({
      id: i.props.application.registration_application.id,
      deny_reason: None,
      approve: true,
      auth: auth().unwrap(),
    });
    WebSocketService.Instance.send(
      wsClient.approveRegistrationApplication(form)
    );
  }

  handleDeny(i: RegistrationApplication) {
    if (i.state.denyExpanded) {
      i.setState({ denyExpanded: false });
      let form = new ApproveRegistrationApplication({
        id: i.props.application.registration_application.id,
        approve: false,
        deny_reason: i.state.denyReason,
        auth: auth().unwrap(),
      });
      WebSocketService.Instance.send(
        wsClient.approveRegistrationApplication(form)
      );
    } else {
      i.setState({ denyExpanded: true });
    }
  }

  handleDenyReasonChange(val: string) {
    this.setState({ denyReason: Some(val) });
  }
}