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 { CommentNodeI, CommentViewType } from "../../interfaces";
  10 import { WebSocketService } from "../../services";
  11 import { myAuth, 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     let tippyContent = i18n.t(
  29       r.comment_report.resolved ? "unresolve_report" : "resolve_report"
  30     );
  31
  32     // Set the original post data ( a troll could change it )
  33     comment.content = r.comment_report.original_comment_text;
  34
  35     let comment_view: CommentView = {
  36       comment,
  37       creator: r.comment_creator,
  38       post: r.post,
  39       community: r.community,
  40       creator_banned_from_community: r.creator_banned_from_community,
  41       counts: r.counts,
  42       subscribed: "NotSubscribed",
  43       saved: false,
  44       creator_blocked: false,
  45       my_vote: r.my_vote,
  46     };
  47
  48     let node: CommentNodeI = {
  49       comment_view,
  50       children: [],
  51       depth: 0,
  52     };
  53
  54     return (
  55       <div>
  56         <CommentNode
  57           node={node}
  58           viewType={CommentViewType.Flat}
  59           enableDownvotes={true}
  60           viewOnly={true}
  61           showCommunity={true}
  62           allLanguages={[]}
  63           siteLanguages={[]}
  64           hideImages
  65         />
  66         <div>
  67           {i18n.t("reporter")}: <PersonListing person={r.creator} />
  68         </div>
  69         <div>
  70           {i18n.t("reason")}: {r.comment_report.reason}
  71         </div>
  72         {r.resolver && (
  73           <div>
  74             {r.comment_report.resolved ? (
  75               <T i18nKey="resolved_by">
  76                 #
  77                 <PersonListing person={r.resolver} />
  78               </T>
  79             ) : (
  80               <T i18nKey="unresolved_by">
  81                 #
  82                 <PersonListing person={r.resolver} />
  83               </T>
  84             )}
  85           </div>
  86         )}
  87         <button
  88           className="btn btn-link btn-animate text-muted py-0"
  89           onClick={linkEvent(this, this.handleResolveReport)}
  90           data-tippy-content={tippyContent}
  91           aria-label={tippyContent}
  92         >
  93           <Icon
  94             icon="check"
  95             classes={`icon-inline ${
  96               r.comment_report.resolved ? "text-success" : "text-danger"
  97             }`}
  98           />
  99         </button>
 100       </div>
 101     );
 102   }
 103
 104   handleResolveReport(i: CommentReport) {
 105     let auth = myAuth();
 106     if (auth) {
 107       let form: ResolveCommentReport = {
 108         report_id: i.props.report.comment_report.id,
 109         resolved: !i.props.report.comment_report.resolved,
 110         auth,
 111       };
 112       WebSocketService.Instance.send(wsClient.resolveCommentReport(form));
 113     }
 114   }
 115 }