1 import { myAuthRequired } from "@utils/app";
2 import { capitalizeFirstLetter } from "@utils/helpers";
3 import { Component, InfernoNode } from "inferno";
4 import { T } from "inferno-i18next-dess";
5 import { Prompt } from "inferno-router";
11 } from "lemmy-js-client";
12 import { relTags } from "../../config";
13 import { I18NextService } from "../../services";
14 import { setupTippy } from "../../tippy";
15 import { Icon } from "../common/icon";
16 import { MarkdownTextArea } from "../common/markdown-textarea";
17 import { PersonListing } from "../person/person-listing";
19 interface PrivateMessageFormProps {
21 privateMessageView?: PrivateMessageView; // If a pm is given, that means this is an edit
24 onCreate?(form: CreatePrivateMessage): void;
25 onEdit?(form: EditPrivateMessage): void;
28 interface PrivateMessageFormState {
35 export class PrivateMessageForm extends Component<
36 PrivateMessageFormProps,
37 PrivateMessageFormState
39 state: PrivateMessageFormState = {
42 content: this.props.privateMessageView
43 ? this.props.privateMessageView.private_message.content
48 constructor(props: any, context: any) {
49 super(props, context);
51 this.handleContentChange = this.handleContentChange.bind(this);
58 componentWillReceiveProps(
59 nextProps: Readonly<{ children?: InfernoNode } & PrivateMessageFormProps>
61 if (this.props != nextProps) {
62 this.setState({ loading: false, content: undefined, previewMode: false });
68 <form className="private-message-form">
70 message={I18NextService.i18n.t("block_leaving")}
72 !this.state.loading && !!this.state.content && !this.state.submitted
75 {!this.props.privateMessageView && (
76 <div className="mb-3 row align-items-baseline">
77 <label className="col-sm-2 col-form-label">
78 {capitalizeFirstLetter(I18NextService.i18n.t("to"))}
81 <div className="col-sm-10">
82 <PersonListing person={this.props.recipient} />
86 <div className="alert alert-warning small">
87 <Icon icon="alert-triangle" classes="icon-inline me-1" />
88 <T parent="span" i18nKey="private_message_disclaimer">
91 className="alert-link"
93 href="https://element.io/get-started"
99 <div className="mb-3 row">
100 <label className="col-sm-2 col-form-label">
101 {I18NextService.i18n.t("message")}
103 <div className="col-sm-10">
106 this.handlePrivateMessageSubmit(this, event);
108 initialContent={this.state.content}
109 onContentChange={this.handleContentChange}
112 hideNavigationWarnings
113 onReplyCancel={() => this.handleCancel(this)}
114 replyType={this.props.replyType}
116 this.props.privateMessageView
117 ? capitalizeFirstLetter(I18NextService.i18n.t("save"))
118 : capitalizeFirstLetter(I18NextService.i18n.t("send_message"))
127 handlePrivateMessageSubmit(i: PrivateMessageForm, event: any) {
128 event.preventDefault();
129 i.setState({ loading: true, submitted: true });
130 const pm = i.props.privateMessageView;
131 const auth = myAuthRequired();
132 const content = i.state.content ?? "";
135 private_message_id: pm.private_message.id,
142 recipient_id: i.props.recipient.id,
148 handleContentChange(val: string) {
149 this.setState({ content: val });
152 handleCancel(i: PrivateMessageForm) {
153 i.props.onCancel?.();
156 handlePreviewToggle(i: PrivateMessageForm, event: any) {
157 event.preventDefault();
158 i.setState({ previewMode: !i.state.previewMode });