1 import { Component, linkEvent } from "inferno";
7 ListCommentReportsResponse,
9 ListPostReportsResponse,
10 ListPrivateMessageReports,
11 ListPrivateMessageReportsResponse,
14 PrivateMessageReportResponse,
15 PrivateMessageReportView,
18 ResolvePrivateMessageReport,
19 } from "lemmy-js-client";
20 import { i18n } from "../../i18next";
21 import { InitialFetchRequest } from "../../interfaces";
22 import { HttpService, UserService } from "../../services";
23 import { FirstLoadService } from "../../services/FirstLoadService";
24 import { RequestState } from "../../services/HttpService";
29 editPrivateMessageReport,
34 import { CommentReport } from "../comment/comment-report";
35 import { HtmlTags } from "../common/html-tags";
36 import { Spinner } from "../common/icon";
37 import { Paginator } from "../common/paginator";
38 import { PostReport } from "../post/post-report";
39 import { PrivateMessageReport } from "../private_message/private-message-report";
62 view: CommentReportView | PostReportView | PrivateMessageReportView;
66 interface ReportsState {
67 commentReportsRes: RequestState<ListCommentReportsResponse>;
68 postReportsRes: RequestState<ListPostReportsResponse>;
69 messageReportsRes: RequestState<ListPrivateMessageReportsResponse>;
70 unreadOrAll: UnreadOrAll;
71 messageType: MessageType;
72 siteRes: GetSiteResponse;
74 isIsomorphic: boolean;
77 export class Reports extends Component<any, ReportsState> {
78 private isoData = setIsoData(this.context);
79 state: ReportsState = {
80 commentReportsRes: { state: "empty" },
81 postReportsRes: { state: "empty" },
82 messageReportsRes: { state: "empty" },
83 unreadOrAll: UnreadOrAll.Unread,
84 messageType: MessageType.All,
86 siteRes: this.isoData.site_res,
90 constructor(props: any, context: any) {
91 super(props, context);
93 this.handlePageChange = this.handlePageChange.bind(this);
94 this.handleResolveCommentReport =
95 this.handleResolveCommentReport.bind(this);
96 this.handleResolvePostReport = this.handleResolvePostReport.bind(this);
97 this.handleResolvePrivateMessageReport =
98 this.handleResolvePrivateMessageReport.bind(this);
100 // Only fetch the data if coming from another route
101 if (FirstLoadService.isFirstLoad) {
102 const [commentReportsRes, postReportsRes, messageReportsRes] =
103 this.isoData.routeData;
120 async componentDidMount() {
121 if (!this.state.isIsomorphic) {
122 await this.refetch();
126 get documentTitle(): string {
127 const mui = UserService.Instance.myUserInfo;
129 ? `@${mui.local_user_view.person.name} ${i18n.t("reports")} - ${
130 this.state.siteRes.site_view.site.name
137 <div className="container-lg">
138 <div className="row">
139 <div className="col-12">
141 title={this.documentTitle}
142 path={this.context.router.route.match.url}
144 <h5 className="mb-2">{i18n.t("reports")}</h5>
148 page={this.state.page}
149 onChange={this.handlePageChange}
158 switch (this.state.messageType) {
159 case MessageType.All: {
162 case MessageType.CommentReport: {
163 return this.commentReports();
165 case MessageType.PostReport: {
166 return this.postReports();
168 case MessageType.PrivateMessageReport: {
169 return this.privateMessageReports();
178 unreadOrAllRadios() {
180 <div className="btn-group btn-group-toggle flex-wrap mb-2">
182 className={`btn btn-outline-secondary pointer
183 ${this.state.unreadOrAll == UnreadOrAll.Unread && "active"}
188 value={UnreadOrAll.Unread}
189 checked={this.state.unreadOrAll == UnreadOrAll.Unread}
190 onChange={linkEvent(this, this.handleUnreadOrAllChange)}
195 className={`btn btn-outline-secondary pointer
196 ${this.state.unreadOrAll == UnreadOrAll.All && "active"}
201 value={UnreadOrAll.All}
202 checked={this.state.unreadOrAll == UnreadOrAll.All}
203 onChange={linkEvent(this, this.handleUnreadOrAllChange)}
211 messageTypeRadios() {
213 <div className="btn-group btn-group-toggle flex-wrap mb-2">
215 className={`btn btn-outline-secondary pointer
216 ${this.state.messageType == MessageType.All && "active"}
221 value={MessageType.All}
222 checked={this.state.messageType == MessageType.All}
223 onChange={linkEvent(this, this.handleMessageTypeChange)}
228 className={`btn btn-outline-secondary pointer
229 ${this.state.messageType == MessageType.CommentReport && "active"}
234 value={MessageType.CommentReport}
235 checked={this.state.messageType == MessageType.CommentReport}
236 onChange={linkEvent(this, this.handleMessageTypeChange)}
241 className={`btn btn-outline-secondary pointer
242 ${this.state.messageType == MessageType.PostReport && "active"}
247 value={MessageType.PostReport}
248 checked={this.state.messageType == MessageType.PostReport}
249 onChange={linkEvent(this, this.handleMessageTypeChange)}
255 className={`btn btn-outline-secondary pointer
257 this.state.messageType == MessageType.PrivateMessageReport &&
264 value={MessageType.PrivateMessageReport}
266 this.state.messageType == MessageType.PrivateMessageReport
268 onChange={linkEvent(this, this.handleMessageTypeChange)}
279 <div className="mb-2">
280 <span className="mr-3">{this.unreadOrAllRadios()}</span>
281 <span className="mr-3">{this.messageTypeRadios()}</span>
286 commentReportToItemType(r: CommentReportView): ItemType {
288 id: r.comment_report.id,
289 type_: MessageEnum.CommentReport,
291 published: r.comment_report.published,
295 postReportToItemType(r: PostReportView): ItemType {
297 id: r.post_report.id,
298 type_: MessageEnum.PostReport,
300 published: r.post_report.published,
304 privateMessageReportToItemType(r: PrivateMessageReportView): ItemType {
306 id: r.private_message_report.id,
307 type_: MessageEnum.PrivateMessageReport,
309 published: r.private_message_report.published,
313 get buildCombined(): ItemType[] {
314 const commentRes = this.state.commentReportsRes;
316 commentRes.state == "success"
317 ? commentRes.data.comment_reports.map(this.commentReportToItemType)
320 const postRes = this.state.postReportsRes;
322 postRes.state == "success"
323 ? postRes.data.post_reports.map(this.postReportToItemType)
325 const pmRes = this.state.messageReportsRes;
326 const privateMessages =
327 pmRes.state == "success"
328 ? pmRes.data.private_message_reports.map(
329 this.privateMessageReportToItemType
333 return [...comments, ...posts, ...privateMessages].sort((a, b) =>
334 b.published.localeCompare(a.published)
338 renderItemType(i: ItemType) {
340 case MessageEnum.CommentReport:
344 report={i.view as CommentReportView}
345 onResolveReport={this.handleResolveCommentReport}
348 case MessageEnum.PostReport:
352 report={i.view as PostReportView}
353 onResolveReport={this.handleResolvePostReport}
356 case MessageEnum.PrivateMessageReport:
358 <PrivateMessageReport
360 report={i.view as PrivateMessageReportView}
361 onResolveReport={this.handleResolvePrivateMessageReport}
372 {this.buildCombined.map(i => (
375 {this.renderItemType(i)}
383 const res = this.state.commentReportsRes;
392 const reports = res.data.comment_reports;
399 key={cr.comment_report.id}
401 onResolveReport={this.handleResolveCommentReport}
412 const res = this.state.postReportsRes;
421 const reports = res.data.post_reports;
428 key={pr.post_report.id}
430 onResolveReport={this.handleResolvePostReport}
440 privateMessageReports() {
441 const res = this.state.messageReportsRes;
450 const reports = res.data.private_message_reports;
453 {reports.map(pmr => (
456 <PrivateMessageReport
457 key={pmr.private_message_report.id}
459 onResolveReport={this.handleResolvePrivateMessageReport}
469 async handlePageChange(page: number) {
470 this.setState({ page });
471 await this.refetch();
474 async handleUnreadOrAllChange(i: Reports, event: any) {
475 i.setState({ unreadOrAll: Number(event.target.value), page: 1 });
479 async handleMessageTypeChange(i: Reports, event: any) {
480 i.setState({ messageType: Number(event.target.value), page: 1 });
484 static fetchInitialData({
487 }: InitialFetchRequest): Promise<any>[] {
488 const promises: Promise<RequestState<any>>[] = [];
490 const unresolved_only = true;
492 const limit = fetchLimit;
495 const commentReportsForm: ListCommentReports = {
501 promises.push(client.listCommentReports(commentReportsForm));
503 const postReportsForm: ListPostReports = {
509 promises.push(client.listPostReports(postReportsForm));
512 const privateMessageReportsForm: ListPrivateMessageReports = {
519 client.listPrivateMessageReports(privateMessageReportsForm)
522 promises.push(Promise.resolve({ state: "empty" }));
526 Promise.resolve({ state: "empty" }),
527 Promise.resolve({ state: "empty" }),
528 Promise.resolve({ state: "empty" })
536 const unresolved_only = this.state.unreadOrAll == UnreadOrAll.Unread;
537 const page = this.state.page;
538 const limit = fetchLimit;
539 const auth = myAuthRequired();
542 commentReportsRes: { state: "loading" },
543 postReportsRes: { state: "loading" },
544 messageReportsRes: { state: "loading" },
550 | ListPrivateMessageReports = {
558 commentReportsRes: await HttpService.client.listCommentReports(form),
559 postReportsRes: await HttpService.client.listPostReports(form),
564 messageReportsRes: await HttpService.client.listPrivateMessageReports(
571 async handleResolveCommentReport(form: ResolveCommentReport) {
572 const res = await HttpService.client.resolveCommentReport(form);
573 this.findAndUpdateCommentReport(res);
576 async handleResolvePostReport(form: ResolvePostReport) {
577 const res = await HttpService.client.resolvePostReport(form);
578 this.findAndUpdatePostReport(res);
581 async handleResolvePrivateMessageReport(form: ResolvePrivateMessageReport) {
582 const res = await HttpService.client.resolvePrivateMessageReport(form);
583 this.findAndUpdatePrivateMessageReport(res);
586 findAndUpdateCommentReport(res: RequestState<CommentReportResponse>) {
588 if (s.commentReportsRes.state == "success" && res.state == "success") {
589 s.commentReportsRes.data.comment_reports = editCommentReport(
590 res.data.comment_report_view,
591 s.commentReportsRes.data.comment_reports
598 findAndUpdatePostReport(res: RequestState<PostReportResponse>) {
600 if (s.postReportsRes.state == "success" && res.state == "success") {
601 s.postReportsRes.data.post_reports = editPostReport(
602 res.data.post_report_view,
603 s.postReportsRes.data.post_reports
610 findAndUpdatePrivateMessageReport(
611 res: RequestState<PrivateMessageReportResponse>
614 if (s.messageReportsRes.state == "success" && res.state == "success") {
615 s.messageReportsRes.data.private_message_reports =
616 editPrivateMessageReport(
617 res.data.private_message_report_view,
618 s.messageReportsRes.data.private_message_reports