Refactor using callback functions

front/static/js/viewHistory.js

@@ -25,6 +25,46 @@ function getEndpointDomain() {
     return domain;
 }
 
+function getDataFromEndpoint(url, callback) {
+    const token = localStorage.getItem("token");
+    const xhr = new XMLHttpRequest();
+
+    console.log(`Attempting a connection to the following endpoint: ${url}`);
+
+    xhr.open("GET", url, true);
+    xhr.onreadystatechange = function() {
+        if (this.readyState === 4) {
+            if (this.status === 200) {
+                console.log("GET SUCCESS!");
+                console.log(`Server response:\n${this.response}`);
+                parsedData = JSON.parse(this.response);
+                callback(parsedData);
+            } else {
+                console.log("GET FAILURE!");
+                console.log(`Server status: ${this.status}`);
+                console.log(`Server response:\n${this.response}`);
+            }
+        }
+    };
+
+    xhr.onerror = function() {
+        alert("Connection error!");
+    };
+
+    xhr.send();
+}
+
+function buildEditReportForm(parsedReport) {
+    const modalTitle = document.querySelector("#editReportModalLabel"); 
+    console.log("In buildEditReportForm");
+    console.log(JSON.stringify(parsedReport));
+}
+
+function editReportFormClickHandler(event) {
+    const url = getEndpointDomain() + "backend/get_report";
+    getDataFromEndpoint(url, buildEditReportForm);
+}
+
 function displayListOfReports(listOfReports) {
     const cardBody = document.querySelector(".card-body");
     const table = document.createElement("table");
@@ -50,6 +90,7 @@ function displayListOfReports(listOfReports) {
             actionButton.classList.add("btn-primary");
             actionButton.innerHTML = "Edit";
             actionButton.setAttribute("data-target", "#editReportModal");
+            actionButton.addEventListener("click", editReportFormClickHandler);
         } else {
             // View button
             dateSubmitted = new Date(reports[i].date_submitted).toLocaleDateString("en-US");
@@ -115,6 +156,7 @@ function displayListOfReports(listOfReports) {
 }
 
 function getReportHistory(event) {
+    /*
     const token = localStorage.getItem("token");
     const url = getEndpointDomain() + "backend/list_report";
     const xhr = new XMLHttpRequest();
@@ -143,6 +185,9 @@ function getReportHistory(event) {
     };
 
     xhr.send();
+    */
+    const url = getEndpointDomain() + "backend/list_report";
+    getDataFromEndpoint(url, displayListOfReports);
 }
 
 document.addEventListener("DOMContentLoaded", getReportHistory);

front/static/view_history.html

@@ -53,18 +53,16 @@
         </div>
     </div>
 
-    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">Open modal for @mdo</button>
-
     <div class="modal" id="editReportModal" tabindex="-1" role="dialog">
         <div class="modal-dialog modal-lg" role="document">
             <div class="modal-content">
                 <div class="modal-header">
-                    <h5 class="modal-title" id="exampleModalLabel">Edit Report</h5>
+                    <h5 class="modal-title" id="editReportModalLabel">Edit Report</h5>
                     <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                     </button>
                 </div>
                 <div class="modal-body">
-                    <form>
+                    <form id="editReportForm">
                         <div class="form-group">
                             <label for="recipient-name" class="col-form-label">Recipient:</label>
                             <input type="text" class="form-control" id="recipient-name">
@@ -77,7 +75,7 @@
                 </div>
                 <div class="modal-footer">
                     <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
-                    <button type="button" class="btn btn-primary">Send message</button>
+                    <button type="button" class="btn btn-primary">Submit</button>
                 </div>
             </div>
         </div>