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           onMarkPostAsRead={() => {}}
  91         />
  92         <div>
  93           {I18NextService.i18n.t("reporter")}:{" "}
  94           <PersonListing person={r.creator} />
  95         </div>
  96         <div>
  97           {I18NextService.i18n.t("reason")}: {r.post_report.reason}
  98         </div>
  99         {resolver && (
 100           <div>
 101             {r.post_report.resolved ? (
 102               <T i18nKey="resolved_by">
 103                 #
 104                 <PersonListing person={resolver} />
 105               </T>
 106             ) : (
 107               <T i18nKey="unresolved_by">
 108                 #
 109                 <PersonListing person={resolver} />
 110               </T>
 111             )}
 112           </div>
 113         )}
 114         <button
 115           className="btn btn-link btn-animate text-muted py-0"
 116           onClick={linkEvent(this, this.handleResolveReport)}
 117           data-tippy-content={tippyContent}
 118           aria-label={tippyContent}
 119         >
 120           {this.state.loading ? (
 121             <Spinner />
 122           ) : (
 123             <Icon
 124               icon="check"
 125               classes={`icon-inline ${
 126                 r.post_report.resolved ? "text-success" : "text-danger"
 127               }`}
 128             />
 129           )}
 130         </button>
 131       </div>
 132     );
 133   }
 134
 135   handleResolveReport(i: PostReport) {
 136     i.setState({ loading: true });
 137     i.props.onResolveReport({
 138       report_id: i.props.report.post_report.id,
 139       resolved: !i.props.report.post_report.resolved,
 140       auth: myAuthRequired(),
 141     });
 142   }
 143 }