]> Untitled Git - lemmy-ui.git/blob - src/shared/components/post/post-report.tsx
Make comment depth easier to track visually
[lemmy-ui.git] / src / shared / components / post / post-report.tsx
1 import { Component, linkEvent } from "inferno";
2 import { T } from "inferno-i18next-dess";
3 import { PostReportView, PostView, ResolvePostReport } from "lemmy-js-client";
4 import { i18n } from "../../i18next";
5 import { WebSocketService } from "../../services";
6 import { myAuth, wsClient } from "../../utils";
7 import { Icon } from "../common/icon";
8 import { PersonListing } from "../person/person-listing";
9 import { PostListing } from "./post-listing";
10
11 interface PostReportProps {
12   report: PostReportView;
13 }
14
15 export class PostReport extends Component<PostReportProps, any> {
16   constructor(props: any, context: any) {
17     super(props, context);
18   }
19
20   render() {
21     let r = this.props.report;
22     let resolver = r.resolver;
23     let post = r.post;
24     let tippyContent = i18n.t(
25       r.post_report.resolved ? "unresolve_report" : "resolve_report"
26     );
27
28     // Set the original post data ( a troll could change it )
29     post.name = r.post_report.original_post_name;
30     post.url = r.post_report.original_post_url;
31     post.body = r.post_report.original_post_body;
32     let pv: PostView = {
33       post,
34       creator: r.post_creator,
35       community: r.community,
36       creator_banned_from_community: r.creator_banned_from_community,
37       counts: r.counts,
38       subscribed: "NotSubscribed",
39       saved: false,
40       read: false,
41       creator_blocked: false,
42       my_vote: r.my_vote,
43       unread_comments: 0,
44     };
45
46     return (
47       <div>
48         <PostListing
49           post_view={pv}
50           showCommunity={true}
51           enableDownvotes={true}
52           enableNsfw={true}
53           viewOnly={true}
54           allLanguages={[]}
55           siteLanguages={[]}
56           hideImage
57         />
58         <div>
59           {i18n.t("reporter")}: <PersonListing person={r.creator} />
60         </div>
61         <div>
62           {i18n.t("reason")}: {r.post_report.reason}
63         </div>
64         {resolver && (
65           <div>
66             {r.post_report.resolved ? (
67               <T i18nKey="resolved_by">
68                 #
69                 <PersonListing person={resolver} />
70               </T>
71             ) : (
72               <T i18nKey="unresolved_by">
73                 #
74                 <PersonListing person={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           <Icon
86             icon="check"
87             classes={`icon-inline ${
88               r.post_report.resolved ? "text-success" : "text-danger"
89             }`}
90           />
91         </button>
92       </div>
93     );
94   }
95
96   handleResolveReport(i: PostReport) {
97     let auth = myAuth();
98     if (auth) {
99       let form: ResolvePostReport = {
100         report_id: i.props.report.post_report.id,
101         resolved: !i.props.report.post_report.resolved,
102         auth,
103       };
104       WebSocketService.Instance.send(wsClient.resolvePostReport(form));
105     }
106   }
107 }