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

   1 import { myAuthRequired } from "@utils/app";
   2 import { Component, InfernoNode, 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 { CommentNodeI, CommentViewType } from "../../interfaces";
  10 import { I18NextService } from "../../services";
  11 import { Icon, Spinner } from "../common/icon";
  12 import { PersonListing } from "../person/person-listing";
  13 import { CommentNode } from "./comment-node";
  14
  15 interface CommentReportProps {
  16   report: CommentReportView;
  17   onResolveReport(form: ResolveCommentReport): void;
  18 }
  19
  20 interface CommentReportState {
  21   loading: boolean;
  22 }
  23
  24 export class CommentReport extends Component<
  25   CommentReportProps,
  26   CommentReportState
  27 > {
  28   state: CommentReportState = {
  29     loading: false,
  30   };
  31   constructor(props: any, context: any) {
  32     super(props, context);
  33   }
  34
  35   componentWillReceiveProps(
  36     nextProps: Readonly<{ children?: InfernoNode } & CommentReportProps>,
  37   ): void {
  38     if (this.props !== nextProps) {
  39       this.setState({ loading: false });
  40     }
  41   }
  42
  43   render() {
  44     const r = this.props.report;
  45     const comment = r.comment;
  46     const tippyContent = I18NextService.i18n.t(
  47       r.comment_report.resolved ? "unresolve_report" : "resolve_report",
  48     );
  49
  50     // Set the original post data ( a troll could change it )
  51     comment.content = r.comment_report.original_comment_text;
  52
  53     const comment_view: CommentView = {
  54       comment,
  55       creator: r.comment_creator,
  56       post: r.post,
  57       community: r.community,
  58       creator_banned_from_community: r.creator_banned_from_community,
  59       counts: r.counts,
  60       subscribed: "NotSubscribed",
  61       saved: false,
  62       creator_blocked: false,
  63       my_vote: r.my_vote,
  64     };
  65
  66     const node: CommentNodeI = {
  67       comment_view,
  68       children: [],
  69       depth: 0,
  70     };
  71
  72     return (
  73       <div className="comment-report">
  74         <CommentNode
  75           node={node}
  76           viewType={CommentViewType.Flat}
  77           enableDownvotes={true}
  78           viewOnly={true}
  79           showCommunity={true}
  80           allLanguages={[]}
  81           siteLanguages={[]}
  82           hideImages
  83           // All of these are unused, since its viewonly
  84           finished={new Map()}
  85           onSaveComment={() => {}}
  86           onBlockPerson={() => {}}
  87           onDeleteComment={() => {}}
  88           onRemoveComment={() => {}}
  89           onCommentVote={() => {}}
  90           onCommentReport={() => {}}
  91           onDistinguishComment={() => {}}
  92           onAddModToCommunity={() => {}}
  93           onAddAdmin={() => {}}
  94           onTransferCommunity={() => {}}
  95           onPurgeComment={() => {}}
  96           onPurgePerson={() => {}}
  97           onCommentReplyRead={() => {}}
  98           onPersonMentionRead={() => {}}
  99           onBanPersonFromCommunity={() => {}}
 100           onBanPerson={() => {}}
 101           onCreateComment={() => Promise.resolve({ state: "empty" })}
 102           onEditComment={() => Promise.resolve({ state: "empty" })}
 103         />
 104         <div>
 105           {I18NextService.i18n.t("reporter")}:{" "}
 106           <PersonListing person={r.creator} />
 107         </div>
 108         <div>
 109           {I18NextService.i18n.t("reason")}: {r.comment_report.reason}
 110         </div>
 111         {r.resolver && (
 112           <div>
 113             {r.comment_report.resolved ? (
 114               <T i18nKey="resolved_by">
 115                 #
 116                 <PersonListing person={r.resolver} />
 117               </T>
 118             ) : (
 119               <T i18nKey="unresolved_by">
 120                 #
 121                 <PersonListing person={r.resolver} />
 122               </T>
 123             )}
 124           </div>
 125         )}
 126         <button
 127           className="btn btn-link btn-animate text-muted py-0"
 128           onClick={linkEvent(this, this.handleResolveReport)}
 129           data-tippy-content={tippyContent}
 130           aria-label={tippyContent}
 131         >
 132           {this.state.loading ? (
 133             <Spinner />
 134           ) : (
 135             <Icon
 136               icon="check"
 137               classes={`icon-inline ${
 138                 r.comment_report.resolved ? "text-success" : "text-danger"
 139               }`}
 140             />
 141           )}
 142         </button>
 143       </div>
 144     );
 145   }
 146
 147   handleResolveReport(i: CommentReport) {
 148     i.setState({ loading: true });
 149     i.props.onResolveReport({
 150       report_id: i.props.report.comment_report.id,
 151       resolved: !i.props.report.comment_report.resolved,
 152       auth: myAuthRequired(),
 153     });
 154   }
 155 }