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 { i18n } from "../../i18next";
   9 import { mdToHtml } from "../../markdown";
  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 = 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           {i18n.t("creator")}:{" "}
  50           <PersonListing person={r.private_message_creator} />
  51         </div>
  52         <div>
  53           {i18n.t("message")}:
  54           <div
  55             className="md-div"
  56             dangerouslySetInnerHTML={mdToHtml(pmr.original_pm_text)}
  57           />
  58         </div>
  59         <div>
  60           {i18n.t("reporter")}: <PersonListing person={r.creator} />
  61         </div>
  62         <div>
  63           {i18n.t("reason")}: {pmr.reason}
  64         </div>
  65         {r.resolver && (
  66           <div>
  67             {pmr.resolved ? (
  68               <T i18nKey="resolved_by">
  69                 #
  70                 <PersonListing person={r.resolver} />
  71               </T>
  72             ) : (
  73               <T i18nKey="unresolved_by">
  74                 #
  75                 <PersonListing person={r.resolver} />
  76               </T>
  77             )}
  78           </div>
  79         )}
  80         <button
  81           className="btn btn-link btn-animate text-muted py-0"
  82           onClick={linkEvent(this, this.handleResolveReport)}
  83           data-tippy-content={tippyContent}
  84           aria-label={tippyContent}
  85         >
  86           {this.state.loading ? (
  87             <Spinner />
  88           ) : (
  89             <Icon
  90               icon="check"
  91               classes={`icon-inline ${
  92                 pmr.resolved ? "text-success" : "text-danger"
  93               }`}
  94             />
  95           )}
  96         </button>
  97       </div>
  98     );
  99   }
 100
 101   handleResolveReport(i: PrivateMessageReport) {
 102     i.setState({ loading: true });
 103     const pmr = i.props.report.private_message_report;
 104     i.props.onResolveReport({
 105       report_id: pmr.id,
 106       resolved: !pmr.resolved,
 107       auth: myAuthRequired(),
 108     });
 109   }
 110 }