src/shared/components/private_message/private-message-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   PrivateMessageReportView,
   6   ResolvePrivateMessageReport,
   7 } from "lemmy-js-client";
   8 import { mdToHtml } from "../../markdown";
   9 import { I18NextService } from "../../services";
  10 import { Icon, Spinner } from "../common/icon";
  11 import { PersonListing } from "../person/person-listing";
  12
  13 interface Props {
  14   report: PrivateMessageReportView;
  15   onResolveReport(form: ResolvePrivateMessageReport): void;
  16 }
  17
  18 interface State {
  19   loading: boolean;
  20 }
  21
  22 export class PrivateMessageReport extends Component<Props, State> {
  23   state: State = {
  24     loading: false,
  25   };
  26
  27   constructor(props: any, context: any) {
  28     super(props, context);
  29   }
  30
  31   componentWillReceiveProps(
  32     nextProps: Readonly<{ children?: InfernoNode } & Props>
  33   ): void {
  34     if (this.props != nextProps) {
  35       this.setState({ loading: false });
  36     }
  37   }
  38
  39   render() {
  40     const r = this.props.report;
  41     const pmr = r.private_message_report;
  42     const tippyContent = I18NextService.i18n.t(
  43       r.private_message_report.resolved ? "unresolve_report" : "resolve_report"
  44     );
  45
  46     return (
  47       <div className="private-message-report">
  48         <div>
  49           {I18NextService.i18n.t("creator")}:{" "}
  50           <PersonListing person={r.private_message_creator} />
  51         </div>
  52         <div>
  53           {I18NextService.i18n.t("message")}:
  54           <div
  55             className="md-div"
  56             dangerouslySetInnerHTML={mdToHtml(pmr.original_pm_text)}
  57           />
  58         </div>
  59         <div>
  60           {I18NextService.i18n.t("reporter")}:{" "}
  61           <PersonListing person={r.creator} />
  62         </div>
  63         <div>
  64           {I18NextService.i18n.t("reason")}: {pmr.reason}
  65         </div>
  66         {r.resolver && (
  67           <div>
  68             {pmr.resolved ? (
  69               <T i18nKey="resolved_by">
  70                 #
  71                 <PersonListing person={r.resolver} />
  72               </T>
  73             ) : (
  74               <T i18nKey="unresolved_by">
  75                 #
  76                 <PersonListing person={r.resolver} />
  77               </T>
  78             )}
  79           </div>
  80         )}
  81         <button
  82           className="btn btn-link btn-animate text-muted py-0"
  83           onClick={linkEvent(this, this.handleResolveReport)}
  84           data-tippy-content={tippyContent}
  85           aria-label={tippyContent}
  86         >
  87           {this.state.loading ? (
  88             <Spinner />
  89           ) : (
  90             <Icon
  91               icon="check"
  92               classes={`icon-inline ${
  93                 pmr.resolved ? "text-success" : "text-danger"
  94               }`}
  95             />
  96           )}
  97         </button>
  98       </div>
  99     );
 100   }
 101
 102   handleResolveReport(i: PrivateMessageReport) {
 103     i.setState({ loading: true });
 104     const pmr = i.props.report.private_message_report;
 105     i.props.onResolveReport({
 106       report_id: pmr.id,
 107       resolved: !pmr.resolved,
 108       auth: myAuthRequired(),
 109     });
 110   }
 111 }