1 import { Component, linkEvent } from 'inferno';
2 import { Link } from 'inferno-router';
4 PrivateMessage as PrivateMessageI,
5 EditPrivateMessageForm,
6 } from '../interfaces';
7 import { WebSocketService, UserService } from '../services';
10 pictshareAvatarThumbnail,
14 import { MomentTime } from './moment-time';
15 import { PrivateMessageForm } from './private-message-form';
16 import { i18n } from '../i18next';
17 import { T } from 'inferno-i18next';
19 interface PrivateMessageState {
26 interface PrivateMessageProps {
27 privateMessage: PrivateMessageI;
30 export class PrivateMessage extends Component<
34 private emptyState: PrivateMessageState = {
41 constructor(props: any, context: any) {
42 super(props, context);
44 this.state = this.emptyState;
45 this.handleReplyCancel = this.handleReplyCancel.bind(this);
46 this.handlePrivateMessageCreate = this.handlePrivateMessageCreate.bind(
49 this.handlePrivateMessageEdit = this.handlePrivateMessageEdit.bind(this);
53 return UserService.Instance.user.id == this.props.privateMessage.creator_id;
57 let message = this.props.privateMessage;
61 <ul class="list-inline mb-0 text-muted small">
62 <li className="list-inline-item">
63 {this.mine ? i18n.t('to') : i18n.t('from')}
65 <li className="list-inline-item">
70 ? `/u/${message.recipient_name}`
71 : `/u/${message.creator_name}`
75 ? message.recipient_avatar
76 : message.creator_avatar) &&
81 src={pictshareAvatarThumbnail(
83 ? message.recipient_avatar
84 : message.creator_avatar
86 class="rounded-circle mr-1"
90 {this.mine ? message.recipient_name : message.creator_name}
94 <li className="list-inline-item">
96 <MomentTime data={message} />
99 <li className="list-inline-item">
101 className="pointer text-monospace"
102 onClick={linkEvent(this, this.handleMessageCollapse)}
104 {this.state.collapsed ? '[+]' : '[-]'}
108 {this.state.showEdit && (
110 privateMessage={message}
111 onEdit={this.handlePrivateMessageEdit}
112 onCancel={this.handleReplyCancel}
115 {!this.state.showEdit && !this.state.collapsed && (
117 {this.state.viewSource ? (
118 <pre>{this.messageUnlessRemoved}</pre>
122 dangerouslySetInnerHTML={mdToHtml(this.messageUnlessRemoved)}
125 <ul class="list-inline mb-1 text-muted small font-weight-bold">
128 <li className="list-inline-item">
131 onClick={linkEvent(this, this.handleMarkRead)}
134 ? i18n.t('mark_as_unread')
135 : i18n.t('mark_as_read')}
138 <li className="list-inline-item">
141 onClick={linkEvent(this, this.handleReplyClick)}
143 <T i18nKey="reply">#</T>
150 <li className="list-inline-item">
153 onClick={linkEvent(this, this.handleEditClick)}
155 <T i18nKey="edit">#</T>
158 <li className="list-inline-item">
161 onClick={linkEvent(this, this.handleDeleteClick)}
170 <li className="list-inline-item">•</li>
171 <li className="list-inline-item">
174 onClick={linkEvent(this, this.handleViewSource)}
176 <T i18nKey="view_source">#</T>
183 {this.state.showReply && (
186 recipient_id: this.props.privateMessage.creator_id,
188 onCreate={this.handlePrivateMessageCreate}
191 {/* A collapsed clearfix */}
192 {this.state.collapsed && <div class="row col-12"></div>}
197 get messageUnlessRemoved(): string {
198 let message = this.props.privateMessage;
199 return message.deleted ? `*${i18n.t('deleted')}*` : message.content;
202 handleReplyClick(i: PrivateMessage) {
203 i.state.showReply = true;
207 handleEditClick(i: PrivateMessage) {
208 i.state.showEdit = true;
212 handleDeleteClick(i: PrivateMessage) {
213 let form: EditPrivateMessageForm = {
214 edit_id: i.props.privateMessage.id,
215 deleted: !i.props.privateMessage.deleted,
217 WebSocketService.Instance.editPrivateMessage(form);
220 handleReplyCancel() {
221 this.state.showReply = false;
222 this.state.showEdit = false;
223 this.setState(this.state);
226 handleMarkRead(i: PrivateMessage) {
227 let form: EditPrivateMessageForm = {
228 edit_id: i.props.privateMessage.id,
229 read: !i.props.privateMessage.read,
231 WebSocketService.Instance.editPrivateMessage(form);
234 handleMessageCollapse(i: PrivateMessage) {
235 i.state.collapsed = !i.state.collapsed;
239 handleViewSource(i: PrivateMessage) {
240 i.state.viewSource = !i.state.viewSource;
244 handlePrivateMessageEdit() {
245 this.state.showEdit = false;
246 this.setState(this.state);
249 handlePrivateMessageCreate() {
250 this.state.showReply = false;
251 this.setState(this.state);
252 toast(i18n.t('message_sent'), 'danger');