From 043f55fabfadd765125690052920ba31ebd3817b Mon Sep 17 00:00:00 2001 From: Yarden Shoham Date: Sat, 16 Mar 2024 03:56:17 +0200 Subject: [PATCH] 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 Co-authored-by: silverwind --- web_src/js/features/notification.js | 106 +++++++++++----------------- 1 file changed, 40 insertions(+), 66 deletions(-) diff --git a/web_src/js/features/notification.js b/web_src/js/features/notification.js index a9236247c6..3d34f21fd4 100644 --- a/web_src/js/features/notification.js +++ b/web_src/js/features/notification.js @@ -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, - }, - }); }