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';
8 import { mdToHtml, pictshareAvatarThumbnail, showAvatars } from '../utils';
9 import { MomentTime } from './moment-time';
10 import { PrivateMessageForm } from './private-message-form';
11 import { i18n } from '../i18next';
12 import { T } from 'inferno-i18next';
14 interface PrivateMessageState {
21 interface PrivateMessageProps {
22 privateMessage: PrivateMessageI;
25 export class PrivateMessage extends Component<
29 private emptyState: PrivateMessageState = {
36 constructor(props: any, context: any) {
37 super(props, context);
39 this.state = this.emptyState;
40 this.handleReplyCancel = this.handleReplyCancel.bind(this);
41 this.handlePrivateMessageCreate = this.handlePrivateMessageCreate.bind(
44 this.handlePrivateMessageEdit = this.handlePrivateMessageEdit.bind(this);
48 return UserService.Instance.user.id == this.props.privateMessage.creator_id;
52 let message = this.props.privateMessage;
56 <ul class="list-inline mb-0 text-muted small">
57 <li className="list-inline-item">
58 {this.mine ? i18n.t('to') : i18n.t('from')}
60 <li className="list-inline-item">
65 ? `/u/${message.recipient_name}`
66 : `/u/${message.creator_name}`
70 ? message.recipient_avatar
71 : message.creator_avatar) &&
76 src={pictshareAvatarThumbnail(
78 ? message.recipient_avatar
79 : message.creator_avatar
81 class="rounded-circle mr-1"
85 {this.mine ? message.recipient_name : message.creator_name}
89 <li className="list-inline-item">
91 <MomentTime data={message} />
94 <li className="list-inline-item">
96 className="pointer text-monospace"
97 onClick={linkEvent(this, this.handleMessageCollapse)}
99 {this.state.collapsed ? '[+]' : '[-]'}
103 {this.state.showEdit && (
105 privateMessage={message}
106 onEdit={this.handlePrivateMessageEdit}
107 onCancel={this.handleReplyCancel}
110 {!this.state.showEdit && !this.state.collapsed && (
112 {this.state.viewSource ? (
113 <pre>{this.messageUnlessRemoved}</pre>
117 dangerouslySetInnerHTML={mdToHtml(this.messageUnlessRemoved)}
120 <ul class="list-inline mb-1 text-muted small font-weight-bold">
123 <li className="list-inline-item">
126 onClick={linkEvent(this, this.handleMarkRead)}
129 ? i18n.t('mark_as_unread')
130 : i18n.t('mark_as_read')}
133 <li className="list-inline-item">
136 onClick={linkEvent(this, this.handleReplyClick)}
138 <T i18nKey="reply">#</T>
145 <li className="list-inline-item">
148 onClick={linkEvent(this, this.handleEditClick)}
150 <T i18nKey="edit">#</T>
153 <li className="list-inline-item">
156 onClick={linkEvent(this, this.handleDeleteClick)}
165 <li className="list-inline-item">•</li>
166 <li className="list-inline-item">
169 onClick={linkEvent(this, this.handleViewSource)}
171 <T i18nKey="view_source">#</T>
178 {this.state.showReply && (
181 recipient_id: this.props.privateMessage.creator_id,
183 onCreate={this.handlePrivateMessageCreate}
186 {/* A collapsed clearfix */}
187 {this.state.collapsed && <div class="row col-12"></div>}
192 get messageUnlessRemoved(): string {
193 let message = this.props.privateMessage;
194 return message.deleted ? `*${i18n.t('deleted')}*` : message.content;
197 handleReplyClick(i: PrivateMessage) {
198 i.state.showReply = true;
202 handleEditClick(i: PrivateMessage) {
203 i.state.showEdit = true;
207 handleDeleteClick(i: PrivateMessage) {
208 let form: EditPrivateMessageForm = {
209 edit_id: i.props.privateMessage.id,
210 deleted: !i.props.privateMessage.deleted,
212 WebSocketService.Instance.editPrivateMessage(form);
215 handleReplyCancel() {
216 this.state.showReply = false;
217 this.state.showEdit = false;
218 this.setState(this.state);
221 handleMarkRead(i: PrivateMessage) {
222 let form: EditPrivateMessageForm = {
223 edit_id: i.props.privateMessage.id,
224 read: !i.props.privateMessage.read,
226 WebSocketService.Instance.editPrivateMessage(form);
229 handleMessageCollapse(i: PrivateMessage) {
230 i.state.collapsed = !i.state.collapsed;
234 handleViewSource(i: PrivateMessage) {
235 i.state.viewSource = !i.state.viewSource;
239 handlePrivateMessageEdit() {
240 this.state.showEdit = false;
241 this.setState(this.state);
244 handlePrivateMessageCreate() {
245 this.state.showReply = false;
246 this.setState(this.state);
247 alert(i18n.t('message_sent'));