2 editRegistrationApplication,
6 import { randomStr } from "@utils/helpers";
7 import { RouteDataResponse } from "@utils/types";
8 import classNames from "classnames";
9 import { Component, linkEvent } from "inferno";
11 ApproveRegistrationApplication,
13 ListRegistrationApplicationsResponse,
14 RegistrationApplicationView,
15 } from "lemmy-js-client";
16 import { fetchLimit } from "../../config";
17 import { InitialFetchRequest } from "../../interfaces";
18 import { FirstLoadService, I18NextService, UserService } from "../../services";
19 import { HttpService, RequestState } from "../../services/HttpService";
20 import { setupTippy } from "../../tippy";
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} ${I18NextService.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 <h1 className="h4 mb-4">
106 {I18NextService.i18n.t("registration_applications")}
109 {this.applicationList(apps)}
111 page={this.state.page}
112 onChange={this.handlePageChange}
123 <div className="registration-applications container-lg">
129 unreadOrAllRadios() {
130 const radioId = randomStr();
133 <div className="btn-group btn-group-toggle flex-wrap mb-2" role="group">
135 id={`${radioId}-unread`}
137 className="btn-check"
138 value={UnreadOrAll.Unread}
139 checked={this.state.unreadOrAll === UnreadOrAll.Unread}
140 onChange={linkEvent(this, this.handleUnreadOrAllChange)}
143 htmlFor={`${radioId}-unread`}
144 className={classNames("btn btn-outline-secondary pointer", {
145 active: this.state.unreadOrAll === UnreadOrAll.Unread,
148 {I18NextService.i18n.t("unread")}
152 id={`${radioId}-all`}
154 className="btn-check"
155 value={UnreadOrAll.All}
156 checked={this.state.unreadOrAll === UnreadOrAll.All}
157 onChange={linkEvent(this, this.handleUnreadOrAllChange)}
160 htmlFor={`${radioId}-all`}
161 className={classNames("btn btn-outline-secondary pointer", {
162 active: this.state.unreadOrAll === UnreadOrAll.All,
165 {I18NextService.i18n.t("all")}
173 <div className="mb-2">
174 <span className="me-3">{this.unreadOrAllRadios()}</span>
179 applicationList(apps: RegistrationApplicationView[]) {
185 <RegistrationApplication
186 key={ra.registration_application.id}
188 onApproveApplication={this.handleApproveApplication}
196 handleUnreadOrAllChange(i: RegistrationApplications, event: any) {
197 i.setState({ unreadOrAll: Number(event.target.value), page: 1 });
201 handlePageChange(page: number) {
202 this.setState({ page });
206 static async fetchInitialData({
209 }: InitialFetchRequest): Promise<RegistrationApplicationsData> {
211 listRegistrationApplicationsResponse: auth
212 ? await client.listRegistrationApplications({
216 auth: auth as string,
218 : { state: "empty" },
223 const unread_only = this.state.unreadOrAll === UnreadOrAll.Unread;
225 appsRes: { state: "loading" },
228 appsRes: await HttpService.client.listRegistrationApplications({
229 unread_only: unread_only,
230 page: this.state.page,
232 auth: myAuthRequired(),
237 async handleApproveApplication(form: ApproveRegistrationApplication) {
238 const approveRes = await HttpService.client.approveRegistrationApplication(
242 if (s.appsRes.state === "success" && approveRes.state === "success") {
243 s.appsRes.data.registration_applications = editRegistrationApplication(
244 approveRes.data.registration_application,
245 s.appsRes.data.registration_applications,