import { Component, linkEvent } from 'inferno'; import { Link } from 'inferno-router'; import { Subscription } from 'rxjs'; import { retryWhen, delay, take } from 'rxjs/operators'; import { WebSocketService, UserService } from '../services'; import { UserOperation, GetRepliesForm, GetRepliesResponse, GetUserMentionsForm, GetUserMentionsResponse, SortType, GetSiteResponse, Comment, } from '../interfaces'; import { msgOp } from '../utils'; import { version } from '../version'; import { i18n } from '../i18next'; import { T } from 'inferno-i18next'; interface NavbarState { isLoggedIn: boolean; expanded: boolean; expandUserDropdown: boolean; replies: Array; mentions: Array; fetchCount: number; unreadCount: number; siteName: string; } export class Navbar extends Component { private wsSub: Subscription; private userSub: Subscription; emptyState: NavbarState = { isLoggedIn: UserService.Instance.user !== undefined, unreadCount: 0, fetchCount: 0, replies: [], mentions: [], expanded: false, expandUserDropdown: false, siteName: undefined, }; constructor(props: any, context: any) { super(props, context); this.state = this.emptyState; this.handleOverviewClick = this.handleOverviewClick.bind(this); this.keepFetchingUnreads(); // Subscribe to user changes this.userSub = UserService.Instance.sub.subscribe(user => { this.state.isLoggedIn = user.user !== undefined; this.state.unreadCount = user.unreadCount; this.requestNotificationPermission(); this.setState(this.state); }); this.wsSub = WebSocketService.Instance.subject .pipe( retryWhen(errors => errors.pipe( delay(3000), take(10) ) ) ) .subscribe( msg => this.parseMessage(msg), err => console.error(err), () => console.log('complete') ); if (this.state.isLoggedIn) { this.requestNotificationPermission(); } WebSocketService.Instance.getSite(); } render() { return
{this.navbar()}
; } componentWillUnmount() { this.wsSub.unsubscribe(); this.userSub.unsubscribe(); } // TODO class active corresponding to current page navbar() { return ( ); } expandUserDropdown(i: Navbar) { i.state.expandUserDropdown = !i.state.expandUserDropdown; i.setState(i.state); } handleLogoutClick(i: Navbar) { i.state.expandUserDropdown = false; UserService.Instance.logout(); i.context.router.history.push('/'); } handleOverviewClick(i: Navbar) { i.state.expandUserDropdown = false; i.setState(i.state); let userPage = `/u/${UserService.Instance.user.username}`; i.context.router.history.push(userPage); } expandNavbar(i: Navbar) { i.state.expanded = !i.state.expanded; i.setState(i.state); } parseMessage(msg: any) { let op: UserOperation = msgOp(msg); if (msg.error) { if (msg.error == 'not_logged_in') { UserService.Instance.logout(); location.reload(); } return; } else if (op == UserOperation.GetReplies) { let res: GetRepliesResponse = msg; let unreadReplies = res.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.setState(this.state); this.sendUnreadCount(); } else if (op == UserOperation.GetUserMentions) { let res: GetUserMentionsResponse = msg; let unreadMentions = res.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.setState(this.state); this.sendUnreadCount(); } else if (op == UserOperation.GetSite) { let res: GetSiteResponse = msg; if (res.site) { this.state.siteName = res.site.name; WebSocketService.Instance.site = res.site; this.setState(this.state); } } } keepFetchingUnreads() { this.fetchUnreads(); setInterval(() => this.fetchUnreads(), 15000); } fetchUnreads() { if (this.state.isLoggedIn) { let repliesForm: GetRepliesForm = { sort: SortType[SortType.New], unread_only: true, page: 1, limit: 9999, }; let userMentionsForm: GetUserMentionsForm = { sort: SortType[SortType.New], unread_only: true, page: 1, limit: 9999, }; if (this.currentLocation !== '/inbox') { WebSocketService.Instance.getReplies(repliesForm); WebSocketService.Instance.getUserMentions(userMentionsForm); this.state.fetchCount++; } } } get currentLocation() { return this.context.router.history.location.pathname; } sendUnreadCount() { UserService.Instance.sub.next({ user: UserService.Instance.user, unreadCount: this.unreadCount, }); } get unreadCount() { return ( this.state.replies.filter(r => !r.read).length + this.state.mentions.filter(r => !r.read).length ); } requestNotificationPermission() { if (UserService.Instance.user) { document.addEventListener('DOMContentLoaded', function() { if (!Notification) { alert(i18n.t('notifications_error')); return; } if (Notification.permission !== 'granted') Notification.requestPermission(); }); } } notify(replies: Array) { let recentReply = replies[0]; if (Notification.permission !== 'granted') Notification.requestPermission(); else { var notification = new Notification( `${replies.length} ${i18n.t('unread_messages')}`, { icon: `${window.location.protocol}//${window.location.host}/static/assets/apple-touch-icon.png`, body: `${recentReply.creator_name}: ${recentReply.content}`, } ); notification.onclick = () => { this.context.router.history.push( `/post/${recentReply.post_id}/comment/${recentReply.id}` ); }; } } }