1 import { Component, linkEvent } from 'inferno';
2 import { Subscription } from 'rxjs';
10 GetUserMentionsResponse,
15 PrivateMessagesResponse,
16 PrivateMessageResponse,
19 } from 'lemmy-js-client';
20 import { WebSocketService, UserService } from '../services';
37 import { CommentNodes } from './comment-nodes';
38 import { PrivateMessage } from './private-message';
39 import { HtmlTags } from './html-tags';
40 import { SortSelect } from './sort-select';
41 import { i18n } from '../i18next';
42 import { InitialFetchRequest } from 'shared/interfaces';
64 view: CommentView | PrivateMessageView | UserMentionView;
68 interface InboxState {
69 unreadOrAll: UnreadOrAll;
70 messageType: MessageType;
71 replies: CommentView[];
72 mentions: UserMentionView[];
73 messages: PrivateMessageView[];
80 export class Inbox extends Component<any, InboxState> {
81 private isoData = setIsoData(this.context);
82 private subscription: Subscription;
83 private emptyState: InboxState = {
84 unreadOrAll: UnreadOrAll.Unread,
85 messageType: MessageType.All,
91 site_view: this.isoData.site_res.site_view,
95 constructor(props: any, context: any) {
96 super(props, context);
98 this.state = this.emptyState;
99 this.handleSortChange = this.handleSortChange.bind(this);
101 if (!UserService.Instance.user && isBrowser()) {
102 toast(i18n.t('not_logged_in'), 'danger');
103 this.context.router.history.push(`/login`);
106 this.parseMessage = this.parseMessage.bind(this);
107 this.subscription = wsSubscribe(this.parseMessage);
109 // Only fetch the data if coming from another route
110 if (this.isoData.path == this.context.router.route.match.url) {
111 this.state.replies = this.isoData.routeData[0].replies || [];
112 this.state.mentions = this.isoData.routeData[1].mentions || [];
113 this.state.messages = this.isoData.routeData[2].messages || [];
114 this.state.loading = false;
120 componentWillUnmount() {
122 this.subscription.unsubscribe();
126 get documentTitle(): string {
127 return `@${UserService.Instance.user.name} ${i18n.t('inbox')} - ${
128 this.state.site_view.site.name
134 <div class="container">
135 {this.state.loading ? (
137 <svg class="icon icon-spinner spin">
138 <use xlinkHref="#icon-spinner"></use>
145 title={this.documentTitle}
146 path={this.context.router.route.match.url}
152 href={`/feeds/inbox/${UserService.Instance.auth}.xml`}
157 <svg class="icon ml-2 text-muted small">
158 <use xlinkHref="#icon-rss">#</use>
163 {this.state.replies.length +
164 this.state.mentions.length +
165 this.state.messages.length >
167 this.state.unreadOrAll == UnreadOrAll.Unread && (
168 <ul class="list-inline mb-1 text-muted small font-weight-bold">
169 <li className="list-inline-item">
172 onClick={linkEvent(this, this.markAllAsRead)}
174 {i18n.t('mark_all_as_read')}
180 {this.state.messageType == MessageType.All && this.all()}
181 {this.state.messageType == MessageType.Replies && this.replies()}
182 {this.state.messageType == MessageType.Mentions &&
184 {this.state.messageType == MessageType.Messages &&
194 unreadOrAllRadios() {
196 <div class="btn-group btn-group-toggle flex-wrap mb-2">
198 className={`btn btn-outline-secondary pointer
199 ${this.state.unreadOrAll == UnreadOrAll.Unread && 'active'}
204 value={UnreadOrAll.Unread}
205 checked={this.state.unreadOrAll == UnreadOrAll.Unread}
206 onChange={linkEvent(this, this.handleUnreadOrAllChange)}
211 className={`btn btn-outline-secondary pointer
212 ${this.state.unreadOrAll == UnreadOrAll.All && 'active'}
217 value={UnreadOrAll.All}
218 checked={this.state.unreadOrAll == UnreadOrAll.All}
219 onChange={linkEvent(this, this.handleUnreadOrAllChange)}
227 messageTypeRadios() {
229 <div class="btn-group btn-group-toggle flex-wrap mb-2">
231 className={`btn btn-outline-secondary pointer
232 ${this.state.messageType == MessageType.All && 'active'}
237 value={MessageType.All}
238 checked={this.state.messageType == MessageType.All}
239 onChange={linkEvent(this, this.handleMessageTypeChange)}
244 className={`btn btn-outline-secondary pointer
245 ${this.state.messageType == MessageType.Replies && 'active'}
250 value={MessageType.Replies}
251 checked={this.state.messageType == MessageType.Replies}
252 onChange={linkEvent(this, this.handleMessageTypeChange)}
257 className={`btn btn-outline-secondary pointer
258 ${this.state.messageType == MessageType.Mentions && 'active'}
263 value={MessageType.Mentions}
264 checked={this.state.messageType == MessageType.Mentions}
265 onChange={linkEvent(this, this.handleMessageTypeChange)}
270 className={`btn btn-outline-secondary pointer
271 ${this.state.messageType == MessageType.Messages && 'active'}
276 value={MessageType.Messages}
277 checked={this.state.messageType == MessageType.Messages}
278 onChange={linkEvent(this, this.handleMessageTypeChange)}
288 <div className="mb-2">
289 <span class="mr-3">{this.unreadOrAllRadios()}</span>
290 <span class="mr-3">{this.messageTypeRadios()}</span>
292 sort={this.state.sort}
293 onChange={this.handleSortChange}
300 combined(): ReplyType[] {
302 let replies: ReplyType[] = this.state.replies.map(r => ({
304 type_: ReplyEnum.Reply,
306 published: r.comment.published,
308 let mentions: ReplyType[] = this.state.mentions.map(r => ({
310 type_: ReplyEnum.Mention,
312 published: r.comment.published,
314 let messages: ReplyType[] = this.state.messages.map(r => ({
316 type_: ReplyEnum.Message,
318 published: r.private_message.published,
321 return [...replies, ...mentions, ...messages].sort((a, b) =>
322 b.published.localeCompare(a.published)
326 renderReplyType(i: ReplyType) {
328 case ReplyEnum.Reply:
332 nodes={[{ comment_view: i.view as CommentView }]}
337 enableDownvotes={this.state.site_view.site.enable_downvotes}
340 case ReplyEnum.Mention:
344 nodes={[{ comment_view: i.view as UserMentionView }]}
349 enableDownvotes={this.state.site_view.site.enable_downvotes}
352 case ReplyEnum.Message:
356 private_message_view={i.view as PrivateMessageView}
365 return <div>{this.combined().map(i => this.renderReplyType(i))}</div>;
372 nodes={commentsToFlatNodes(this.state.replies)}
377 enableDownvotes={this.state.site_view.site.enable_downvotes}
386 {this.state.mentions.map(umv => (
388 key={umv.user_mention.id}
389 nodes={[{ comment_view: umv }]}
394 enableDownvotes={this.state.site_view.site.enable_downvotes}
404 {this.state.messages.map(pmv => (
406 key={pmv.private_message.id}
407 private_message_view={pmv}
417 {this.state.page > 1 && (
419 class="btn btn-secondary mr-1"
420 onClick={linkEvent(this, this.prevPage)}
425 {this.unreadCount() > 0 && (
427 class="btn btn-secondary"
428 onClick={linkEvent(this, this.nextPage)}
449 handleUnreadOrAllChange(i: Inbox, event: any) {
450 i.state.unreadOrAll = Number(event.target.value);
456 handleMessageTypeChange(i: Inbox, event: any) {
457 i.state.messageType = Number(event.target.value);
463 static fetchInitialData(req: InitialFetchRequest): Promise<any>[] {
464 let promises: Promise<any>[] = [];
466 // It can be /u/me, or /username/1
467 let repliesForm: GetReplies = {
474 promises.push(req.client.getReplies(repliesForm));
476 let userMentionsForm: GetUserMentions = {
483 promises.push(req.client.getUserMentions(userMentionsForm));
485 let privateMessagesForm: GetPrivateMessages = {
491 promises.push(req.client.getPrivateMessages(privateMessagesForm));
497 let repliesForm: GetReplies = {
498 sort: this.state.sort,
499 unread_only: this.state.unreadOrAll == UnreadOrAll.Unread,
500 page: this.state.page,
504 WebSocketService.Instance.send(wsClient.getReplies(repliesForm));
506 let userMentionsForm: GetUserMentions = {
507 sort: this.state.sort,
508 unread_only: this.state.unreadOrAll == UnreadOrAll.Unread,
509 page: this.state.page,
513 WebSocketService.Instance.send(wsClient.getUserMentions(userMentionsForm));
515 let privateMessagesForm: GetPrivateMessages = {
516 unread_only: this.state.unreadOrAll == UnreadOrAll.Unread,
517 page: this.state.page,
521 WebSocketService.Instance.send(
522 wsClient.getPrivateMessages(privateMessagesForm)
526 handleSortChange(val: SortType) {
527 this.state.sort = val;
529 this.setState(this.state);
533 markAllAsRead(i: Inbox) {
534 WebSocketService.Instance.send(
535 wsClient.markAllAsRead({
539 i.state.replies = [];
540 i.state.mentions = [];
541 i.state.messages = [];
543 window.scrollTo(0, 0);
547 parseMessage(msg: any) {
548 let op = wsUserOp(msg);
550 toast(i18n.t(msg.error), 'danger');
552 } else if (msg.reconnect) {
554 } else if (op == UserOperation.GetReplies) {
555 let data = wsJsonToRes<GetRepliesResponse>(msg).data;
556 this.state.replies = data.replies;
557 this.state.loading = false;
558 this.sendUnreadCount();
559 window.scrollTo(0, 0);
560 this.setState(this.state);
562 } else if (op == UserOperation.GetUserMentions) {
563 let data = wsJsonToRes<GetUserMentionsResponse>(msg).data;
564 this.state.mentions = data.mentions;
565 this.sendUnreadCount();
566 window.scrollTo(0, 0);
567 this.setState(this.state);
569 } else if (op == UserOperation.GetPrivateMessages) {
570 let data = wsJsonToRes<PrivateMessagesResponse>(msg).data;
571 this.state.messages = data.private_messages;
572 this.sendUnreadCount();
573 window.scrollTo(0, 0);
574 this.setState(this.state);
576 } else if (op == UserOperation.EditPrivateMessage) {
577 let data = wsJsonToRes<PrivateMessageResponse>(msg).data;
578 let found: PrivateMessageView = this.state.messages.find(
580 m.private_message.id === data.private_message_view.private_message.id
583 found.private_message.content =
584 data.private_message_view.private_message.content;
585 found.private_message.updated =
586 data.private_message_view.private_message.updated;
588 this.setState(this.state);
589 } else if (op == UserOperation.DeletePrivateMessage) {
590 let data = wsJsonToRes<PrivateMessageResponse>(msg).data;
591 let found: PrivateMessageView = this.state.messages.find(
593 m.private_message.id === data.private_message_view.private_message.id
596 found.private_message.deleted =
597 data.private_message_view.private_message.deleted;
598 found.private_message.updated =
599 data.private_message_view.private_message.updated;
601 this.setState(this.state);
602 } else if (op == UserOperation.MarkPrivateMessageAsRead) {
603 let data = wsJsonToRes<PrivateMessageResponse>(msg).data;
604 let found: PrivateMessageView = this.state.messages.find(
606 m.private_message.id === data.private_message_view.private_message.id
610 found.private_message.updated =
611 data.private_message_view.private_message.updated;
613 // If youre in the unread view, just remove it from the list
615 this.state.unreadOrAll == UnreadOrAll.Unread &&
616 data.private_message_view.private_message.read
618 this.state.messages = this.state.messages.filter(
620 r.private_message.id !==
621 data.private_message_view.private_message.id
624 let found = this.state.messages.find(
626 c.private_message.id ==
627 data.private_message_view.private_message.id
629 found.private_message.read =
630 data.private_message_view.private_message.read;
633 this.sendUnreadCount();
634 this.setState(this.state);
635 } else if (op == UserOperation.MarkAllAsRead) {
636 // Moved to be instant
638 op == UserOperation.EditComment ||
639 op == UserOperation.DeleteComment ||
640 op == UserOperation.RemoveComment
642 let data = wsJsonToRes<CommentResponse>(msg).data;
643 editCommentRes(data.comment_view, this.state.replies);
644 this.setState(this.state);
645 } else if (op == UserOperation.MarkCommentAsRead) {
646 let data = wsJsonToRes<CommentResponse>(msg).data;
648 // If youre in the unread view, just remove it from the list
650 this.state.unreadOrAll == UnreadOrAll.Unread &&
651 data.comment_view.comment.read
653 this.state.replies = this.state.replies.filter(
654 r => r.comment.id !== data.comment_view.comment.id
657 let found = this.state.replies.find(
658 c => c.comment.id == data.comment_view.comment.id
660 found.comment.read = data.comment_view.comment.read;
662 this.sendUnreadCount();
663 this.setState(this.state);
665 } else if (op == UserOperation.MarkUserMentionAsRead) {
666 let data = wsJsonToRes<UserMentionResponse>(msg).data;
668 // TODO this might not be correct, it might need to use the comment id
669 let found = this.state.mentions.find(
670 c => c.user_mention.id == data.user_mention_view.user_mention.id
672 found.comment.content = data.user_mention_view.comment.content;
673 found.comment.updated = data.user_mention_view.comment.updated;
674 found.comment.removed = data.user_mention_view.comment.removed;
675 found.comment.deleted = data.user_mention_view.comment.deleted;
676 found.counts.upvotes = data.user_mention_view.counts.upvotes;
677 found.counts.downvotes = data.user_mention_view.counts.downvotes;
678 found.counts.score = data.user_mention_view.counts.score;
680 // If youre in the unread view, just remove it from the list
682 this.state.unreadOrAll == UnreadOrAll.Unread &&
683 data.user_mention_view.user_mention.read
685 this.state.mentions = this.state.mentions.filter(
686 r => r.user_mention.id !== data.user_mention_view.user_mention.id
689 let found = this.state.mentions.find(
690 c => c.user_mention.id == data.user_mention_view.user_mention.id
692 // TODO test to make sure these mentions are getting marked as read
693 found.user_mention.read = data.user_mention_view.user_mention.read;
695 this.sendUnreadCount();
696 this.setState(this.state);
697 } else if (op == UserOperation.CreateComment) {
698 let data = wsJsonToRes<CommentResponse>(msg).data;
700 if (data.recipient_ids.includes(UserService.Instance.user.id)) {
701 this.state.replies.unshift(data.comment_view);
702 this.setState(this.state);
703 } else if (data.comment_view.creator.id == UserService.Instance.user.id) {
704 // TODO this seems wrong, you should be using form_id
705 toast(i18n.t('reply_sent'));
707 } else if (op == UserOperation.CreatePrivateMessage) {
708 let data = wsJsonToRes<PrivateMessageResponse>(msg).data;
710 data.private_message_view.recipient.id == UserService.Instance.user.id
712 this.state.messages.unshift(data.private_message_view);
713 this.setState(this.state);
715 } else if (op == UserOperation.SaveComment) {
716 let data = wsJsonToRes<CommentResponse>(msg).data;
717 saveCommentRes(data.comment_view, this.state.replies);
718 this.setState(this.state);
720 } else if (op == UserOperation.CreateCommentLike) {
721 let data = wsJsonToRes<CommentResponse>(msg).data;
722 createCommentLikeRes(data.comment_view, this.state.replies);
723 this.setState(this.state);
728 UserService.Instance.unreadCountSub.next(this.unreadCount());
731 unreadCount(): number {
733 this.state.replies.filter(r => !r.comment.read).length +
734 this.state.mentions.filter(r => !r.user_mention.read).length +
735 this.state.messages.filter(
737 UserService.Instance.user &&
738 !r.private_message.read &&
739 // TODO also seems very strang and wrong
740 r.creator.id !== UserService.Instance.user.id