import { Component, linkEvent } from "inferno"; import { BlockPersonResponse, CommentReplyResponse, CommentReplyView, CommentReportResponse, CommentResponse, CommentSortType, CommentView, GetPersonMentions, GetPersonMentionsResponse, GetPrivateMessages, GetReplies, GetRepliesResponse, GetSiteResponse, PersonMentionResponse, PersonMentionView, PostReportResponse, PrivateMessageReportResponse, PrivateMessageResponse, PrivateMessageView, PrivateMessagesResponse, UserOperation, wsJsonToRes, wsUserOp, } from "lemmy-js-client"; import { Subscription } from "rxjs"; import { i18n } from "../../i18next"; import { CommentViewType, InitialFetchRequest } from "../../interfaces"; import { UserService, WebSocketService } from "../../services"; import { commentsToFlatNodes, createCommentLikeRes, editCommentRes, enableDownvotes, fetchLimit, isBrowser, myAuth, relTags, saveCommentRes, setIsoData, setupTippy, toast, updatePersonBlock, wsClient, wsSubscribe, } from "../../utils"; import { CommentNodes } from "../comment/comment-nodes"; import { CommentSortSelect } from "../common/comment-sort-select"; import { HtmlTags } from "../common/html-tags"; import { Icon, Spinner } from "../common/icon"; import { Paginator } from "../common/paginator"; import { PrivateMessage } from "../private_message/private-message"; enum UnreadOrAll { Unread, All, } enum MessageType { All, Replies, Mentions, Messages, } enum ReplyEnum { Reply, Mention, Message, } type ReplyType = { id: number; type_: ReplyEnum; view: CommentView | PrivateMessageView | PersonMentionView | CommentReplyView; published: string; }; interface InboxState { unreadOrAll: UnreadOrAll; messageType: MessageType; replies: CommentReplyView[]; mentions: PersonMentionView[]; messages: PrivateMessageView[]; combined: ReplyType[]; sort: CommentSortType; page: number; siteRes: GetSiteResponse; loading: boolean; } export class Inbox extends Component { private isoData = setIsoData(this.context); private subscription?: Subscription; state: InboxState = { unreadOrAll: UnreadOrAll.Unread, messageType: MessageType.All, replies: [], mentions: [], messages: [], combined: [], sort: "New", page: 1, siteRes: this.isoData.site_res, loading: true, }; constructor(props: any, context: any) { super(props, context); this.handleSortChange = this.handleSortChange.bind(this); this.handlePageChange = this.handlePageChange.bind(this); this.parseMessage = this.parseMessage.bind(this); this.subscription = wsSubscribe(this.parseMessage); // Only fetch the data if coming from another route if (this.isoData.path == this.context.router.route.match.url) { this.state = { ...this.state, replies: (this.isoData.routeData[0] as GetRepliesResponse).replies || [], mentions: (this.isoData.routeData[1] as GetPersonMentionsResponse).mentions || [], messages: (this.isoData.routeData[2] as PrivateMessagesResponse) .private_messages || [], loading: false, }; this.state = { ...this.state, combined: this.buildCombined() }; } else { this.refetch(); } } componentWillUnmount() { if (isBrowser()) { this.subscription?.unsubscribe(); } } get documentTitle(): string { let mui = UserService.Instance.myUserInfo; return mui ? `@${mui.local_user_view.person.name} ${i18n.t("inbox")} - ${ this.state.siteRes.site_view.site.name }` : ""; } render() { let auth = myAuth(); let inboxRss = auth ? `/feeds/inbox/${auth}.xml` : undefined; return (
{this.state.loading ? (
) : (
{i18n.t("inbox")} {inboxRss && ( )}
{this.state.replies.length + this.state.mentions.length + this.state.messages.length > 0 && this.state.unreadOrAll == UnreadOrAll.Unread && ( )} {this.selects()} {this.state.messageType == MessageType.All && this.all()} {this.state.messageType == MessageType.Replies && this.replies()} {this.state.messageType == MessageType.Mentions && this.mentions()} {this.state.messageType == MessageType.Messages && this.messages()}
)}
); } unreadOrAllRadios() { return (
); } messageTypeRadios() { return (
); } selects() { return (
{this.unreadOrAllRadios()} {this.messageTypeRadios()}
); } replyToReplyType(r: CommentReplyView): ReplyType { return { id: r.comment_reply.id, type_: ReplyEnum.Reply, view: r, published: r.comment.published, }; } mentionToReplyType(r: PersonMentionView): ReplyType { return { id: r.person_mention.id, type_: ReplyEnum.Mention, view: r, published: r.comment.published, }; } messageToReplyType(r: PrivateMessageView): ReplyType { return { id: r.private_message.id, type_: ReplyEnum.Message, view: r, published: r.private_message.published, }; } buildCombined(): ReplyType[] { let replies: ReplyType[] = this.state.replies.map(r => this.replyToReplyType(r) ); let mentions: ReplyType[] = this.state.mentions.map(r => this.mentionToReplyType(r) ); let messages: ReplyType[] = this.state.messages.map(r => this.messageToReplyType(r) ); return [...replies, ...mentions, ...messages].sort((a, b) => b.published.localeCompare(a.published) ); } renderReplyType(i: ReplyType) { switch (i.type_) { case ReplyEnum.Reply: return ( ); case ReplyEnum.Mention: return ( ); case ReplyEnum.Message: return ( ); default: return
; } } all() { return
{this.state.combined.map(i => this.renderReplyType(i))}
; } replies() { return (
); } mentions() { return (
{this.state.mentions.map(umv => ( ))}
); } messages() { return (
{this.state.messages.map(pmv => ( ))}
); } handlePageChange(page: number) { this.setState({ page }); this.refetch(); } handleUnreadOrAllChange(i: Inbox, event: any) { i.setState({ unreadOrAll: Number(event.target.value), page: 1 }); i.refetch(); } handleMessageTypeChange(i: Inbox, event: any) { i.setState({ messageType: Number(event.target.value), page: 1 }); i.refetch(); } static fetchInitialData(req: InitialFetchRequest): Promise[] { let promises: Promise[] = []; let sort: CommentSortType = "New"; let auth = req.auth; if (auth) { // It can be /u/me, or /username/1 let repliesForm: GetReplies = { sort: "New", unread_only: true, page: 1, limit: fetchLimit, auth, }; promises.push(req.client.getReplies(repliesForm)); let personMentionsForm: GetPersonMentions = { sort, unread_only: true, page: 1, limit: fetchLimit, auth, }; promises.push(req.client.getPersonMentions(personMentionsForm)); let privateMessagesForm: GetPrivateMessages = { unread_only: true, page: 1, limit: fetchLimit, auth, }; promises.push(req.client.getPrivateMessages(privateMessagesForm)); } return promises; } refetch() { let sort = this.state.sort; let unread_only = this.state.unreadOrAll == UnreadOrAll.Unread; let page = this.state.page; let limit = fetchLimit; let auth = myAuth(); if (auth) { let repliesForm: GetReplies = { sort, unread_only, page, limit, auth, }; WebSocketService.Instance.send(wsClient.getReplies(repliesForm)); let personMentionsForm: GetPersonMentions = { sort, unread_only, page, limit, auth, }; WebSocketService.Instance.send( wsClient.getPersonMentions(personMentionsForm) ); let privateMessagesForm: GetPrivateMessages = { unread_only, page, limit, auth, }; WebSocketService.Instance.send( wsClient.getPrivateMessages(privateMessagesForm) ); } } handleSortChange(val: CommentSortType) { this.setState({ sort: val, page: 1 }); this.refetch(); } markAllAsRead(i: Inbox) { let auth = myAuth(); if (auth) { WebSocketService.Instance.send( wsClient.markAllAsRead({ auth, }) ); i.setState({ replies: [], mentions: [], messages: [] }); i.setState({ combined: i.buildCombined() }); UserService.Instance.unreadInboxCountSub.next(0); window.scrollTo(0, 0); i.setState(i.state); } } sendUnreadCount(read: boolean) { let urcs = UserService.Instance.unreadInboxCountSub; if (read) { urcs.next(urcs.getValue() - 1); } else { urcs.next(urcs.getValue() + 1); } } parseMessage(msg: any) { let op = wsUserOp(msg); console.log(msg); if (msg.error) { toast(i18n.t(msg.error), "danger"); return; } else if (msg.reconnect) { this.refetch(); } else if (op == UserOperation.GetReplies) { let data = wsJsonToRes(msg); this.setState({ replies: data.replies }); this.setState({ combined: this.buildCombined(), loading: false }); window.scrollTo(0, 0); setupTippy(); } else if (op == UserOperation.GetPersonMentions) { let data = wsJsonToRes(msg); this.setState({ mentions: data.mentions }); this.setState({ combined: this.buildCombined() }); window.scrollTo(0, 0); setupTippy(); } else if (op == UserOperation.GetPrivateMessages) { let data = wsJsonToRes(msg); this.setState({ messages: data.private_messages }); this.setState({ combined: this.buildCombined() }); window.scrollTo(0, 0); setupTippy(); } else if (op == UserOperation.EditPrivateMessage) { let data = wsJsonToRes(msg); let found = this.state.messages.find( m => m.private_message.id === data.private_message_view.private_message.id ); if (found) { let combinedView = this.state.combined.find( i => i.id == data.private_message_view.private_message.id )?.view as PrivateMessageView | undefined; if (combinedView) { found.private_message.content = combinedView.private_message.content = data.private_message_view.private_message.content; found.private_message.updated = combinedView.private_message.updated = data.private_message_view.private_message.updated; } } this.setState(this.state); } else if (op == UserOperation.DeletePrivateMessage) { let data = wsJsonToRes(msg); let found = this.state.messages.find( m => m.private_message.id === data.private_message_view.private_message.id ); if (found) { let combinedView = this.state.combined.find( i => i.id == data.private_message_view.private_message.id )?.view as PrivateMessageView | undefined; if (combinedView) { found.private_message.deleted = combinedView.private_message.deleted = data.private_message_view.private_message.deleted; found.private_message.updated = combinedView.private_message.updated = data.private_message_view.private_message.updated; } } this.setState(this.state); } else if (op == UserOperation.MarkPrivateMessageAsRead) { let data = wsJsonToRes(msg); let found = this.state.messages.find( m => m.private_message.id === data.private_message_view.private_message.id ); if (found) { let combinedView = this.state.combined.find( i => i.id == data.private_message_view.private_message.id && i.type_ == ReplyEnum.Message )?.view as PrivateMessageView | undefined; if (combinedView) { found.private_message.updated = combinedView.private_message.updated = data.private_message_view.private_message.updated; // If youre in the unread view, just remove it from the list if ( this.state.unreadOrAll == UnreadOrAll.Unread && data.private_message_view.private_message.read ) { this.setState({ messages: this.state.messages.filter( r => r.private_message.id !== data.private_message_view.private_message.id ), }); this.setState({ combined: this.state.combined.filter( r => r.id !== data.private_message_view.private_message.id ), }); } else { found.private_message.read = combinedView.private_message.read = data.private_message_view.private_message.read; } } } this.sendUnreadCount(data.private_message_view.private_message.read); this.setState(this.state); } else if (op == UserOperation.MarkAllAsRead) { // Moved to be instant } else if ( op == UserOperation.EditComment || op == UserOperation.DeleteComment || op == UserOperation.RemoveComment ) { let data = wsJsonToRes(msg); editCommentRes(data.comment_view, this.state.replies); this.setState(this.state); } else if (op == UserOperation.MarkCommentReplyAsRead) { let data = wsJsonToRes(msg); let found = this.state.replies.find( c => c.comment_reply.id == data.comment_reply_view.comment_reply.id ); if (found) { let combinedView = this.state.combined.find( i => i.id == data.comment_reply_view.comment_reply.id && i.type_ == ReplyEnum.Reply )?.view as CommentReplyView | undefined; if (combinedView) { found.comment.content = combinedView.comment.content = data.comment_reply_view.comment.content; found.comment.updated = combinedView.comment.updated = data.comment_reply_view.comment.updated; found.comment.removed = combinedView.comment.removed = data.comment_reply_view.comment.removed; found.comment.deleted = combinedView.comment.deleted = data.comment_reply_view.comment.deleted; found.counts.upvotes = combinedView.counts.upvotes = data.comment_reply_view.counts.upvotes; found.counts.downvotes = combinedView.counts.downvotes = data.comment_reply_view.counts.downvotes; found.counts.score = combinedView.counts.score = data.comment_reply_view.counts.score; // If youre in the unread view, just remove it from the list if ( this.state.unreadOrAll == UnreadOrAll.Unread && data.comment_reply_view.comment_reply.read ) { this.setState({ replies: this.state.replies.filter( r => r.comment_reply.id !== data.comment_reply_view.comment_reply.id ), }); this.setState({ combined: this.state.combined.filter( r => r.id !== data.comment_reply_view.comment_reply.id ), }); } else { found.comment_reply.read = combinedView.comment_reply.read = data.comment_reply_view.comment_reply.read; } } } this.sendUnreadCount(data.comment_reply_view.comment_reply.read); this.setState(this.state); } else if (op == UserOperation.MarkPersonMentionAsRead) { let data = wsJsonToRes(msg); // TODO this might not be correct, it might need to use the comment id let found = this.state.mentions.find( c => c.person_mention.id == data.person_mention_view.person_mention.id ); if (found) { let combinedView = this.state.combined.find( i => i.id == data.person_mention_view.person_mention.id && i.type_ == ReplyEnum.Mention )?.view as PersonMentionView | undefined; if (combinedView) { found.comment.content = combinedView.comment.content = data.person_mention_view.comment.content; found.comment.updated = combinedView.comment.updated = data.person_mention_view.comment.updated; found.comment.removed = combinedView.comment.removed = data.person_mention_view.comment.removed; found.comment.deleted = combinedView.comment.deleted = data.person_mention_view.comment.deleted; found.counts.upvotes = combinedView.counts.upvotes = data.person_mention_view.counts.upvotes; found.counts.downvotes = combinedView.counts.downvotes = data.person_mention_view.counts.downvotes; found.counts.score = combinedView.counts.score = data.person_mention_view.counts.score; // If youre in the unread view, just remove it from the list if ( this.state.unreadOrAll == UnreadOrAll.Unread && data.person_mention_view.person_mention.read ) { this.setState({ mentions: this.state.mentions.filter( r => r.person_mention.id !== data.person_mention_view.person_mention.id ), }); this.setState({ combined: this.state.combined.filter( r => r.id !== data.person_mention_view.person_mention.id ), }); } else { // TODO test to make sure these mentions are getting marked as read found.person_mention.read = combinedView.person_mention.read = data.person_mention_view.person_mention.read; } } } this.sendUnreadCount(data.person_mention_view.person_mention.read); this.setState(this.state); } else if (op == UserOperation.CreatePrivateMessage) { let data = wsJsonToRes(msg); let mui = UserService.Instance.myUserInfo; if ( data.private_message_view.recipient.id == mui?.local_user_view.person.id ) { this.state.messages.unshift(data.private_message_view); this.state.combined.unshift( this.messageToReplyType(data.private_message_view) ); this.setState(this.state); } } else if (op == UserOperation.SaveComment) { let data = wsJsonToRes(msg); saveCommentRes(data.comment_view, this.state.replies); this.setState(this.state); setupTippy(); } else if (op == UserOperation.CreateCommentLike) { let data = wsJsonToRes(msg); createCommentLikeRes(data.comment_view, this.state.replies); this.setState(this.state); } else if (op == UserOperation.BlockPerson) { let data = wsJsonToRes(msg); updatePersonBlock(data); } else if (op == UserOperation.CreatePostReport) { let data = wsJsonToRes(msg); if (data) { toast(i18n.t("report_created")); } } else if (op == UserOperation.CreateCommentReport) { let data = wsJsonToRes(msg); if (data) { toast(i18n.t("report_created")); } } else if (op == UserOperation.CreatePrivateMessageReport) { let data = wsJsonToRes(msg); if (data) { toast(i18n.t("report_created")); } } } isMention(view: any): view is PersonMentionView { return (view as PersonMentionView).person_mention !== undefined; } isReply(view: any): view is CommentReplyView { return (view as CommentReplyView).comment_reply !== undefined; } }