import { Component, linkEvent } from "inferno"; import { ApproveRegistrationApplication, GetSiteResponse, ListRegistrationApplicationsResponse, RegistrationApplicationView, } from "lemmy-js-client"; import { i18n } from "../../i18next"; import { InitialFetchRequest } from "../../interfaces"; import { UserService } from "../../services"; import { FirstLoadService } from "../../services/FirstLoadService"; import { HttpService, RequestState } from "../../services/HttpService"; import { RouteDataResponse, editRegistrationApplication, fetchLimit, myAuthRequired, setIsoData, setupTippy, } from "../../utils"; import { HtmlTags } from "../common/html-tags"; import { Spinner } from "../common/icon"; import { Paginator } from "../common/paginator"; import { RegistrationApplication } from "../common/registration-application"; enum UnreadOrAll { Unread, All, } type RegistrationApplicationsData = RouteDataResponse<{ listRegistrationApplicationsResponse: ListRegistrationApplicationsResponse; }>; interface RegistrationApplicationsState { appsRes: RequestState; siteRes: GetSiteResponse; unreadOrAll: UnreadOrAll; page: number; isIsomorphic: boolean; } export class RegistrationApplications extends Component< any, RegistrationApplicationsState > { private isoData = setIsoData(this.context); state: RegistrationApplicationsState = { appsRes: { state: "empty" }, siteRes: this.isoData.site_res, unreadOrAll: UnreadOrAll.Unread, page: 1, isIsomorphic: false, }; constructor(props: any, context: any) { super(props, context); this.handlePageChange = this.handlePageChange.bind(this); this.handleApproveApplication = this.handleApproveApplication.bind(this); // Only fetch the data if coming from another route if (FirstLoadService.isFirstLoad) { this.state = { ...this.state, appsRes: this.isoData.routeData.listRegistrationApplicationsResponse, isIsomorphic: true, }; } } async componentDidMount() { if (!this.state.isIsomorphic) { await this.refetch(); } setupTippy(); } get documentTitle(): string { const mui = UserService.Instance.myUserInfo; return mui ? `@${mui.local_user_view.person.name} ${i18n.t( "registration_applications" )} - ${this.state.siteRes.site_view.site.name}` : ""; } renderApps() { switch (this.state.appsRes.state) { case "loading": return (
); case "success": { const apps = this.state.appsRes.data.registration_applications; return (
{i18n.t("registration_applications")}
{this.selects()} {this.applicationList(apps)}
); } } } render() { return
{this.renderApps()}
; } unreadOrAllRadios() { return (
); } selects() { return (
{this.unreadOrAllRadios()}
); } applicationList(apps: RegistrationApplicationView[]) { return (
{apps.map(ra => ( <>
))}
); } handleUnreadOrAllChange(i: RegistrationApplications, event: any) { i.setState({ unreadOrAll: Number(event.target.value), page: 1 }); i.refetch(); } handlePageChange(page: number) { this.setState({ page }); this.refetch(); } static async fetchInitialData({ auth, client, }: InitialFetchRequest): Promise { return { listRegistrationApplicationsResponse: auth ? await client.listRegistrationApplications({ unread_only: true, page: 1, limit: fetchLimit, auth: auth as string, }) : { state: "empty" }, }; } async refetch() { const unread_only = this.state.unreadOrAll == UnreadOrAll.Unread; this.setState({ appsRes: { state: "loading" }, }); this.setState({ appsRes: await HttpService.client.listRegistrationApplications({ unread_only: unread_only, page: this.state.page, limit: fetchLimit, auth: myAuthRequired(), }), }); } async handleApproveApplication(form: ApproveRegistrationApplication) { const approveRes = await HttpService.client.approveRegistrationApplication( form ); this.setState(s => { if (s.appsRes.state == "success" && approveRes.state == "success") { s.appsRes.data.registration_applications = editRegistrationApplication( approveRes.data.registration_application, s.appsRes.data.registration_applications ); } return s; }); } }