Update notification table with only latest data (#16445) (#16469)

When marking notifications read the results may be returned out of order
or be delayed.  This PR sends a sequence number to gitea so that the
browser can ensure that only the results of the latest notification
change are shown.

Signed-off-by: Andrew Thornton <art27@cantab.net>

diff --git a/routers/web/user/notification.go b/routers/web/user/notification.go
index 523e945db9bbbc9294da3e4c7de1f6c35940205f..851af5d64792766e166d12234a873acd74c9ee6e 100644 (file)
--- a/routers/web/user/notification.go
+++ b/routers/web/user/notification.go
@@ -50,6 +50,7 @@ func Notifications(c *context.Context) {
                return
        }
        if c.QueryBool("div-only") {
+               c.Data["SequenceNumber"] = c.Query("sequence-number")
                c.HTML(http.StatusOK, tplNotificationDiv)
                return
        }
@@ -175,6 +176,7 @@ func NotificationStatusPost(c *context.Context) {
                return
        }
        c.Data["Link"] = setting.AppURL + "notifications"
+       c.Data["SequenceNumber"] = c.Req.PostFormValue("sequence-number")
 
        c.HTML(http.StatusOK, tplNotificationDiv)
 }

diff --git a/templates/user/notification/notification_div.tmpl b/templates/user/notification/notification_div.tmpl
index e7327d34bbe99e7b50c147b8bbba500a261fcd40..8976e1fda4a00427ec7c28fef67a13d499938f3c 100644 (file)
--- a/templates/user/notification/notification_div.tmpl
+++ b/templates/user/notification/notification_div.tmpl
@@ -1,4 +1,4 @@
-<div class="page-content user notification" id="notification_div" data-params="{{.Page.GetParams}}">
+<div class="page-content user notification" id="notification_div" data-params="{{.Page.GetParams}}" data-sequence-number="{{.SequenceNumber}}">
        <div class="ui container">
                <h1 class="ui dividing header">{{.i18n.Tr "notification.notifications"}}</h1>
                <div class="ui top attached tabular menu">

diff --git a/web_src/js/features/notification.js b/web_src/js/features/notification.js
index 4fa2d3c29af313b18e197bf6d0a2343261b83064..d964ffa3052d887e491efbd4a896fd5ca342a4fc 100644 (file)
--- a/web_src/js/features/notification.js
+++ b/web_src/js/features/notification.js
@@ -1,5 +1,7 @@
 const {AppSubUrl, csrf, NotificationSettings} = window.config;
 
+let notificationSequenceNumber = 0;
+
 export function initNotificationsTable() {
   $('#notification_table .button').on('click', async function () {
     const data = await updateNotification(
@@ -10,8 +12,10 @@ export function initNotificationsTable() {
       $(this).data('notification-id'),
     );
 
-    $('#notification_div').replaceWith(data);
-    initNotificationsTable();
+    if ($(data).data('sequence-number') === notificationSequenceNumber) {
+      $('#notification_div').replaceWith(data);
+      initNotificationsTable();
+    }
     await updateNotificationCount();
 
     return false;
@@ -139,10 +143,13 @@ async function updateNotificationTable() {
       url: `${AppSubUrl}/notifications?${notificationDiv.data('params')}`,
       data: {
         'div-only': true,
+        'sequence-number': ++notificationSequenceNumber,
       }
     });
-    notificationDiv.replaceWith(data);
-    initNotificationsTable();
+    if ($(data).data('sequence-number') === notificationSequenceNumber) {
+      notificationDiv.replaceWith(data);
+      initNotificationsTable();
+    }
   }
 }
 
@@ -182,6 +189,7 @@ async function updateNotification(url, status, page, q, notificationID) {
       page,
       q,
       noredirect: true,
+      'sequence-number': ++notificationSequenceNumber,
     },
   });
 }