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

   1 import { myAuthRequired } from "@utils/app";
   2 import { Component, InfernoNode, linkEvent } from "inferno";
   3 import { T } from "inferno-i18next-dess";
   4 import { PostReportView, PostView, ResolvePostReport } from "lemmy-js-client";
   5 import { I18NextService } from "../../services";
   6 import { Icon, Spinner } from "../common/icon";
   7 import { PersonListing } from "../person/person-listing";
   8 import { PostListing } from "./post-listing";
   9
  10 interface PostReportProps {
  11   report: PostReportView;
  12   onResolveReport(form: ResolvePostReport): void;
  13 }
  14
  15 interface PostReportState {
  16   loading: boolean;
  17 }
  18
  19 export class PostReport extends Component<PostReportProps, PostReportState> {
  20   state: PostReportState = {
  21     loading: false,
  22   };
  23
  24   constructor(props: any, context: any) {
  25     super(props, context);
  26   }
  27
  28   componentWillReceiveProps(
  29     nextProps: Readonly<{ children?: InfernoNode } & PostReportProps>,
  30   ): void {
  31     if (this.props !== nextProps) {
  32       this.setState({ loading: false });
  33     }
  34   }
  35
  36   render() {
  37     const r = this.props.report;
  38     const resolver = r.resolver;
  39     const post = r.post;
  40     const tippyContent = I18NextService.i18n.t(
  41       r.post_report.resolved ? "unresolve_report" : "resolve_report",
  42     );
  43
  44     // Set the original post data ( a troll could change it )
  45     post.name = r.post_report.original_post_name;
  46     post.url = r.post_report.original_post_url;
  47     post.body = r.post_report.original_post_body;
  48     const pv: PostView = {
  49       post,
  50       creator: r.post_creator,
  51       community: r.community,
  52       creator_banned_from_community: r.creator_banned_from_community,
  53       counts: r.counts,
  54       subscribed: "NotSubscribed",
  55       saved: false,
  56       read: false,
  57       creator_blocked: false,
  58       my_vote: r.my_vote,
  59       unread_comments: 0,
  60     };
  61
  62     return (
  63       <div className="post-report">
  64         <PostListing
  65           post_view={pv}
  66           showCommunity={true}
  67           enableDownvotes={true}
  68           enableNsfw={true}
  69           viewOnly={true}
  70           allLanguages={[]}
  71           siteLanguages={[]}
  72           hideImage
  73           // All of these are unused, since its view only
  74           onPostEdit={() => {}}
  75           onPostVote={() => {}}
  76           onPostReport={() => {}}
  77           onBlockPerson={() => {}}
  78           onLockPost={() => {}}
  79           onDeletePost={() => {}}
  80           onRemovePost={() => {}}
  81           onSavePost={() => {}}
  82           onFeaturePost={() => {}}
  83           onPurgePerson={() => {}}
  84           onPurgePost={() => {}}
  85           onBanPersonFromCommunity={() => {}}
  86           onBanPerson={() => {}}
  87           onAddModToCommunity={() => {}}
  88           onAddAdmin={() => {}}
  89           onTransferCommunity={() => {}}
  90         />
  91         <div>
  92           {I18NextService.i18n.t("reporter")}:{" "}
  93           <PersonListing person={r.creator} />
  94         </div>
  95         <div>
  96           {I18NextService.i18n.t("reason")}: {r.post_report.reason}
  97         </div>
  98         {resolver && (
  99           <div>
 100             {r.post_report.resolved ? (
 101               <T i18nKey="resolved_by">
 102                 #
 103                 <PersonListing person={resolver} />
 104               </T>
 105             ) : (
 106               <T i18nKey="unresolved_by">
 107                 #
 108                 <PersonListing person={resolver} />
 109               </T>
 110             )}
 111           </div>
 112         )}
 113         <button
 114           className="btn btn-link btn-animate text-muted py-0"
 115           onClick={linkEvent(this, this.handleResolveReport)}
 116           data-tippy-content={tippyContent}
 117           aria-label={tippyContent}
 118         >
 119           {this.state.loading ? (
 120             <Spinner />
 121           ) : (
 122             <Icon
 123               icon="check"
 124               classes={`icon-inline ${
 125                 r.post_report.resolved ? "text-success" : "text-danger"
 126               }`}
 127             />
 128           )}
 129         </button>
 130       </div>
 131     );
 132   }
 133
 134   handleResolveReport(i: PostReport) {
 135     i.setState({ loading: true });
 136     i.props.onResolveReport({
 137       report_id: i.props.report.post_report.id,
 138       resolved: !i.props.report.post_report.resolved,
 139       auth: myAuthRequired(),
 140     });
 141   }
 142 }