1 import { Component, linkEvent } from "inferno";
7 ListCommentReportsResponse,
9 ListPostReportsResponse,
10 ListPrivateMessageReports,
11 ListPrivateMessageReportsResponse,
14 PrivateMessageReportResponse,
15 PrivateMessageReportView,
19 } from "lemmy-js-client";
20 import { Subscription } from "rxjs";
21 import { i18n } from "../../i18next";
22 import { InitialFetchRequest } from "../../interfaces";
23 import { UserService, WebSocketService } from "../../services";
32 updateCommentReportRes,
34 updatePrivateMessageReportRes,
38 import { CommentReport } from "../comment/comment-report";
39 import { HtmlTags } from "../common/html-tags";
40 import { Spinner } from "../common/icon";
41 import { Paginator } from "../common/paginator";
42 import { PostReport } from "../post/post-report";
43 import { PrivateMessageReport } from "../private_message/private-message-report";
66 view: CommentReportView | PostReportView | PrivateMessageReportView;
70 interface ReportsState {
71 listCommentReportsResponse?: ListCommentReportsResponse;
72 listPostReportsResponse?: ListPostReportsResponse;
73 listPrivateMessageReportsResponse?: ListPrivateMessageReportsResponse;
74 unreadOrAll: UnreadOrAll;
75 messageType: MessageType;
77 siteRes: GetSiteResponse;
82 export class Reports extends Component<any, ReportsState> {
83 private isoData = setIsoData(this.context);
84 private subscription?: Subscription;
85 state: ReportsState = {
86 unreadOrAll: UnreadOrAll.Unread,
87 messageType: MessageType.All,
90 siteRes: this.isoData.site_res,
94 constructor(props: any, context: any) {
95 super(props, context);
97 this.handlePageChange = this.handlePageChange.bind(this);
99 if (!UserService.Instance.myUserInfo && isBrowser()) {
100 toast(i18n.t("not_logged_in"), "danger");
101 this.context.router.history.push(`/login`);
104 this.parseMessage = this.parseMessage.bind(this);
105 this.subscription = wsSubscribe(this.parseMessage);
107 // Only fetch the data if coming from another route
108 if (this.isoData.path == this.context.router.route.match.url) {
111 listCommentReportsResponse: this.isoData
112 .routeData[0] as ListCommentReportsResponse,
113 listPostReportsResponse: this.isoData
114 .routeData[1] as ListPostReportsResponse,
119 listPrivateMessageReportsResponse: this.isoData
120 .routeData[2] as ListPrivateMessageReportsResponse,
125 combined: this.buildCombined(),
133 componentWillUnmount() {
135 this.subscription?.unsubscribe();
139 get documentTitle(): string {
140 let mui = UserService.Instance.myUserInfo;
142 ? `@${mui.local_user_view.person.name} ${i18n.t("reports")} - ${
143 this.state.siteRes.site_view.site.name
150 <div className="container-lg">
151 {this.state.loading ? (
156 <div className="row">
157 <div className="col-12">
159 title={this.documentTitle}
160 path={this.context.router.route.match.url}
162 <h5 className="mb-2">{i18n.t("reports")}</h5>
164 {this.state.messageType == MessageType.All && this.all()}
165 {this.state.messageType == MessageType.CommentReport &&
166 this.commentReports()}
167 {this.state.messageType == MessageType.PostReport &&
169 {this.state.messageType == MessageType.PrivateMessageReport &&
170 this.privateMessageReports()}
172 page={this.state.page}
173 onChange={this.handlePageChange}
182 unreadOrAllRadios() {
184 <div className="btn-group btn-group-toggle flex-wrap mb-2">
186 className={`btn btn-outline-secondary pointer
187 ${this.state.unreadOrAll == UnreadOrAll.Unread && "active"}
192 value={UnreadOrAll.Unread}
193 checked={this.state.unreadOrAll == UnreadOrAll.Unread}
194 onChange={linkEvent(this, this.handleUnreadOrAllChange)}
199 className={`btn btn-outline-secondary pointer
200 ${this.state.unreadOrAll == UnreadOrAll.All && "active"}
205 value={UnreadOrAll.All}
206 checked={this.state.unreadOrAll == UnreadOrAll.All}
207 onChange={linkEvent(this, this.handleUnreadOrAllChange)}
215 messageTypeRadios() {
217 <div className="btn-group btn-group-toggle flex-wrap mb-2">
219 className={`btn btn-outline-secondary pointer
220 ${this.state.messageType == MessageType.All && "active"}
225 value={MessageType.All}
226 checked={this.state.messageType == MessageType.All}
227 onChange={linkEvent(this, this.handleMessageTypeChange)}
232 className={`btn btn-outline-secondary pointer
233 ${this.state.messageType == MessageType.CommentReport && "active"}
238 value={MessageType.CommentReport}
239 checked={this.state.messageType == MessageType.CommentReport}
240 onChange={linkEvent(this, this.handleMessageTypeChange)}
245 className={`btn btn-outline-secondary pointer
246 ${this.state.messageType == MessageType.PostReport && "active"}
251 value={MessageType.PostReport}
252 checked={this.state.messageType == MessageType.PostReport}
253 onChange={linkEvent(this, this.handleMessageTypeChange)}
259 className={`btn btn-outline-secondary pointer
261 this.state.messageType == MessageType.PrivateMessageReport &&
268 value={MessageType.PrivateMessageReport}
270 this.state.messageType == MessageType.PrivateMessageReport
272 onChange={linkEvent(this, this.handleMessageTypeChange)}
283 <div className="mb-2">
284 <span className="mr-3">{this.unreadOrAllRadios()}</span>
285 <span className="mr-3">{this.messageTypeRadios()}</span>
290 commentReportToItemType(r: CommentReportView): ItemType {
292 id: r.comment_report.id,
293 type_: MessageEnum.CommentReport,
295 published: r.comment_report.published,
299 postReportToItemType(r: PostReportView): ItemType {
301 id: r.post_report.id,
302 type_: MessageEnum.PostReport,
304 published: r.post_report.published,
308 privateMessageReportToItemType(r: PrivateMessageReportView): ItemType {
310 id: r.private_message_report.id,
311 type_: MessageEnum.PrivateMessageReport,
313 published: r.private_message_report.published,
317 buildCombined(): ItemType[] {
318 // let comments: ItemType[] = this.state.listCommentReportsResponse
319 // .map(r => r.comment_reports)
321 // .map(r => this.commentReportToItemType(r));
323 this.state.listCommentReportsResponse?.comment_reports.map(
324 this.commentReportToItemType
327 this.state.listPostReportsResponse?.post_reports.map(
328 this.postReportToItemType
330 let privateMessages =
331 this.state.listPrivateMessageReportsResponse?.private_message_reports.map(
332 this.privateMessageReportToItemType
335 return [...comments, ...posts, ...privateMessages].sort((a, b) =>
336 b.published.localeCompare(a.published)
340 renderItemType(i: ItemType) {
342 case MessageEnum.CommentReport:
344 <CommentReport key={i.id} report={i.view as CommentReportView} />
346 case MessageEnum.PostReport:
347 return <PostReport key={i.id} report={i.view as PostReportView} />;
348 case MessageEnum.PrivateMessageReport:
350 <PrivateMessageReport
352 report={i.view as PrivateMessageReportView}
363 {this.state.combined.map(i => (
366 {this.renderItemType(i)}
374 let reports = this.state.listCommentReportsResponse?.comment_reports;
381 <CommentReport key={cr.comment_report.id} report={cr} />
390 let reports = this.state.listPostReportsResponse?.post_reports;
397 <PostReport key={pr.post_report.id} report={pr} />
405 privateMessageReports() {
407 this.state.listPrivateMessageReportsResponse?.private_message_reports;
411 {reports.map(pmr => (
414 <PrivateMessageReport
415 key={pmr.private_message_report.id}
425 handlePageChange(page: number) {
426 this.setState({ page });
430 handleUnreadOrAllChange(i: Reports, event: any) {
431 i.setState({ unreadOrAll: Number(event.target.value), page: 1 });
435 handleMessageTypeChange(i: Reports, event: any) {
436 i.setState({ messageType: Number(event.target.value), page: 1 });
440 static fetchInitialData(req: InitialFetchRequest): Promise<any>[] {
441 let promises: Promise<any>[] = [];
443 let unresolved_only = true;
445 let limit = fetchLimit;
449 let commentReportsForm: ListCommentReports = {
455 promises.push(req.client.listCommentReports(commentReportsForm));
457 let postReportsForm: ListPostReports = {
463 promises.push(req.client.listPostReports(postReportsForm));
466 let privateMessageReportsForm: ListPrivateMessageReports = {
473 req.client.listPrivateMessageReports(privateMessageReportsForm)
482 let unresolved_only = this.state.unreadOrAll == UnreadOrAll.Unread;
483 let page = this.state.page;
484 let limit = fetchLimit;
487 let commentReportsForm: ListCommentReports = {
493 WebSocketService.Instance.send(
494 wsClient.listCommentReports(commentReportsForm)
497 let postReportsForm: ListPostReports = {
503 WebSocketService.Instance.send(wsClient.listPostReports(postReportsForm));
506 let privateMessageReportsForm: ListPrivateMessageReports = {
512 WebSocketService.Instance.send(
513 wsClient.listPrivateMessageReports(privateMessageReportsForm)
519 parseMessage(msg: any) {
520 let op = wsUserOp(msg);
523 toast(i18n.t(msg.error), "danger");
525 } else if (msg.reconnect) {
527 } else if (op == UserOperation.ListCommentReports) {
528 let data = wsJsonToRes<ListCommentReportsResponse>(msg);
529 this.setState({ listCommentReportsResponse: data });
530 this.setState({ combined: this.buildCombined(), loading: false });
531 // this.sendUnreadCount();
532 window.scrollTo(0, 0);
534 } else if (op == UserOperation.ListPostReports) {
535 let data = wsJsonToRes<ListPostReportsResponse>(msg);
536 this.setState({ listPostReportsResponse: data });
537 this.setState({ combined: this.buildCombined(), loading: false });
538 // this.sendUnreadCount();
539 window.scrollTo(0, 0);
541 } else if (op == UserOperation.ListPrivateMessageReports) {
542 let data = wsJsonToRes<ListPrivateMessageReportsResponse>(msg);
543 this.setState({ listPrivateMessageReportsResponse: data });
544 this.setState({ combined: this.buildCombined(), loading: false });
545 // this.sendUnreadCount();
546 window.scrollTo(0, 0);
548 } else if (op == UserOperation.ResolvePostReport) {
549 let data = wsJsonToRes<PostReportResponse>(msg);
551 data.post_report_view,
552 this.state.listPostReportsResponse?.post_reports
554 let urcs = UserService.Instance.unreadReportCountSub;
555 if (data.post_report_view.post_report.resolved) {
556 urcs.next(urcs.getValue() - 1);
558 urcs.next(urcs.getValue() + 1);
560 this.setState(this.state);
561 } else if (op == UserOperation.ResolveCommentReport) {
562 let data = wsJsonToRes<CommentReportResponse>(msg);
563 updateCommentReportRes(
564 data.comment_report_view,
565 this.state.listCommentReportsResponse?.comment_reports
567 let urcs = UserService.Instance.unreadReportCountSub;
568 if (data.comment_report_view.comment_report.resolved) {
569 urcs.next(urcs.getValue() - 1);
571 urcs.next(urcs.getValue() + 1);
573 this.setState(this.state);
574 } else if (op == UserOperation.ResolvePrivateMessageReport) {
575 let data = wsJsonToRes<PrivateMessageReportResponse>(msg);
576 updatePrivateMessageReportRes(
577 data.private_message_report_view,
578 this.state.listPrivateMessageReportsResponse?.private_message_reports
580 let urcs = UserService.Instance.unreadReportCountSub;
581 if (data.private_message_report_view.private_message_report.resolved) {
582 urcs.next(urcs.getValue() - 1);
584 urcs.next(urcs.getValue() + 1);
586 this.setState(this.state);