import { Link } from 'inferno-router';
import {
PrivateMessage as PrivateMessageI,
- EditPrivateMessageForm,
-} from '../interfaces';
+ DeletePrivateMessageForm,
+ MarkPrivateMessageAsReadForm,
+} from 'lemmy-js-client';
import { WebSocketService, UserService } from '../services';
-import { mdToHtml, pictshareAvatarThumbnail, showAvatars } from '../utils';
+import { mdToHtml, pictrsAvatarThumbnail, showAvatars, toast } from '../utils';
import { MomentTime } from './moment-time';
import { PrivateMessageForm } from './private-message-form';
+import { UserListing, UserOther } from './user-listing';
import { i18n } from '../i18next';
-import { T } from 'inferno-i18next';
interface PrivateMessageState {
showReply: boolean;
}
get mine(): boolean {
- return UserService.Instance.user.id == this.props.privateMessage.creator_id;
+ return (
+ UserService.Instance.user &&
+ UserService.Instance.user.id == this.props.privateMessage.creator_id
+ );
}
render() {
let message = this.props.privateMessage;
+ let userOther: UserOther = this.mine
+ ? {
+ name: message.recipient_name,
+ preferred_username: message.recipient_preferred_username,
+ id: message.id,
+ avatar: message.recipient_avatar,
+ local: message.recipient_local,
+ actor_id: message.recipient_actor_id,
+ published: message.published,
+ }
+ : {
+ name: message.creator_name,
+ preferred_username: message.creator_preferred_username,
+ id: message.id,
+ avatar: message.creator_avatar,
+ local: message.creator_local,
+ actor_id: message.creator_actor_id,
+ published: message.published,
+ };
+
return (
- <div class="mb-2">
+ <div class="border-top border-light">
<div>
<ul class="list-inline mb-0 text-muted small">
+ {/* TODO refactor this */}
<li className="list-inline-item">
{this.mine ? i18n.t('to') : i18n.t('from')}
</li>
<li className="list-inline-item">
- <Link
- className="text-info"
- to={
- this.mine
- ? `/u/${message.recipient_name}`
- : `/u/${message.creator_name}`
- }
- >
- {(this.mine
- ? message.recipient_avatar
- : message.creator_avatar) &&
- showAvatars() && (
- <img
- height="32"
- width="32"
- src={pictshareAvatarThumbnail(
- this.mine
- ? message.recipient_avatar
- : message.creator_avatar
- )}
- class="rounded-circle mr-1"
- />
- )}
- <span>
- {this.mine ? message.recipient_name : message.creator_name}
- </span>
- </Link>
+ <UserListing user={userOther} />
</li>
<li className="list-inline-item">
<span>
className="pointer text-monospace"
onClick={linkEvent(this, this.handleMessageCollapse)}
>
- {this.state.collapsed ? '[+]' : '[-]'}
+ {this.state.collapsed ? (
+ <svg class="icon icon-inline">
+ <use xlinkHref="#icon-plus-square"></use>
+ </svg>
+ ) : (
+ <svg class="icon icon-inline">
+ <use xlinkHref="#icon-minus-square"></use>
+ </svg>
+ )}
</div>
</li>
</ul>
<PrivateMessageForm
privateMessage={message}
onEdit={this.handlePrivateMessageEdit}
+ onCreate={this.handlePrivateMessageCreate}
onCancel={this.handleReplyCancel}
/>
)}
dangerouslySetInnerHTML={mdToHtml(this.messageUnlessRemoved)}
/>
)}
- <ul class="list-inline mb-1 text-muted small font-weight-bold">
+ <ul class="list-inline mb-0 text-muted font-weight-bold">
{!this.mine && (
<>
<li className="list-inline-item">
- <span
- class="pointer"
+ <button
+ class="btn btn-link btn-animate text-muted"
onClick={linkEvent(this, this.handleMarkRead)}
+ data-tippy-content={
+ message.read
+ ? i18n.t('mark_as_unread')
+ : i18n.t('mark_as_read')
+ }
>
- {message.read
- ? i18n.t('mark_as_unread')
- : i18n.t('mark_as_read')}
- </span>
+ <svg
+ class={`icon icon-inline ${
+ message.read && 'text-success'
+ }`}
+ >
+ <use xlinkHref="#icon-check"></use>
+ </svg>
+ </button>
</li>
<li className="list-inline-item">
- <span
- class="pointer"
+ <button
+ class="btn btn-link btn-animate text-muted"
onClick={linkEvent(this, this.handleReplyClick)}
+ data-tippy-content={i18n.t('reply')}
>
- <T i18nKey="reply">#</T>
- </span>
+ <svg class="icon icon-inline">
+ <use xlinkHref="#icon-reply1"></use>
+ </svg>
+ </button>
</li>
</>
)}
{this.mine && (
<>
<li className="list-inline-item">
- <span
- class="pointer"
+ <button
+ class="btn btn-link btn-animate text-muted"
onClick={linkEvent(this, this.handleEditClick)}
+ data-tippy-content={i18n.t('edit')}
>
- <T i18nKey="edit">#</T>
- </span>
+ <svg class="icon icon-inline">
+ <use xlinkHref="#icon-edit"></use>
+ </svg>
+ </button>
</li>
<li className="list-inline-item">
- <span
- class="pointer"
+ <button
+ class="btn btn-link btn-animate text-muted"
onClick={linkEvent(this, this.handleDeleteClick)}
+ data-tippy-content={
+ !message.deleted
+ ? i18n.t('delete')
+ : i18n.t('restore')
+ }
>
- {!message.deleted
- ? i18n.t('delete')
- : i18n.t('restore')}
- </span>
+ <svg
+ class={`icon icon-inline ${
+ message.deleted && 'text-danger'
+ }`}
+ >
+ <use xlinkHref="#icon-trash"></use>
+ </svg>
+ </button>
</li>
</>
)}
- <li className="list-inline-item">•</li>
<li className="list-inline-item">
- <span
- className="pointer"
+ <button
+ class="btn btn-link btn-animate text-muted"
onClick={linkEvent(this, this.handleViewSource)}
+ data-tippy-content={i18n.t('view_source')}
>
- <T i18nKey="view_source">#</T>
- </span>
+ <svg
+ class={`icon icon-inline ${
+ this.state.viewSource && 'text-success'
+ }`}
+ >
+ <use xlinkHref="#icon-file-text"></use>
+ </svg>
+ </button>
</li>
</ul>
</div>
}
handleDeleteClick(i: PrivateMessage) {
- let form: EditPrivateMessageForm = {
+ let form: DeletePrivateMessageForm = {
edit_id: i.props.privateMessage.id,
deleted: !i.props.privateMessage.deleted,
};
- WebSocketService.Instance.editPrivateMessage(form);
+ WebSocketService.Instance.deletePrivateMessage(form);
}
handleReplyCancel() {
}
handleMarkRead(i: PrivateMessage) {
- let form: EditPrivateMessageForm = {
+ let form: MarkPrivateMessageAsReadForm = {
edit_id: i.props.privateMessage.id,
read: !i.props.privateMessage.read,
};
- WebSocketService.Instance.editPrivateMessage(form);
+ WebSocketService.Instance.markPrivateMessageAsRead(form);
}
handleMessageCollapse(i: PrivateMessage) {
this.setState(this.state);
}
- handlePrivateMessageCreate() {
- this.state.showReply = false;
- this.setState(this.state);
- alert(i18n.t('message_sent'));
+ handlePrivateMessageCreate(message: PrivateMessageI) {
+ if (
+ UserService.Instance.user &&
+ message.creator_id == UserService.Instance.user.id
+ ) {
+ this.state.showReply = false;
+ this.setState(this.state);
+ toast(i18n.t('message_sent'));
+ }
}
}
projects / lemmy.git / blobdiff