use improved notification system for all notification types (#2190)

* only refetch PM counts when marking a message as read

* refresh registration applications and the corresponding unread counter when processing an application

* refetch reports when marking one as resolved

* update unread notifications when logging in

* UnreadCounterService: use async functions

* clarify the meaning of UnreadCounterService.updateInboxCounts

* UnreadCounterService: correct updateAll

src/shared/components/home/login.tsx

@@ -16,6 +16,7 @@ import { HtmlTags } from "../common/html-tags";
 import { Spinner } from "../common/icon";
 import PasswordInput from "../common/password-input";
 import TotpModal from "../common/totp-modal";
+import { UnreadCounterService } from "../../services";
 
 interface LoginProps {
   prev?: string;
@@ -55,6 +56,8 @@ async function handleLoginSuccess(i: Login, loginRes: LoginResponse) {
     : i.props.history.action === "PUSH"
     ? i.props.history.back()
     : i.props.history.replace("/");
+
+  UnreadCounterService.Instance.updateAll();
 }
 
 async function handleLoginSubmit(i: Login, event: any) {

src/shared/components/person/inbox.tsx

@@ -795,7 +795,7 @@ export class Inbox extends Component<any, InboxState> {
         limit,
       }),
     });
-    UnreadCounterService.Instance.update();
+    UnreadCounterService.Instance.updateInboxCounts();
   }
 
   async handleSortChange(val: CommentSortType) {

src/shared/components/person/registration-applications.tsx

@@ -23,6 +23,7 @@ import { HtmlTags } from "../common/html-tags";
 import { Spinner } from "../common/icon";
 import { Paginator } from "../common/paginator";
 import { RegistrationApplication } from "../common/registration-application";
+import { UnreadCounterService } from "../../services";
 
 enum UnreadOrAll {
   Unread,
@@ -243,6 +244,10 @@ export class RegistrationApplications extends Component<
           approveRes.data.registration_application,
           s.appsRes.data.registration_applications,
         );
+        if (this.state.unreadOrAll === UnreadOrAll.Unread) {
+          this.refetch();
+          UnreadCounterService.Instance.updateApplications();
+        }
       }
       return s;
     });

src/shared/components/person/reports.tsx

@@ -46,6 +46,7 @@ import { Spinner } from "../common/icon";
 import { Paginator } from "../common/paginator";
 import { PostReport } from "../post/post-report";
 import { PrivateMessageReport } from "../private_message/private-message-report";
+import { UnreadCounterService } from "../../services";
 
 enum UnreadOrAll {
   Unread,
@@ -610,16 +611,28 @@ export class Reports extends Component<any, ReportsState> {
   async handleResolveCommentReport(form: ResolveCommentReport) {
     const res = await HttpService.client.resolveCommentReport(form);
     this.findAndUpdateCommentReport(res);
+    if (this.state.unreadOrAll === UnreadOrAll.Unread) {
+      this.refetch();
+      UnreadCounterService.Instance.updateReports();
+    }
   }
 
   async handleResolvePostReport(form: ResolvePostReport) {
     const res = await HttpService.client.resolvePostReport(form);
     this.findAndUpdatePostReport(res);
+    if (this.state.unreadOrAll === UnreadOrAll.Unread) {
+      this.refetch();
+      UnreadCounterService.Instance.updateReports();
+    }
   }
 
   async handleResolvePrivateMessageReport(form: ResolvePrivateMessageReport) {
     const res = await HttpService.client.resolvePrivateMessageReport(form);
     this.findAndUpdatePrivateMessageReport(res);
+    if (this.state.unreadOrAll === UnreadOrAll.Unread) {
+      this.refetch();
+      UnreadCounterService.Instance.updateReports();
+    }
   }
 
   findAndUpdateCommentReport(res: RequestState<CommentReportResponse>) {

src/shared/services/UnreadCounterService.ts

@@ -32,17 +32,22 @@ export class UnreadCounterService {
 
   constructor() {
     if (isBrowser()) {
-      poll(this.update, updateUnreadCountsInterval);
+      poll(async () => this.updateAll(), updateUnreadCountsInterval);
     }
   }
 
-  public update = async () => {
+  private get shouldUpdate() {
     if (window.document.visibilityState === "hidden") {
-      return;
+      return false;
     }
     if (!myAuth()) {
-      return;
+      return false;
     }
+    return true;
+  }
+
+  public async updateInboxCounts() {
+    if (this.shouldUpdate) {
       const unreadCountRes = await HttpService.client.getUnreadCount();
       if (unreadCountRes.state === "success") {
         this.unreadPrivateMessages = unreadCountRes.data.private_messages;
@@ -52,7 +57,11 @@ export class UnreadCounterService {
           this.unreadPrivateMessages + this.unreadReplies + this.unreadMentions,
         );
       }
-    if (UserService.Instance.moderatesSomething) {
+    }
+  }
+
+  public async updateReports() {
+    if (this.shouldUpdate && UserService.Instance.moderatesSomething) {
       const reportCountRes = await HttpService.client.getReportCount({});
       if (reportCountRes.state === "success") {
         this.commentReportCount = reportCountRes.data.comment_reports ?? 0;
@@ -66,7 +75,10 @@ export class UnreadCounterService {
         );
       }
     }
-    if (amAdmin()) {
+  }
+
+  public async updateApplications() {
+    if (this.shouldUpdate && amAdmin()) {
       const unreadApplicationsRes =
         await HttpService.client.getUnreadRegistrationApplicationCount();
       if (unreadApplicationsRes.state === "success") {
@@ -75,7 +87,13 @@ export class UnreadCounterService {
         );
       }
     }
-  };
+  }
+
+  public async updateAll() {
+    this.updateInboxCounts();
+    this.updateReports();
+    this.updateApplications();
+  }
 
   static get Instance() {
     return this.#instance ?? (this.#instance = new this());