Merge branch 'dev'

ui/src/components/comment-node.tsx

@@ -162,7 +162,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
                   </>
                 }
                 <li className="list-inline-item">
-                  <Link className="text-muted" to={`/post/${node.comment.post_id}/comment/${node.comment.id}`} target="_blank">link</Link>
+                  <Link className="text-muted" to={`/post/${node.comment.post_id}/comment/${node.comment.id}`}>link</Link>
                 </li>
                 {this.props.markable && 
                   <li className="list-inline-item">

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,8 @@ interface NavbarState {
   isLoggedIn: boolean;
   expanded: boolean;
   expandUserDropdown: boolean;
+  replies: Array<Comment>,
+  fetchCount: number,
   unreadCount: number;
   siteName: string;
 }
@@ -21,6 +23,8 @@ export class Navbar extends Component<any, NavbarState> {
   emptyState: NavbarState = {
     isLoggedIn: (UserService.Instance.user !== undefined),
     unreadCount: 0,
+    fetchCount: 0,
+    replies: [],
     expanded: false,
     expandUserDropdown: false,
     siteName: undefined
@@ -37,6 +41,7 @@ export class Navbar extends Component<any, NavbarState> {
     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 +53,10 @@ export class Navbar extends Component<any, NavbarState> {
         () => console.log('complete')
     );
 
+    if (this.state.isLoggedIn) {
+      this.requestNotificationPermission();
+    }
+
     WebSocketService.Instance.getSite();
   }
 
@@ -151,6 +160,13 @@ export class Navbar extends Component<any, NavbarState> {
       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.sendRepliesCount(res);
     } else if (op == UserOperation.GetSite) {
       let res: GetSiteResponse = msg;
@@ -177,6 +193,7 @@ export class Navbar extends Component<any, NavbarState> {
         limit: 9999,
       };
       WebSocketService.Instance.getReplies(repliesForm);
+      this.state.fetchCount++;
     }
   }
 
@@ -187,5 +204,35 @@ export class Navbar extends Component<any, NavbarState> {
   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<Comment>) {
+    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.creator_name}: ${recentReply.content}`
+      });
+
+      notification.onclick = () => {
+        this.context.router.history.push(`/post/${recentReply.post_id}/comment/${recentReply.id}`);
+      };
+
+    }
+  }
+}

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 { 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 } from '../services';
+import { WebSocketService, UserService } from '../services';
 import { msgOp, hotRank } from '../utils';
 import { PostListing } from './post-listing';
 import { Sidebar } from './sidebar';
@@ -69,8 +69,29 @@ export class Post extends Component<any, PostState> {
     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;
+      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<any, PostState> {
       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) {

ui/src/components/sidebar.tsx

@@ -115,14 +115,14 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
           <li class="list-inline-item"><Link class="text-info" to={`/u/${mod.user_name}`}>{mod.user_name}</Link></li>
         )}
       </ul>
+      <Link class="btn btn-sm btn-secondary btn-block mb-3" 
+        to={`/create_post/c/${community.name}`}>Create a Post</Link>
       <div>
         {community.subscribed 
           ? <button class="btn btn-sm btn-secondary btn-block mb-3" onClick={linkEvent(community.id, this.handleUnsubscribe)}>Unsubscribe</button>
           : <button class="btn btn-sm btn-secondary btn-block mb-3" onClick={linkEvent(community.id, this.handleSubscribe)}>Subscribe</button>
         }
       </div>
-      <Link class="btn btn-sm btn-secondary btn-block mb-3" 
-        to={`/create_post/c/${community.name}`}>Create a Post</Link>
       {community.description && 
         <div>
           <hr />

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;
 }