[PATCH 4/5] static: utils.js for modular handling of requests & messages

[Raxel Gutierrez]

Added file to have a general utilities JavaScript module file for
functions that are reused throughout various Patchwork js files. First
added function for making fetch requests to update properties through
'PATCH' requests with the REST api endpoints. Also, added functions for
handling update & error messages for these requests. The subsequent
patch will make use of these functions which will be also reused in
future features the make use fetch requests to update object fields.

Signed-off-by: Raxel Gutierrez <raxel at google.com>
---
 htdocs/README.rst  |  7 +++++
 htdocs/js/utils.js | 71 ++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 78 insertions(+)
 create mode 100644 htdocs/js/utils.js

diff --git a/htdocs/README.rst b/htdocs/README.rst
index 4441bf3..2bae34c 100644
--- a/htdocs/README.rst
+++ b/htdocs/README.rst
@@ -147,3 +147,10 @@ js
   :Website: https://selectize.github.io/selectize.js/
   :GitHub: https://github.com/selectize/selectize.js
   :Version: 0.11.2
+
+``utils.js.``
+
+  General utility module for functions used throughout other static Patchwork
+  js files (fetch requests, handling update & error messages).
+
+  Part of Patchwork.
diff --git a/htdocs/js/utils.js b/htdocs/js/utils.js
new file mode 100644
index 0000000..34d41f5
--- /dev/null
+++ b/htdocs/js/utils.js
@@ -0,0 +1,71 @@
+/**
+ * Sends fetch requests to update objects' properties using REST api endpoints.
+ * @param {string} url Path to the REST api endpoint.
+ * @param {{field: string, value: string}} data
+ *     field: Name of the property field to update.
+ *     value: Value to update the property field to.
+ * @param {{none: string, some: string}} updateMessage
+ *     none: Message when object update unsuccessful due to errors.
+ *     some: Message when object update successful.
+ */
+async function updateProperty(url, data, updateMessage) {
+    const request = new Request(url, {
+        method: 'PATCH',
+        mode: "same-origin",
+        headers: {
+            "X-CSRFToken": Cookies.get("csrftoken"),
+            "Content-Type": "application/json",
+        },
+        body: JSON.stringify(data),
+    });
+
+    await fetch(request)
+        .then(response => {
+            if (!response.ok) {
+                response.text().then(text => {
+                    // Error occurred, so update message specifies no objects updated
+                    handleUpdateMessages(updateMessage.none);
+                    handleErrorMessages(JSON.parse(text).detail);
+                });
+            } else {
+                // Update message for successful changes
+                handleUpdateMessages(updateMessage.some);
+            }
+        });
+}
+
+/**
+ * Populates update messages for fetch requests.
+ * @param {string} messageContent Text for update message.
+ */
+function handleUpdateMessages(messageContent) {
+    let messages = document.getElementById("messages");
+    if (messages == null) {
+        messages = document.createElement("div");
+        messages.setAttribute("id", "messages");
+    }
+    let message = document.createElement("div");
+    message.setAttribute("class", "message");
+    message.textContent = messageContent;
+    messages.appendChild(message);
+    if (messages) $(messages).insertAfter("nav");
+}
+
+/**
+ * Populates error messages for fetch requests.
+ * @param {string} errorMessage Text for error message.
+ */
+function handleErrorMessages(errorMessage) {
+    let container = document.getElementById("main-content");
+    let errorHeader = document.createElement("p");
+    let errorList = document.createElement("ul");
+    let error = document.createElement("li");
+    errorHeader.textContent = "The following error was encountered while updating comments:";
+    errorList.setAttribute("class", "errorlist");
+    error.textContent = errorMessage;
+    errorList.appendChild(error);
+    container.prepend(errorList);
+    container.prepend(errorHeader);
+}
+
+export { updateProperty, handleUpdateMessages, handleUpdateMessages};
\ No newline at end of file
-- 
2.32.0.402.g57bb445576-goog