Update notification table with only latest data (#16445)

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>

Co-authored-by: 6543 <6543@obermui.de>
This commit is contained in:
zeripath 2021-07-17 17:18:10 +01:00 committed by GitHub
parent b08e14bbcf
commit 93f31e1897
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 15 additions and 5 deletions

View file

@ -50,6 +50,7 @@ func Notifications(c *context.Context) {
return return
} }
if c.QueryBool("div-only") { if c.QueryBool("div-only") {
c.Data["SequenceNumber"] = c.Query("sequence-number")
c.HTML(http.StatusOK, tplNotificationDiv) c.HTML(http.StatusOK, tplNotificationDiv)
return return
} }
@ -175,6 +176,7 @@ func NotificationStatusPost(c *context.Context) {
return return
} }
c.Data["Link"] = setting.AppURL + "notifications" c.Data["Link"] = setting.AppURL + "notifications"
c.Data["SequenceNumber"] = c.Req.PostFormValue("sequence-number")
c.HTML(http.StatusOK, tplNotificationDiv) c.HTML(http.StatusOK, tplNotificationDiv)
} }

View file

@ -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"> <div class="ui container">
<h1 class="ui dividing header">{{.i18n.Tr "notification.notifications"}}</h1> <h1 class="ui dividing header">{{.i18n.Tr "notification.notifications"}}</h1>
<div class="ui top attached tabular menu"> <div class="ui top attached tabular menu">

View file

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