src/shared/components/person/reports.tsx

   1 import { None, Option, Some } from "@sniptt/monads";
   2 import { Component, linkEvent } from "inferno";
   3 import {
   4   CommentReportResponse,
   5   CommentReportView,
   6   GetSiteResponse,
   7   ListCommentReports,
   8   ListCommentReportsResponse,
   9   ListPostReports,
  10   ListPostReportsResponse,
  11   ListPrivateMessageReports,
  12   ListPrivateMessageReportsResponse,
  13   PostReportResponse,
  14   PostReportView,
  15   PrivateMessageReportResponse,
  16   PrivateMessageReportView,
  17   UserOperation,
  18   wsJsonToRes,
  19   wsUserOp,
  20 } from "lemmy-js-client";
  21 import { Subscription } from "rxjs";
  22 import { i18n } from "../../i18next";
  23 import { InitialFetchRequest } from "../../interfaces";
  24 import { UserService, WebSocketService } from "../../services";
  25 import {
  26   amAdmin,
  27   auth,
  28   fetchLimit,
  29   isBrowser,
  30   setIsoData,
  31   setupTippy,
  32   toast,
  33   updateCommentReportRes,
  34   updatePostReportRes,
  35   updatePrivateMessageReportRes,
  36   wsClient,
  37   wsSubscribe,
  38 } from "../../utils";
  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";
  45
  46 enum UnreadOrAll {
  47   Unread,
  48   All,
  49 }
  50
  51 enum MessageType {
  52   All,
  53   CommentReport,
  54   PostReport,
  55   PrivateMessageReport,
  56 }
  57
  58 enum MessageEnum {
  59   CommentReport,
  60   PostReport,
  61   PrivateMessageReport,
  62 }
  63
  64 type ItemType = {
  65   id: number;
  66   type_: MessageEnum;
  67   view: CommentReportView | PostReportView | PrivateMessageReportView;
  68   published: string;
  69 };
  70
  71 interface ReportsState {
  72   listCommentReportsResponse: Option<ListCommentReportsResponse>;
  73   listPostReportsResponse: Option<ListPostReportsResponse>;
  74   listPrivateMessageReportsResponse: Option<ListPrivateMessageReportsResponse>;
  75   unreadOrAll: UnreadOrAll;
  76   messageType: MessageType;
  77   combined: ItemType[];
  78   siteRes: GetSiteResponse;
  79   page: number;
  80   loading: boolean;
  81 }
  82
  83 export class Reports extends Component<any, ReportsState> {
  84   private isoData = setIsoData(
  85     this.context,
  86     ListCommentReportsResponse,
  87     ListPostReportsResponse,
  88     ListPrivateMessageReportsResponse
  89   );
  90   private subscription: Subscription;
  91   private emptyState: ReportsState = {
  92     listCommentReportsResponse: None,
  93     listPostReportsResponse: None,
  94     listPrivateMessageReportsResponse: None,
  95     unreadOrAll: UnreadOrAll.Unread,
  96     messageType: MessageType.All,
  97     combined: [],
  98     page: 1,
  99     siteRes: this.isoData.site_res,
 100     loading: true,
 101   };
 102
 103   constructor(props: any, context: any) {
 104     super(props, context);
 105
 106     this.state = this.emptyState;
 107     this.handlePageChange = this.handlePageChange.bind(this);
 108
 109     if (UserService.Instance.myUserInfo.isNone() && isBrowser()) {
 110       toast(i18n.t("not_logged_in"), "danger");
 111       this.context.router.history.push(`/login`);
 112     }
 113
 114     this.parseMessage = this.parseMessage.bind(this);
 115     this.subscription = wsSubscribe(this.parseMessage);
 116
 117     // Only fetch the data if coming from another route
 118     if (this.isoData.path == this.context.router.route.match.url) {
 119       this.state = {
 120         ...this.state,
 121         listCommentReportsResponse: Some(
 122           this.isoData.routeData[0] as ListCommentReportsResponse
 123         ),
 124         listPostReportsResponse: Some(
 125           this.isoData.routeData[1] as ListPostReportsResponse
 126         ),
 127       };
 128       if (amAdmin()) {
 129         this.state = {
 130           ...this.state,
 131           listPrivateMessageReportsResponse: Some(
 132             this.isoData.routeData[2] as ListPrivateMessageReportsResponse
 133           ),
 134         };
 135       }
 136       this.state = {
 137         ...this.state,
 138         combined: this.buildCombined(),
 139         loading: false,
 140       };
 141     } else {
 142       this.refetch();
 143     }
 144   }
 145
 146   componentWillUnmount() {
 147     if (isBrowser()) {
 148       this.subscription.unsubscribe();
 149     }
 150   }
 151
 152   get documentTitle(): string {
 153     return UserService.Instance.myUserInfo.match({
 154       some: mui =>
 155         `@${mui.local_user_view.person.name} ${i18n.t("reports")} - ${
 156           this.state.siteRes.site_view.site.name
 157         }`,
 158       none: "",
 159     });
 160   }
 161
 162   render() {
 163     return (
 164       <div className="container-lg">
 165         {this.state.loading ? (
 166           <h5>
 167             <Spinner large />
 168           </h5>
 169         ) : (
 170           <div className="row">
 171             <div className="col-12">
 172               <HtmlTags
 173                 title={this.documentTitle}
 174                 path={this.context.router.route.match.url}
 175                 description={None}
 176                 image={None}
 177               />
 178               <h5 className="mb-2">{i18n.t("reports")}</h5>
 179               {this.selects()}
 180               {this.state.messageType == MessageType.All && this.all()}
 181               {this.state.messageType == MessageType.CommentReport &&
 182                 this.commentReports()}
 183               {this.state.messageType == MessageType.PostReport &&
 184                 this.postReports()}
 185               {this.state.messageType == MessageType.PrivateMessageReport &&
 186                 this.privateMessageReports()}
 187               <Paginator
 188                 page={this.state.page}
 189                 onChange={this.handlePageChange}
 190               />
 191             </div>
 192           </div>
 193         )}
 194       </div>
 195     );
 196   }
 197
 198   unreadOrAllRadios() {
 199     return (
 200       <div className="btn-group btn-group-toggle flex-wrap mb-2">
 201         <label
 202           className={`btn btn-outline-secondary pointer
 203             ${this.state.unreadOrAll == UnreadOrAll.Unread && "active"}
 204           `}
 205         >
 206           <input
 207             type="radio"
 208             value={UnreadOrAll.Unread}
 209             checked={this.state.unreadOrAll == UnreadOrAll.Unread}
 210             onChange={linkEvent(this, this.handleUnreadOrAllChange)}
 211           />
 212           {i18n.t("unread")}
 213         </label>
 214         <label
 215           className={`btn btn-outline-secondary pointer
 216             ${this.state.unreadOrAll == UnreadOrAll.All && "active"}
 217           `}
 218         >
 219           <input
 220             type="radio"
 221             value={UnreadOrAll.All}
 222             checked={this.state.unreadOrAll == UnreadOrAll.All}
 223             onChange={linkEvent(this, this.handleUnreadOrAllChange)}
 224           />
 225           {i18n.t("all")}
 226         </label>
 227       </div>
 228     );
 229   }
 230
 231   messageTypeRadios() {
 232     return (
 233       <div className="btn-group btn-group-toggle flex-wrap mb-2">
 234         <label
 235           className={`btn btn-outline-secondary pointer
 236             ${this.state.messageType == MessageType.All && "active"}
 237           `}
 238         >
 239           <input
 240             type="radio"
 241             value={MessageType.All}
 242             checked={this.state.messageType == MessageType.All}
 243             onChange={linkEvent(this, this.handleMessageTypeChange)}
 244           />
 245           {i18n.t("all")}
 246         </label>
 247         <label
 248           className={`btn btn-outline-secondary pointer
 249             ${this.state.messageType == MessageType.CommentReport && "active"}
 250           `}
 251         >
 252           <input
 253             type="radio"
 254             value={MessageType.CommentReport}
 255             checked={this.state.messageType == MessageType.CommentReport}
 256             onChange={linkEvent(this, this.handleMessageTypeChange)}
 257           />
 258           {i18n.t("comments")}
 259         </label>
 260         <label
 261           className={`btn btn-outline-secondary pointer
 262             ${this.state.messageType == MessageType.PostReport && "active"}
 263           `}
 264         >
 265           <input
 266             type="radio"
 267             value={MessageType.PostReport}
 268             checked={this.state.messageType == MessageType.PostReport}
 269             onChange={linkEvent(this, this.handleMessageTypeChange)}
 270           />
 271           {i18n.t("posts")}
 272         </label>
 273         {amAdmin() && (
 274           <label
 275             className={`btn btn-outline-secondary pointer
 276             ${
 277               this.state.messageType == MessageType.PrivateMessageReport &&
 278               "active"
 279             }
 280           `}
 281           >
 282             <input
 283               type="radio"
 284               value={MessageType.PrivateMessageReport}
 285               checked={
 286                 this.state.messageType == MessageType.PrivateMessageReport
 287               }
 288               onChange={linkEvent(this, this.handleMessageTypeChange)}
 289             />
 290             {i18n.t("messages")}
 291           </label>
 292         )}
 293       </div>
 294     );
 295   }
 296
 297   selects() {
 298     return (
 299       <div className="mb-2">
 300         <span className="mr-3">{this.unreadOrAllRadios()}</span>
 301         <span className="mr-3">{this.messageTypeRadios()}</span>
 302       </div>
 303     );
 304   }
 305
 306   commentReportToItemType(r: CommentReportView): ItemType {
 307     return {
 308       id: r.comment_report.id,
 309       type_: MessageEnum.CommentReport,
 310       view: r,
 311       published: r.comment_report.published,
 312     };
 313   }
 314
 315   postReportToItemType(r: PostReportView): ItemType {
 316     return {
 317       id: r.post_report.id,
 318       type_: MessageEnum.PostReport,
 319       view: r,
 320       published: r.post_report.published,
 321     };
 322   }
 323
 324   privateMessageReportToItemType(r: PrivateMessageReportView): ItemType {
 325     return {
 326       id: r.private_message_report.id,
 327       type_: MessageEnum.PrivateMessageReport,
 328       view: r,
 329       published: r.private_message_report.published,
 330     };
 331   }
 332
 333   buildCombined(): ItemType[] {
 334     let comments: ItemType[] = this.state.listCommentReportsResponse
 335       .map(r => r.comment_reports)
 336       .unwrapOr([])
 337       .map(r => this.commentReportToItemType(r));
 338     let posts: ItemType[] = this.state.listPostReportsResponse
 339       .map(r => r.post_reports)
 340       .unwrapOr([])
 341       .map(r => this.postReportToItemType(r));
 342     let privateMessages: ItemType[] =
 343       this.state.listPrivateMessageReportsResponse
 344         .map(r => r.private_message_reports)
 345         .unwrapOr([])
 346         .map(r => this.privateMessageReportToItemType(r));
 347
 348     return [...comments, ...posts, ...privateMessages].sort((a, b) =>
 349       b.published.localeCompare(a.published)
 350     );
 351   }
 352
 353   renderItemType(i: ItemType) {
 354     switch (i.type_) {
 355       case MessageEnum.CommentReport:
 356         return (
 357           <CommentReport key={i.id} report={i.view as CommentReportView} />
 358         );
 359       case MessageEnum.PostReport:
 360         return <PostReport key={i.id} report={i.view as PostReportView} />;
 361       case MessageEnum.PrivateMessageReport:
 362         return (
 363           <PrivateMessageReport
 364             key={i.id}
 365             report={i.view as PrivateMessageReportView}
 366           />
 367         );
 368       default:
 369         return <div />;
 370     }
 371   }
 372
 373   all() {
 374     return (
 375       <div>
 376         {this.state.combined.map(i => (
 377           <>
 378             <hr />
 379             {this.renderItemType(i)}
 380           </>
 381         ))}
 382       </div>
 383     );
 384   }
 385
 386   commentReports() {
 387     return this.state.listCommentReportsResponse.match({
 388       some: res => (
 389         <div>
 390           {res.comment_reports.map(cr => (
 391             <>
 392               <hr />
 393               <CommentReport key={cr.comment_report.id} report={cr} />
 394             </>
 395           ))}
 396         </div>
 397       ),
 398       none: <></>,
 399     });
 400   }
 401
 402   postReports() {
 403     return this.state.listPostReportsResponse.match({
 404       some: res => (
 405         <div>
 406           {res.post_reports.map(pr => (
 407             <>
 408               <hr />
 409               <PostReport key={pr.post_report.id} report={pr} />
 410             </>
 411           ))}
 412         </div>
 413       ),
 414       none: <></>,
 415     });
 416   }
 417
 418   privateMessageReports() {
 419     return this.state.listPrivateMessageReportsResponse.match({
 420       some: res => (
 421         <div>
 422           {res.private_message_reports.map(pmr => (
 423             <>
 424               <hr />
 425               <PrivateMessageReport
 426                 key={pmr.private_message_report.id}
 427                 report={pmr}
 428               />
 429             </>
 430           ))}
 431         </div>
 432       ),
 433       none: <></>,
 434     });
 435   }
 436
 437   handlePageChange(page: number) {
 438     this.setState({ page });
 439     this.refetch();
 440   }
 441
 442   handleUnreadOrAllChange(i: Reports, event: any) {
 443     i.setState({ unreadOrAll: Number(event.target.value), page: 1 });
 444     i.refetch();
 445   }
 446
 447   handleMessageTypeChange(i: Reports, event: any) {
 448     i.setState({ messageType: Number(event.target.value), page: 1 });
 449     i.refetch();
 450   }
 451
 452   static fetchInitialData(req: InitialFetchRequest): Promise<any>[] {
 453     let promises: Promise<any>[] = [];
 454
 455     let unresolved_only = Some(true);
 456     let page = Some(1);
 457     let limit = Some(fetchLimit);
 458     let community_id = None;
 459     let auth = req.auth.unwrap();
 460
 461     let commentReportsForm = new ListCommentReports({
 462       // TODO community_id
 463       unresolved_only,
 464       community_id,
 465       page,
 466       limit,
 467       auth,
 468     });
 469     promises.push(req.client.listCommentReports(commentReportsForm));
 470
 471     let postReportsForm = new ListPostReports({
 472       // TODO community_id
 473       unresolved_only,
 474       community_id,
 475       page,
 476       limit,
 477       auth,
 478     });
 479     promises.push(req.client.listPostReports(postReportsForm));
 480
 481     if (amAdmin()) {
 482       let privateMessageReportsForm = new ListPrivateMessageReports({
 483         unresolved_only,
 484         page,
 485         limit,
 486         auth,
 487       });
 488       promises.push(
 489         req.client.listPrivateMessageReports(privateMessageReportsForm)
 490       );
 491     }
 492
 493     return promises;
 494   }
 495
 496   refetch() {
 497     let unresolved_only = Some(this.state.unreadOrAll == UnreadOrAll.Unread);
 498     let community_id = None;
 499     let page = Some(this.state.page);
 500     let limit = Some(fetchLimit);
 501
 502     let commentReportsForm = new ListCommentReports({
 503       unresolved_only,
 504       // TODO community_id
 505       community_id,
 506       page,
 507       limit,
 508       auth: auth().unwrap(),
 509     });
 510     WebSocketService.Instance.send(
 511       wsClient.listCommentReports(commentReportsForm)
 512     );
 513
 514     let postReportsForm = new ListPostReports({
 515       unresolved_only,
 516       // TODO community_id
 517       community_id,
 518       page,
 519       limit,
 520       auth: auth().unwrap(),
 521     });
 522     WebSocketService.Instance.send(wsClient.listPostReports(postReportsForm));
 523
 524     if (amAdmin()) {
 525       let privateMessageReportsForm = new ListPrivateMessageReports({
 526         unresolved_only,
 527         page,
 528         limit,
 529         auth: auth().unwrap(),
 530       });
 531       WebSocketService.Instance.send(
 532         wsClient.listPrivateMessageReports(privateMessageReportsForm)
 533       );
 534     }
 535   }
 536
 537   parseMessage(msg: any) {
 538     let op = wsUserOp(msg);
 539     console.log(msg);
 540     if (msg.error) {
 541       toast(i18n.t(msg.error), "danger");
 542       return;
 543     } else if (msg.reconnect) {
 544       this.refetch();
 545     } else if (op == UserOperation.ListCommentReports) {
 546       let data = wsJsonToRes<ListCommentReportsResponse>(
 547         msg,
 548         ListCommentReportsResponse
 549       );
 550       this.setState({ listCommentReportsResponse: Some(data) });
 551       this.setState({ combined: this.buildCombined(), loading: false });
 552       // this.sendUnreadCount();
 553       window.scrollTo(0, 0);
 554       setupTippy();
 555     } else if (op == UserOperation.ListPostReports) {
 556       let data = wsJsonToRes<ListPostReportsResponse>(
 557         msg,
 558         ListPostReportsResponse
 559       );
 560       this.setState({ listPostReportsResponse: Some(data) });
 561       this.setState({ combined: this.buildCombined(), loading: false });
 562       // this.sendUnreadCount();
 563       window.scrollTo(0, 0);
 564       setupTippy();
 565     } else if (op == UserOperation.ListPrivateMessageReports) {
 566       let data = wsJsonToRes<ListPrivateMessageReportsResponse>(
 567         msg,
 568         ListPrivateMessageReportsResponse
 569       );
 570       this.setState({ listPrivateMessageReportsResponse: Some(data) });
 571       this.setState({ combined: this.buildCombined(), loading: false });
 572       // this.sendUnreadCount();
 573       window.scrollTo(0, 0);
 574       setupTippy();
 575     } else if (op == UserOperation.ResolvePostReport) {
 576       let data = wsJsonToRes<PostReportResponse>(msg, PostReportResponse);
 577       updatePostReportRes(
 578         data.post_report_view,
 579         this.state.listPostReportsResponse.map(r => r.post_reports).unwrapOr([])
 580       );
 581       let urcs = UserService.Instance.unreadReportCountSub;
 582       if (data.post_report_view.post_report.resolved) {
 583         urcs.next(urcs.getValue() - 1);
 584       } else {
 585         urcs.next(urcs.getValue() + 1);
 586       }
 587       this.setState(this.state);
 588     } else if (op == UserOperation.ResolveCommentReport) {
 589       let data = wsJsonToRes<CommentReportResponse>(msg, CommentReportResponse);
 590       updateCommentReportRes(
 591         data.comment_report_view,
 592         this.state.listCommentReportsResponse
 593           .map(r => r.comment_reports)
 594           .unwrapOr([])
 595       );
 596       let urcs = UserService.Instance.unreadReportCountSub;
 597       if (data.comment_report_view.comment_report.resolved) {
 598         urcs.next(urcs.getValue() - 1);
 599       } else {
 600         urcs.next(urcs.getValue() + 1);
 601       }
 602       this.setState(this.state);
 603     } else if (op == UserOperation.ResolvePrivateMessageReport) {
 604       let data = wsJsonToRes<PrivateMessageReportResponse>(
 605         msg,
 606         PrivateMessageReportResponse
 607       );
 608       updatePrivateMessageReportRes(
 609         data.private_message_report_view,
 610         this.state.listPrivateMessageReportsResponse
 611           .map(r => r.private_message_reports)
 612           .unwrapOr([])
 613       );
 614       let urcs = UserService.Instance.unreadReportCountSub;
 615       if (data.private_message_report_view.private_message_report.resolved) {
 616         urcs.next(urcs.getValue() - 1);
 617       } else {
 618         urcs.next(urcs.getValue() + 1);
 619       }
 620       this.setState(this.state);
 621     }
 622   }
 623 }