1 import { Component, linkEvent } from "inferno";
6 ListCommentReportsResponse,
8 ListPostReportsResponse,
13 } from "lemmy-js-client";
14 import { Subscription } from "rxjs";
15 import { i18n } from "../../i18next";
16 import { InitialFetchRequest } from "../../interfaces";
17 import { UserService, WebSocketService } from "../../services";
25 updateCommentReportRes,
32 import { CommentReport } from "../comment/comment_report";
33 import { HtmlTags } from "../common/html-tags";
34 import { Spinner } from "../common/icon";
35 import { Paginator } from "../common/paginator";
36 import { PostReport } from "../post/post_report";
57 view: CommentReportView | PostReportView;
61 interface ReportsState {
62 unreadOrAll: UnreadOrAll;
63 messageType: MessageType;
64 commentReports: CommentReportView[];
65 postReports: PostReportView[];
72 export class Reports extends Component<any, ReportsState> {
73 private isoData = setIsoData(this.context);
74 private subscription: Subscription;
75 private emptyState: ReportsState = {
76 unreadOrAll: UnreadOrAll.Unread,
77 messageType: MessageType.All,
82 site_view: this.isoData.site_res.site_view,
86 constructor(props: any, context: any) {
87 super(props, context);
89 this.state = this.emptyState;
90 this.handlePageChange = this.handlePageChange.bind(this);
92 if (!UserService.Instance.myUserInfo && isBrowser()) {
93 toast(i18n.t("not_logged_in"), "danger");
94 this.context.router.history.push(`/login`);
97 this.parseMessage = this.parseMessage.bind(this);
98 this.subscription = wsSubscribe(this.parseMessage);
100 // Only fetch the data if coming from another route
101 if (this.isoData.path == this.context.router.route.match.url) {
102 this.state.commentReports =
103 this.isoData.routeData[0].comment_reports || [];
104 this.state.postReports = this.isoData.routeData[1].post_reports || [];
105 this.state.combined = this.buildCombined();
106 this.state.loading = false;
112 componentWillUnmount() {
114 this.subscription.unsubscribe();
118 get documentTitle(): string {
120 UserService.Instance.myUserInfo.local_user_view.person.name
121 } ${i18n.t("reports")} - ${this.state.site_view.site.name}`;
126 <div class="container">
127 {this.state.loading ? (
135 title={this.documentTitle}
136 path={this.context.router.route.match.url}
138 <h5 class="mb-2">{i18n.t("reports")}</h5>
140 {this.state.messageType == MessageType.All && this.all()}
141 {this.state.messageType == MessageType.CommentReport &&
142 this.commentReports()}
143 {this.state.messageType == MessageType.PostReport &&
146 page={this.state.page}
147 onChange={this.handlePageChange}
156 unreadOrAllRadios() {
158 <div class="btn-group btn-group-toggle flex-wrap mb-2">
160 className={`btn btn-outline-secondary pointer
161 ${this.state.unreadOrAll == UnreadOrAll.Unread && "active"}
166 value={UnreadOrAll.Unread}
167 checked={this.state.unreadOrAll == UnreadOrAll.Unread}
168 onChange={linkEvent(this, this.handleUnreadOrAllChange)}
173 className={`btn btn-outline-secondary pointer
174 ${this.state.unreadOrAll == UnreadOrAll.All && "active"}
179 value={UnreadOrAll.All}
180 checked={this.state.unreadOrAll == UnreadOrAll.All}
181 onChange={linkEvent(this, this.handleUnreadOrAllChange)}
189 messageTypeRadios() {
191 <div class="btn-group btn-group-toggle flex-wrap mb-2">
193 className={`btn btn-outline-secondary pointer
194 ${this.state.messageType == MessageType.All && "active"}
199 value={MessageType.All}
200 checked={this.state.messageType == MessageType.All}
201 onChange={linkEvent(this, this.handleMessageTypeChange)}
206 className={`btn btn-outline-secondary pointer
207 ${this.state.messageType == MessageType.CommentReport && "active"}
212 value={MessageType.CommentReport}
213 checked={this.state.messageType == MessageType.CommentReport}
214 onChange={linkEvent(this, this.handleMessageTypeChange)}
219 className={`btn btn-outline-secondary pointer
220 ${this.state.messageType == MessageType.PostReport && "active"}
225 value={MessageType.PostReport}
226 checked={this.state.messageType == MessageType.PostReport}
227 onChange={linkEvent(this, this.handleMessageTypeChange)}
237 <div className="mb-2">
238 <span class="mr-3">{this.unreadOrAllRadios()}</span>
239 <span class="mr-3">{this.messageTypeRadios()}</span>
244 replyToReplyType(r: CommentReportView): ItemType {
246 id: r.comment_report.id,
247 type_: MessageEnum.CommentReport,
249 published: r.comment_report.published,
253 mentionToReplyType(r: PostReportView): ItemType {
255 id: r.post_report.id,
256 type_: MessageEnum.PostReport,
258 published: r.post_report.published,
262 buildCombined(): ItemType[] {
263 let comments: ItemType[] = this.state.commentReports.map(r =>
264 this.replyToReplyType(r)
266 let posts: ItemType[] = this.state.postReports.map(r =>
267 this.mentionToReplyType(r)
270 return [...comments, ...posts].sort((a, b) =>
271 b.published.localeCompare(a.published)
275 renderItemType(i: ItemType) {
277 case MessageEnum.CommentReport:
279 <CommentReport key={i.id} report={i.view as CommentReportView} />
281 case MessageEnum.PostReport:
282 return <PostReport key={i.id} report={i.view as PostReportView} />;
291 {this.state.combined.map(i => (
294 {this.renderItemType(i)}
304 {this.state.commentReports.map(cr => (
307 <CommentReport key={cr.comment_report.id} report={cr} />
317 {this.state.postReports.map(pr => (
320 <PostReport key={pr.post_report.id} report={pr} />
327 handlePageChange(page: number) {
328 this.setState({ page });
332 handleUnreadOrAllChange(i: Reports, event: any) {
333 i.state.unreadOrAll = Number(event.target.value);
339 handleMessageTypeChange(i: Reports, event: any) {
340 i.state.messageType = Number(event.target.value);
346 static fetchInitialData(req: InitialFetchRequest): Promise<any>[] {
347 let promises: Promise<any>[] = [];
349 let commentReportsForm: ListCommentReports = {
351 unresolved_only: true,
356 promises.push(req.client.listCommentReports(commentReportsForm));
358 let postReportsForm: ListPostReports = {
360 unresolved_only: true,
365 promises.push(req.client.listPostReports(postReportsForm));
371 let unresolved_only = this.state.unreadOrAll == UnreadOrAll.Unread;
372 let commentReportsForm: ListCommentReports = {
375 page: this.state.page,
379 WebSocketService.Instance.send(
380 wsClient.listCommentReports(commentReportsForm)
383 let postReportsForm: ListPostReports = {
386 page: this.state.page,
390 WebSocketService.Instance.send(wsClient.listPostReports(postReportsForm));
393 parseMessage(msg: any) {
394 let op = wsUserOp(msg);
397 toast(i18n.t(msg.error), "danger");
399 } else if (msg.reconnect) {
401 } else if (op == UserOperation.ListCommentReports) {
402 let data = wsJsonToRes<ListCommentReportsResponse>(msg).data;
403 this.state.commentReports = data.comment_reports;
404 this.state.combined = this.buildCombined();
405 this.state.loading = false;
406 // this.sendUnreadCount();
407 window.scrollTo(0, 0);
408 this.setState(this.state);
410 } else if (op == UserOperation.ListPostReports) {
411 let data = wsJsonToRes<ListPostReportsResponse>(msg).data;
412 this.state.postReports = data.post_reports;
413 this.state.combined = this.buildCombined();
414 this.state.loading = false;
415 // this.sendUnreadCount();
416 window.scrollTo(0, 0);
417 this.setState(this.state);
419 } else if (op == UserOperation.ResolvePostReport) {
420 let data = wsJsonToRes<PostReportResponse>(msg).data;
421 updatePostReportRes(data.post_report_view, this.state.postReports);
422 let urcs = UserService.Instance.unreadReportCountSub;
423 if (data.post_report_view.post_report.resolved) {
424 urcs.next(urcs.getValue() - 1);
426 urcs.next(urcs.getValue() + 1);
428 this.setState(this.state);
429 } else if (op == UserOperation.ResolveCommentReport) {
430 let data = wsJsonToRes<CommentReportResponse>(msg).data;
431 updateCommentReportRes(
432 data.comment_report_view,
433 this.state.commentReports
435 let urcs = UserService.Instance.unreadReportCountSub;
436 if (data.comment_report_view.comment_report.resolved) {
437 urcs.next(urcs.getValue() - 1);
439 urcs.next(urcs.getValue() + 1);
441 this.setState(this.state);