src/shared/components/comment/comment-report.tsx

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