src/shared/components/comment/comment_report.tsx

   1 import { Component, linkEvent } from "inferno";
   2 import { T } from "inferno-i18next-dess";
   3 import {
   4   CommentReportView,
   5   CommentView,
   6   ResolveCommentReport,
   7 } from "lemmy-js-client";
   8 import { i18n } from "../../i18next";
   9 import { CommentNode as CommentNodeI } from "../../interfaces";
  10 import { WebSocketService } from "../../services";
  11 import { authField, wsClient } from "../../utils";
  12 import { Icon } from "../common/icon";
  13 import { PersonListing } from "../person/person-listing";
  14 import { CommentNode } from "./comment-node";
  15
  16 interface CommentReportProps {
  17   report: CommentReportView;
  18 }
  19
  20 export class CommentReport extends Component<CommentReportProps, any> {
  21   constructor(props: any, context: any) {
  22     super(props, context);
  23   }
  24
  25   render() {
  26     let r = this.props.report;
  27     let comment = r.comment;
  28
  29     // Set the original post data ( a troll could change it )
  30     comment.content = r.comment_report.original_comment_text;
  31
  32     let comment_view: CommentView = {
  33       comment,
  34       creator: r.comment_creator,
  35       post: r.post,
  36       community: r.community,
  37       creator_banned_from_community: r.creator_banned_from_community,
  38       counts: r.counts,
  39       subscribed: false,
  40       saved: false,
  41       creator_blocked: false,
  42       my_vote: r.my_vote,
  43     };
  44
  45     let node: CommentNodeI = {
  46       comment_view,
  47     };
  48
  49     return (
  50       <div>
  51         <CommentNode
  52           node={node}
  53           moderators={[]}
  54           admins={[]}
  55           enableDownvotes={true}
  56         />
  57         <div>
  58           {i18n.t("reporter")}: <PersonListing person={r.creator} />
  59         </div>
  60         <div>
  61           {i18n.t("reason")}: {r.comment_report.reason}
  62         </div>
  63         {r.resolver && (
  64           <div>
  65             {r.comment_report.resolved ? (
  66               <T i18nKey="resolved_by">
  67                 #
  68                 <PersonListing person={r.resolver} />
  69               </T>
  70             ) : (
  71               <T i18nKey="unresolved_by">
  72                 #
  73                 <PersonListing person={r.resolver} />
  74               </T>
  75             )}
  76           </div>
  77         )}
  78         <button
  79           className="btn btn-link btn-animate text-muted py-0"
  80           onClick={linkEvent(this, this.handleResolveReport)}
  81           data-tippy-content={
  82             r.comment_report.resolved ? "unresolve_report" : "resolve_report"
  83           }
  84           aria-label={
  85             r.comment_report.resolved ? "unresolve_report" : "resolve_report"
  86           }
  87         >
  88           <Icon
  89             icon="check"
  90             classes={`icon-inline ${
  91               r.comment_report.resolved ? "text-success" : "text-danger"
  92             }`}
  93           />
  94         </button>
  95       </div>
  96     );
  97   }
  98
  99   handleResolveReport(i: CommentReport) {
 100     let form: ResolveCommentReport = {
 101       report_id: i.props.report.comment_report.id,
 102       resolved: !i.props.report.comment_report.resolved,
 103       auth: authField(),
 104     };
 105     WebSocketService.Instance.send(wsClient.resolveCommentReport(form));
 106   }
 107 }