Fixing unread indicator on link click. Fixes #527

ui/src/components/inbox.tsx

@@ -443,9 +443,9 @@ export class Inbox extends Component<any, InboxState> {
       this.state.messages.filter(
         r => !r.read && r.creator_id !== UserService.Instance.user.id
       ).length;
+    UserService.Instance.user.unreadCount = count;
     UserService.Instance.sub.next({
       user: UserService.Instance.user,
-      unreadCount: count,
     });
   }
 }

ui/src/components/navbar.tsx

@@ -60,8 +60,10 @@ export class Navbar extends Component<any, NavbarState> {
     // Subscribe to user changes
     this.userSub = UserService.Instance.sub.subscribe(user => {
       this.state.isLoggedIn = user.user !== undefined;
-      this.state.unreadCount = user.unreadCount;
+      if (this.state.isLoggedIn) {
+        this.state.unreadCount = user.user.unreadCount;
         this.requestNotificationPermission();
+      }
       this.setState(this.state);
     });
 
@@ -304,9 +306,9 @@ export class Navbar extends Component<any, NavbarState> {
   }
 
   sendUnreadCount() {
+    UserService.Instance.user.unreadCount = this.state.unreadCount;
     UserService.Instance.sub.next({
       user: UserService.Instance.user,
-      unreadCount: this.state.unreadCount,
     });
   }
 

ui/src/components/post.tsx

@@ -156,6 +156,10 @@ export class Post extends Component<any, PostState> {
         auth: null,
       };
       WebSocketService.Instance.editComment(form);
+      UserService.Instance.user.unreadCount--;
+      UserService.Instance.sub.next({
+        user: UserService.Instance.user,
+      });
     }
   }
 

ui/src/interfaces.ts

@@ -93,6 +93,7 @@ export interface User {
   lang: string;
   avatar?: string;
   show_avatars: boolean;
+  unreadCount?: number;
 }
 
 export interface UserView {

ui/src/services/UserService.ts

@@ -7,9 +7,8 @@ import { Subject } from 'rxjs';
 export class UserService {
   private static _instance: UserService;
   public user: User;
-  public sub: Subject<{ user: User; unreadCount: number }> = new Subject<{
+  public sub: Subject<{ user: User }> = new Subject<{
     user: User;
-    unreadCount: number;
   }>();
 
   private constructor() {
@@ -32,7 +31,7 @@ export class UserService {
     this.user = undefined;
     Cookies.remove('jwt');
     setTheme();
-    this.sub.next({ user: undefined, unreadCount: 0 });
+    this.sub.next({ user: undefined });
     console.log('Logged out.');
   }
 
@@ -45,7 +44,7 @@ export class UserService {
     if (this.user.theme != 'darkly') {
       setTheme(this.user.theme);
     }
-    this.sub.next({ user: this.user, unreadCount: 0 });
+    this.sub.next({ user: this.user });
     console.log(this.user);
   }