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 { Icon, Spinner } from "./icon";
42 import { i18n } from "../i18next";
43 import { InitialFetchRequest } from "shared/interfaces";
65 view: CommentView | PrivateMessageView | UserMentionView;
69 interface InboxState {
70 unreadOrAll: UnreadOrAll;
71 messageType: MessageType;
72 replies: CommentView[];
73 mentions: UserMentionView[];
74 messages: PrivateMessageView[];
75 combined: ReplyType[];
82 export class Inbox extends Component<any, InboxState> {
83 private isoData = setIsoData(this.context);
84 private subscription: Subscription;
85 private emptyState: InboxState = {
86 unreadOrAll: UnreadOrAll.Unread,
87 messageType: MessageType.All,
94 site_view: this.isoData.site_res.site_view,
98 constructor(props: any, context: any) {
99 super(props, context);
101 this.state = this.emptyState;
102 this.handleSortChange = this.handleSortChange.bind(this);
104 if (!UserService.Instance.user && isBrowser()) {
105 toast(i18n.t("not_logged_in"), "danger");
106 this.context.router.history.push(`/login`);
109 this.parseMessage = this.parseMessage.bind(this);
110 this.subscription = wsSubscribe(this.parseMessage);
112 // Only fetch the data if coming from another route
113 if (this.isoData.path == this.context.router.route.match.url) {
114 this.state.replies = this.isoData.routeData[0].replies || [];
115 this.state.mentions = this.isoData.routeData[1].mentions || [];
116 this.state.messages = this.isoData.routeData[2].messages || [];
117 this.state.combined = this.buildCombined();
118 this.state.loading = false;
124 componentWillUnmount() {
126 this.subscription.unsubscribe();
130 get documentTitle(): string {
131 return `@${UserService.Instance.user.name} ${i18n.t("inbox")} - ${
132 this.state.site_view.site.name
138 <div class="container">
139 {this.state.loading ? (
147 title={this.documentTitle}
148 path={this.context.router.route.match.url}
154 href={`/feeds/inbox/${UserService.Instance.auth}.xml`}
158 <Icon icon="rss" classes="ml-2 text-muted small" />
162 {this.state.replies.length +
163 this.state.mentions.length +
164 this.state.messages.length >
166 this.state.unreadOrAll == UnreadOrAll.Unread && (
167 <ul class="list-inline mb-1 text-muted small font-weight-bold">
168 <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}
301 replyToReplyType(r: CommentView): ReplyType {
304 type_: ReplyEnum.Reply,
306 published: r.comment.published,
310 mentionToReplyType(r: UserMentionView): ReplyType {
312 id: r.user_mention.id,
313 type_: ReplyEnum.Mention,
315 published: r.comment.published,
319 messageToReplyType(r: PrivateMessageView): ReplyType {
321 id: r.private_message.id,
322 type_: ReplyEnum.Message,
324 published: r.private_message.published,
328 buildCombined(): ReplyType[] {
329 let replies: ReplyType[] = this.state.replies.map(r =>
330 this.replyToReplyType(r)
332 let mentions: ReplyType[] = this.state.mentions.map(r =>
333 this.mentionToReplyType(r)
335 let messages: ReplyType[] = this.state.messages.map(r =>
336 this.messageToReplyType(r)
339 return [...replies, ...mentions, ...messages].sort((a, b) =>
340 b.published.localeCompare(a.published)
344 renderReplyType(i: ReplyType) {
346 case ReplyEnum.Reply:
350 nodes={[{ comment_view: i.view as CommentView }]}
355 enableDownvotes={this.state.site_view.site.enable_downvotes}
358 case ReplyEnum.Mention:
362 nodes={[{ comment_view: i.view as UserMentionView }]}
367 enableDownvotes={this.state.site_view.site.enable_downvotes}
370 case ReplyEnum.Message:
374 private_message_view={i.view as PrivateMessageView}
383 return <div>{this.state.combined.map(i => this.renderReplyType(i))}</div>;
390 nodes={commentsToFlatNodes(this.state.replies)}
395 enableDownvotes={this.state.site_view.site.enable_downvotes}
404 {this.state.mentions.map(umv => (
406 key={umv.user_mention.id}
407 nodes={[{ comment_view: umv }]}
412 enableDownvotes={this.state.site_view.site.enable_downvotes}
422 {this.state.messages.map(pmv => (
424 key={pmv.private_message.id}
425 private_message_view={pmv}
435 {this.state.page > 1 && (
437 class="btn btn-secondary mr-1"
438 onClick={linkEvent(this, this.prevPage)}
443 {this.unreadCount() > 0 && (
445 class="btn btn-secondary"
446 onClick={linkEvent(this, this.nextPage)}
467 handleUnreadOrAllChange(i: Inbox, event: any) {
468 i.state.unreadOrAll = Number(event.target.value);
474 handleMessageTypeChange(i: Inbox, event: any) {
475 i.state.messageType = Number(event.target.value);
481 static fetchInitialData(req: InitialFetchRequest): Promise<any>[] {
482 let promises: Promise<any>[] = [];
484 // It can be /u/me, or /username/1
485 let repliesForm: GetReplies = {
492 promises.push(req.client.getReplies(repliesForm));
494 let userMentionsForm: GetUserMentions = {
501 promises.push(req.client.getUserMentions(userMentionsForm));
503 let privateMessagesForm: GetPrivateMessages = {
509 promises.push(req.client.getPrivateMessages(privateMessagesForm));
515 let repliesForm: GetReplies = {
516 sort: this.state.sort,
517 unread_only: this.state.unreadOrAll == UnreadOrAll.Unread,
518 page: this.state.page,
522 WebSocketService.Instance.send(wsClient.getReplies(repliesForm));
524 let userMentionsForm: GetUserMentions = {
525 sort: this.state.sort,
526 unread_only: this.state.unreadOrAll == UnreadOrAll.Unread,
527 page: this.state.page,
531 WebSocketService.Instance.send(wsClient.getUserMentions(userMentionsForm));
533 let privateMessagesForm: GetPrivateMessages = {
534 unread_only: this.state.unreadOrAll == UnreadOrAll.Unread,
535 page: this.state.page,
539 WebSocketService.Instance.send(
540 wsClient.getPrivateMessages(privateMessagesForm)
544 handleSortChange(val: SortType) {
545 this.state.sort = val;
547 this.setState(this.state);
551 markAllAsRead(i: Inbox) {
552 WebSocketService.Instance.send(
553 wsClient.markAllAsRead({
557 i.state.replies = [];
558 i.state.mentions = [];
559 i.state.messages = [];
561 window.scrollTo(0, 0);
565 parseMessage(msg: any) {
566 let op = wsUserOp(msg);
569 toast(i18n.t(msg.error), "danger");
571 } else if (msg.reconnect) {
573 } else if (op == UserOperation.GetReplies) {
574 let data = wsJsonToRes<GetRepliesResponse>(msg).data;
575 this.state.replies = data.replies;
576 this.state.combined = this.buildCombined();
577 this.state.loading = false;
578 this.sendUnreadCount();
579 window.scrollTo(0, 0);
580 this.setState(this.state);
582 } else if (op == UserOperation.GetUserMentions) {
583 let data = wsJsonToRes<GetUserMentionsResponse>(msg).data;
584 this.state.mentions = data.mentions;
585 this.state.combined = this.buildCombined();
586 this.sendUnreadCount();
587 window.scrollTo(0, 0);
588 this.setState(this.state);
590 } else if (op == UserOperation.GetPrivateMessages) {
591 let data = wsJsonToRes<PrivateMessagesResponse>(msg).data;
592 this.state.messages = data.private_messages;
593 this.state.combined = this.buildCombined();
594 this.sendUnreadCount();
595 window.scrollTo(0, 0);
596 this.setState(this.state);
598 } else if (op == UserOperation.EditPrivateMessage) {
599 let data = wsJsonToRes<PrivateMessageResponse>(msg).data;
600 let found: PrivateMessageView = this.state.messages.find(
602 m.private_message.id === data.private_message_view.private_message.id
605 let combinedView = this.state.combined.find(
606 i => i.id == data.private_message_view.private_message.id
607 ).view as PrivateMessageView;
608 found.private_message.content = combinedView.private_message.content =
609 data.private_message_view.private_message.content;
610 found.private_message.updated = combinedView.private_message.updated =
611 data.private_message_view.private_message.updated;
613 this.setState(this.state);
614 } else if (op == UserOperation.DeletePrivateMessage) {
615 let data = wsJsonToRes<PrivateMessageResponse>(msg).data;
616 let found: PrivateMessageView = this.state.messages.find(
618 m.private_message.id === data.private_message_view.private_message.id
621 let combinedView = this.state.combined.find(
622 i => i.id == data.private_message_view.private_message.id
623 ).view as PrivateMessageView;
624 found.private_message.deleted = combinedView.private_message.deleted =
625 data.private_message_view.private_message.deleted;
626 found.private_message.updated = combinedView.private_message.updated =
627 data.private_message_view.private_message.updated;
629 this.setState(this.state);
630 } else if (op == UserOperation.MarkPrivateMessageAsRead) {
631 let data = wsJsonToRes<PrivateMessageResponse>(msg).data;
632 let found: PrivateMessageView = this.state.messages.find(
634 m.private_message.id === data.private_message_view.private_message.id
638 let combinedView = this.state.combined.find(
639 i => i.id == data.private_message_view.private_message.id
640 ).view as PrivateMessageView;
641 found.private_message.updated = combinedView.private_message.updated =
642 data.private_message_view.private_message.updated;
644 // If youre in the unread view, just remove it from the list
646 this.state.unreadOrAll == UnreadOrAll.Unread &&
647 data.private_message_view.private_message.read
649 this.state.messages = this.state.messages.filter(
651 r.private_message.id !==
652 data.private_message_view.private_message.id
654 this.state.combined = this.state.combined.filter(
655 r => r.id !== data.private_message_view.private_message.id
658 found.private_message.read = combinedView.private_message.read =
659 data.private_message_view.private_message.read;
662 this.sendUnreadCount();
663 this.setState(this.state);
664 } else if (op == UserOperation.MarkAllAsRead) {
665 // Moved to be instant
667 op == UserOperation.EditComment ||
668 op == UserOperation.DeleteComment ||
669 op == UserOperation.RemoveComment
671 let data = wsJsonToRes<CommentResponse>(msg).data;
672 editCommentRes(data.comment_view, this.state.replies);
673 this.setState(this.state);
674 } else if (op == UserOperation.MarkCommentAsRead) {
675 let data = wsJsonToRes<CommentResponse>(msg).data;
677 // If youre in the unread view, just remove it from the list
679 this.state.unreadOrAll == UnreadOrAll.Unread &&
680 data.comment_view.comment.read
682 this.state.replies = this.state.replies.filter(
683 r => r.comment.id !== data.comment_view.comment.id
685 this.state.combined = this.state.combined.filter(
686 r => r.id !== data.comment_view.comment.id
689 let found = this.state.replies.find(
690 c => c.comment.id == data.comment_view.comment.id
692 let combinedView = this.state.combined.find(
693 i => i.id == data.comment_view.comment.id
694 ).view as CommentView;
695 found.comment.read = combinedView.comment.read =
696 data.comment_view.comment.read;
698 this.sendUnreadCount();
699 this.setState(this.state);
701 } else if (op == UserOperation.MarkUserMentionAsRead) {
702 let data = wsJsonToRes<UserMentionResponse>(msg).data;
704 // TODO this might not be correct, it might need to use the comment id
705 let found = this.state.mentions.find(
706 c => c.user_mention.id == data.user_mention_view.user_mention.id
710 let combinedView = this.state.combined.find(
711 i => i.id == data.user_mention_view.user_mention.id
712 ).view as UserMentionView;
713 found.comment.content = combinedView.comment.content =
714 data.user_mention_view.comment.content;
715 found.comment.updated = combinedView.comment.updated =
716 data.user_mention_view.comment.updated;
717 found.comment.removed = combinedView.comment.removed =
718 data.user_mention_view.comment.removed;
719 found.comment.deleted = combinedView.comment.deleted =
720 data.user_mention_view.comment.deleted;
721 found.counts.upvotes = combinedView.counts.upvotes =
722 data.user_mention_view.counts.upvotes;
723 found.counts.downvotes = combinedView.counts.downvotes =
724 data.user_mention_view.counts.downvotes;
725 found.counts.score = combinedView.counts.score =
726 data.user_mention_view.counts.score;
728 // If youre in the unread view, just remove it from the list
730 this.state.unreadOrAll == UnreadOrAll.Unread &&
731 data.user_mention_view.user_mention.read
733 this.state.mentions = this.state.mentions.filter(
734 r => r.user_mention.id !== data.user_mention_view.user_mention.id
736 this.state.combined = this.state.combined.filter(
737 r => r.id !== data.user_mention_view.user_mention.id
740 // TODO test to make sure these mentions are getting marked as read
741 found.user_mention.read = combinedView.user_mention.read =
742 data.user_mention_view.user_mention.read;
745 this.sendUnreadCount();
746 this.setState(this.state);
747 } else if (op == UserOperation.CreateComment) {
748 let data = wsJsonToRes<CommentResponse>(msg).data;
750 if (data.recipient_ids.includes(UserService.Instance.user.id)) {
751 this.state.replies.unshift(data.comment_view);
752 this.state.combined.unshift(this.replyToReplyType(data.comment_view));
753 this.setState(this.state);
754 } else if (data.comment_view.creator.id == UserService.Instance.user.id) {
755 // TODO this seems wrong, you should be using form_id
756 toast(i18n.t("reply_sent"));
758 } else if (op == UserOperation.CreatePrivateMessage) {
759 let data = wsJsonToRes<PrivateMessageResponse>(msg).data;
761 data.private_message_view.recipient.id == UserService.Instance.user.id
763 this.state.messages.unshift(data.private_message_view);
764 this.state.combined.unshift(
765 this.messageToReplyType(data.private_message_view)
767 this.setState(this.state);
769 } else if (op == UserOperation.SaveComment) {
770 let data = wsJsonToRes<CommentResponse>(msg).data;
771 saveCommentRes(data.comment_view, this.state.replies);
772 this.setState(this.state);
774 } else if (op == UserOperation.CreateCommentLike) {
775 let data = wsJsonToRes<CommentResponse>(msg).data;
776 createCommentLikeRes(data.comment_view, this.state.replies);
777 this.setState(this.state);
782 UserService.Instance.unreadCountSub.next(this.unreadCount());
785 unreadCount(): number {
787 this.state.replies.filter(r => !r.comment.read).length +
788 this.state.mentions.filter(r => !r.user_mention.read).length +
789 this.state.messages.filter(
791 UserService.Instance.user &&
792 !r.private_message.read &&
793 // TODO also seems very strang and wrong
794 r.creator.id !== UserService.Instance.user.id