Remove jQuery AJAX from the notifications (#29817)

- Removed 2 jQuery AJAX calls and replaced with our fetch wrapper
- Deleted an AJAX call that wasn't attached to any element since #24989
- Tested the notification count and notification table functionality and
it works as before

# Demo using `fetch` instead of jQuery AJAX

![demo](https://github.com/go-gitea/gitea/assets/20454870/ff862a9a-1c88-41cc-bd01-5a0711dbd6f8)

---------

Signed-off-by: Yarden Shoham <git@yardenshoham.com>
Co-authored-by: silverwind <me@silverwind.io>
This commit is contained in:
Yarden Shoham 2024-03-16 03:56:17 +02:00 committed by GitHub
parent 68169133a3
commit 043f55fabf
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 40 additions and 66 deletions

View File

@ -1,6 +1,7 @@
import $ from 'jquery';
import {GET} from '../modules/fetch.js';
const {appSubUrl, csrfToken, notificationSettings, assetVersionEncoded} = window.config;
const {appSubUrl, notificationSettings, assetVersionEncoded} = window.config;
let notificationSequenceNumber = 0;
export function initNotificationsTable() {
@ -27,25 +28,6 @@ export function initNotificationsTable() {
e.target.closest('.notifications-item').setAttribute('data-remove', 'true');
});
}
$('#notification_table .button').on('click', function () {
(async () => {
const data = await updateNotification(
$(this).data('url'),
$(this).data('status'),
$(this).data('page'),
$(this).data('q'),
$(this).data('notification-id'),
);
if ($(data).data('sequence-number') === notificationSequenceNumber) {
$('#notification_div').replaceWith(data);
initNotificationsTable();
}
await updateNotificationCount();
})();
return false;
});
}
async function receiveUpdateCount(event) {
@ -163,58 +145,50 @@ async function updateNotificationCountWithCallback(callback, timeout, lastCount)
async function updateNotificationTable() {
const notificationDiv = $('#notification_div');
if (notificationDiv.length > 0) {
const data = await $.ajax({
type: 'GET',
url: `${appSubUrl}/notifications${window.location.search}`,
data: {
'div-only': true,
'sequence-number': ++notificationSequenceNumber,
try {
const params = new URLSearchParams(window.location.search);
params.set('div-only', true);
params.set('sequence-number', ++notificationSequenceNumber);
const url = `${appSubUrl}/notifications?${params.toString()}`;
const response = await GET(url);
if (!response.ok) {
throw new Error('Failed to fetch notification table');
}
});
if ($(data).data('sequence-number') === notificationSequenceNumber) {
notificationDiv.replaceWith(data);
initNotificationsTable();
const data = await response.text();
if ($(data).data('sequence-number') === notificationSequenceNumber) {
notificationDiv.replaceWith(data);
initNotificationsTable();
}
} catch (error) {
console.error(error);
}
}
}
async function updateNotificationCount() {
const data = await $.ajax({
type: 'GET',
url: `${appSubUrl}/notifications/new`,
headers: {
'X-Csrf-Token': csrfToken,
},
});
try {
const response = await GET(`${appSubUrl}/notifications/new`);
const notificationCount = $('.notification_count');
if (data.new === 0) {
notificationCount.addClass('gt-hidden');
} else {
notificationCount.removeClass('gt-hidden');
if (!response.ok) {
throw new Error('Failed to fetch notification count');
}
const data = await response.json();
const notificationCount = $('.notification_count');
if (data.new === 0) {
notificationCount.addClass('gt-hidden');
} else {
notificationCount.removeClass('gt-hidden');
}
notificationCount.text(`${data.new}`);
return `${data.new}`;
} catch (error) {
console.error(error);
return '0';
}
notificationCount.text(`${data.new}`);
return `${data.new}`;
}
async function updateNotification(url, status, page, q, notificationID) {
if (status !== 'pinned') {
$(`#notification_${notificationID}`).remove();
}
return $.ajax({
type: 'POST',
url,
data: {
_csrf: csrfToken,
notification_id: notificationID,
status,
page,
q,
noredirect: true,
'sequence-number': ++notificationSequenceNumber,
},
});
}