From afc27fb2a37be7ac01e602c649593e7547593afc Mon Sep 17 00:00:00 2001
From: Yarden Shoham <git@yardenshoham.com>
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 <git@yardenshoham.com>
Co-authored-by: silverwind <me@silverwind.io>
(cherry picked from commit 043f55fabfadd765125690052920ba31ebd3817b)
---
 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 d32514841..1c95804e4 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,
-    },
-  });
 }