+import {
+ editRegistrationApplication,
+ myAuthRequired,
+ setIsoData,
+} from "@utils/app";
+import { randomStr } from "@utils/helpers";
+import { RouteDataResponse } from "@utils/types";
+import classNames from "classnames";
import { Component, linkEvent } from "inferno";
import {
- ListRegistrationApplications,
+ ApproveRegistrationApplication,
+ GetSiteResponse,
ListRegistrationApplicationsResponse,
- RegistrationApplicationResponse,
RegistrationApplicationView,
- SiteView,
- UserOperation,
} from "lemmy-js-client";
-import { Subscription } from "rxjs";
-import { i18n } from "../../i18next";
+import { fetchLimit } from "../../config";
import { InitialFetchRequest } from "../../interfaces";
-import { UserService, WebSocketService } from "../../services";
-import {
- authField,
- fetchLimit,
- isBrowser,
- setIsoData,
- setupTippy,
- toast,
- updateRegistrationApplicationRes,
- wsClient,
- wsJsonToRes,
- wsSubscribe,
- wsUserOp,
-} from "../../utils";
+import { FirstLoadService, I18NextService, UserService } from "../../services";
+import { HttpService, RequestState } from "../../services/HttpService";
+import { setupTippy } from "../../tippy";
import { HtmlTags } from "../common/html-tags";
import { Spinner } from "../common/icon";
import { Paginator } from "../common/paginator";
All,
}
+type RegistrationApplicationsData = RouteDataResponse<{
+ listRegistrationApplicationsResponse: ListRegistrationApplicationsResponse;
+}>;
+
interface RegistrationApplicationsState {
- applications: RegistrationApplicationView[];
- page: number;
- site_view: SiteView;
+ appsRes: RequestState<ListRegistrationApplicationsResponse>;
+ siteRes: GetSiteResponse;
unreadOrAll: UnreadOrAll;
- loading: boolean;
+ page: number;
+ isIsomorphic: boolean;
}
export class RegistrationApplications extends Component<
any,
RegistrationApplicationsState
> {
- private isoData = setIsoData(this.context);
- private subscription: Subscription;
- private emptyState: RegistrationApplicationsState = {
+ private isoData = setIsoData<RegistrationApplicationsData>(this.context);
+ state: RegistrationApplicationsState = {
+ appsRes: { state: "empty" },
+ siteRes: this.isoData.site_res,
unreadOrAll: UnreadOrAll.Unread,
- applications: [],
page: 1,
- site_view: this.isoData.site_res.site_view,
- loading: true,
+ isIsomorphic: false,
};
constructor(props: any, context: any) {
super(props, context);
- this.state = this.emptyState;
this.handlePageChange = this.handlePageChange.bind(this);
-
- if (!UserService.Instance.myUserInfo && isBrowser()) {
- toast(i18n.t("not_logged_in"), "danger");
- this.context.router.history.push(`/login`);
- }
-
- this.parseMessage = this.parseMessage.bind(this);
- this.subscription = wsSubscribe(this.parseMessage);
+ this.handleApproveApplication = this.handleApproveApplication.bind(this);
// Only fetch the data if coming from another route
- if (this.isoData.path == this.context.router.route.match.url) {
- this.state.applications =
- this.isoData.routeData[0].registration_applications || []; // TODO test
- this.state.loading = false;
- } else {
- this.refetch();
+ if (FirstLoadService.isFirstLoad) {
+ this.state = {
+ ...this.state,
+ appsRes: this.isoData.routeData.listRegistrationApplicationsResponse,
+ isIsomorphic: true,
+ };
}
}
- componentDidMount() {
- setupTippy();
- }
-
- componentWillUnmount() {
- if (isBrowser()) {
- this.subscription.unsubscribe();
+ async componentDidMount() {
+ if (!this.state.isIsomorphic) {
+ await this.refetch();
}
+ setupTippy();
}
get documentTitle(): string {
- return `@${
- UserService.Instance.myUserInfo.local_user_view.person.name
- } ${i18n.t("registration_applications")} - ${
- this.state.site_view.site.name
- }`;
+ const mui = UserService.Instance.myUserInfo;
+ return mui
+ ? `@${mui.local_user_view.person.name} ${I18NextService.i18n.t(
+ "registration_applications"
+ )} - ${this.state.siteRes.site_view.site.name}`
+ : "";
}
- render() {
- return (
- <div class="container">
- {this.state.loading ? (
+ renderApps() {
+ switch (this.state.appsRes.state) {
+ case "loading":
+ return (
<h5>
<Spinner large />
</h5>
- ) : (
- <div class="row">
- <div class="col-12">
+ );
+ case "success": {
+ const apps = this.state.appsRes.data.registration_applications;
+ return (
+ <div className="row">
+ <div className="col-12">
<HtmlTags
title={this.documentTitle}
path={this.context.router.route.match.url}
/>
- <h5 class="mb-2">{i18n.t("registration_applications")}</h5>
+ <h1 className="h4 mb-4">
+ {I18NextService.i18n.t("registration_applications")}
+ </h1>
{this.selects()}
- {this.applicationList()}
+ {this.applicationList(apps)}
<Paginator
page={this.state.page}
onChange={this.handlePageChange}
/>
</div>
</div>
- )}
+ );
+ }
+ }
+ }
+
+ render() {
+ return (
+ <div className="registration-applications container-lg">
+ {this.renderApps()}
</div>
);
}
unreadOrAllRadios() {
+ const radioId = randomStr();
+
return (
- <div class="btn-group btn-group-toggle flex-wrap mb-2">
+ <div className="btn-group btn-group-toggle flex-wrap mb-2" role="group">
+ <input
+ id={`${radioId}-unread`}
+ type="radio"
+ className="btn-check"
+ value={UnreadOrAll.Unread}
+ checked={this.state.unreadOrAll === UnreadOrAll.Unread}
+ onChange={linkEvent(this, this.handleUnreadOrAllChange)}
+ />
<label
- className={`btn btn-outline-secondary pointer
- ${this.state.unreadOrAll == UnreadOrAll.Unread && "active"}
- `}
+ htmlFor={`${radioId}-unread`}
+ className={classNames("btn btn-outline-secondary pointer", {
+ active: this.state.unreadOrAll === UnreadOrAll.Unread,
+ })}
>
- <input
- type="radio"
- value={UnreadOrAll.Unread}
- checked={this.state.unreadOrAll == UnreadOrAll.Unread}
- onChange={linkEvent(this, this.handleUnreadOrAllChange)}
- />
- {i18n.t("unread")}
+ {I18NextService.i18n.t("unread")}
</label>
+
+ <input
+ id={`${radioId}-all`}
+ type="radio"
+ className="btn-check"
+ value={UnreadOrAll.All}
+ checked={this.state.unreadOrAll === UnreadOrAll.All}
+ onChange={linkEvent(this, this.handleUnreadOrAllChange)}
+ />
<label
- className={`btn btn-outline-secondary pointer
- ${this.state.unreadOrAll == UnreadOrAll.All && "active"}
- `}
+ htmlFor={`${radioId}-all`}
+ className={classNames("btn btn-outline-secondary pointer", {
+ active: this.state.unreadOrAll === UnreadOrAll.All,
+ })}
>
- <input
- type="radio"
- value={UnreadOrAll.All}
- checked={this.state.unreadOrAll == UnreadOrAll.All}
- onChange={linkEvent(this, this.handleUnreadOrAllChange)}
- />
- {i18n.t("all")}
+ {I18NextService.i18n.t("all")}
</label>
</div>
);
selects() {
return (
<div className="mb-2">
- <span class="mr-3">{this.unreadOrAllRadios()}</span>
+ <span className="me-3">{this.unreadOrAllRadios()}</span>
</div>
);
}
- applicationList() {
+ applicationList(apps: RegistrationApplicationView[]) {
return (
<div>
- {this.state.applications.map(ra => (
+ {apps.map(ra => (
<>
<hr />
<RegistrationApplication
key={ra.registration_application.id}
application={ra}
+ onApproveApplication={this.handleApproveApplication}
/>
</>
))}
}
handleUnreadOrAllChange(i: RegistrationApplications, event: any) {
- i.state.unreadOrAll = Number(event.target.value);
- i.state.page = 1;
- i.setState(i.state);
+ i.setState({ unreadOrAll: Number(event.target.value), page: 1 });
i.refetch();
}
this.refetch();
}
- static fetchInitialData(req: InitialFetchRequest): Promise<any>[] {
- let promises: Promise<any>[] = [];
-
- let form: ListRegistrationApplications = {
- unread_only: true,
- page: 1,
- limit: fetchLimit,
- auth: req.auth,
+ static async fetchInitialData({
+ auth,
+ client,
+ }: InitialFetchRequest): Promise<RegistrationApplicationsData> {
+ return {
+ listRegistrationApplicationsResponse: auth
+ ? await client.listRegistrationApplications({
+ unread_only: true,
+ page: 1,
+ limit: fetchLimit,
+ auth: auth as string,
+ })
+ : { state: "empty" },
};
- promises.push(req.client.listRegistrationApplications(form));
-
- return promises;
}
- refetch() {
- let unread_only = this.state.unreadOrAll == UnreadOrAll.Unread;
- let form: ListRegistrationApplications = {
- unread_only: unread_only,
- page: this.state.page,
- limit: fetchLimit,
- auth: authField(),
- };
- WebSocketService.Instance.send(wsClient.listRegistrationApplications(form));
+ 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(),
+ }),
+ });
}
- parseMessage(msg: any) {
- let op = wsUserOp(msg);
- console.log(msg);
- if (msg.error) {
- toast(i18n.t(msg.error), "danger");
- return;
- } else if (msg.reconnect) {
- this.refetch();
- } else if (op == UserOperation.ListRegistrationApplications) {
- let data = wsJsonToRes<ListRegistrationApplicationsResponse>(msg).data;
- this.state.applications = data.registration_applications;
- this.state.loading = false;
- window.scrollTo(0, 0);
- this.setState(this.state);
- } else if (op == UserOperation.ApproveRegistrationApplication) {
- let data = wsJsonToRes<RegistrationApplicationResponse>(msg).data;
- updateRegistrationApplicationRes(
- data.registration_application,
- this.state.applications
- );
- let uacs = UserService.Instance.unreadApplicationCountSub;
- // Minor bug, where if the application switches from deny to approve, the count will still go down
- uacs.next(uacs.getValue() - 1);
- this.setState(this.state);
- }
+ 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;
+ });
}
}
projects / lemmy-ui.git / blobdiff