Report fix (#2089)

* Fix report dialog not closing once submitted.

* Refactor

* Incorporate suggested changes

lemmy-translations

@@ -1 +1 @@
-Subproject commit 22637606f4a4455458e64cefe9f5ec33dccb6c52
+Subproject commit 38bb32f6898b227aaad06a48d8bf69a5b48416d6

src/shared/components/comment/comment-node.tsx

@@ -68,6 +68,7 @@ import { CommunityLink } from "../community/community-link";
 import { PersonListing } from "../person/person-listing";
 import { CommentForm } from "./comment-form";
 import { CommentNodes } from "./comment-nodes";
+import ReportForm from "../common/report-form";
 
 interface CommentNodeState {
   showReply: boolean;
@@ -90,7 +91,6 @@ interface CommentNodeState {
   viewSource: boolean;
   showAdvanced: boolean;
   showReportDialog: boolean;
-  reportReason?: string;
   createOrEditCommentLoading: boolean;
   upvoteLoading: boolean;
   downvoteLoading: boolean;
@@ -105,7 +105,6 @@ interface CommentNodeState {
   addAdminLoading: boolean;
   transferCommunityLoading: boolean;
   fetchChildrenLoading: boolean;
-  reportLoading: boolean;
   purgeLoading: boolean;
 }
 
@@ -179,7 +178,6 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
     addAdminLoading: false,
     transferCommunityLoading: false,
     fetchChildrenLoading: false,
-    reportLoading: false,
     purgeLoading: false,
   };
 
@@ -187,6 +185,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
     super(props, context);
 
     this.handleReplyCancel = this.handleReplyCancel.bind(this);
+    this.handleReportComment = this.handleReportComment.bind(this);
   }
 
   get commentView(): CommentView {
@@ -232,7 +231,6 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
         addAdminLoading: false,
         transferCommunityLoading: false,
         fetchChildrenLoading: false,
-        reportLoading: false,
         purgeLoading: false,
       });
     }
