mirror of
https://github.com/LemmyNet/lemmy-ui.git
synced 2024-11-22 20:31:13 +00:00
Refactor
This commit is contained in:
SleeplessOne1917
parent
60c7a5d720
commit
9edf422759
5 changed files with 103 additions and 134 deletions
|
|
@ -1 +1 @@
|
|||
Subproject commit 22637606f4a4455458e64cefe9f5ec33dccb6c52
|
||||
Subproject commit 302cf9633459ba9a0998a98551b0c178f804c6d8
|
||||
|
|
@ -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,
|
||||
};
|
||||
|
||||
|
|
@ -232,7 +230,6 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
|
|||
addAdminLoading: false,
|
||||
transferCommunityLoading: false,
|
||||
fetchChildrenLoading: false,
|
||||
reportLoading: false,
|
||||
purgeLoading: false,
|
||||
});
|
||||
}
|
||||
|
|
@ -978,33 +975,10 @@ 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
|
||||
id={`report-reason-${cv.comment.id}`}
|
||||
onSubmit={this.handleReportComment}
|
||||
/>
|
||||
)}
|
||||
{this.state.showBanDialog && (
|
||||
<form onSubmit={linkEvent(this, this.handleModBanBothSubmit)}>
|
||||
|
|
@ -1279,10 +1253,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,21 +1508,17 @@ 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(),
|
||||
});
|
||||
|
||||
i.setState({
|
||||
reportLoading: false,
|
||||
reportReason: undefined,
|
||||
this.setState({
|
||||
showReportDialog: false,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
handlePurgeBothSubmit(i: CommentNode, event: any) {
|
||||
event.preventDefault();
|
||||
|
|
|
|||
69
src/shared/components/common/report-form.tsx
Normal file
69
src/shared/components/common/report-form.tsx
Normal file
|
|
@ -0,0 +1,69 @@
|
|||
import { Component, linkEvent } from "inferno";
|
||||
import { I18NextService } from "../../services/I18NextService";
|
||||
import { Spinner } from "./icon";
|
||||
|
||||
interface ReportFormProps {
|
||||
onSubmit: (reason: string) => void;
|
||||
id: string;
|
||||
}
|
||||
|
||||
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 { id } = this.props;
|
||||
const { loading, reason } = this.state;
|
||||
|
||||
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>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -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,
|
||||
|
|
@ -182,7 +180,6 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
|
|||
if (this.props !== nextProps) {
|
||||
this.setState({
|
||||
purgeLoading: false,
|
||||
reportLoading: false,
|
||||
blockLoading: false,
|
||||
lockLoading: false,
|
||||
deleteLoading: false,
|
||||
|
|
@ -1288,30 +1285,10 @@ 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
|
||||
id="post-report-reason"
|
||||
onSubmit={this.handleReportSubmit}
|
||||
/>
|
||||
)}
|
||||
{this.state.showPurgeDialog && (
|
||||
<form
|
||||
|
|
@ -1463,25 +1440,17 @@ 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(),
|
||||
});
|
||||
|
||||
i.setState({
|
||||
reportLoading: false,
|
||||
this.setState({
|
||||
showReportDialog: false,
|
||||
reportReason: undefined,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
handleBlockPersonClick(i: PostListing) {
|
||||
i.setState({ blockLoading: true });
|
||||
|
|
|
|||
|
|
@ -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,7 +48,6 @@ export class PrivateMessage extends Component<
|
|||
showReportDialog: false,
|
||||
deleteLoading: false,
|
||||
readLoading: false,
|
||||
reportLoading: false,
|
||||
};
|
||||
|
||||
constructor(props: any, context: any) {
|
||||
|
|
@ -76,7 +74,6 @@ export class PrivateMessage extends Component<
|
|||
showReportDialog: false,
|
||||
deleteLoading: false,
|
||||
readLoading: false,
|
||||
reportLoading: false,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
@ -251,34 +248,10 @@ 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
|
||||
id="pm-report-reason"
|
||||
onSubmit={this.handleReportSubmit}
|
||||
/>
|
||||
)}
|
||||
{this.state.showReply && (
|
||||
<div className="row">
|
||||
|
|
@ -362,23 +335,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(),
|
||||
});
|
||||
|
||||
i.setState({
|
||||
reportLoading: false,
|
||||
this.setState({
|
||||
showReportDialog: false,
|
||||
reportReason: undefined,
|
||||
});
|
||||
}
|
||||
};
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue