From b9f89ca48654887aa4f76e58dcb2da31235571bd Mon Sep 17 00:00:00 2001
From: Jesse Bickel <jbickel@opentechstrategies.com>
Date: Thu, 29 Aug 2024 10:57:50 -0500
Subject: [PATCH] Refactor reviewer unsaved changes notification

Based on feedback, refactor the reviewer unsaved changes notification
to avoid deprecated jQuery, use a precise selector for the form
element, and remove unrelated code.

Credit to dolphin-mixtral:8x7b cfada4ba31c7 on ollama 0.3.7-rc5, to
Saurabh Kumar for the selector suggestion, and to Fredrik Jonsson for
finding a miss.

Issue #3977
---
 .../templates/review/review_edit_form.html    |  2 +-
 .../review/templates/review/review_form.html  |  2 +-
 .../javascript/review-form-actions.js         | 58 ++++++-------------
 3 files changed, 21 insertions(+), 41 deletions(-)

diff --git a/hypha/apply/review/templates/review/review_edit_form.html b/hypha/apply/review/templates/review/review_edit_form.html
index 1bd1f25787..0aafc5f2ce 100644
--- a/hypha/apply/review/templates/review/review_edit_form.html
+++ b/hypha/apply/review/templates/review/review_edit_form.html
@@ -13,7 +13,7 @@
     {% include "forms/includes/form_errors.html" with form=form %}
 
     <div class="wrapper wrapper--medium wrapper--inner-space-medium">
-        <form class="form form--with-p-tags form--scoreable" action="" method="post" novalidate>
+        <form id="review-form-edit" class="form form--with-p-tags form--scoreable" action="" method="post" novalidate>
             {{ form.media }}
             {% csrf_token %}
 
diff --git a/hypha/apply/review/templates/review/review_form.html b/hypha/apply/review/templates/review/review_form.html
index faa3853797..456c6742e7 100644
--- a/hypha/apply/review/templates/review/review_form.html
+++ b/hypha/apply/review/templates/review/review_form.html
@@ -14,7 +14,7 @@
 
     <div class="wrapper wrapper--medium wrapper--inner-space-medium">
         {% if not has_submitted_review %}
-            <form class="form form--with-p-tags form--scoreable" action="" method="post">
+            <form id="review-form-edit" class="form form--with-p-tags form--scoreable" action="" method="post">
                 {{ form.media }}
                 {% csrf_token %}
 
diff --git a/hypha/static_src/javascript/review-form-actions.js b/hypha/static_src/javascript/review-form-actions.js
index f2537fbc9d..6744a1333b 100644
--- a/hypha/static_src/javascript/review-form-actions.js
+++ b/hypha/static_src/javascript/review-form-actions.js
@@ -1,44 +1,24 @@
-(function ($) {
+function formContents(f) {
     "use strict";
-    $(document).ready(function () {
-        var form = $("form");
-        var original = form.serialize();
+    // Thanks to https://stackoverflow.com/a/44033425
+    return Array.from(new FormData(f), function (e) {
+        return e.map(encodeURIComponent).join("=");
+    }).join("&");
+}
 
-        window.onbeforeunload = function () {
-            if (form.serialize() !== original) {
-                return "Are you sure you want to leave?";
-            }
-        };
-
-        form.submit(function () {
-            window.onbeforeunload = null;
-        });
+document.addEventListener("DOMContentLoaded", function () {
+    "use strict";
+    const form = document.getElementById("review-form-edit");
+    const original = formContents(form);
 
-        // grab all the selectors
-        let filtered_selectors;
-        const selectors = Array.prototype.slice.call(
-            document.querySelectorAll("select")
-        );
-        if (selectors.length > 1) {
-            document.querySelector(".form--score-box").style.display = "block";
-            // remove recommendation select box from array
-            filtered_selectors = selectors.filter(
-                (selector) => selector[0].text !== "Need More Info"
-            );
-            filtered_selectors.forEach(function (selector) {
-                selector.onchange = calculate_score;
-            });
-            calculate_score();
-        }
-        function calculate_score() {
-            let score = 0;
-            filtered_selectors.forEach(function (selector) {
-                const value = parseInt(selector.value);
-                if (!isNaN(value) && value !== 99) {
-                    score += value;
-                }
-            });
-            $(".form--score-box").text("Score: " + score);
+    window.onbeforeunload = function () {
+        const formNow = formContents(form);
+        if (formNow !== original) {
+            return "Are you sure you want to leave?";
         }
+    };
+
+    form.addEventListener("submit", function () {
+        window.onbeforeunload = null;
     });
-})(jQuery);
+});