Use http client (#1081)

[lemmy-ui.git] / src / shared / components / post / post-report.tsx

diff --git a/src/shared/components/post/post-report.tsx b/src/shared/components/post/post-report.tsx
index 1ce33817b11be8ebcc87879911d580a2b2cf50fc..7854c0ce1bdc90e034d7bb5c257daba7c6407a75 100644 (file)
--- a/src/shared/components/post/post-report.tsx
+++ b/src/shared/components/post/post-report.tsx
@@ -1,32 +1,43 @@
-import { None } from "@sniptt/monads";
-import { Component, linkEvent } from "inferno";
+import { Component, InfernoNode, linkEvent } from "inferno";
 import { T } from "inferno-i18next-dess";
-import {
-  PostReportView,
-  PostView,
-  ResolvePostReport,
-  SubscribedType,
-} from "lemmy-js-client";
+import { PostReportView, PostView, ResolvePostReport } from "lemmy-js-client";
 import { i18n } from "../../i18next";
-import { WebSocketService } from "../../services";
-import { auth, wsClient } from "../../utils";
-import { Icon } from "../common/icon";
+import { myAuthRequired } from "../../utils";
+import { Icon, Spinner } from "../common/icon";
 import { PersonListing } from "../person/person-listing";
 import { PostListing } from "./post-listing";
 
 interface PostReportProps {
   report: PostReportView;
+  onResolveReport(form: ResolvePostReport): void;
 }
 
-export class PostReport extends Component<PostReportProps, any> {
+interface PostReportState {
+  loading: boolean;
+}
+
+export class PostReport extends Component<PostReportProps, PostReportState> {
+  state: PostReportState = {
+    loading: false,
+  };
+
   constructor(props: any, context: any) {
     super(props, context);
   }
 
+  componentWillReceiveProps(
+    nextProps: Readonly<{ children?: InfernoNode } & PostReportProps>
+  ): void {
+    if (this.props != nextProps) {
+      this.setState({ loading: false });
+    }
+  }
+
   render() {
-    let r = this.props.report;
-    let post = r.post;
-    let tippyContent = i18n.t(
+    const r = this.props.report;
+    const resolver = r.resolver;
+    const post = r.post;
+    const tippyContent = i18n.t(
       r.post_report.resolved ? "unresolve_report" : "resolve_report"
     );
 
@@ -34,13 +45,13 @@ export class PostReport extends Component<PostReportProps, any> {
     post.name = r.post_report.original_post_name;
     post.url = r.post_report.original_post_url;
     post.body = r.post_report.original_post_body;
-    let pv: PostView = {
+    const pv: PostView = {
       post,
       creator: r.post_creator,
       community: r.community,
       creator_banned_from_community: r.creator_banned_from_community,
       counts: r.counts,
-      subscribed: SubscribedType.NotSubscribed,
+      subscribed: "NotSubscribed",
       saved: false,
       read: false,
       creator_blocked: false,
@@ -52,15 +63,30 @@ export class PostReport extends Component<PostReportProps, any> {
       <div>
         <PostListing
           post_view={pv}
-          duplicates={None}
-          moderators={None}
-          admins={None}
           showCommunity={true}
           enableDownvotes={true}
           enableNsfw={true}
           viewOnly={true}
           allLanguages={[]}
+          siteLanguages={[]}
           hideImage
+          // All of these are unused, since its view only
+          onPostEdit={() => {}}
+          onPostVote={() => {}}
+          onPostReport={() => {}}
+          onBlockPerson={() => {}}
+          onLockPost={() => {}}
+          onDeletePost={() => {}}
+          onRemovePost={() => {}}
+          onSavePost={() => {}}
+          onFeaturePost={() => {}}
+          onPurgePerson={() => {}}
+          onPurgePost={() => {}}
+          onBanPersonFromCommunity={() => {}}
+          onBanPerson={() => {}}
+          onAddModToCommunity={() => {}}
+          onAddAdmin={() => {}}
+          onTransferCommunity={() => {}}
         />
         <div>
           {i18n.t("reporter")}: <PersonListing person={r.creator} />
@@ -68,47 +94,48 @@ export class PostReport extends Component<PostReportProps, any> {
         <div>
           {i18n.t("reason")}: {r.post_report.reason}
         </div>
-        {r.resolver.match({
-          some: resolver => (
-            <div>
-              {r.post_report.resolved ? (
-                <T i18nKey="resolved_by">
-                  #
-                  <PersonListing person={resolver} />
-                </T>
-              ) : (
-                <T i18nKey="unresolved_by">
-                  #
-                  <PersonListing person={resolver} />
-                </T>
-              )}
-            </div>
-          ),
-          none: <></>,
-        })}
+        {resolver && (
+          <div>
+            {r.post_report.resolved ? (
+              <T i18nKey="resolved_by">
+                #
+                <PersonListing person={resolver} />
+              </T>
+            ) : (
+              <T i18nKey="unresolved_by">
+                #
+                <PersonListing person={resolver} />
+              </T>
+            )}
+          </div>
+        )}
         <button
           className="btn btn-link btn-animate text-muted py-0"
           onClick={linkEvent(this, this.handleResolveReport)}
           data-tippy-content={tippyContent}
           aria-label={tippyContent}
         >
-          <Icon
-            icon="check"
-            classes={`icon-inline ${
-              r.post_report.resolved ? "text-success" : "text-danger"
-            }`}
-          />
+          {this.state.loading ? (
+            <Spinner />
+          ) : (
+            <Icon
+              icon="check"
+              classes={`icon-inline ${
+                r.post_report.resolved ? "text-success" : "text-danger"
+              }`}
+            />
+          )}
         </button>
       </div>
     );
   }
 
   handleResolveReport(i: PostReport) {
-    let form = new ResolvePostReport({
+    i.setState({ loading: true });
+    i.props.onResolveReport({
       report_id: i.props.report.post_report.id,
       resolved: !i.props.report.post_report.resolved,
-      auth: auth().unwrap(),
+      auth: myAuthRequired(),
     });
-    WebSocketService.Instance.send(wsClient.resolvePostReport(form));
   }
 }