From 9ae4909e91e7583bb6e7a578d3ec6a573753da9f Mon Sep 17 00:00:00 2001 From: Dessalines Date: Sat, 18 May 2019 16:41:22 -0700 Subject: [PATCH 1/3] Adding browser notifications. - Fixes #153 --- ui/src/components/navbar.tsx | 47 ++++++++++++++++++++++++++++++++++-- ui/src/components/post.tsx | 2 +- ui/src/css/main.css | 4 +++ 3 files changed, 50 insertions(+), 3 deletions(-) diff --git a/ui/src/components/navbar.tsx b/ui/src/components/navbar.tsx index 844711457..c19c20848 100644 --- a/ui/src/components/navbar.tsx +++ b/ui/src/components/navbar.tsx @@ -3,7 +3,7 @@ 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, SortType, GetSiteResponse } from '../interfaces'; +import { UserOperation, GetRepliesForm, GetRepliesResponse, SortType, GetSiteResponse, Comment} from '../interfaces'; import { msgOp } from '../utils'; import { version } from '../version'; @@ -11,6 +11,7 @@ interface NavbarState { isLoggedIn: boolean; expanded: boolean; expandUserDropdown: boolean; + replies: Array, unreadCount: number; siteName: string; } @@ -21,6 +22,7 @@ export class Navbar extends Component { emptyState: NavbarState = { isLoggedIn: (UserService.Instance.user !== undefined), unreadCount: 0, + replies: [], expanded: false, expandUserDropdown: false, siteName: undefined @@ -37,6 +39,7 @@ export class Navbar extends Component { this.userSub = UserService.Instance.sub.subscribe(user => { this.state.isLoggedIn = user.user !== undefined; this.state.unreadCount = user.unreadCount; + this.requestNotificationPermission(); this.setState(this.state); }); @@ -48,6 +51,10 @@ export class Navbar extends Component { () => console.log('complete') ); + if (this.state.isLoggedIn) { + this.requestNotificationPermission(); + } + WebSocketService.Instance.getSite(); } @@ -151,6 +158,12 @@ export class Navbar extends Component { return; } else if (op == UserOperation.GetReplies) { let res: GetRepliesResponse = msg; + if (res.replies.length > 0 && this.state.replies.length > 0 && + (JSON.stringify(this.state.replies) !== JSON.stringify(res.replies))) { + this.notify(res.replies); + } + + this.state.replies = res.replies; this.sendRepliesCount(res); } else if (op == UserOperation.GetSite) { let res: GetSiteResponse = msg; @@ -187,5 +200,35 @@ export class Navbar extends Component { sendRepliesCount(res: GetRepliesResponse) { UserService.Instance.sub.next({user: UserService.Instance.user, unreadCount: res.replies.filter(r => !r.read).length}); } -} + requestNotificationPermission() { + if (UserService.Instance.user) { + document.addEventListener('DOMContentLoaded', function () { + if (!Notification) { + alert('Desktop notifications not available in your browser. Try Chromium.'); + 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} Unread Messages`, { + icon: `${window.location.protocol}//${window.location.host}/static/assets/apple-touch-icon.png`, + body: recentReply.content + }); + + notification.onclick = () => { + this.context.router.history.push(`/post/${recentReply.post_id}/comment/${recentReply.id}`); + }; + + } + } +} diff --git a/ui/src/components/post.tsx b/ui/src/components/post.tsx index 7b2f790eb..8fa18fbf8 100644 --- a/ui/src/components/post.tsx +++ b/ui/src/components/post.tsx @@ -69,7 +69,7 @@ export class Post extends Component { if (this.state.scrolled_comment_id && !this.state.scrolled && lastState.comments.length > 0) { var elmnt = document.getElementById(`comment-${this.state.scrolled_comment_id}`); elmnt.scrollIntoView(); - elmnt.classList.add("mark"); + elmnt.classList.add("mark-two"); this.state.scrolled = true; } } diff --git a/ui/src/css/main.css b/ui/src/css/main.css index c3ff3bdab..2a65ca19f 100644 --- a/ui/src/css/main.css +++ b/ui/src/css/main.css @@ -38,6 +38,10 @@ body, .text-white, .navbar-brand, .badge-light, .btn-secondary { background-color: #333; } +.mark-two { + background-color: #444 !important; +} + .md-div p { margin-bottom: 0px; } From 8a5b7258d6ea2255bc30e96a651d870b43c4c983 Mon Sep 17 00:00:00 2001 From: Dessalines Date: Sun, 19 May 2019 09:15:08 -0700 Subject: [PATCH 2/3] Mark as read if viewing link. - Fixes #154. #153 --- ui/src/components/comment-node.tsx | 2 +- ui/src/components/navbar.tsx | 14 +++++++++----- ui/src/components/post.tsx | 26 ++++++++++++++++++++++++-- 3 files changed, 34 insertions(+), 8 deletions(-) diff --git a/ui/src/components/comment-node.tsx b/ui/src/components/comment-node.tsx index 76e8e64e8..126966a7b 100644 --- a/ui/src/components/comment-node.tsx +++ b/ui/src/components/comment-node.tsx @@ -162,7 +162,7 @@ export class CommentNode extends Component { }
  • - link + link
    • {this.props.markable &&
  • diff --git a/ui/src/components/navbar.tsx b/ui/src/components/navbar.tsx index c19c20848..68e486c1f 100644 --- a/ui/src/components/navbar.tsx +++ b/ui/src/components/navbar.tsx @@ -12,6 +12,7 @@ interface NavbarState { expanded: boolean; expandUserDropdown: boolean; replies: Array, + fetchCount: number, unreadCount: number; siteName: string; } @@ -22,6 +23,7 @@ export class Navbar extends Component { emptyState: NavbarState = { isLoggedIn: (UserService.Instance.user !== undefined), unreadCount: 0, + fetchCount: 0, replies: [], expanded: false, expandUserDropdown: false, @@ -158,12 +160,13 @@ export class Navbar extends Component { return; } else if (op == UserOperation.GetReplies) { let res: GetRepliesResponse = msg; - if (res.replies.length > 0 && this.state.replies.length > 0 && - (JSON.stringify(this.state.replies) !== JSON.stringify(res.replies))) { - this.notify(res.replies); + 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 = res.replies; + this.state.replies = unreadReplies; this.sendRepliesCount(res); } else if (op == UserOperation.GetSite) { let res: GetSiteResponse = msg; @@ -190,6 +193,7 @@ export class Navbar extends Component { limit: 9999, }; WebSocketService.Instance.getReplies(repliesForm); + this.state.fetchCount++; } } @@ -222,7 +226,7 @@ export class Navbar extends Component { else { var notification = new Notification(`${replies.length} Unread Messages`, { icon: `${window.location.protocol}//${window.location.host}/static/assets/apple-touch-icon.png`, - body: recentReply.content + body: `${recentReply.creator_name}: ${recentReply.content}` }); notification.onclick = () => { diff --git a/ui/src/components/post.tsx b/ui/src/components/post.tsx index 8fa18fbf8..3e2e07b35 100644 --- a/ui/src/components/post.tsx +++ b/ui/src/components/post.tsx @@ -1,8 +1,8 @@ import { Component, linkEvent } from 'inferno'; import { Subscription } from "rxjs"; import { retryWhen, delay, take } from 'rxjs/operators'; -import { UserOperation, Community, Post as PostI, GetPostResponse, PostResponse, Comment, CommentResponse, CommentSortType, CreatePostLikeResponse, CommunityUser, CommunityResponse, CommentNode as CommentNodeI, BanFromCommunityResponse, BanUserResponse, AddModToCommunityResponse, AddAdminResponse, UserView } from '../interfaces'; -import { WebSocketService } from '../services'; +import { UserOperation, Community, Post as PostI, GetPostResponse, PostResponse, Comment, CommentForm as CommentFormI, CommentResponse, CommentSortType, CreatePostLikeResponse, CommunityUser, CommunityResponse, CommentNode as CommentNodeI, BanFromCommunityResponse, BanUserResponse, AddModToCommunityResponse, AddAdminResponse, UserView } from '../interfaces'; +import { WebSocketService, UserService } from '../services'; import { msgOp, hotRank } from '../utils'; import { PostListing } from './post-listing'; import { Sidebar } from './sidebar'; @@ -71,6 +71,27 @@ export class Post extends Component { elmnt.scrollIntoView(); elmnt.classList.add("mark-two"); this.state.scrolled = true; + this.markScrolledAsRead(this.state.scrolled_comment_id); + } + } + + markScrolledAsRead(commentId: number) { + let found = this.state.comments.find(c => c.id == commentId); + let parent = this.state.comments.find(c => found.parent_id == c.id); + let parent_user_id = parent ? parent.creator_id : this.state.post.creator_id; + + if (UserService.Instance.user && UserService.Instance.user.id == parent_user_id) { + + let form: CommentFormI = { + content: found.content, + edit_id: found.id, + creator_id: found.creator_id, + post_id: found.post_id, + parent_id: found.parent_id, + read: true, + auth: null + }; + WebSocketService.Instance.editComment(form); } } @@ -248,6 +269,7 @@ export class Post extends Component { found.upvotes = res.comment.upvotes; found.downvotes = res.comment.downvotes; found.score = res.comment.score; + found.read = res.comment.read; this.setState(this.state); } else if (op == UserOperation.SaveComment) { From 811bcb42b3a30984775b909f54bd8da7e66b4b88 Mon Sep 17 00:00:00 2001 From: Dessalines Date: Sun, 19 May 2019 09:34:27 -0700 Subject: [PATCH 3/3] Moving create post to below unsubscribe. --- ui/src/components/sidebar.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/ui/src/components/sidebar.tsx b/ui/src/components/sidebar.tsx index 8d1459d56..6532bc050 100644 --- a/ui/src/components/sidebar.tsx +++ b/ui/src/components/sidebar.tsx @@ -115,14 +115,14 @@ export class Sidebar extends Component {
  • {mod.user_name}
    • )} + Create a Post
    {community.subscribed ? : }
    - Create a Post {community.description &&