import { Component, createRef, linkEvent, RefObject } from "inferno"; import { NavLink } from "inferno-router"; import { CommentResponse, GetReportCount, GetReportCountResponse, GetSiteResponse, GetUnreadCount, GetUnreadCountResponse, GetUnreadRegistrationApplicationCount, GetUnreadRegistrationApplicationCountResponse, PrivateMessageResponse, UserOperation, } from "lemmy-js-client"; import { Subscription } from "rxjs"; import { i18n } from "../../i18next"; import { UserService, WebSocketService } from "../../services"; import { authField, donateLemmyUrl, getLanguage, isBrowser, notifyComment, notifyPrivateMessage, numToSI, setTheme, showAvatars, toast, wsClient, wsJsonToRes, wsSubscribe, wsUserOp, } from "../../utils"; import { Icon } from "../common/icon"; import { PictrsImage } from "../common/pictrs-image"; interface NavbarProps { site_res: GetSiteResponse; } interface NavbarState { isLoggedIn: boolean; expanded: boolean; unreadInboxCount: number; unreadReportCount: number; unreadApplicationCount: number; searchParam: string; toggleSearch: boolean; showDropdown: boolean; onSiteBanner?(url: string): any; } export class Navbar extends Component { private wsSub: Subscription; private userSub: Subscription; private unreadInboxCountSub: Subscription; private unreadReportCountSub: Subscription; private unreadApplicationCountSub: Subscription; private searchTextField: RefObject; emptyState: NavbarState = { isLoggedIn: !!this.props.site_res.my_user, unreadInboxCount: 0, unreadReportCount: 0, unreadApplicationCount: 0, expanded: false, searchParam: "", toggleSearch: false, showDropdown: false, }; subscription: any; constructor(props: any, context: any) { super(props, context); this.state = this.emptyState; this.parseMessage = this.parseMessage.bind(this); this.subscription = wsSubscribe(this.parseMessage); } componentDidMount() { // Subscribe to jwt changes if (isBrowser()) { this.searchTextField = createRef(); console.log(`isLoggedIn = ${this.state.isLoggedIn}`); // On the first load, check the unreads if (this.state.isLoggedIn == false) { // setTheme(data.my_user.theme, true); // i18n.changeLanguage(getLanguage()); // i18n.changeLanguage('de'); } else { this.requestNotificationPermission(); WebSocketService.Instance.send( wsClient.userJoin({ auth: authField(), }) ); this.fetchUnreads(); } this.userSub = UserService.Instance.jwtSub.subscribe(res => { // A login if (res !== undefined) { this.requestNotificationPermission(); WebSocketService.Instance.send( wsClient.getSite({ auth: authField() }) ); } else { this.setState({ isLoggedIn: false }); } }); // Subscribe to unread count changes this.unreadInboxCountSub = UserService.Instance.unreadInboxCountSub.subscribe(res => { this.setState({ unreadInboxCount: res }); }); // Subscribe to unread report count changes this.unreadReportCountSub = UserService.Instance.unreadReportCountSub.subscribe(res => { this.setState({ unreadReportCount: res }); }); // Subscribe to unread application count this.unreadApplicationCountSub = UserService.Instance.unreadApplicationCountSub.subscribe(res => { this.setState({ unreadApplicationCount: res }); }); } } componentWillUnmount() { this.wsSub.unsubscribe(); this.userSub.unsubscribe(); this.unreadInboxCountSub.unsubscribe(); this.unreadReportCountSub.unsubscribe(); this.unreadApplicationCountSub.unsubscribe(); } updateUrl() { const searchParam = this.state.searchParam; this.setState({ searchParam: "" }); this.setState({ toggleSearch: false }); this.setState({ showDropdown: false, expanded: false }); if (searchParam === "") { this.context.router.history.push(`/search/`); } else { const searchParamEncoded = encodeURIComponent(searchParam); this.context.router.history.push( `/search/q/${searchParamEncoded}/type/All/sort/TopAll/listing_type/All/community_id/0/creator_id/0/page/1` ); } } render() { return this.navbar(); } // TODO class active corresponding to current page navbar() { let myUserInfo = UserService.Instance.myUserInfo || this.props.site_res.my_user; let person = myUserInfo?.local_user_view.person; return ( ); } handleToggleExpandNavbar(i: Navbar) { i.state.expanded = !i.state.expanded; i.setState(i.state); } handleHideExpandNavbar(i: Navbar) { i.setState({ expanded: false, showDropdown: false }); } handleSearchParam(i: Navbar, event: any) { i.state.searchParam = event.target.value; i.setState(i.state); } handleSearchSubmit(i: Navbar, event: any) { event.preventDefault(); i.updateUrl(); } handleSearchBtn(i: Navbar, event: any) { event.preventDefault(); i.setState({ toggleSearch: true }); i.searchTextField.current.focus(); const offsetWidth = i.searchTextField.current.offsetWidth; if (i.state.searchParam && offsetWidth > 100) { i.updateUrl(); } } handleSearchBlur(i: Navbar, event: any) { if (!(event.relatedTarget && event.relatedTarget.name !== "search-btn")) { i.state.toggleSearch = false; i.setState(i.state); } } handleLogoutClick(i: Navbar) { i.setState({ showDropdown: false, expanded: false }); UserService.Instance.logout(); window.location.href = "/"; location.reload(); } handleToggleDropdown(i: Navbar) { i.state.showDropdown = !i.state.showDropdown; i.setState(i.state); } parseMessage(msg: any) { let op = wsUserOp(msg); console.log(msg); if (msg.error) { if (msg.error == "not_logged_in") { UserService.Instance.logout(); location.reload(); } return; } else if (msg.reconnect) { console.log(i18n.t("websocket_reconnected")); WebSocketService.Instance.send( wsClient.userJoin({ auth: authField(), }) ); this.fetchUnreads(); } else if (op == UserOperation.GetUnreadCount) { let data = wsJsonToRes(msg).data; this.state.unreadInboxCount = data.replies + data.mentions + data.private_messages; this.setState(this.state); this.sendUnreadCount(); } else if (op == UserOperation.GetReportCount) { let data = wsJsonToRes(msg).data; this.state.unreadReportCount = data.post_reports + data.comment_reports; this.setState(this.state); this.sendReportUnread(); } else if (op == UserOperation.GetUnreadRegistrationApplicationCount) { let data = wsJsonToRes(msg).data; this.state.unreadApplicationCount = data.registration_applications; this.setState(this.state); this.sendApplicationUnread(); } else if (op == UserOperation.GetSite) { // This is only called on a successful login let data = wsJsonToRes(msg).data; console.log(data.my_user); UserService.Instance.myUserInfo = data.my_user; setTheme( UserService.Instance.myUserInfo.local_user_view.local_user.theme ); i18n.changeLanguage(getLanguage()); this.state.isLoggedIn = true; this.setState(this.state); } else if (op == UserOperation.CreateComment) { let data = wsJsonToRes(msg).data; if (this.state.isLoggedIn) { if ( data.recipient_ids.includes( UserService.Instance.myUserInfo.local_user_view.local_user.id ) ) { this.state.unreadInboxCount++; this.setState(this.state); this.sendUnreadCount(); notifyComment(data.comment_view, this.context.router); } } } else if (op == UserOperation.CreatePrivateMessage) { let data = wsJsonToRes(msg).data; if (this.state.isLoggedIn) { if ( data.private_message_view.recipient.id == UserService.Instance.myUserInfo.local_user_view.person.id ) { this.state.unreadInboxCount++; this.setState(this.state); this.sendUnreadCount(); notifyPrivateMessage(data.private_message_view, this.context.router); } } } } fetchUnreads() { console.log("Fetching inbox unreads..."); let unreadForm: GetUnreadCount = { auth: authField(), }; WebSocketService.Instance.send(wsClient.getUnreadCount(unreadForm)); console.log("Fetching reports..."); let reportCountForm: GetReportCount = { auth: authField(), }; WebSocketService.Instance.send(wsClient.getReportCount(reportCountForm)); if (UserService.Instance.myUserInfo?.local_user_view.person.admin) { console.log("Fetching applications..."); let applicationCountForm: GetUnreadRegistrationApplicationCount = { auth: authField(), }; WebSocketService.Instance.send( wsClient.getUnreadRegistrationApplicationCount(applicationCountForm) ); } } get currentLocation() { return this.context.router.history.location.pathname; } sendUnreadCount() { UserService.Instance.unreadInboxCountSub.next(this.state.unreadInboxCount); } sendReportUnread() { UserService.Instance.unreadReportCountSub.next( this.state.unreadReportCount ); } sendApplicationUnread() { UserService.Instance.unreadApplicationCountSub.next( this.state.unreadApplicationCount ); } get canAdmin(): boolean { return ( UserService.Instance.myUserInfo && this.props.site_res.admins .map(a => a.person.id) .includes(UserService.Instance.myUserInfo.local_user_view.person.id) ); } get canCreateCommunity(): boolean { let adminOnly = this.props.site_res.site_view?.site.community_creation_admin_only; return !adminOnly || this.canAdmin; } requestNotificationPermission() { if (UserService.Instance.myUserInfo) { document.addEventListener("DOMContentLoaded", function () { if (!Notification) { toast(i18n.t("notifications_error"), "danger"); return; } if (Notification.permission !== "granted") Notification.requestPermission(); }); } } }