make suggested changes

src/shared/components/app/navbar.tsx

@@ -1,18 +1,12 @@
-import { myAuth, showAvatars } from "@utils/app";
+import { showAvatars } from "@utils/app";
 import { isBrowser } from "@utils/browser";
-import { numToSI, poll } from "@utils/helpers";
+import { numToSI } from "@utils/helpers";
 import { amAdmin, canCreateCommunity } from "@utils/roles";
 import { Component, createRef, linkEvent } from "inferno";
 import { NavLink } from "inferno-router";
-import {
-  GetReportCountResponse,
-  GetSiteResponse,
-  GetUnreadCountResponse,
-  GetUnreadRegistrationApplicationCountResponse,
-} from "lemmy-js-client";
-import { donateLemmyUrl, updateUnreadCountsInterval } from "../../config";
-import { I18NextService, UserService } from "../../services";
-import { HttpService, RequestState } from "../../services/HttpService";
+import { GetSiteResponse } from "lemmy-js-client";
+import { donateLemmyUrl } from "../../config";
+import { I18NextService, InboxService, UserService } from "../../services";
 import { toast } from "../../toast";
 import { Icon } from "../common/icon";
 import { PictrsImage } from "../common/pictrs-image";
@@ -22,9 +16,6 @@ interface NavbarProps {
 }
 
 interface NavbarState {
-  unreadInboxCountRes: RequestState<GetUnreadCountResponse>;
-  unreadReportCountRes: RequestState<GetReportCountResponse>;
-  unreadApplicationCountRes: RequestState<GetUnreadRegistrationApplicationCountResponse>;
   onSiteBanner?(url: string): any;
 }
 
@@ -44,11 +35,6 @@ function handleLogOut(i: Navbar) {
 }
 
 export class Navbar extends Component<NavbarProps, NavbarState> {
-  state: NavbarState = {
-    unreadInboxCountRes: { state: "empty" },
-    unreadReportCountRes: { state: "empty" },
-    unreadApplicationCountRes: { state: "empty" },
-  };
   collapseButtonRef = createRef<HTMLButtonElement>();
   mobileMenuRef = createRef<HTMLDivElement>();
 
@@ -58,14 +44,11 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
     this.handleOutsideMenuClick = this.handleOutsideMenuClick.bind(this);
   }
 
