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';
18 interface PrivateMessageState {
25 interface PrivateMessageProps {
26 privateMessage: PrivateMessageI;
29 export class PrivateMessage extends Component<
33 private emptyState: PrivateMessageState = {
40 constructor(props: any, context: any) {
41 super(props, context);
43 this.state = this.emptyState;
44 this.handleReplyCancel = this.handleReplyCancel.bind(this);
45 this.handlePrivateMessageCreate = this.handlePrivateMessageCreate.bind(
48 this.handlePrivateMessageEdit = this.handlePrivateMessageEdit.bind(this);
52 return UserService.Instance.user.id == this.props.privateMessage.creator_id;
56 let message = this.props.privateMessage;
60 <ul class="list-inline mb-0 text-muted small">
61 <li className="list-inline-item">
62 {this.mine ? i18n.t('to') : i18n.t('from')}
64 <li className="list-inline-item">
69 ? `/u/${message.recipient_name}`
70 : `/u/${message.creator_name}`
74 ? message.recipient_avatar
75 : message.creator_avatar) &&
80 src={pictshareAvatarThumbnail(
82 ? message.recipient_avatar
83 : message.creator_avatar
85 class="rounded-circle mr-1"
89 {this.mine ? message.recipient_name : message.creator_name}
93 <li className="list-inline-item">
95 <MomentTime data={message} />
98 <li className="list-inline-item">
100 className="pointer text-monospace"
101 onClick={linkEvent(this, this.handleMessageCollapse)}
103 {this.state.collapsed ? '[+]' : '[-]'}
107 {this.state.showEdit && (
109 privateMessage={message}
110 onEdit={this.handlePrivateMessageEdit}
111 onCancel={this.handleReplyCancel}
114 {!this.state.showEdit && !this.state.collapsed && (
116 {this.state.viewSource ? (
117 <pre>{this.messageUnlessRemoved}</pre>
121 dangerouslySetInnerHTML={mdToHtml(this.messageUnlessRemoved)}
124 <ul class="list-inline mb-1 text-muted small font-weight-bold">
127 <li className="list-inline-item">
130 onClick={linkEvent(this, this.handleMarkRead)}
133 ? i18n.t('mark_as_unread')
134 : i18n.t('mark_as_read')}
137 <li className="list-inline-item">
140 onClick={linkEvent(this, this.handleReplyClick)}
149 <li className="list-inline-item">
152 onClick={linkEvent(this, this.handleEditClick)}
157 <li className="list-inline-item">
160 onClick={linkEvent(this, this.handleDeleteClick)}
169 <li className="list-inline-item">•</li>
170 <li className="list-inline-item">
173 onClick={linkEvent(this, this.handleViewSource)}
175 {i18n.t('view_source')}
182 {this.state.showReply && (
185 recipient_id: this.props.privateMessage.creator_id,
187 onCreate={this.handlePrivateMessageCreate}
190 {/* A collapsed clearfix */}
191 {this.state.collapsed && <div class="row col-12"></div>}
196 get messageUnlessRemoved(): string {
197 let message = this.props.privateMessage;
198 return message.deleted ? `*${i18n.t('deleted')}*` : message.content;
201 handleReplyClick(i: PrivateMessage) {
202 i.state.showReply = true;
206 handleEditClick(i: PrivateMessage) {
207 i.state.showEdit = true;
211 handleDeleteClick(i: PrivateMessage) {
212 let form: EditPrivateMessageForm = {
213 edit_id: i.props.privateMessage.id,
214 deleted: !i.props.privateMessage.deleted,
216 WebSocketService.Instance.editPrivateMessage(form);
219 handleReplyCancel() {
220 this.state.showReply = false;
221 this.state.showEdit = false;
222 this.setState(this.state);
225 handleMarkRead(i: PrivateMessage) {
226 let form: EditPrivateMessageForm = {
227 edit_id: i.props.privateMessage.id,
228 read: !i.props.privateMessage.read,
230 WebSocketService.Instance.editPrivateMessage(form);
233 handleMessageCollapse(i: PrivateMessage) {
234 i.state.collapsed = !i.state.collapsed;
238 handleViewSource(i: PrivateMessage) {
239 i.state.viewSource = !i.state.viewSource;
243 handlePrivateMessageEdit() {
244 this.state.showEdit = false;
245 this.setState(this.state);
248 handlePrivateMessageCreate() {
249 this.state.showReply = false;
250 this.setState(this.state);
251 toast(i18n.t('message_sent'));