1 import { None, Option, Some } from "@sniptt/monads";
2 import { Component, linkEvent } from "inferno";
8 ListCommentReportsResponse,
10 ListPostReportsResponse,
16 } from "lemmy-js-client";
17 import { Subscription } from "rxjs";
18 import { i18n } from "../../i18next";
19 import { InitialFetchRequest } from "../../interfaces";
20 import { UserService, WebSocketService } from "../../services";
28 updateCommentReportRes,
33 import { CommentReport } from "../comment/comment-report";
34 import { HtmlTags } from "../common/html-tags";
35 import { Spinner } from "../common/icon";
36 import { Paginator } from "../common/paginator";
37 import { PostReport } from "../post/post-report";
58 view: CommentReportView | PostReportView;
62 interface ReportsState {
63 listCommentReportsResponse: Option<ListCommentReportsResponse>;
64 listPostReportsResponse: Option<ListPostReportsResponse>;
65 unreadOrAll: UnreadOrAll;
66 messageType: MessageType;
68 siteRes: GetSiteResponse;
73 export class Reports extends Component<any, ReportsState> {
74 private isoData = setIsoData(
76 ListCommentReportsResponse,
77 ListPostReportsResponse
79 private subscription: Subscription;
80 private emptyState: ReportsState = {
81 listCommentReportsResponse: None,
82 listPostReportsResponse: None,
83 unreadOrAll: UnreadOrAll.Unread,
84 messageType: MessageType.All,
87 siteRes: this.isoData.site_res,
91 constructor(props: any, context: any) {
92 super(props, context);
94 this.state = this.emptyState;
95 this.handlePageChange = this.handlePageChange.bind(this);
97 if (UserService.Instance.myUserInfo.isNone() && isBrowser()) {
98 toast(i18n.t("not_logged_in"), "danger");
99 this.context.router.history.push(`/login`);
102 this.parseMessage = this.parseMessage.bind(this);
103 this.subscription = wsSubscribe(this.parseMessage);
105 // Only fetch the data if coming from another route
106 if (this.isoData.path == this.context.router.route.match.url) {
107 this.state.listCommentReportsResponse = Some(
108 this.isoData.routeData[0] as ListCommentReportsResponse
110 this.state.listPostReportsResponse = Some(
111 this.isoData.routeData[1] as ListPostReportsResponse
113 this.state.combined = this.buildCombined();
114 this.state.loading = false;
120 componentWillUnmount() {
122 this.subscription.unsubscribe();
126 get documentTitle(): string {
127 return this.state.siteRes.site_view.match({
129 UserService.Instance.myUserInfo.match({
131 `@${mui.local_user_view.person.name} ${i18n.t("reports")} - ${
142 <div class="container">
143 {this.state.loading ? (
151 title={this.documentTitle}
152 path={this.context.router.route.match.url}
156 <h5 class="mb-2">{i18n.t("reports")}</h5>
158 {this.state.messageType == MessageType.All && this.all()}
159 {this.state.messageType == MessageType.CommentReport &&
160 this.commentReports()}
161 {this.state.messageType == MessageType.PostReport &&
164 page={this.state.page}
165 onChange={this.handlePageChange}
174 unreadOrAllRadios() {
176 <div class="btn-group btn-group-toggle flex-wrap mb-2">
178 className={`btn btn-outline-secondary pointer
179 ${this.state.unreadOrAll == UnreadOrAll.Unread && "active"}
184 value={UnreadOrAll.Unread}
185 checked={this.state.unreadOrAll == UnreadOrAll.Unread}
186 onChange={linkEvent(this, this.handleUnreadOrAllChange)}
191 className={`btn btn-outline-secondary pointer
192 ${this.state.unreadOrAll == UnreadOrAll.All && "active"}
197 value={UnreadOrAll.All}
198 checked={this.state.unreadOrAll == UnreadOrAll.All}
199 onChange={linkEvent(this, this.handleUnreadOrAllChange)}
207 messageTypeRadios() {
209 <div class="btn-group btn-group-toggle flex-wrap mb-2">
211 className={`btn btn-outline-secondary pointer
212 ${this.state.messageType == MessageType.All && "active"}
217 value={MessageType.All}
218 checked={this.state.messageType == MessageType.All}
219 onChange={linkEvent(this, this.handleMessageTypeChange)}
224 className={`btn btn-outline-secondary pointer
225 ${this.state.messageType == MessageType.CommentReport && "active"}
230 value={MessageType.CommentReport}
231 checked={this.state.messageType == MessageType.CommentReport}
232 onChange={linkEvent(this, this.handleMessageTypeChange)}
237 className={`btn btn-outline-secondary pointer
238 ${this.state.messageType == MessageType.PostReport && "active"}
243 value={MessageType.PostReport}
244 checked={this.state.messageType == MessageType.PostReport}
245 onChange={linkEvent(this, this.handleMessageTypeChange)}
255 <div className="mb-2">
256 <span class="mr-3">{this.unreadOrAllRadios()}</span>
257 <span class="mr-3">{this.messageTypeRadios()}</span>
262 replyToReplyType(r: CommentReportView): ItemType {
264 id: r.comment_report.id,
265 type_: MessageEnum.CommentReport,
267 published: r.comment_report.published,
271 mentionToReplyType(r: PostReportView): ItemType {
273 id: r.post_report.id,
274 type_: MessageEnum.PostReport,
276 published: r.post_report.published,
280 buildCombined(): ItemType[] {
281 let comments: ItemType[] = this.state.listCommentReportsResponse
282 .map(r => r.comment_reports)
284 .map(r => this.replyToReplyType(r));
285 let posts: ItemType[] = this.state.listPostReportsResponse
286 .map(r => r.post_reports)
288 .map(r => this.mentionToReplyType(r));
290 return [...comments, ...posts].sort((a, b) =>
291 b.published.localeCompare(a.published)
295 renderItemType(i: ItemType) {
297 case MessageEnum.CommentReport:
299 <CommentReport key={i.id} report={i.view as CommentReportView} />
301 case MessageEnum.PostReport:
302 return <PostReport key={i.id} report={i.view as PostReportView} />;
311 {this.state.combined.map(i => (
314 {this.renderItemType(i)}
322 return this.state.listCommentReportsResponse.match({
325 {res.comment_reports.map(cr => (
328 <CommentReport key={cr.comment_report.id} report={cr} />
338 return this.state.listPostReportsResponse.match({
341 {res.post_reports.map(pr => (
344 <PostReport key={pr.post_report.id} report={pr} />
353 handlePageChange(page: number) {
354 this.setState({ page });
358 handleUnreadOrAllChange(i: Reports, event: any) {
359 i.state.unreadOrAll = Number(event.target.value);
365 handleMessageTypeChange(i: Reports, event: any) {
366 i.state.messageType = Number(event.target.value);
372 static fetchInitialData(req: InitialFetchRequest): Promise<any>[] {
373 let promises: Promise<any>[] = [];
375 let unresolved_only = Some(true);
377 let limit = Some(fetchLimit);
378 let community_id = None;
379 let auth = req.auth.unwrap();
381 let commentReportsForm = new ListCommentReports({
389 promises.push(req.client.listCommentReports(commentReportsForm));
391 let postReportsForm = new ListPostReports({
399 promises.push(req.client.listPostReports(postReportsForm));
405 let unresolved_only = Some(this.state.unreadOrAll == UnreadOrAll.Unread);
406 let community_id = None;
407 let page = Some(this.state.page);
408 let limit = Some(fetchLimit);
410 let commentReportsForm = new ListCommentReports({
416 auth: auth().unwrap(),
418 WebSocketService.Instance.send(
419 wsClient.listCommentReports(commentReportsForm)
422 let postReportsForm = new ListPostReports({
428 auth: auth().unwrap(),
430 WebSocketService.Instance.send(wsClient.listPostReports(postReportsForm));
433 parseMessage(msg: any) {
434 let op = wsUserOp(msg);
437 toast(i18n.t(msg.error), "danger");
439 } else if (msg.reconnect) {
441 } else if (op == UserOperation.ListCommentReports) {
442 let data = wsJsonToRes<ListCommentReportsResponse>(
444 ListCommentReportsResponse
446 this.state.listCommentReportsResponse = Some(data);
447 this.state.combined = this.buildCombined();
448 this.state.loading = false;
449 // this.sendUnreadCount();
450 window.scrollTo(0, 0);
451 this.setState(this.state);
453 } else if (op == UserOperation.ListPostReports) {
454 let data = wsJsonToRes<ListPostReportsResponse>(
456 ListPostReportsResponse
458 this.state.listPostReportsResponse = Some(data);
459 this.state.combined = this.buildCombined();
460 this.state.loading = false;
461 // this.sendUnreadCount();
462 window.scrollTo(0, 0);
463 this.setState(this.state);
465 } else if (op == UserOperation.ResolvePostReport) {
466 let data = wsJsonToRes<PostReportResponse>(msg, PostReportResponse);
468 data.post_report_view,
469 this.state.listPostReportsResponse.map(r => r.post_reports).unwrapOr([])
471 let urcs = UserService.Instance.unreadReportCountSub;
472 if (data.post_report_view.post_report.resolved) {
473 urcs.next(urcs.getValue() - 1);
475 urcs.next(urcs.getValue() + 1);
477 this.setState(this.state);
478 } else if (op == UserOperation.ResolveCommentReport) {
479 let data = wsJsonToRes<CommentReportResponse>(msg, CommentReportResponse);
480 updateCommentReportRes(
481 data.comment_report_view,
482 this.state.listCommentReportsResponse
483 .map(r => r.comment_reports)
486 let urcs = UserService.Instance.unreadReportCountSub;
487 if (data.comment_report_view.comment_report.resolved) {
488 urcs.next(urcs.getValue() - 1);
490 urcs.next(urcs.getValue() + 1);
492 this.setState(this.state);