From 71fa38bd9312f782c5efae0e302d7cfcf327c99a Mon Sep 17 00:00:00 2001
From: Yarden Shoham <git@yardenshoham.com>
Date: Fri, 15 Mar 2024 15:38:38 +0000
Subject: [PATCH 1/2] Remove jQuery AJAX from the notifications

- 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

Signed-off-by: Yarden Shoham <git@yardenshoham.com>
---
 web_src/js/features/notification.js | 97 +++++++++++------------------
 1 file changed, 36 insertions(+), 61 deletions(-)

diff --git a/web_src/js/features/notification.js b/web_src/js/features/notification.js
index a9236247c6665..70b7960cbf102 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,51 @@ 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: {
+    try {
+      const params = new URLSearchParams({
         'div-only': true,
         'sequence-number': ++notificationSequenceNumber,
+      });
+      const url = `${appSubUrl}/notifications${window.location.search}${window.location.search ? '&' : '?'}${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');
+    }
 
-  notificationCount.text(`${data.new}`);
+    const data = await response.json();
 
-  return `${data.new}`;
-}
+    const notificationCount = $('.notification_count');
+    if (data.new === 0) {
+      notificationCount.addClass('gt-hidden');
+    } else {
+      notificationCount.removeClass('gt-hidden');
+    }
 
-async function updateNotification(url, status, page, q, notificationID) {
-  if (status !== 'pinned') {
-    $(`#notification_${notificationID}`).remove();
-  }
+    notificationCount.text(`${data.new}`);
 
-  return $.ajax({
-    type: 'POST',
-    url,
-    data: {
-      _csrf: csrfToken,
-      notification_id: notificationID,
-      status,
-      page,
-      q,
-      noredirect: true,
-      'sequence-number': ++notificationSequenceNumber,
-    },
-  });
+    return `${data.new}`;
+  } catch (error) {
+    console.error(error);
+    return '0';
+  }
 }

From c815ff0720603a57468fc47fd99dd79a9cc0c31e Mon Sep 17 00:00:00 2001
From: Yarden Shoham <git@yardenshoham.com>
Date: Fri, 15 Mar 2024 16:20:12 +0000
Subject: [PATCH 2/2] Make it nicer

Co-authored-by: silverwind <me@silverwind.io>
---
 web_src/js/features/notification.js | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/web_src/js/features/notification.js b/web_src/js/features/notification.js
index 70b7960cbf102..3d34f21fd462a 100644
--- a/web_src/js/features/notification.js
+++ b/web_src/js/features/notification.js
@@ -146,11 +146,10 @@ async function updateNotificationTable() {
   const notificationDiv = $('#notification_div');
   if (notificationDiv.length > 0) {
     try {
-      const params = new URLSearchParams({
-        'div-only': true,
-        'sequence-number': ++notificationSequenceNumber,
-      });
-      const url = `${appSubUrl}/notifications${window.location.search}${window.location.search ? '&' : '?'}${params.toString()}`;
+      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) {