Wait for `markAllAsRead` before updating the UI

The number of unread items relies on an internal counter that is updated based on the server-side value of the `markAllAsRead` action.

Not waiting for the action to complete will cause the UI to become out-of-sync. Notably the unread indicator of the mobile UI tab relies on the internal counter that is updated at a later stage.

See https://www.woltlab.com/community/thread/296509-mobiles-kontrollzentrum-icon-bleibt/

diff --git a/ts/WoltLabSuite/Core/Ui/User/Menu/View.ts b/ts/WoltLabSuite/Core/Ui/User/Menu/View.ts
index 00e04d2c37841ab9697c074253ec0e6151a9b070..d86aaf714ee2feb9a332005b0ff07e63088f71ff 100644 (file)
--- a/ts/WoltLabSuite/Core/Ui/User/Menu/View.ts
+++ b/ts/WoltLabSuite/Core/Ui/User/Menu/View.ts
@@ -264,7 +264,7 @@ export class UserMenuView {
       link.addEventListener("click", (event) => {
         event.preventDefault();
 
-        this.markAllAsRead();
+        void this.markAllAsRead();
       });
     } else {
       link.href = button.link;
@@ -273,8 +273,8 @@ export class UserMenuView {
     return link;
   }
 
-  private markAllAsRead(): void {
-    void this.provider.markAllAsRead();
+  private async markAllAsRead(): Promise<void> {
+    await this.provider.markAllAsRead();
 
     this.getContent()
       .querySelectorAll(".userMenuItem")

diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/User/Menu/View.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/User/Menu/View.js
index b15f0265c5ea8ce8efcdb7f14a301b11b8a41f89..bc5ba968d58070982d1c67923f10ebe9ed1e7671 100644 (file)
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/User/Menu/View.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/User/Menu/View.js
@@ -211,7 +211,7 @@ define(["require", "exports", "tslib", "../../../Date/Util", "../../../StringUti
                 link.href = "#";
                 link.addEventListener("click", (event) => {
                     event.preventDefault();
-                    this.markAllAsRead();
+                    void this.markAllAsRead();
                 });
             }
             else {
@@ -219,8 +219,8 @@ define(["require", "exports", "tslib", "../../../Date/Util", "../../../StringUti
             }
             return link;
         }
-        markAllAsRead() {
-            void this.provider.markAllAsRead();
+        async markAllAsRead() {
+            await this.provider.markAllAsRead();
             this.getContent()
                 .querySelectorAll(".userMenuItem")
                 .forEach((element) => {