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";
33 updateCommentReportRes,
35 updatePrivateMessageReportRes,
39 import { CommentReport } from "../comment/comment-report";
40 import { HtmlTags } from "../common/html-tags";
41 import { Spinner } from "../common/icon";
42 import { Paginator } from "../common/paginator";
43 import { PostReport } from "../post/post-report";
44 import { PrivateMessageReport } from "../private_message/private-message-report";
64 interface ReportsData {
65 commentReportsResponse: ListCommentReportsResponse;
66 postReportsResponse: ListPostReportsResponse;
67 privateMessageReportsResponse?: ListPrivateMessageReportsResponse;
73 view: CommentReportView | PostReportView | PrivateMessageReportView;
77 interface ReportsState {
78 listCommentReportsResponse?: ListCommentReportsResponse;
79 listPostReportsResponse?: ListPostReportsResponse;
80 listPrivateMessageReportsResponse?: ListPrivateMessageReportsResponse;
81 unreadOrAll: UnreadOrAll;
82 messageType: MessageType;
84 siteRes: GetSiteResponse;
89 export class Reports extends Component<any, ReportsState> {
90 private isoData = setIsoData<ReportsData>(this.context);
91 private subscription?: Subscription;
92 state: ReportsState = {
93 unreadOrAll: UnreadOrAll.Unread,
94 messageType: MessageType.All,
97 siteRes: this.isoData.site_res,
101 constructor(props: any, context: any) {
102 super(props, context);
104 this.handlePageChange = this.handlePageChange.bind(this);
106 this.parseMessage = this.parseMessage.bind(this);
107 this.subscription = wsSubscribe(this.parseMessage);
109 // Only fetch the data if coming from another route
110 if (this.isoData.path === this.context.router.route.match.url) {
112 commentReportsResponse,
114 privateMessageReportsResponse,
115 } = this.isoData.routeData;
119 listCommentReportsResponse: commentReportsResponse,
120 listPostReportsResponse: postReportsResponse,
121 listPrivateMessageReportsResponse: privateMessageReportsResponse,
126 combined: this.buildCombined(),
134 componentWillUnmount() {
136 this.subscription?.unsubscribe();
140 get documentTitle(): string {
141 let mui = UserService.Instance.myUserInfo;
143 ? `@${mui.local_user_view.person.name} ${i18n.t("reports")} - ${
144 this.state.siteRes.site_view.site.name
151 <div className="container-lg">
152 {this.state.loading ? (
157 <div className="row">
158 <div className="col-12">
160 title={this.documentTitle}
161 path={this.context.router.route.match.url}
163 <h5 className="mb-2">{i18n.t("reports")}</h5>
165 {this.state.messageType == MessageType.All && this.all()}
166 {this.state.messageType == MessageType.CommentReport &&
167 this.commentReports()}
168 {this.state.messageType == MessageType.PostReport &&
170 {this.state.messageType == MessageType.PrivateMessageReport &&
171 this.privateMessageReports()}
173 page={this.state.page}
174 onChange={this.handlePageChange}
183 unreadOrAllRadios() {
185 <div className="btn-group btn-group-toggle flex-wrap mb-2">
187 className={`btn btn-outline-secondary pointer
188 ${this.state.unreadOrAll == UnreadOrAll.Unread && "active"}
193 value={UnreadOrAll.Unread}
194 checked={this.state.unreadOrAll == UnreadOrAll.Unread}
195 onChange={linkEvent(this, this.handleUnreadOrAllChange)}
200 className={`btn btn-outline-secondary pointer
201 ${this.state.unreadOrAll == UnreadOrAll.All && "active"}
206 value={UnreadOrAll.All}
207 checked={this.state.unreadOrAll == UnreadOrAll.All}
208 onChange={linkEvent(this, this.handleUnreadOrAllChange)}
216 messageTypeRadios() {
218 <div className="btn-group btn-group-toggle flex-wrap mb-2">
220 className={`btn btn-outline-secondary pointer
221 ${this.state.messageType == MessageType.All && "active"}
226 value={MessageType.All}
227 checked={this.state.messageType == MessageType.All}
228 onChange={linkEvent(this, this.handleMessageTypeChange)}
233 className={`btn btn-outline-secondary pointer
234 ${this.state.messageType == MessageType.CommentReport && "active"}
239 value={MessageType.CommentReport}
240 checked={this.state.messageType == MessageType.CommentReport}
241 onChange={linkEvent(this, this.handleMessageTypeChange)}
246 className={`btn btn-outline-secondary pointer
247 ${this.state.messageType == MessageType.PostReport && "active"}
252 value={MessageType.PostReport}
253 checked={this.state.messageType == MessageType.PostReport}
254 onChange={linkEvent(this, this.handleMessageTypeChange)}
260 className={`btn btn-outline-secondary pointer
262 this.state.messageType == MessageType.PrivateMessageReport &&
269 value={MessageType.PrivateMessageReport}
271 this.state.messageType == MessageType.PrivateMessageReport
273 onChange={linkEvent(this, this.handleMessageTypeChange)}
284 <div className="mb-2">
285 <span className="mr-3">{this.unreadOrAllRadios()}</span>
286 <span className="mr-3">{this.messageTypeRadios()}</span>
291 commentReportToItemType(r: CommentReportView): ItemType {
293 id: r.comment_report.id,
294 type_: MessageEnum.CommentReport,
296 published: r.comment_report.published,
300 postReportToItemType(r: PostReportView): ItemType {
302 id: r.post_report.id,
303 type_: MessageEnum.PostReport,
305 published: r.post_report.published,
309 privateMessageReportToItemType(r: PrivateMessageReportView): ItemType {
311 id: r.private_message_report.id,
312 type_: MessageEnum.PrivateMessageReport,
314 published: r.private_message_report.published,
318 buildCombined(): ItemType[] {
319 // let comments: ItemType[] = this.state.listCommentReportsResponse
320 // .map(r => r.comment_reports)
322 // .map(r => this.commentReportToItemType(r));
324 this.state.listCommentReportsResponse?.comment_reports.map(
325 this.commentReportToItemType
328 this.state.listPostReportsResponse?.post_reports.map(
329 this.postReportToItemType
331 let privateMessages =
332 this.state.listPrivateMessageReportsResponse?.private_message_reports.map(
333 this.privateMessageReportToItemType
336 return [...comments, ...posts, ...privateMessages].sort((a, b) =>
337 b.published.localeCompare(a.published)
341 renderItemType(i: ItemType) {
343 case MessageEnum.CommentReport:
345 <CommentReport key={i.id} report={i.view as CommentReportView} />
347 case MessageEnum.PostReport:
348 return <PostReport key={i.id} report={i.view as PostReportView} />;
349 case MessageEnum.PrivateMessageReport:
351 <PrivateMessageReport
353 report={i.view as PrivateMessageReportView}
364 {this.state.combined.map(i => (
367 {this.renderItemType(i)}
375 let reports = this.state.listCommentReportsResponse?.comment_reports;
382 <CommentReport key={cr.comment_report.id} report={cr} />
391 let reports = this.state.listPostReportsResponse?.post_reports;
398 <PostReport key={pr.post_report.id} report={pr} />
406 privateMessageReports() {
408 this.state.listPrivateMessageReportsResponse?.private_message_reports;
412 {reports.map(pmr => (
415 <PrivateMessageReport
416 key={pmr.private_message_report.id}
426 handlePageChange(page: number) {
427 this.setState({ page });
431 handleUnreadOrAllChange(i: Reports, event: any) {
432 i.setState({ unreadOrAll: Number(event.target.value), page: 1 });
436 handleMessageTypeChange(i: Reports, event: any) {
437 i.setState({ messageType: Number(event.target.value), page: 1 });
441 static fetchInitialData({
444 }: InitialFetchRequest): WithPromiseKeys<ReportsData> {
445 const unresolved_only = true;
447 const limit = fetchLimit;
449 const commentReportsForm: ListCommentReports = {
453 auth: auth as string,
456 const postReportsForm: ListPostReports = {
460 auth: auth as string,
463 const data: WithPromiseKeys<ReportsData> = {
464 commentReportsResponse: client.listCommentReports(commentReportsForm),
465 postReportsResponse: client.listPostReports(postReportsForm),
469 const privateMessageReportsForm: ListPrivateMessageReports = {
473 auth: auth as string,
476 data.privateMessageReportsResponse = client.listPrivateMessageReports(
477 privateMessageReportsForm
485 const unresolved_only = this.state.unreadOrAll === UnreadOrAll.Unread;
486 const page = this.state.page;
487 const limit = fetchLimit;
488 const auth = myAuth();
491 const commentReportsForm: ListCommentReports = {
498 WebSocketService.Instance.send(
499 wsClient.listCommentReports(commentReportsForm)
502 const postReportsForm: ListPostReports = {
509 WebSocketService.Instance.send(wsClient.listPostReports(postReportsForm));
512 const privateMessageReportsForm: ListPrivateMessageReports = {
518 WebSocketService.Instance.send(
519 wsClient.listPrivateMessageReports(privateMessageReportsForm)
525 parseMessage(msg: any) {
526 let op = wsUserOp(msg);
529 toast(i18n.t(msg.error), "danger");
531 } else if (msg.reconnect) {
533 } else if (op == UserOperation.ListCommentReports) {
534 let data = wsJsonToRes<ListCommentReportsResponse>(msg);
535 this.setState({ listCommentReportsResponse: data });
536 this.setState({ combined: this.buildCombined(), loading: false });
537 // this.sendUnreadCount();
538 window.scrollTo(0, 0);
540 } else if (op == UserOperation.ListPostReports) {
541 let data = wsJsonToRes<ListPostReportsResponse>(msg);
542 this.setState({ listPostReportsResponse: data });
543 this.setState({ combined: this.buildCombined(), loading: false });
544 // this.sendUnreadCount();
545 window.scrollTo(0, 0);
547 } else if (op == UserOperation.ListPrivateMessageReports) {
548 let data = wsJsonToRes<ListPrivateMessageReportsResponse>(msg);
549 this.setState({ listPrivateMessageReportsResponse: data });
550 this.setState({ combined: this.buildCombined(), loading: false });
551 // this.sendUnreadCount();
552 window.scrollTo(0, 0);
554 } else if (op == UserOperation.ResolvePostReport) {
555 let data = wsJsonToRes<PostReportResponse>(msg);
557 data.post_report_view,
558 this.state.listPostReportsResponse?.post_reports
560 let urcs = UserService.Instance.unreadReportCountSub;
561 if (data.post_report_view.post_report.resolved) {
562 urcs.next(urcs.getValue() - 1);
564 urcs.next(urcs.getValue() + 1);
566 this.setState(this.state);
567 } else if (op == UserOperation.ResolveCommentReport) {
568 let data = wsJsonToRes<CommentReportResponse>(msg);
569 updateCommentReportRes(
570 data.comment_report_view,
571 this.state.listCommentReportsResponse?.comment_reports
573 let urcs = UserService.Instance.unreadReportCountSub;
574 if (data.comment_report_view.comment_report.resolved) {
575 urcs.next(urcs.getValue() - 1);
577 urcs.next(urcs.getValue() + 1);
579 this.setState(this.state);
580 } else if (op == UserOperation.ResolvePrivateMessageReport) {
581 let data = wsJsonToRes<PrivateMessageReportResponse>(msg);
582 updatePrivateMessageReportRes(
583 data.private_message_report_view,
584 this.state.listPrivateMessageReportsResponse?.private_message_reports
586 let urcs = UserService.Instance.unreadReportCountSub;
587 if (data.private_message_report_view.private_message_report.resolved) {
588 urcs.next(urcs.getValue() - 1);
590 urcs.next(urcs.getValue() + 1);
592 this.setState(this.state);