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

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