Fix communities search bug

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/community/communities.tsx

@@ -58,6 +58,13 @@ function getListingTypeFromQuery(listingType?: string): ListingType {
 function getSortTypeFromQuery(type?: string): SortType {
   return type ? (type as SortType) : "TopMonth";
 }
+function getCommunitiesQueryParams() {
+  return getQueryParams<CommunitiesProps>({
+    listingType: getListingTypeFromQuery,
+    sort: getSortTypeFromQuery,
+    page: getPageFromString,
+  });
+}
 
 export class Communities extends Component<any, CommunitiesState> {
   private isoData = setIsoData<CommunitiesData>(this.context);
@@ -107,7 +114,7 @@ export class Communities extends Component<any, CommunitiesState> {
           </h5>
         );
       case "success": {
-        const { listingType, sort, page } = this.getCommunitiesQueryParams();
+        const { listingType, sort, page } = getCommunitiesQueryParams();
         return (
           <div>
             <h1 className="h4 mb-4">
@@ -265,7 +272,7 @@ export class Communities extends Component<any, CommunitiesState> {
       listingType: urlListingType,
       sort: urlSort,
       page: urlPage,
-    } = this.getCommunitiesQueryParams();
+    } = getCommunitiesQueryParams();
 
     const queryParams: QueryParams<CommunitiesProps> = {
       listingType: listingType ?? urlListingType,
@@ -300,8 +307,9 @@ export class Communities extends Component<any, CommunitiesState> {
   handleSearchSubmit(i: Communities, event: any) {
     event.preventDefault();
     const searchParamEncoded = encodeURIComponent(i.state.searchText);
+    const { listingType } = getCommunitiesQueryParams();
     i.context.router.history.push(
-      `/search?q=${searchParamEncoded}&type=Communities`,
+      `/search?q=${searchParamEncoded}&type=Communities&listingType=${listingType}`,
     );
   }
 
@@ -327,14 +335,6 @@ export class Communities extends Component<any, CommunitiesState> {
     };
   }
 
-  getCommunitiesQueryParams() {
-    return getQueryParams<CommunitiesProps>({
-      listingType: getListingTypeFromQuery,
-      sort: getSortTypeFromQuery,
-      page: getPageFromString,
-    });
-  }
-
   async handleFollow(data: {
     i: Communities;
     communityId: number;
@@ -351,7 +351,7 @@ export class Communities extends Component<any, CommunitiesState> {
   async refetch() {
     this.setState({ listCommunitiesResponse: { state: "loading" } });
 
-    const { listingType, sort, page } = this.getCommunitiesQueryParams();
+    const { listingType, sort, page } = getCommunitiesQueryParams();
 
     this.setState({
       listCommunitiesResponse: await HttpService.client.listCommunities({

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,
+    });
   }
 }