-  async componentDidMount() {
+  componentDidMount() {
     // Subscribe to jwt changes
     if (isBrowser()) {
       // On the first load, check the unreads
       this.requestNotificationPermission();
-      this.fetchUnreads();
-      this.requestNotificationPermission();
-
       document.addEventListener("mouseup", this.handleOutsideMenuClick);
     }
   }
@@ -102,15 +85,15 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
                 to="/inbox"
                 className="p-1 nav-link border-0 nav-messages"
                 title={I18NextService.i18n.t("unread_messages", {
-                  count: Number(this.state.unreadApplicationCountRes.state),
-                  formattedCount: numToSI(this.unreadInboxCount),
+                  count: Number(InboxService.unreadInboxCount),
+                  formattedCount: numToSI(InboxService.unreadInboxCount),
                 })}
                 onMouseUp={linkEvent(this, handleCollapseClick)}
               >
                 <Icon icon="bell" />
-                {this.unreadInboxCount > 0 && (
+                {InboxService.unreadInboxCount > 0 && (
                   <span className="mx-1 badge text-bg-light">
-                    {numToSI(this.unreadInboxCount)}
+                    {numToSI(InboxService.unreadInboxCount)}
                   </span>
                 )}
               </NavLink>
@@ -121,15 +104,15 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
                   to="/reports"
                   className="p-1 nav-link border-0"
                   title={I18NextService.i18n.t("unread_reports", {
-                    count: Number(this.unreadReportCount),
-                    formattedCount: numToSI(this.unreadReportCount),
+                    count: Number(InboxService.unreadReportCount),
+                    formattedCount: numToSI(InboxService.unreadReportCount),
                   })}
                   onMouseUp={linkEvent(this, handleCollapseClick)}
                 >
                   <Icon icon="shield" />
-                  {this.unreadReportCount > 0 && (
+                  {InboxService.unreadReportCount > 0 && (
                     <span className="mx-1 badge text-bg-light">
-                      {numToSI(this.unreadReportCount)}
+                      {numToSI(InboxService.unreadReportCount)}
                     </span>
                   )}
                 </NavLink>
@@ -143,16 +126,18 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
                   title={I18NextService.i18n.t(
                     "unread_registration_applications",
                     {
-                      count: Number(this.unreadApplicationCount),
-                      formattedCount: numToSI(this.unreadApplicationCount),
+                      count: Number(InboxService.unreadApplicationCount),
+                      formattedCount: numToSI(
+                        InboxService.unreadApplicationCount
+                      ),
                     }
                   )}
                   onMouseUp={linkEvent(this, handleCollapseClick)}
                 >
                   <Icon icon="clipboard" />
-                  {this.unreadApplicationCount > 0 && (
+                  {InboxService.unreadApplicationCount > 0 && (
                     <span className="mx-1 badge text-bg-light">
-                      {numToSI(this.unreadApplicationCount)}
+                      {numToSI(InboxService.unreadApplicationCount)}
                     </span>
                   )}
                 </NavLink>
@@ -267,21 +252,21 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
                     className="nav-link d-inline-flex align-items-center d-md-inline-block"
                     to="/inbox"
                     title={I18NextService.i18n.t("unread_messages", {
-                      count: Number(this.unreadInboxCount),
-                      formattedCount: numToSI(this.unreadInboxCount),
+                      count: Number(InboxService.unreadInboxCount),
+                      formattedCount: numToSI(InboxService.unreadInboxCount),
                     })}
                     onMouseUp={linkEvent(this, handleCollapseClick)}
                   >
                     <Icon icon="bell" />
                     <span className="badge text-bg-light d-inline ms-1 d-md-none ms-md-0">
                       {I18NextService.i18n.t("unread_messages", {
-                        count: Number(this.unreadInboxCount),
-                        formattedCount: numToSI(this.unreadInboxCount),
+                        count: Number(InboxService.unreadInboxCount),
+                        formattedCount: numToSI(InboxService.unreadInboxCount),
                       })}
                     </span>
-                    {this.unreadInboxCount > 0 && (
+                    {InboxService.unreadInboxCount > 0 && (
                       <span className="mx-1 badge text-bg-light">
-                        {numToSI(this.unreadInboxCount)}
+                        {numToSI(InboxService.unreadInboxCount)}
                       </span>
                     )}
                   </NavLink>
@@ -292,21 +277,23 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
                       className="nav-link d-inline-flex align-items-center d-md-inline-block"
                       to="/reports"
                       title={I18NextService.i18n.t("unread_reports", {
-                        count: Number(this.unreadReportCount),
-                        formattedCount: numToSI(this.unreadReportCount),
+                        count: Number(InboxService.unreadReportCount),
+                        formattedCount: numToSI(InboxService.unreadReportCount),
                       })}
                       onMouseUp={linkEvent(this, handleCollapseClick)}
                     >
                       <Icon icon="shield" />
                       <span className="badge text-bg-light d-inline ms-1 d-md-none ms-md-0">
                         {I18NextService.i18n.t("unread_reports", {
-                          count: Number(this.unreadReportCount),
-                          formattedCount: numToSI(this.unreadReportCount),
+                          count: Number(InboxService.unreadReportCount),
+                          formattedCount: numToSI(
+                            InboxService.unreadReportCount
+                          ),
                         })}
                       </span>
-                      {this.unreadReportCount > 0 && (
+                      {InboxService.unreadReportCount > 0 && (
                         <span className="mx-1 badge text-bg-light">
-                          {numToSI(this.unreadReportCount)}
+                          {numToSI(InboxService.unreadReportCount)}
                         </span>
                       )}
                     </NavLink>
@@ -320,8 +307,10 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
                       title={I18NextService.i18n.t(
                         "unread_registration_applications",
                         {
-                          count: Number(this.unreadApplicationCount),
-                          formattedCount: numToSI(this.unreadApplicationCount),
+                          count: Number(InboxService.unreadApplicationCount),
+                          formattedCount: numToSI(
+                            InboxService.unreadApplicationCount
+                          ),
                         }
                       )}
                       onMouseUp={linkEvent(this, handleCollapseClick)}
@@ -331,16 +320,16 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
                         {I18NextService.i18n.t(
                           "unread_registration_applications",
                           {
-                            count: Number(this.unreadApplicationCount),
+                            count: Number(InboxService.unreadApplicationCount),
                             formattedCount: numToSI(
-                              this.unreadApplicationCount
+                              InboxService.unreadApplicationCount
                             ),
                           }
                         )}
                       </span>
-                      {this.unreadApplicationCount > 0 && (
+                      {InboxService.unreadApplicationCount > 0 && (
                         <span className="mx-1 badge text-bg-light">
-                          {numToSI(this.unreadApplicationCount)}
+                          {numToSI(InboxService.unreadApplicationCount)}
                         </span>
                       )}
                     </NavLink>
@@ -443,69 +432,6 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
     return amAdmin() || moderatesS;
   }
 
-  fetchUnreads() {
-    poll(async () => {
-      if (window.document.visibilityState !== "hidden") {
-        const auth = myAuth();
-        if (auth) {
-          this.setState({
-            unreadInboxCountRes: await HttpService.client.getUnreadCount({
-              auth,
-            }),
-          });
-
-          if (this.moderatesSomething) {
-            this.setState({
-              unreadReportCountRes: await HttpService.client.getReportCount({
-                auth,
-              }),
-            });
-          }
-
-          if (amAdmin()) {
-            this.setState({
-              unreadApplicationCountRes:
-                await HttpService.client.getUnreadRegistrationApplicationCount({
-                  auth,
-                }),
-            });
-          }
-        }
-      }
-    }, updateUnreadCountsInterval);
-  }
-
-  get unreadInboxCount(): number {
-    if (this.state.unreadInboxCountRes.state == "success") {
-      const data = this.state.unreadInboxCountRes.data;
-      return data.replies + data.mentions + data.private_messages;
-    } else {
-      return 0;
-    }
-  }
-
-  get unreadReportCount(): number {
-    if (this.state.unreadReportCountRes.state == "success") {
-      const data = this.state.unreadReportCountRes.data;
-      return (
-        data.post_reports +
-        data.comment_reports +
-        (data.private_message_reports ?? 0)
-      );
-    } else {
-      return 0;
-    }
-  }
-
-  get unreadApplicationCount(): number {
-    if (this.state.unreadApplicationCountRes.state == "success") {
-      const data = this.state.unreadApplicationCountRes.data;
-      return data.registration_applications;
-    } else {
-      return 0;
-    }
-  }
-
   get currentLocation() {
     return this.context.router.history.location.pathname;
   }

src/shared/components/person/inbox.tsx

@@ -60,7 +60,12 @@ import {
 } from "lemmy-js-client";
 import { fetchLimit, relTags } from "../../config";
 import { CommentViewType, InitialFetchRequest } from "../../interfaces";
-import { FirstLoadService, I18NextService, UserService } from "../../services";
+import {
+  FirstLoadService,
+  I18NextService,
+  InboxService,
+  UserService,
+} from "../../services";
 import { HttpService, RequestState } from "../../services/HttpService";
 import { toast } from "../../toast";
 import { CommentNodes } from "../comment/comment-nodes";
@@ -786,6 +791,8 @@ export class Inbox extends Component<any, InboxState> {
         mentionsRes: { state: "empty" },
         messagesRes: { state: "empty" },
       });
+
+      InboxService.fetchUnreadCounts();
     }
   }
 

src/shared/services/InboxService.ts

@@ -0,0 +1,121 @@
+import { myAuth } from "@utils/app";
+import { isBrowser } from "@utils/browser";
+import { poll } from "@utils/helpers";
+import { amAdmin } from "@utils/roles";
+import {
+  GetReportCountResponse,
+  GetUnreadCountResponse,
+  GetUnreadRegistrationApplicationCountResponse,
+} from "lemmy-js-client";
+import { updateUnreadCountsInterval } from "../config";
+import { HttpService, UserService } from "../services";
+import { RequestState } from "../services/HttpService";
+
+export class InboxService {
+  static #_instance: InboxService;
+  unreadInboxCountRes: RequestState<GetUnreadCountResponse>;
+  unreadReportCountRes: RequestState<GetReportCountResponse>;
+  unreadApplicationCountRes: RequestState<GetUnreadRegistrationApplicationCountResponse>;
+
+  private constructor() {
+    this.unreadInboxCountRes = { state: "empty" };
+    this.unreadReportCountRes = { state: "empty" };
+    this.unreadApplicationCountRes = { state: "empty" };
+
+    this.startPoll();
+    this.fetchUnreadCounts();
+  }
+
+  static get #Instance() {
+    return this.#_instance ?? (this.#_instance = new this());
+  }
+
+  unreadInboxCount(): number {
+    if (this.unreadInboxCountRes.state === "success") {
+      const { data } = this.unreadInboxCountRes;
+      return data.replies + data.mentions + data.private_messages;
+    } else {
+      return 0;
+    }
+  }
+
+  public static get unreadInboxCount(): number {
+    return this.#Instance.unreadInboxCount();
+  }
+
+  unreadReportCount(): number {
+    if (this.unreadReportCountRes.state === "success") {
+      const { data } = this.unreadReportCountRes;
+      return (
+        data.post_reports +
+        data.comment_reports +
+        (data.private_message_reports ?? 0)
+      );
+    } else {
+      return 0;
+    }
+  }
+
+  public static get unreadReportCount(): number {
+    return this.#Instance.unreadReportCount();
+  }
+
+  unreadApplicationCount(): number {
+    if (this.unreadApplicationCountRes.state === "success") {
+      return this.unreadApplicationCountRes.data.registration_applications;
+    } else {
+      return 0;
+    }
+  }
+
+  public static get unreadApplicationCount(): number {
+    return this.#Instance.unreadApplicationCount();
+  }
+
+  get isModerator(): boolean {
+    const mods = UserService.Instance.myUserInfo?.moderates;
+    const moderates = (mods && mods.length > 0) || false;
+    return amAdmin() || moderates;
+  }
+
+  startPoll() {
+    if (!isBrowser()) {
+      return;
+    }
+
+    poll(async () => {
+      if (window.document.visibilityState === "hidden") {
+        return;
+      }
+
+      this.fetchUnreadCounts();
+    }, updateUnreadCountsInterval);
+  }
+
+  async fetchUnreadCounts() {
+    const auth = myAuth();
+
+    if (auth) {
+      this.unreadInboxCountRes = await HttpService.client.getUnreadCount({
+        auth,
+      });
+
+      if (this.isModerator) {
+        this.unreadReportCountRes = await HttpService.client.getReportCount({
+          auth,
+        });
+      }
+
+      if (amAdmin()) {
+        this.unreadApplicationCountRes =
+          await HttpService.client.getUnreadRegistrationApplicationCount({
+            auth,
+          });
+      }
+    }
+  }
+
+  public static fetchUnreadCounts() {
+    this.#Instance.fetchUnreadCounts();
+  }
+}

src/shared/services/index.ts

@@ -3,4 +3,5 @@ export { HistoryService } from "./HistoryService";
 export { HomeCacheService } from "./HomeCacheService";
 export { HttpService } from "./HttpService";
 export { I18NextService } from "./I18NextService";
+export { InboxService } from "./InboxService";
 export { UserService } from "./UserService";