-import { None, Option, Some } from "@sniptt/monads";
-import { Component, linkEvent } from "inferno";
+import { Component, InfernoNode, 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 { mdToHtml, myAuthRequired } from "../../utils";
import { PersonListing } from "../person/person-listing";
+import { Spinner } from "./icon";
import { MarkdownTextArea } from "./markdown-textarea";
import { MomentTime } from "./moment-time";
interface RegistrationApplicationProps {
application: RegistrationApplicationView;
+ onApproveApplication(form: ApproveRegistrationApplication): void;
}
interface RegistrationApplicationState {
- denyReason: Option<string>;
+ denyReason?: string;
denyExpanded: boolean;
+ approveLoading: boolean;
+ denyLoading: boolean;
}
export class RegistrationApplication extends Component<
RegistrationApplicationProps,
RegistrationApplicationState
> {
- private emptyState: RegistrationApplicationState = {
+ state: RegistrationApplicationState = {
denyReason: this.props.application.registration_application.deny_reason,
denyExpanded: false,
+ approveLoading: false,
+ denyLoading: false,
};
constructor(props: any, context: any) {
super(props, context);
-
- this.state = this.emptyState;
this.handleDenyReasonChange = this.handleDenyReasonChange.bind(this);
}
+ componentWillReceiveProps(
+ nextProps: Readonly<
+ { children?: InfernoNode } & RegistrationApplicationProps
+ >
+ ): void {
+ if (this.props != nextProps) {
+ this.setState({
+ denyExpanded: false,
+ approveLoading: false,
+ denyLoading: false,
+ });
+ }
+ }
render() {
- let a = this.props.application;
- let ra = this.props.application.registration_application;
- let accepted = a.creator_local_user.accepted_application;
+ const a = this.props.application;
+ const ra = this.props.application.registration_application;
+ const accepted = a.creator_local_user.accepted_application;
return (
- <div>
+ <div className="registration-application">
<div>
{i18n.t("applicant")}: <PersonListing person={a.creator} />
</div>
<div>
- {i18n.t("created")}:{" "}
- <MomentTime showAgo published={ra.published} updated={None} />
+ {i18n.t("created")}: <MomentTime showAgo published={ra.published} />
</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">
+ {a.admin && (
+ <div>
+ {accepted ? (
+ <T i18nKey="approved_by">
+ #
+ <PersonListing person={a.admin} />
+ </T>
+ ) : (
+ <div>
+ <T i18nKey="denied_by">
#
- <PersonListing person={admin} />
+ <PersonListing person={a.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: <></>,
- })}
+ {ra.deny_reason && (
+ <div>
+ {i18n.t("deny_reason")}:{" "}
+ <div
+ className="md-div d-inline-flex"
+ dangerouslySetInnerHTML={mdToHtml(ra.deny_reason)}
+ />
+ </div>
+ )}
+ </div>
+ )}
+ </div>
+ )}
{this.state.denyExpanded && (
- <div class="form-group row">
- <label class="col-sm-2 col-form-label">
+ <div className="mb-3 row">
+ <label className="col-sm-2 col-form-label">
{i18n.t("deny_reason")}
</label>
- <div class="col-sm-10">
+ <div className="col-sm-10">
<MarkdownTextArea
initialContent={this.state.denyReason}
onContentChange={this.handleDenyReasonChange}
- placeholder={None}
- buttonTitle={None}
- maxLength={None}
hideNavigationWarnings
+ allLanguages={[]}
+ siteLanguages={[]}
/>
</div>
</div>
)}
- {(ra.admin_id.isNone() || (ra.admin_id.isSome() && !accepted)) && (
+ {(!ra.admin_id || (ra.admin_id && !accepted)) && (
<button
- className="btn btn-secondary mr-2 my-2"
+ className="btn btn-secondary me-2 my-2"
onClick={linkEvent(this, this.handleApprove)}
aria-label={i18n.t("approve")}
>
- {i18n.t("approve")}
+ {this.state.approveLoading ? <Spinner /> : i18n.t("approve")}
</button>
)}
- {(ra.admin_id.isNone() || (ra.admin_id.isSome() && accepted)) && (
+ {(!ra.admin_id || (ra.admin_id && accepted)) && (
<button
- className="btn btn-secondary mr-2"
+ className="btn btn-secondary me-2"
onClick={linkEvent(this, this.handleDeny)}
aria-label={i18n.t("deny")}
>
- {i18n.t("deny")}
+ {this.state.denyLoading ? <Spinner /> : i18n.t("deny")}
</button>
)}
</div>
}
handleApprove(i: RegistrationApplication) {
- i.setState({ denyExpanded: false });
- let form = new ApproveRegistrationApplication({
+ i.setState({ denyExpanded: false, approveLoading: true });
+ i.props.onApproveApplication({
id: i.props.application.registration_application.id,
- deny_reason: None,
approve: true,
- auth: auth().unwrap(),
+ auth: myAuthRequired(),
});
- WebSocketService.Instance.send(
- wsClient.approveRegistrationApplication(form)
- );
}
handleDeny(i: RegistrationApplication) {
if (i.state.denyExpanded) {
- i.setState({ denyExpanded: false });
- let form = new ApproveRegistrationApplication({
+ i.setState({ denyExpanded: false, denyLoading: true });
+ i.props.onApproveApplication({
id: i.props.application.registration_application.id,
approve: false,
deny_reason: i.state.denyReason,
- auth: auth().unwrap(),
+ auth: myAuthRequired(),
});
- WebSocketService.Instance.send(
- wsClient.approveRegistrationApplication(form)
- );
} else {
i.setState({ denyExpanded: true });
}
}
handleDenyReasonChange(val: string) {
- this.state.denyReason = Some(val);
- this.setState(this.state);
+ this.setState({ denyReason: val });
}
}