diff options
Diffstat (limited to 'ui/src/components/navbar.tsx')
-rw-r--r-- | ui/src/components/navbar.tsx | 88 |
1 files changed, 42 insertions, 46 deletions
diff --git a/ui/src/components/navbar.tsx b/ui/src/components/navbar.tsx index eccc8116..c03dcd87 100644 --- a/ui/src/components/navbar.tsx +++ b/ui/src/components/navbar.tsx @@ -14,7 +14,9 @@ import { SortType, GetSiteResponse, Comment, + CommentResponse, PrivateMessage, + PrivateMessageResponse, WebSocketJsonResponse, } from '../interfaces'; import { @@ -35,7 +37,6 @@ interface NavbarState { replies: Array<Comment>; mentions: Array<Comment>; messages: Array<PrivateMessage>; - fetchCount: number; unreadCount: number; siteName: string; } @@ -46,7 +47,6 @@ export class Navbar extends Component<any, NavbarState> { emptyState: NavbarState = { isLoggedIn: UserService.Instance.user !== undefined, unreadCount: 0, - fetchCount: 0, replies: [], mentions: [], messages: [], @@ -58,8 +58,6 @@ export class Navbar extends Component<any, NavbarState> { super(props, context); this.state = this.emptyState; - this.keepFetchingUnreads(); - // Subscribe to user changes this.userSub = UserService.Instance.sub.subscribe(user => { this.state.isLoggedIn = user.user !== undefined; @@ -78,6 +76,8 @@ export class Navbar extends Component<any, NavbarState> { if (this.state.isLoggedIn) { this.requestNotificationPermission(); + // TODO couldn't get re-logging in to re-fetch unreads + this.fetchUnreads(); } WebSocketService.Instance.getSite(); @@ -211,45 +211,51 @@ export class Navbar extends Component<any, NavbarState> { } else if (res.op == UserOperation.GetReplies) { let data = res.data as GetRepliesResponse; let unreadReplies = data.replies.filter(r => !r.read); - if ( - unreadReplies.length > 0 && - this.state.fetchCount > 1 && - JSON.stringify(this.state.replies) !== JSON.stringify(unreadReplies) - ) { - this.notify(unreadReplies); - } this.state.replies = unreadReplies; + this.state.unreadCount = this.calculateUnreadCount(); this.setState(this.state); this.sendUnreadCount(); } else if (res.op == UserOperation.GetUserMentions) { let data = res.data as GetUserMentionsResponse; let unreadMentions = data.mentions.filter(r => !r.read); - if ( - unreadMentions.length > 0 && - this.state.fetchCount > 1 && - JSON.stringify(this.state.mentions) !== JSON.stringify(unreadMentions) - ) { - this.notify(unreadMentions); - } this.state.mentions = unreadMentions; + this.state.unreadCount = this.calculateUnreadCount(); this.setState(this.state); this.sendUnreadCount(); } else if (res.op == UserOperation.GetPrivateMessages) { let data = res.data as PrivateMessagesResponse; let unreadMessages = data.messages.filter(r => !r.read); - if ( - unreadMessages.length > 0 && - this.state.fetchCount > 1 && - JSON.stringify(this.state.messages) !== JSON.stringify(unreadMessages) - ) { - this.notify(unreadMessages); - } this.state.messages = unreadMessages; + this.state.unreadCount = this.calculateUnreadCount(); this.setState(this.state); this.sendUnreadCount(); + } else if (res.op == UserOperation.CreateComment) { + let data = res.data as CommentResponse; + + if (this.state.isLoggedIn) { + if (data.recipient_ids.includes(UserService.Instance.user.id)) { + this.state.replies.push(data.comment); + this.state.unreadCount++; + this.setState(this.state); + this.sendUnreadCount(); + this.notify(data.comment); + } + } + } else if (res.op == UserOperation.CreatePrivateMessage) { + let data = res.data as PrivateMessageResponse; + + if (this.state.isLoggedIn) { + if (data.message.recipient_id == UserService.Instance.user.id) { + this.state.messages.push(data.message); + this.state.unreadCount++; + this.setState(this.state); + this.sendUnreadCount(); + this.notify(data.message); + } + } } else if (res.op == UserOperation.GetSite) { let data = res.data as GetSiteResponse; @@ -261,11 +267,6 @@ export class Navbar extends Component<any, NavbarState> { } } - keepFetchingUnreads() { - this.fetchUnreads(); - setInterval(() => this.fetchUnreads(), 15000); - } - fetchUnreads() { if (this.state.isLoggedIn) { let repliesForm: GetRepliesForm = { @@ -292,7 +293,6 @@ export class Navbar extends Component<any, NavbarState> { WebSocketService.Instance.getReplies(repliesForm); WebSocketService.Instance.getUserMentions(userMentionsForm); WebSocketService.Instance.getPrivateMessages(privateMessagesForm); - this.state.fetchCount++; } } } @@ -304,11 +304,11 @@ export class Navbar extends Component<any, NavbarState> { sendUnreadCount() { UserService.Instance.sub.next({ user: UserService.Instance.user, - unreadCount: this.unreadCount, + unreadCount: this.state.unreadCount, }); } - get unreadCount() { + calculateUnreadCount(): number { return ( this.state.replies.filter(r => !r.read).length + this.state.mentions.filter(r => !r.read).length + @@ -330,24 +330,20 @@ export class Navbar extends Component<any, NavbarState> { } } - notify(replies: Array<Comment | PrivateMessage>) { - let recentReply = replies[0]; + notify(reply: Comment | PrivateMessage) { if (Notification.permission !== 'granted') Notification.requestPermission(); else { - var notification = new Notification( - `${replies.length} ${i18n.t('unread_messages')}`, - { - icon: recentReply.creator_avatar - ? recentReply.creator_avatar - : `${window.location.protocol}//${window.location.host}/static/assets/apple-touch-icon.png`, - body: `${recentReply.creator_name}: ${recentReply.content}`, - } - ); + var notification = new Notification(reply.creator_name, { + icon: reply.creator_avatar + ? reply.creator_avatar + : `${window.location.protocol}//${window.location.host}/static/assets/apple-touch-icon.png`, + body: `${reply.content}`, + }); notification.onclick = () => { this.context.router.history.push( - isCommentType(recentReply) - ? `/post/${recentReply.post_id}/comment/${recentReply.id}` + isCommentType(reply) + ? `/post/${reply.post_id}/comment/${reply.id}` : `/inbox` ); }; |