1 import { Component, linkEvent } from "inferno";
3 ApproveRegistrationApplication,
5 ListRegistrationApplicationsResponse,
6 RegistrationApplicationView,
7 } from "lemmy-js-client";
8 import { i18n } from "../../i18next";
9 import { InitialFetchRequest } from "../../interfaces";
10 import { UserService } from "../../services";
11 import { FirstLoadService } from "../../services/FirstLoadService";
12 import { HttpService, RequestState } from "../../services/HttpService";
15 editRegistrationApplication,
21 import { HtmlTags } from "../common/html-tags";
22 import { Spinner } from "../common/icon";
23 import { Paginator } from "../common/paginator";
24 import { RegistrationApplication } from "../common/registration-application";
31 type RegistrationApplicationsData = RouteDataResponse<{
32 listRegistrationApplicationsResponse: ListRegistrationApplicationsResponse;
35 interface RegistrationApplicationsState {
36 appsRes: RequestState<ListRegistrationApplicationsResponse>;
37 siteRes: GetSiteResponse;
38 unreadOrAll: UnreadOrAll;
40 isIsomorphic: boolean;
43 export class RegistrationApplications extends Component<
45 RegistrationApplicationsState
47 private isoData = setIsoData<RegistrationApplicationsData>(this.context);
48 state: RegistrationApplicationsState = {
49 appsRes: { state: "empty" },
50 siteRes: this.isoData.site_res,
51 unreadOrAll: UnreadOrAll.Unread,
56 constructor(props: any, context: any) {
57 super(props, context);
59 this.handlePageChange = this.handlePageChange.bind(this);
60 this.handleApproveApplication = this.handleApproveApplication.bind(this);
62 // Only fetch the data if coming from another route
63 if (FirstLoadService.isFirstLoad) {
66 appsRes: this.isoData.routeData.listRegistrationApplicationsResponse,
72 async componentDidMount() {
73 if (!this.state.isIsomorphic) {
79 get documentTitle(): string {
80 const mui = UserService.Instance.myUserInfo;
82 ? `@${mui.local_user_view.person.name} ${i18n.t(
83 "registration_applications"
84 )} - ${this.state.siteRes.site_view.site.name}`
89 switch (this.state.appsRes.state) {
97 const apps = this.state.appsRes.data.registration_applications;
100 <div className="col-12">
102 title={this.documentTitle}
103 path={this.context.router.route.match.url}
105 <h5 className="mb-2">{i18n.t("registration_applications")}</h5>
107 {this.applicationList(apps)}
109 page={this.state.page}
110 onChange={this.handlePageChange}
120 return <div className="container-lg">{this.renderApps()}</div>;
123 unreadOrAllRadios() {
125 <div className="btn-group btn-group-toggle flex-wrap mb-2">
127 className={`btn btn-outline-secondary pointer
128 ${this.state.unreadOrAll == UnreadOrAll.Unread && "active"}
133 value={UnreadOrAll.Unread}
134 checked={this.state.unreadOrAll == UnreadOrAll.Unread}
135 onChange={linkEvent(this, this.handleUnreadOrAllChange)}
140 className={`btn btn-outline-secondary pointer
141 ${this.state.unreadOrAll == UnreadOrAll.All && "active"}
146 value={UnreadOrAll.All}
147 checked={this.state.unreadOrAll == UnreadOrAll.All}
148 onChange={linkEvent(this, this.handleUnreadOrAllChange)}
158 <div className="mb-2">
159 <span className="mr-3">{this.unreadOrAllRadios()}</span>
164 applicationList(apps: RegistrationApplicationView[]) {
170 <RegistrationApplication
171 key={ra.registration_application.id}
173 onApproveApplication={this.handleApproveApplication}
181 handleUnreadOrAllChange(i: RegistrationApplications, event: any) {
182 i.setState({ unreadOrAll: Number(event.target.value), page: 1 });
186 handlePageChange(page: number) {
187 this.setState({ page });
191 static async fetchInitialData({
194 }: InitialFetchRequest): Promise<RegistrationApplicationsData> {
196 listRegistrationApplicationsResponse: auth
197 ? await client.listRegistrationApplications({
201 auth: auth as string,
203 : { state: "empty" },
208 const unread_only = this.state.unreadOrAll == UnreadOrAll.Unread;
210 appsRes: { state: "loading" },
213 appsRes: await HttpService.client.listRegistrationApplications({
214 unread_only: unread_only,
215 page: this.state.page,
217 auth: myAuthRequired(),
222 async handleApproveApplication(form: ApproveRegistrationApplication) {
223 const approveRes = await HttpService.client.approveRegistrationApplication(
227 if (s.appsRes.state == "success" && approveRes.state == "success") {
228 s.appsRes.data.registration_applications = editRegistrationApplication(
229 approveRes.data.registration_application,
230 s.appsRes.data.registration_applications