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