-import { None, Option, Some } from "@sniptt/monads";
import { Component, linkEvent } from "inferno";
import {
CommentReportResponse,
PostReportView,
PrivateMessageReportResponse,
PrivateMessageReportView,
- UserOperation,
- wsJsonToRes,
- wsUserOp,
+ ResolveCommentReport,
+ ResolvePostReport,
+ ResolvePrivateMessageReport,
} from "lemmy-js-client";
-import { Subscription } from "rxjs";
import { i18n } from "../../i18next";
import { InitialFetchRequest } from "../../interfaces";
-import { UserService, WebSocketService } from "../../services";
+import { HttpService, UserService } from "../../services";
+import { FirstLoadService } from "../../services/FirstLoadService";
+import { RequestState } from "../../services/HttpService";
import {
+ RouteDataResponse,
amAdmin,
- auth,
+ editCommentReport,
+ editPostReport,
+ editPrivateMessageReport,
fetchLimit,
- isBrowser,
+ myAuthRequired,
setIsoData,
- setupTippy,
- toast,
- updateCommentReportRes,
- updatePostReportRes,
- updatePrivateMessageReportRes,
- wsClient,
- wsSubscribe,
} from "../../utils";
import { CommentReport } from "../comment/comment-report";
import { HtmlTags } from "../common/html-tags";
PrivateMessageReport,
}
+type ReportsData = RouteDataResponse<{
+ commentReportsResponse: ListCommentReportsResponse;
+ postReportsResponse: ListPostReportsResponse;
+ privateMessageReportsResponse?: ListPrivateMessageReportsResponse;
+}>;
+
type ItemType = {
id: number;
type_: MessageEnum;
};
interface ReportsState {
- listCommentReportsResponse: Option<ListCommentReportsResponse>;
- listPostReportsResponse: Option<ListPostReportsResponse>;
- listPrivateMessageReportsResponse: Option<ListPrivateMessageReportsResponse>;
+ commentReportsRes: RequestState<ListCommentReportsResponse>;
+ postReportsRes: RequestState<ListPostReportsResponse>;
+ messageReportsRes: RequestState<ListPrivateMessageReportsResponse>;
unreadOrAll: UnreadOrAll;
messageType: MessageType;
- combined: ItemType[];
siteRes: GetSiteResponse;
page: number;
- loading: boolean;
+ isIsomorphic: boolean;
}
export class Reports extends Component<any, ReportsState> {
- private isoData = setIsoData(
- this.context,
- ListCommentReportsResponse,
- ListPostReportsResponse,
- ListPrivateMessageReportsResponse
- );
- private subscription: Subscription;
- private emptyState: ReportsState = {
- listCommentReportsResponse: None,
- listPostReportsResponse: None,
- listPrivateMessageReportsResponse: None,
+ private isoData = setIsoData<ReportsData>(this.context);
+ state: ReportsState = {
+ commentReportsRes: { state: "empty" },
+ postReportsRes: { state: "empty" },
+ messageReportsRes: { state: "empty" },
unreadOrAll: UnreadOrAll.Unread,
messageType: MessageType.All,
- combined: [],
page: 1,
siteRes: this.isoData.site_res,
- 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.isNone() && 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.handleResolveCommentReport =
+ this.handleResolveCommentReport.bind(this);
+ this.handleResolvePostReport = this.handleResolvePostReport.bind(this);
+ this.handleResolvePrivateMessageReport =
+ this.handleResolvePrivateMessageReport.bind(this);
// Only fetch the data if coming from another route
- if (this.isoData.path == this.context.router.route.match.url) {
+ if (FirstLoadService.isFirstLoad) {
+ const {
+ commentReportsResponse: commentReportsRes,
+ postReportsResponse: postReportsRes,
+ privateMessageReportsResponse: messageReportsRes,
+ } = this.isoData.routeData;
+
this.state = {
...this.state,
- listCommentReportsResponse: Some(
- this.isoData.routeData[0] as ListCommentReportsResponse
- ),
- listPostReportsResponse: Some(
- this.isoData.routeData[1] as ListPostReportsResponse
- ),
+ commentReportsRes,
+ postReportsRes,
+ isIsomorphic: true,
};
+
if (amAdmin()) {
this.state = {
...this.state,
- listPrivateMessageReportsResponse: Some(
- this.isoData.routeData[2] as ListPrivateMessageReportsResponse
- ),
+ messageReportsRes: messageReportsRes ?? { state: "empty" },
};
}
- this.state = {
- ...this.state,
- combined: this.buildCombined(),
- loading: false,
- };
- } else {
- this.refetch();
}
}
- componentWillUnmount() {
- if (isBrowser()) {
- this.subscription.unsubscribe();
+ async componentDidMount() {
+ if (!this.state.isIsomorphic) {
+ await this.refetch();
}
}
get documentTitle(): string {
- return this.state.siteRes.site_view.match({
- some: siteView =>
- UserService.Instance.myUserInfo.match({
- some: mui =>
- `@${mui.local_user_view.person.name} ${i18n.t("reports")} - ${
- siteView.site.name
- }`,
- none: "",
- }),
- none: "",
- });
+ const mui = UserService.Instance.myUserInfo;
+ return mui
+ ? `@${mui.local_user_view.person.name} ${i18n.t("reports")} - ${
+ this.state.siteRes.site_view.site.name
+ }`
+ : "";
}
render() {
return (
<div className="container-lg">
- {this.state.loading ? (
- <h5>
- <Spinner large />
- </h5>
- ) : (
- <div className="row">
- <div className="col-12">
- <HtmlTags
- title={this.documentTitle}
- path={this.context.router.route.match.url}
- description={None}
- image={None}
- />
- <h5 className="mb-2">{i18n.t("reports")}</h5>
- {this.selects()}
- {this.state.messageType == MessageType.All && this.all()}
- {this.state.messageType == MessageType.CommentReport &&
- this.commentReports()}
- {this.state.messageType == MessageType.PostReport &&
- this.postReports()}
- {this.state.messageType == MessageType.PrivateMessageReport &&
- this.privateMessageReports()}
- <Paginator
- page={this.state.page}
- onChange={this.handlePageChange}
- />
- </div>
+ <div className="row">
+ <div className="col-12">
+ <HtmlTags
+ title={this.documentTitle}
+ path={this.context.router.route.match.url}
+ />
+ <h5 className="mb-2">{i18n.t("reports")}</h5>
+ {this.selects()}
+ {this.section}
+ <Paginator
+ page={this.state.page}
+ onChange={this.handlePageChange}
+ />
</div>
- )}
+ </div>
</div>
);
}
+ get section() {
+ switch (this.state.messageType) {
+ case MessageType.All: {
+ return this.all();
+ }
+ case MessageType.CommentReport: {
+ return this.commentReports();
+ }
+ case MessageType.PostReport: {
+ return this.postReports();
+ }
+ case MessageType.PrivateMessageReport: {
+ return this.privateMessageReports();
+ }
+
+ default: {
+ return null;
+ }
+ }
+ }
+
unreadOrAllRadios() {
return (
<div className="btn-group btn-group-toggle flex-wrap mb-2">
};
}
- buildCombined(): ItemType[] {
- let comments: ItemType[] = this.state.listCommentReportsResponse
- .map(r => r.comment_reports)
- .unwrapOr([])
- .map(r => this.commentReportToItemType(r));
- let posts: ItemType[] = this.state.listPostReportsResponse
- .map(r => r.post_reports)
- .unwrapOr([])
- .map(r => this.postReportToItemType(r));
- let privateMessages: ItemType[] =
- this.state.listPrivateMessageReportsResponse
- .map(r => r.private_message_reports)
- .unwrapOr([])
- .map(r => this.privateMessageReportToItemType(r));
+ get buildCombined(): ItemType[] {
+ const commentRes = this.state.commentReportsRes;
+ const comments =
+ commentRes.state == "success"
+ ? commentRes.data.comment_reports.map(this.commentReportToItemType)
+ : [];
+
+ const postRes = this.state.postReportsRes;
+ const posts =
+ postRes.state == "success"
+ ? postRes.data.post_reports.map(this.postReportToItemType)
+ : [];
+ const pmRes = this.state.messageReportsRes;
+ const privateMessages =
+ pmRes.state == "success"
+ ? pmRes.data.private_message_reports.map(
+ this.privateMessageReportToItemType
+ )
+ : [];
return [...comments, ...posts, ...privateMessages].sort((a, b) =>
b.published.localeCompare(a.published)
switch (i.type_) {
case MessageEnum.CommentReport:
return (
- <CommentReport key={i.id} report={i.view as CommentReportView} />
+ <CommentReport
+ key={i.id}
+ report={i.view as CommentReportView}
+ onResolveReport={this.handleResolveCommentReport}
+ />
);
case MessageEnum.PostReport:
- return <PostReport key={i.id} report={i.view as PostReportView} />;
+ return (
+ <PostReport
+ key={i.id}
+ report={i.view as PostReportView}
+ onResolveReport={this.handleResolvePostReport}
+ />
+ );
case MessageEnum.PrivateMessageReport:
return (
<PrivateMessageReport
key={i.id}
report={i.view as PrivateMessageReportView}
+ onResolveReport={this.handleResolvePrivateMessageReport}
/>
);
default:
all() {
return (
<div>
- {this.state.combined.map(i => (
+ {this.buildCombined.map(i => (
<>
<hr />
{this.renderItemType(i)}
}
commentReports() {
- return this.state.listCommentReportsResponse.match({
- some: res => (
- <div>
- {res.comment_reports.map(cr => (
- <>
- <hr />
- <CommentReport key={cr.comment_report.id} report={cr} />
- </>
- ))}
- </div>
- ),
- none: <></>,
- });
+ const res = this.state.commentReportsRes;
+ switch (res.state) {
+ case "loading":
+ return (
+ <h5>
+ <Spinner large />
+ </h5>
+ );
+ case "success": {
+ const reports = res.data.comment_reports;
+ return (
+ <div>
+ {reports.map(cr => (
+ <>
+ <hr />
+ <CommentReport
+ key={cr.comment_report.id}
+ report={cr}
+ onResolveReport={this.handleResolveCommentReport}
+ />
+ </>
+ ))}
+ </div>
+ );
+ }
+ }
}
postReports() {
- return this.state.listPostReportsResponse.match({
- some: res => (
- <div>
- {res.post_reports.map(pr => (
- <>
- <hr />
- <PostReport key={pr.post_report.id} report={pr} />
- </>
- ))}
- </div>
- ),
- none: <></>,
- });
+ const res = this.state.postReportsRes;
+ switch (res.state) {
+ case "loading":
+ return (
+ <h5>
+ <Spinner large />
+ </h5>
+ );
+ case "success": {
+ const reports = res.data.post_reports;
+ return (
+ <div>
+ {reports.map(pr => (
+ <>
+ <hr />
+ <PostReport
+ key={pr.post_report.id}
+ report={pr}
+ onResolveReport={this.handleResolvePostReport}
+ />
+ </>
+ ))}
+ </div>
+ );
+ }
+ }
}
privateMessageReports() {
- return this.state.listPrivateMessageReportsResponse.match({
- some: res => (
- <div>
- {res.private_message_reports.map(pmr => (
- <>
- <hr />
- <PrivateMessageReport
- key={pmr.private_message_report.id}
- report={pmr}
- />
- </>
- ))}
- </div>
- ),
- none: <></>,
- });
+ const res = this.state.messageReportsRes;
+ switch (res.state) {
+ case "loading":
+ return (
+ <h5>
+ <Spinner large />
+ </h5>
+ );
+ case "success": {
+ const reports = res.data.private_message_reports;
+ return (
+ <div>
+ {reports.map(pmr => (
+ <>
+ <hr />
+ <PrivateMessageReport
+ key={pmr.private_message_report.id}
+ report={pmr}
+ onResolveReport={this.handleResolvePrivateMessageReport}
+ />
+ </>
+ ))}
+ </div>
+ );
+ }
+ }
}
- handlePageChange(page: number) {
+ async handlePageChange(page: number) {
this.setState({ page });
- this.refetch();
+ await this.refetch();
}
- handleUnreadOrAllChange(i: Reports, event: any) {
+ async handleUnreadOrAllChange(i: Reports, event: any) {
i.setState({ unreadOrAll: Number(event.target.value), page: 1 });
- i.refetch();
+ await i.refetch();
}
- handleMessageTypeChange(i: Reports, event: any) {
+ async handleMessageTypeChange(i: Reports, event: any) {
i.setState({ messageType: Number(event.target.value), page: 1 });
- i.refetch();
+ await i.refetch();
}
- static fetchInitialData(req: InitialFetchRequest): Promise<any>[] {
- let promises: Promise<any>[] = [];
+ static async fetchInitialData({
+ auth,
+ client,
+ }: InitialFetchRequest): Promise<ReportsData> {
+ const unresolved_only = true;
+ const page = 1;
+ const limit = fetchLimit;
- let unresolved_only = Some(true);
- let page = Some(1);
- let limit = Some(fetchLimit);
- let community_id = None;
- let auth = req.auth.unwrap();
-
- let commentReportsForm = new ListCommentReports({
- // TODO community_id
+ const commentReportsForm: ListCommentReports = {
unresolved_only,
- community_id,
page,
limit,
- auth,
- });
- promises.push(req.client.listCommentReports(commentReportsForm));
+ auth: auth as string,
+ };
- let postReportsForm = new ListPostReports({
- // TODO community_id
+ const postReportsForm: ListPostReports = {
unresolved_only,
- community_id,
page,
limit,
- auth,
- });
- promises.push(req.client.listPostReports(postReportsForm));
+ auth: auth as string,
+ };
+
+ const data: ReportsData = {
+ commentReportsResponse: await client.listCommentReports(
+ commentReportsForm
+ ),
+ postReportsResponse: await client.listPostReports(postReportsForm),
+ };
if (amAdmin()) {
- let privateMessageReportsForm = new ListPrivateMessageReports({
+ const privateMessageReportsForm: ListPrivateMessageReports = {
unresolved_only,
page,
limit,
- auth,
- });
- promises.push(
- req.client.listPrivateMessageReports(privateMessageReportsForm)
- );
+ auth: auth as string,
+ };
+
+ data.privateMessageReportsResponse =
+ await client.listPrivateMessageReports(privateMessageReportsForm);
}
- return promises;
+ return data;
}
- refetch() {
- let unresolved_only = Some(this.state.unreadOrAll == UnreadOrAll.Unread);
- let community_id = None;
- let page = Some(this.state.page);
- let limit = Some(fetchLimit);
+ async refetch() {
+ const unresolved_only = this.state.unreadOrAll == UnreadOrAll.Unread;
+ const page = this.state.page;
+ const limit = fetchLimit;
+ const auth = myAuthRequired();
- let commentReportsForm = new ListCommentReports({
- unresolved_only,
- // TODO community_id
- community_id,
- page,
- limit,
- auth: auth().unwrap(),
+ this.setState({
+ commentReportsRes: { state: "loading" },
+ postReportsRes: { state: "loading" },
+ messageReportsRes: { state: "loading" },
});
- WebSocketService.Instance.send(
- wsClient.listCommentReports(commentReportsForm)
- );
- let postReportsForm = new ListPostReports({
+ const form:
+ | ListCommentReports
+ | ListPostReports
+ | ListPrivateMessageReports = {
unresolved_only,
- // TODO community_id
- community_id,
page,
limit,
- auth: auth().unwrap(),
+ auth,
+ };
+
+ this.setState({
+ commentReportsRes: await HttpService.client.listCommentReports(form),
+ postReportsRes: await HttpService.client.listPostReports(form),
});
- WebSocketService.Instance.send(wsClient.listPostReports(postReportsForm));
if (amAdmin()) {
- let privateMessageReportsForm = new ListPrivateMessageReports({
- unresolved_only,
- page,
- limit,
- auth: auth().unwrap(),
+ this.setState({
+ messageReportsRes: await HttpService.client.listPrivateMessageReports(
+ form
+ ),
});
- WebSocketService.Instance.send(
- wsClient.listPrivateMessageReports(privateMessageReportsForm)
- );
}
}
- 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.ListCommentReports) {
- let data = wsJsonToRes<ListCommentReportsResponse>(
- msg,
- ListCommentReportsResponse
- );
- this.setState({ listCommentReportsResponse: Some(data) });
- this.setState({ combined: this.buildCombined(), loading: false });
- // this.sendUnreadCount();
- window.scrollTo(0, 0);
- setupTippy();
- } else if (op == UserOperation.ListPostReports) {
- let data = wsJsonToRes<ListPostReportsResponse>(
- msg,
- ListPostReportsResponse
- );
- this.setState({ listPostReportsResponse: Some(data) });
- this.setState({ combined: this.buildCombined(), loading: false });
- // this.sendUnreadCount();
- window.scrollTo(0, 0);
- setupTippy();
- } else if (op == UserOperation.ListPrivateMessageReports) {
- let data = wsJsonToRes<ListPrivateMessageReportsResponse>(
- msg,
- ListPrivateMessageReportsResponse
- );
- this.setState({ listPrivateMessageReportsResponse: Some(data) });
- this.setState({ combined: this.buildCombined(), loading: false });
- // this.sendUnreadCount();
- window.scrollTo(0, 0);
- setupTippy();
- } else if (op == UserOperation.ResolvePostReport) {
- let data = wsJsonToRes<PostReportResponse>(msg, PostReportResponse);
- updatePostReportRes(
- data.post_report_view,
- this.state.listPostReportsResponse.map(r => r.post_reports).unwrapOr([])
- );
- let urcs = UserService.Instance.unreadReportCountSub;
- if (data.post_report_view.post_report.resolved) {
- urcs.next(urcs.getValue() - 1);
- } else {
- urcs.next(urcs.getValue() + 1);
+ async handleResolveCommentReport(form: ResolveCommentReport) {
+ const res = await HttpService.client.resolveCommentReport(form);
+ this.findAndUpdateCommentReport(res);
+ }
+
+ async handleResolvePostReport(form: ResolvePostReport) {
+ const res = await HttpService.client.resolvePostReport(form);
+ this.findAndUpdatePostReport(res);
+ }
+
+ async handleResolvePrivateMessageReport(form: ResolvePrivateMessageReport) {
+ const res = await HttpService.client.resolvePrivateMessageReport(form);
+ this.findAndUpdatePrivateMessageReport(res);
+ }
+
+ findAndUpdateCommentReport(res: RequestState<CommentReportResponse>) {
+ this.setState(s => {
+ if (s.commentReportsRes.state == "success" && res.state == "success") {
+ s.commentReportsRes.data.comment_reports = editCommentReport(
+ res.data.comment_report_view,
+ s.commentReportsRes.data.comment_reports
+ );
}
- this.setState(this.state);
- } else if (op == UserOperation.ResolveCommentReport) {
- let data = wsJsonToRes<CommentReportResponse>(msg, CommentReportResponse);
- updateCommentReportRes(
- data.comment_report_view,
- this.state.listCommentReportsResponse
- .map(r => r.comment_reports)
- .unwrapOr([])
- );
- let urcs = UserService.Instance.unreadReportCountSub;
- if (data.comment_report_view.comment_report.resolved) {
- urcs.next(urcs.getValue() - 1);
- } else {
- urcs.next(urcs.getValue() + 1);
+ return s;
+ });
+ }
+
+ findAndUpdatePostReport(res: RequestState<PostReportResponse>) {
+ this.setState(s => {
+ if (s.postReportsRes.state == "success" && res.state == "success") {
+ s.postReportsRes.data.post_reports = editPostReport(
+ res.data.post_report_view,
+ s.postReportsRes.data.post_reports
+ );
}
- this.setState(this.state);
- } else if (op == UserOperation.ResolvePrivateMessageReport) {
- let data = wsJsonToRes<PrivateMessageReportResponse>(
- msg,
- PrivateMessageReportResponse
- );
- updatePrivateMessageReportRes(
- data.private_message_report_view,
- this.state.listPrivateMessageReportsResponse
- .map(r => r.private_message_reports)
- .unwrapOr([])
- );
- let urcs = UserService.Instance.unreadReportCountSub;
- if (data.private_message_report_view.private_message_report.resolved) {
- urcs.next(urcs.getValue() - 1);
- } else {
- urcs.next(urcs.getValue() + 1);
+ return s;
+ });
+ }
+
+ findAndUpdatePrivateMessageReport(
+ res: RequestState<PrivateMessageReportResponse>
+ ) {
+ this.setState(s => {
+ if (s.messageReportsRes.state == "success" && res.state == "success") {
+ s.messageReportsRes.data.private_message_reports =
+ editPrivateMessageReport(
+ res.data.private_message_report_view,
+ s.messageReportsRes.data.private_message_reports
+ );
}
- this.setState(this.state);
- }
+ return s;
+ });
}
}