@@ -978,33 +976,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
           </form>
         )}
         {this.state.showReportDialog && (
-          <form
-            className="form-inline"
-            onSubmit={linkEvent(this, this.handleReportComment)}
-          >
-            <label
-              className="visually-hidden"
-              htmlFor={`report-reason-${cv.comment.id}`}
-            >
-              {I18NextService.i18n.t("reason")}
-            </label>
-            <input
-              type="text"
-              required
-              id={`report-reason-${cv.comment.id}`}
-              className="form-control me-2"
-              placeholder={I18NextService.i18n.t("reason")}
-              value={this.state.reportReason}
-              onInput={linkEvent(this, this.handleReportReasonChange)}
-            />
-            <button
-              type="submit"
-              className="btn btn-secondary"
-              aria-label={I18NextService.i18n.t("create_report")}
-            >
-              {I18NextService.i18n.t("create_report")}
-            </button>
-          </form>
+          <ReportForm onSubmit={this.handleReportComment} />
         )}
         {this.state.showBanDialog && (
           <form onSubmit={linkEvent(this, this.handleModBanBothSubmit)}>
@@ -1279,10 +1251,6 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
     i.setState({ showReportDialog: !i.state.showReportDialog });
   }
 
-  handleReportReasonChange(i: CommentNode, event: any) {
-    i.setState({ reportReason: event.target.value });
-  }
-
   handleModRemoveShow(i: CommentNode) {
     i.setState({
       showRemoveDialog: !i.state.showRemoveDialog,
@@ -1538,14 +1506,16 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
     });
   }
 
-  handleReportComment(i: CommentNode, event: any) {
-    event.preventDefault();
-    i.setState({ reportLoading: true });
-    i.props.onCommentReport({
-      comment_id: i.commentId,
-      reason: i.state.reportReason ?? "",
+  handleReportComment(reason: string) {
+    this.props.onCommentReport({
+      comment_id: this.commentId,
+      reason,
       auth: myAuthRequired(),
     });
+
+    this.setState({
+      showReportDialog: false,
+    });
   }
 
   handlePurgeBothSubmit(i: CommentNode, event: any) {

src/shared/components/common/report-form.tsx

@@ -0,0 +1,69 @@
+import { Component, linkEvent } from "inferno";
+import { I18NextService } from "../../services/I18NextService";
+import { Spinner } from "./icon";
+import { randomStr } from "@utils/helpers";
+
+interface ReportFormProps {
+  onSubmit: (reason: string) => void;
+}
+
+interface ReportFormState {
+  loading: boolean;
+  reason: string;
+}
+
+function handleReportReasonChange(i: ReportForm, event: any) {
+  i.setState({ reason: event.target.value });
+}
+
+function handleReportSubmit(i: ReportForm, event: any) {
+  event.preventDefault();
+  i.setState({ loading: true });
+  i.props.onSubmit(i.state.reason);
+
+  i.setState({
+    loading: false,
+    reason: "",
+  });
+}
+
+export default class ReportForm extends Component<
+  ReportFormProps,
+  ReportFormState
+> {
+  state: ReportFormState = {
+    loading: false,
+    reason: "",
+  };
+  constructor(props, context) {
+    super(props, context);
+  }
+
+  render() {
+    const { loading, reason } = this.state;
+    const id = `report-form-${randomStr()}`;
+
+    return (
+      <form
+        className="form-inline"
+        onSubmit={linkEvent(this, handleReportSubmit)}
+      >
+        <label className="visually-hidden" htmlFor={id}>
+          {I18NextService.i18n.t("reason")}
+        </label>
+        <input
+          type="text"
+          id={id}
+          className="form-control me-2"
+          placeholder={I18NextService.i18n.t("reason")}
+          required
+          value={reason}
+          onInput={linkEvent(this, handleReportReasonChange)}
+        />
+        <button type="submit" className="btn btn-secondary">
+          {loading ? <Spinner /> : I18NextService.i18n.t("create_report")}
+        </button>
+      </form>
+    );
+  }
+}

src/shared/components/post/post-listing.tsx

@@ -62,6 +62,7 @@ import { CommunityLink } from "../community/community-link";
 import { PersonListing } from "../person/person-listing";
 import { MetadataCard } from "./metadata-card";
 import { PostForm } from "./post-form";
+import ReportForm from "../common/report-form";
 
 interface PostListingState {
   showEdit: boolean;
@@ -84,8 +85,6 @@ interface PostListingState {
   showMoreMobile: boolean;
   showBody: boolean;
   showReportDialog: boolean;
-  reportReason?: string;
-  reportLoading: boolean;
   blockLoading: boolean;
   lockLoading: boolean;
   deleteLoading: boolean;
@@ -152,7 +151,6 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
     showBody: false,
     showReportDialog: false,
     purgeLoading: false,
-    reportLoading: false,
     blockLoading: false,
     lockLoading: false,
     deleteLoading: false,
@@ -176,13 +174,13 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
 
     this.handleEditPost = this.handleEditPost.bind(this);
     this.handleEditCancel = this.handleEditCancel.bind(this);
+    this.handleReportSubmit = this.handleReportSubmit.bind(this);
   }
 
   componentWillReceiveProps(nextProps: PostListingProps) {
     if (this.props !== nextProps) {
       this.setState({
         purgeLoading: false,
-        reportLoading: false,
         blockLoading: false,
         lockLoading: false,
         deleteLoading: false,
@@ -1288,30 +1286,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
           </form>
         )}
         {this.state.showReportDialog && (
-          <form
-            className="form-inline"
-            onSubmit={linkEvent(this, this.handleReportSubmit)}
-          >
-            <label className="visually-hidden" htmlFor="post-report-reason">
-              {I18NextService.i18n.t("reason")}
-            </label>
-            <input
-              type="text"
-              id="post-report-reason"
-              className="form-control me-2"
-              placeholder={I18NextService.i18n.t("reason")}
-              required
-              value={this.state.reportReason}
-              onInput={linkEvent(this, this.handleReportReasonChange)}
-            />
-            <button type="submit" className="btn btn-secondary">
-              {this.state.reportLoading ? (
-                <Spinner />
-              ) : (
-                I18NextService.i18n.t("create_report")
-              )}
-            </button>
-          </form>
+          <ReportForm onSubmit={this.handleReportSubmit} />
         )}
         {this.state.showPurgeDialog && (
           <form
@@ -1463,18 +1438,16 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
     i.setState({ showReportDialog: !i.state.showReportDialog });
   }
 
-  handleReportReasonChange(i: PostListing, event: any) {
-    i.setState({ reportReason: event.target.value });
-  }
-
-  handleReportSubmit(i: PostListing, event: any) {
-    event.preventDefault();
-    i.setState({ reportLoading: true });
-    i.props.onPostReport({
-      post_id: i.postView.post.id,
-      reason: i.state.reportReason ?? "",
+  handleReportSubmit(reason: string) {
+    this.props.onPostReport({
+      post_id: this.postView.post.id,
+      reason,
       auth: myAuthRequired(),
     });
+
+    this.setState({
+      showReportDialog: false,
+    });
   }
 
   handleBlockPersonClick(i: PostListing) {

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

@@ -15,6 +15,7 @@ import { Icon, Spinner } from "../common/icon";
 import { MomentTime } from "../common/moment-time";
 import { PersonListing } from "../person/person-listing";
 import { PrivateMessageForm } from "./private-message-form";
+import ReportForm from "../common/report-form";
 
 interface PrivateMessageState {
   showReply: boolean;
@@ -22,10 +23,8 @@ interface PrivateMessageState {
   collapsed: boolean;
   viewSource: boolean;
   showReportDialog: boolean;
-  reportReason?: string;
   deleteLoading: boolean;
   readLoading: boolean;
-  reportLoading: boolean;
 }
 
 interface PrivateMessageProps {
@@ -49,12 +48,12 @@ export class PrivateMessage extends Component<
     showReportDialog: false,
     deleteLoading: false,
     readLoading: false,
-    reportLoading: false,
   };
 
   constructor(props: any, context: any) {
     super(props, context);
     this.handleReplyCancel = this.handleReplyCancel.bind(this);
+    this.handleReportSubmit = this.handleReportSubmit.bind(this);
   }
 
   get mine(): boolean {
@@ -76,7 +75,6 @@ export class PrivateMessage extends Component<
         showReportDialog: false,
         deleteLoading: false,
         readLoading: false,
-        reportLoading: false,
       });
     }
   }
@@ -251,34 +249,7 @@ export class PrivateMessage extends Component<
           )}
         </div>
         {this.state.showReportDialog && (
-          <form
-            className="form-inline"
-            onSubmit={linkEvent(this, this.handleReportSubmit)}
-          >
-            <label className="visually-hidden" htmlFor="pm-report-reason">
-              {I18NextService.i18n.t("reason")}
-            </label>
-            <input
-              type="text"
-              id="pm-report-reason"
-              className="form-control me-2"
-              placeholder={I18NextService.i18n.t("reason")}
-              required
-              value={this.state.reportReason}
-              onInput={linkEvent(this, this.handleReportReasonChange)}
-            />
-            <button
-              type="submit"
-              className="btn btn-secondary"
-              aria-label={I18NextService.i18n.t("create_report")}
-            >
-              {this.state.reportLoading ? (
-                <Spinner />
-              ) : (
-                I18NextService.i18n.t("create_report")
-              )}
-            </button>
-          </form>
+          <ReportForm onSubmit={this.handleReportSubmit} />
         )}
         {this.state.showReply && (
           <div className="row">
@@ -362,17 +333,15 @@ export class PrivateMessage extends Component<
     i.setState({ showReportDialog: !i.state.showReportDialog });
   }
 
-  handleReportReasonChange(i: PrivateMessage, event: any) {
-    i.setState({ reportReason: event.target.value });
-  }
-
-  handleReportSubmit(i: PrivateMessage, event: any) {
-    event.preventDefault();
-    i.setState({ reportLoading: true });
-    i.props.onReport({
-      private_message_id: i.props.private_message_view.private_message.id,
-      reason: i.state.reportReason ?? "",
+  handleReportSubmit(reason: string) {
+    this.props.onReport({
+      private_message_id: this.props.private_message_view.private_message.id,
+      reason,
       auth: myAuthRequired(),
     });
+
+    this.setState({
+      showReportDialog: false,
+    });
   }
 }