Add long polling to update unread counts in navbar. (#1271)

* Upping version.

* Add long-polling to update unread counts in navbar.

- Fixes #1148

* Using async for polling.

* Update src/shared/utils.ts

Co-authored-by: Sander Saarend <sander@saarend.com>

* Adding window visibility check, removing generic sleep.

---------

Co-authored-by: SleeplessOne1917 <abias1122@gmail.com>
Co-authored-by: Sander Saarend <sander@saarend.com>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "lemmy-ui",
-  "version": "0.18.0-beta.6",
+  "version": "0.18.0-rc.1",
   "description": "An isomorphic UI for lemmy",
   "repository": "https://github.com/LemmyNet/lemmy-ui",
   "license": "AGPL-3.0",

src/shared/components/app/navbar.tsx

@@ -16,8 +16,10 @@ import {
   isBrowser,
   myAuth,
   numToSI,
+  poll,
   showAvatars,
   toast,
+  updateUnreadCountsInterval,
 } from "../../utils";
 import { Icon } from "../common/icon";
 import { PictrsImage } from "../common/pictrs-image";
@@ -64,7 +66,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
     if (isBrowser()) {
       // On the first load, check the unreads
       this.requestNotificationPermission();
-      await this.fetchUnreads();
+      this.fetchUnreads();
       this.requestNotificationPermission();
 
       document.addEventListener("mouseup", this.handleOutsideMenuClick);
@@ -406,10 +408,11 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
     return amAdmin() || moderatesS;
   }
 
-  async fetchUnreads() {
+  fetchUnreads() {
+    poll(async () => {
+      if (window.document.visibilityState !== "hidden") {
         const auth = myAuth();
         if (auth) {
-      this.setState({ unreadInboxCountRes: { state: "loading" } });
           this.setState({
             unreadInboxCountRes: await HttpService.client.getUnreadCount({
               auth,
@@ -417,7 +420,6 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
           });
 
           if (this.moderatesSomething) {
-        this.setState({ unreadReportCountRes: { state: "loading" } });
             this.setState({
               unreadReportCountRes: await HttpService.client.getReportCount({
                 auth,
@@ -426,7 +428,6 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
           }
 
           if (amAdmin()) {
-        this.setState({ unreadApplicationCountRes: { state: "loading" } });
             this.setState({
               unreadApplicationCountRes:
                 await HttpService.client.getUnreadRegistrationApplicationCount({
@@ -436,6 +437,8 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
           }
         }
       }
+    }, updateUnreadCountsInterval);
+  }
 
   get unreadInboxCount(): number {
     if (this.state.unreadInboxCountRes.state == "success") {

src/shared/utils.ts

@@ -75,6 +75,7 @@ export const commentTreeMaxDepth = 8;
 export const markdownFieldCharacterLimit = 50000;
 export const maxUploadImages = 20;
 export const concurrentImageUpload = 4;
+export const updateUnreadCountsInterval = 30000;
 
 export const relTags = "noopener nofollow";
 
@@ -1490,3 +1491,18 @@ export function newVote(voteType: VoteType, myVote?: number): number {
     return myVote == -1 ? 0 : -1;
   }
 }
+
+function sleep(millis: number): Promise<void> {
+  return new Promise(resolve => setTimeout(resolve, millis));
+}
+
+/**
+ * Polls / repeatedly runs a promise, every X milliseconds
+ */
+export async function poll(promiseFn: any, millis: number) {
+  if (window.document.visibilityState !== "hidden") {
+    await promiseFn();
+  }
+  await sleep(millis);
+  return poll(promiseFn, millis);
+}