1 import { Component, linkEvent } from 'inferno';
2 import { Prompt } from 'inferno-router';
3 import { Subscription } from 'rxjs';
5 PrivateMessageForm as PrivateMessageFormI,
6 EditPrivateMessageForm,
8 PrivateMessageResponse,
11 WebSocketJsonResponse,
12 } from 'lemmy-js-client';
13 import { WebSocketService } from '../services';
15 capitalizeFirstLetter,
22 import { UserListing } from './user-listing';
23 import { MarkdownTextArea } from './markdown-textarea';
24 import { i18n } from '../i18next';
25 import { T } from 'inferno-i18next';
27 interface PrivateMessageFormProps {
29 privateMessage?: PrivateMessage; // If a pm is given, that means this is an edit
31 onCreate?(message: PrivateMessage): any;
32 onEdit?(message: PrivateMessage): any;
35 interface PrivateMessageFormState {
36 privateMessageForm: PrivateMessageFormI;
39 showDisclaimer: boolean;
42 export class PrivateMessageForm extends Component<
43 PrivateMessageFormProps,
44 PrivateMessageFormState
46 private subscription: Subscription;
47 private emptyState: PrivateMessageFormState = {
50 recipient_id: this.props.recipient.id,
54 showDisclaimer: false,
57 constructor(props: any, context: any) {
58 super(props, context);
60 this.state = this.emptyState;
62 this.handleContentChange = this.handleContentChange.bind(this);
64 this.parseMessage = this.parseMessage.bind(this);
65 this.subscription = wsSubscribe(this.parseMessage);
67 if (this.props.privateMessage) {
68 this.state.privateMessageForm = {
69 content: this.props.privateMessage.content,
70 recipient_id: this.props.privateMessage.recipient_id,
79 componentDidUpdate() {
80 if (!this.state.loading && this.state.privateMessageForm.content) {
81 window.onbeforeunload = () => true;
83 window.onbeforeunload = undefined;
87 componentWillUnmount() {
89 this.subscription.unsubscribe();
90 window.onbeforeunload = null;
98 when={!this.state.loading && this.state.privateMessageForm.content}
99 message={i18n.t('block_leaving')}
101 <form onSubmit={linkEvent(this, this.handlePrivateMessageSubmit)}>
102 {!this.props.privateMessage && (
103 <div class="form-group row">
104 <label class="col-sm-2 col-form-label">
105 {capitalizeFirstLetter(i18n.t('to'))}
108 <div class="col-sm-10 form-control-plaintext">
111 name: this.props.recipient.name,
112 preferred_username: this.props.recipient.preferred_username,
113 avatar: this.props.recipient.avatar,
114 id: this.props.recipient.id,
115 local: this.props.recipient.local,
116 actor_id: this.props.recipient.actor_id,
122 <div class="form-group row">
123 <label class="col-sm-2 col-form-label">
126 onClick={linkEvent(this, this.handleShowDisclaimer)}
127 class="ml-2 pointer text-danger"
128 data-tippy-content={i18n.t('disclaimer')}
130 <svg class={`icon icon-inline`}>
131 <use xlinkHref="#icon-alert-triangle"></use>
135 <div class="col-sm-10">
137 initialContent={this.state.privateMessageForm.content}
138 onContentChange={this.handleContentChange}
143 {this.state.showDisclaimer && (
144 <div class="form-group row">
145 <div class="offset-sm-2 col-sm-10">
146 <div class="alert alert-danger" role="alert">
147 <T i18nKey="private_message_disclaimer">
153 href="https://element.io/get-started"
162 <div class="form-group row">
163 <div class="offset-sm-2 col-sm-10">
166 class="btn btn-secondary mr-2"
167 disabled={this.state.loading}
169 {this.state.loading ? (
170 <svg class="icon icon-spinner spin">
171 <use xlinkHref="#icon-spinner"></use>
173 ) : this.props.privateMessage ? (
174 capitalizeFirstLetter(i18n.t('save'))
176 capitalizeFirstLetter(i18n.t('send_message'))
179 {this.props.privateMessage && (
182 class="btn btn-secondary"
183 onClick={linkEvent(this, this.handleCancel)}
188 <ul class="d-inline-block float-right list-inline mb-1 text-muted font-weight-bold">
189 <li class="list-inline-item"></li>
198 handlePrivateMessageSubmit(i: PrivateMessageForm, event: any) {
199 event.preventDefault();
200 if (i.props.privateMessage) {
201 let editForm: EditPrivateMessageForm = {
202 edit_id: i.props.privateMessage.id,
203 content: i.state.privateMessageForm.content,
205 WebSocketService.Instance.editPrivateMessage(editForm);
207 WebSocketService.Instance.createPrivateMessage(
208 i.state.privateMessageForm
211 i.state.loading = true;
215 handleContentChange(val: string) {
216 this.state.privateMessageForm.content = val;
217 this.setState(this.state);
220 handleCancel(i: PrivateMessageForm) {
224 handlePreviewToggle(i: PrivateMessageForm, event: any) {
225 event.preventDefault();
226 i.state.previewMode = !i.state.previewMode;
230 handleShowDisclaimer(i: PrivateMessageForm) {
231 i.state.showDisclaimer = !i.state.showDisclaimer;
235 parseMessage(msg: WebSocketJsonResponse) {
236 let res = wsJsonToRes(msg);
238 toast(i18n.t(msg.error), 'danger');
239 this.state.loading = false;
240 this.setState(this.state);
243 res.op == UserOperation.EditPrivateMessage ||
244 res.op == UserOperation.DeletePrivateMessage ||
245 res.op == UserOperation.MarkPrivateMessageAsRead
247 let data = res.data as PrivateMessageResponse;
248 this.state.loading = false;
249 this.props.onEdit(data.message);
250 } else if (res.op == UserOperation.CreatePrivateMessage) {
251 let data = res.data as PrivateMessageResponse;
252 this.state.loading = false;
253 this.props.onCreate(data.message);
254 this.setState(this.state);