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";
10 } from "lemmy-js-client";
11 import { relTags } from "../../config";
12 import { I18NextService } from "../../services";
13 import { setupTippy } from "../../tippy";
14 import { Icon } from "../common/icon";
15 import { MarkdownTextArea } from "../common/markdown-textarea";
16 import NavigationPrompt from "../common/navigation-prompt";
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 });
67 // when={!this.state.loading && this.state.content}
68 // message={I18NextService.i18n.t("block_leaving")}
73 <form className="private-message-form">
76 !this.state.loading && !!this.state.content && !this.state.submitted
79 {!this.props.privateMessageView && (
80 <div className="mb-3 row align-items-baseline">
81 <label className="col-sm-2 col-form-label">
82 {capitalizeFirstLetter(I18NextService.i18n.t("to"))}
85 <div className="col-sm-10">
86 <PersonListing person={this.props.recipient} />
90 <div className="alert alert-warning small">
91 <Icon icon="alert-triangle" classes="icon-inline me-1" />
92 <T parent="span" i18nKey="private_message_disclaimer">
95 className="alert-link"
97 href="https://element.io/get-started"
103 <div className="mb-3 row">
104 <label className="col-sm-2 col-form-label">
105 {I18NextService.i18n.t("message")}
107 <div className="col-sm-10">
110 this.handlePrivateMessageSubmit(this, event);
112 initialContent={this.state.content}
113 onContentChange={this.handleContentChange}
116 hideNavigationWarnings
117 onReplyCancel={() => this.handleCancel(this)}
118 replyType={this.props.replyType}
120 this.props.privateMessageView
121 ? capitalizeFirstLetter(I18NextService.i18n.t("save"))
122 : capitalizeFirstLetter(I18NextService.i18n.t("send_message"))
131 handlePrivateMessageSubmit(i: PrivateMessageForm, event: any) {
132 event.preventDefault();
133 i.setState({ loading: true, submitted: true });
134 const pm = i.props.privateMessageView;
135 const auth = myAuthRequired();
136 const content = i.state.content ?? "";
139 private_message_id: pm.private_message.id,
146 recipient_id: i.props.recipient.id,
152 handleContentChange(val: string) {
153 this.setState({ content: val });
156 handleCancel(i: PrivateMessageForm) {
157 i.props.onCancel?.();
160 handlePreviewToggle(i: PrivateMessageForm, event: any) {
161 event.preventDefault();
162 i.setState({ previewMode: !i.state.previewMode });