LemmyNet/lemmy-ui
2
0
Fork 0
mirror of https://github.com/LemmyNet/lemmy-ui.git synced 2024-11-01 01:59:56 +00:00
Code Issues Projects Releases Wiki Activity

Report fix (#2089)

Browse source 
* Fix report dialog not closing once submitted.

* Refactor

* Incorporate suggested changes
This commit is contained in:
SleeplessOne1917 2023-08-31 12:34:06 +00:00 committed by GitHub
parent 6224c4e378
commit 7c2defcf0e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 103 additions and 122 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
lemmy-translations

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

52
src/shared/components/comment/comment-node.tsx
View file

@ -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) {

69
src/shared/components/common/report-form.tsx Normal file
View file

@ -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>
);
}
}

49
src/shared/components/post/post-listing.tsx
View file

@ -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) {

53
src/shared/components/private_message/private-message.tsx
View file

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