1 import { Component, linkEvent } from "inferno";
2 import { Subscription } from "rxjs";
10 GetPersonMentionsResponse,
11 PersonMentionResponse,
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 | PersonMentionView;
69 interface InboxState {
70 unreadOrAll: UnreadOrAll;
71 messageType: MessageType;
72 replies: CommentView[];
73 mentions: PersonMentionView[];
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.localUserView && 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.localUserView.person.name} ${i18n.t(
133 )} - ${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: PersonMentionView): ReplyType {
312 id: r.person_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 PersonMentionView }]}
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.person_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 personMentionsForm: GetPersonMentions = {
501 promises.push(req.client.getPersonMentions(personMentionsForm));
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 personMentionsForm: GetPersonMentions = {
525 sort: this.state.sort,
526 unread_only: this.state.unreadOrAll == UnreadOrAll.Unread,
527 page: this.state.page,
531 WebSocketService.Instance.send(
532 wsClient.getPersonMentions(personMentionsForm)
535 let privateMessagesForm: GetPrivateMessages = {
536 unread_only: this.state.unreadOrAll == UnreadOrAll.Unread,
537 page: this.state.page,
541 WebSocketService.Instance.send(
542 wsClient.getPrivateMessages(privateMessagesForm)
546 handleSortChange(val: SortType) {
547 this.state.sort = val;
549 this.setState(this.state);
553 markAllAsRead(i: Inbox) {
554 WebSocketService.Instance.send(
555 wsClient.markAllAsRead({
559 i.state.replies = [];
560 i.state.mentions = [];
561 i.state.messages = [];
563 window.scrollTo(0, 0);
567 parseMessage(msg: any) {
568 let op = wsUserOp(msg);
571 toast(i18n.t(msg.error), "danger");
573 } else if (msg.reconnect) {
575 } else if (op == UserOperation.GetReplies) {
576 let data = wsJsonToRes<GetRepliesResponse>(msg).data;
577 this.state.replies = data.replies;
578 this.state.combined = this.buildCombined();
579 this.state.loading = false;
580 this.sendUnreadCount();
581 window.scrollTo(0, 0);
582 this.setState(this.state);
584 } else if (op == UserOperation.GetPersonMentions) {
585 let data = wsJsonToRes<GetPersonMentionsResponse>(msg).data;
586 this.state.mentions = data.mentions;
587 this.state.combined = this.buildCombined();
588 this.sendUnreadCount();
589 window.scrollTo(0, 0);
590 this.setState(this.state);
592 } else if (op == UserOperation.GetPrivateMessages) {
593 let data = wsJsonToRes<PrivateMessagesResponse>(msg).data;
594 this.state.messages = data.private_messages;
595 this.state.combined = this.buildCombined();
596 this.sendUnreadCount();
597 window.scrollTo(0, 0);
598 this.setState(this.state);
600 } else if (op == UserOperation.EditPrivateMessage) {
601 let data = wsJsonToRes<PrivateMessageResponse>(msg).data;
602 let found: PrivateMessageView = this.state.messages.find(
604 m.private_message.id === data.private_message_view.private_message.id
607 let combinedView = this.state.combined.find(
608 i => i.id == data.private_message_view.private_message.id
609 ).view as PrivateMessageView;
610 found.private_message.content = combinedView.private_message.content =
611 data.private_message_view.private_message.content;
612 found.private_message.updated = combinedView.private_message.updated =
613 data.private_message_view.private_message.updated;
615 this.setState(this.state);
616 } else if (op == UserOperation.DeletePrivateMessage) {
617 let data = wsJsonToRes<PrivateMessageResponse>(msg).data;
618 let found: PrivateMessageView = this.state.messages.find(
620 m.private_message.id === data.private_message_view.private_message.id
623 let combinedView = this.state.combined.find(
624 i => i.id == data.private_message_view.private_message.id
625 ).view as PrivateMessageView;
626 found.private_message.deleted = combinedView.private_message.deleted =
627 data.private_message_view.private_message.deleted;
628 found.private_message.updated = combinedView.private_message.updated =
629 data.private_message_view.private_message.updated;
631 this.setState(this.state);
632 } else if (op == UserOperation.MarkPrivateMessageAsRead) {
633 let data = wsJsonToRes<PrivateMessageResponse>(msg).data;
634 let found: PrivateMessageView = this.state.messages.find(
636 m.private_message.id === data.private_message_view.private_message.id
640 let combinedView = this.state.combined.find(
641 i => i.id == data.private_message_view.private_message.id
642 ).view as PrivateMessageView;
643 found.private_message.updated = combinedView.private_message.updated =
644 data.private_message_view.private_message.updated;
646 // If youre in the unread view, just remove it from the list
648 this.state.unreadOrAll == UnreadOrAll.Unread &&
649 data.private_message_view.private_message.read
651 this.state.messages = this.state.messages.filter(
653 r.private_message.id !==
654 data.private_message_view.private_message.id
656 this.state.combined = this.state.combined.filter(
657 r => r.id !== data.private_message_view.private_message.id
660 found.private_message.read = combinedView.private_message.read =
661 data.private_message_view.private_message.read;
664 this.sendUnreadCount();
665 this.setState(this.state);
666 } else if (op == UserOperation.MarkAllAsRead) {
667 // Moved to be instant
669 op == UserOperation.EditComment ||
670 op == UserOperation.DeleteComment ||
671 op == UserOperation.RemoveComment
673 let data = wsJsonToRes<CommentResponse>(msg).data;
674 editCommentRes(data.comment_view, this.state.replies);
675 this.setState(this.state);
676 } else if (op == UserOperation.MarkCommentAsRead) {
677 let data = wsJsonToRes<CommentResponse>(msg).data;
679 // If youre in the unread view, just remove it from the list
681 this.state.unreadOrAll == UnreadOrAll.Unread &&
682 data.comment_view.comment.read
684 this.state.replies = this.state.replies.filter(
685 r => r.comment.id !== data.comment_view.comment.id
687 this.state.combined = this.state.combined.filter(
688 r => r.id !== data.comment_view.comment.id
691 let found = this.state.replies.find(
692 c => c.comment.id == data.comment_view.comment.id
694 let combinedView = this.state.combined.find(
695 i => i.id == data.comment_view.comment.id
696 ).view as CommentView;
697 found.comment.read = combinedView.comment.read =
698 data.comment_view.comment.read;
700 this.sendUnreadCount();
701 this.setState(this.state);
703 } else if (op == UserOperation.MarkPersonMentionAsRead) {
704 let data = wsJsonToRes<PersonMentionResponse>(msg).data;
706 // TODO this might not be correct, it might need to use the comment id
707 let found = this.state.mentions.find(
708 c => c.person_mention.id == data.person_mention_view.person_mention.id
712 let combinedView = this.state.combined.find(
713 i => i.id == data.person_mention_view.person_mention.id
714 ).view as PersonMentionView;
715 found.comment.content = combinedView.comment.content =
716 data.person_mention_view.comment.content;
717 found.comment.updated = combinedView.comment.updated =
718 data.person_mention_view.comment.updated;
719 found.comment.removed = combinedView.comment.removed =
720 data.person_mention_view.comment.removed;
721 found.comment.deleted = combinedView.comment.deleted =
722 data.person_mention_view.comment.deleted;
723 found.counts.upvotes = combinedView.counts.upvotes =
724 data.person_mention_view.counts.upvotes;
725 found.counts.downvotes = combinedView.counts.downvotes =
726 data.person_mention_view.counts.downvotes;
727 found.counts.score = combinedView.counts.score =
728 data.person_mention_view.counts.score;
730 // If youre in the unread view, just remove it from the list
732 this.state.unreadOrAll == UnreadOrAll.Unread &&
733 data.person_mention_view.person_mention.read
735 this.state.mentions = this.state.mentions.filter(
737 r.person_mention.id !== data.person_mention_view.person_mention.id
739 this.state.combined = this.state.combined.filter(
740 r => r.id !== data.person_mention_view.person_mention.id
743 // TODO test to make sure these mentions are getting marked as read
744 found.person_mention.read = combinedView.person_mention.read =
745 data.person_mention_view.person_mention.read;
748 this.sendUnreadCount();
749 this.setState(this.state);
750 } else if (op == UserOperation.CreateComment) {
751 let data = wsJsonToRes<CommentResponse>(msg).data;
754 data.recipient_ids.includes(
755 UserService.Instance.localUserView.local_user.id
758 this.state.replies.unshift(data.comment_view);
759 this.state.combined.unshift(this.replyToReplyType(data.comment_view));
760 this.setState(this.state);
762 data.comment_view.creator.id ==
763 UserService.Instance.localUserView.person.id
765 // TODO this seems wrong, you should be using form_id
766 toast(i18n.t("reply_sent"));
768 } else if (op == UserOperation.CreatePrivateMessage) {
769 let data = wsJsonToRes<PrivateMessageResponse>(msg).data;
771 data.private_message_view.recipient.id ==
772 UserService.Instance.localUserView.person.id
774 this.state.messages.unshift(data.private_message_view);
775 this.state.combined.unshift(
776 this.messageToReplyType(data.private_message_view)
778 this.setState(this.state);
780 } else if (op == UserOperation.SaveComment) {
781 let data = wsJsonToRes<CommentResponse>(msg).data;
782 saveCommentRes(data.comment_view, this.state.replies);
783 this.setState(this.state);
785 } else if (op == UserOperation.CreateCommentLike) {
786 let data = wsJsonToRes<CommentResponse>(msg).data;
787 createCommentLikeRes(data.comment_view, this.state.replies);
788 this.setState(this.state);
793 UserService.Instance.unreadCountSub.next(this.unreadCount());
796 unreadCount(): number {
798 this.state.replies.filter(r => !r.comment.read).length +
799 this.state.mentions.filter(r => !r.person_mention.read).length +
800 this.state.messages.filter(
802 UserService.Instance.localUserView &&
803 !r.private_message.read &&
804 // TODO also seems very strange and wrong
805 r.creator.id !== UserService.Instance.localUserView.person.id