-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 { mdToHtml, myAuth, 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?: string;
denyExpanded: boolean;
+ approveLoading: boolean;
+ denyLoading: boolean;
}
export class RegistrationApplication extends Component<
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.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() {
const a = this.props.application;
const accepted = a.creator_local_user.accepted_application;
return (
- <div>
+ <div className="registration-application">
<div>
{i18n.t("applicant")}: <PersonListing person={a.creator} />
</div>
)}
{this.state.denyExpanded && (
- <div className="form-group row">
+ <div className="mb-3 row">
<label className="col-sm-2 col-form-label">
{i18n.t("deny_reason")}
</label>
)}
{(!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 || (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) {
- const auth = myAuth();
- if (auth) {
- i.setState({ denyExpanded: false });
- const form: ApproveRegistrationApplication = {
- id: i.props.application.registration_application.id,
- approve: true,
- auth,
- };
- WebSocketService.Instance.send(
- wsClient.approveRegistrationApplication(form)
- );
- }
+ i.setState({ denyExpanded: false, approveLoading: true });
+ i.props.onApproveApplication({
+ id: i.props.application.registration_application.id,
+ approve: true,
+ auth: myAuthRequired(),
+ });
}
handleDeny(i: RegistrationApplication) {
if (i.state.denyExpanded) {
- i.setState({ denyExpanded: false });
- const auth = myAuth();
- if (auth) {
- const form: ApproveRegistrationApplication = {
- id: i.props.application.registration_application.id,
- approve: false,
- deny_reason: i.state.denyReason,
- auth,
- };
- WebSocketService.Instance.send(
- wsClient.approveRegistrationApplication(form)
- );
- }
+ i.setState({ denyExpanded: false, denyLoading: true });
+ i.props.onApproveApplication({
+ id: i.props.application.registration_application.id,
+ approve: false,
+ deny_reason: i.state.denyReason,
+ auth: myAuthRequired(),
+ });
} else {
i.setState({ denyExpanded: true });
}