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 className="btn-check"
134 value={UnreadOrAll.Unread}
135 checked={this.state.unreadOrAll == UnreadOrAll.Unread}
136 onChange={linkEvent(this, this.handleUnreadOrAllChange)}
141 className={`btn btn-outline-secondary pointer
142 ${this.state.unreadOrAll == UnreadOrAll.All && "active"}
147 className="btn-check"
148 value={UnreadOrAll.All}
149 checked={this.state.unreadOrAll == UnreadOrAll.All}
150 onChange={linkEvent(this, this.handleUnreadOrAllChange)}
160 <div className="mb-2">
161 <span className="me-3">{this.unreadOrAllRadios()}</span>
166 applicationList(apps: RegistrationApplicationView[]) {
172 <RegistrationApplication
173 key={ra.registration_application.id}
175 onApproveApplication={this.handleApproveApplication}
183 handleUnreadOrAllChange(i: RegistrationApplications, event: any) {
184 i.setState({ unreadOrAll: Number(event.target.value), page: 1 });
188 handlePageChange(page: number) {
189 this.setState({ page });
193 static async fetchInitialData({
196 }: InitialFetchRequest): Promise<RegistrationApplicationsData> {
198 listRegistrationApplicationsResponse: auth
199 ? await client.listRegistrationApplications({
203 auth: auth as string,
205 : { state: "empty" },
210 const unread_only = this.state.unreadOrAll == UnreadOrAll.Unread;
212 appsRes: { state: "loading" },
215 appsRes: await HttpService.client.listRegistrationApplications({
216 unread_only: unread_only,
217 page: this.state.page,
219 auth: myAuthRequired(),
224 async handleApproveApplication(form: ApproveRegistrationApplication) {
225 const approveRes = await HttpService.client.approveRegistrationApplication(
229 if (s.appsRes.state == "success" && approveRes.state == "success") {
230 s.appsRes.data.registration_applications = editRegistrationApplication(
231 approveRes.data.registration_application,
232 s.appsRes.data.registration_applications