src/shared/components/private_message/private-message-report.tsx

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