Re-implement util functions using URL API

app/assets/javascripts/exercise.js

@@ -142,11 +142,15 @@ function initExerciseDescription() {
     centerImagesAndTables();
 }
 
-function initExerciseShow(exerciseId, programmingLanguage, loggedIn, editorShown, courseId, _deadline) {
+function initExerciseShow(exerciseId, programmingLanguage, loggedIn, editorShown, courseId, _deadline, _baseSubmissionUrl) {
     let editor;
     let lastSubmission;
     let lastTimeout;
 
+    // remove the submission id to get the base submission url
+    const to = (_baseSubmissionUrl.substr(0, _baseSubmissionUrl.length - 1)).lastIndexOf("/");
+    const baseSubmissionUrl = _baseSubmissionUrl.substring(0, to + 1);
+
     function init() {
         if (editorShown) {
             initEditor();
@@ -270,7 +274,7 @@ function initExerciseShow(exerciseId, programmingLanguage, loggedIn, editorShown
                 return;
             }
             event.preventDefault();
-            loadFeedback($(this).attr("href"), $(this).data("submission_id"));
+            loadFeedback(baseSubmissionUrl + $(this).data("submission_id"), $(this).data("submission_id"));
         });
     }
 
@@ -296,7 +300,7 @@ function initExerciseShow(exerciseId, programmingLanguage, loggedIn, editorShown
                     $submissionRow.find(".load-submission").get(0).click();
                 } else if ($("#activity-feedback-link").hasClass("active") &&
                     $("#activity-feedback-link").data("submission_id") === lastSubmission) {
-                    loadFeedback(`/submissions/${lastSubmission}`, lastSubmission);
+                    loadFeedback(baseSubmissionUrl + lastSubmission, lastSubmission);
                 }
                 showFABStatus(status);
                 setTimeout(enableSubmitButton, 100);

app/assets/javascripts/util.js

@@ -14,111 +14,34 @@ const delay = (function () {
     };
 })();
 
-function updateURLParameter(url, param, paramVal) {
-    let TheAnchor = null;
-    let newAdditionalURL = "";
-    let tempArray = url.split("?");
-    let baseURL = tempArray[0];
-    let additionalURL = tempArray[1];
-    let temp = "";
-    let i;
-
-    if (additionalURL) {
-        const tmpAnchor = additionalURL.split("#");
-        const TheParams = tmpAnchor[0];
-        TheAnchor = tmpAnchor[1];
-        if (TheAnchor) {
-            additionalURL = TheParams;
-        }
-        tempArray = additionalURL.split("&");
-        for (i = 0; i < tempArray.length; i++) {
-            if (tempArray[i].split("=")[0] != param) {
-                newAdditionalURL += temp + tempArray[i];
-                temp = "&";
-            }
-        }
-    } else {
-        const tmpAnchor = baseURL.split("#");
-        const TheParams = tmpAnchor[0];
-        TheAnchor = tmpAnchor[1];
-
-        if (TheParams) {
-            baseURL = TheParams;
-        }
-    }
-    let rowsTxt = "";
+function updateURLParameter(_url, param, paramVal) {
+    const url = new URL(_url);
     if (paramVal) {
-        rowsTxt += `${temp}${param}=${paramVal}`;
-    }
-    if (TheAnchor) {
-        rowsTxt += "#" + TheAnchor;
+        url.searchParams.set(param, paramVal);
+    } else {
+        url.searchParams.delete(param);
     }
-    return baseURL + "?" + newAdditionalURL + rowsTxt;
+    return url.toString();
 }
 
-function updateArrayURLParameter(url, param, _paramVals) {
-    const paramVals = [...new Set(_paramVals)]; // remove duplicate items
-    let TheAnchor = null;
-    let newAdditionalURL = "";
-    let tempArray = url.split("?");
-    let baseURL = tempArray[0];
-    let additionalURL = tempArray[1];
-    let temp = "";
-
-    if (additionalURL) {
-        const tmpAnchor = additionalURL.split("#");
-        const TheParams = tmpAnchor[0];
-        TheAnchor = tmpAnchor[1];
-        if (TheAnchor) {
-            additionalURL = TheParams;
-        }
-        tempArray = additionalURL.split("&");
-        for (let i = 0; i < tempArray.length; i++) {
-            if (tempArray[i].split("=")[0] !== `${param}%5B%5D`) {
-                newAdditionalURL += temp + tempArray[i];
-                temp = "&";
-            }
-        }
-    } else {
-        const tmpAnchor = baseURL.split("#");
-        const TheParams = tmpAnchor[0];
-        TheAnchor = tmpAnchor[1];
-
-        if (TheParams) {
-            baseURL = TheParams;
-        }
-    }
-    let rowsTxt = "";
-    for (const paramVal of paramVals) {
-        rowsTxt += `${temp}${param}%5B%5D=${paramVal}`;
-        temp = "&";
-    }
-    if (TheAnchor) {
-        rowsTxt += "#" + TheAnchor;
-    }
-    return baseURL + "?" + newAdditionalURL + rowsTxt;
+function updateArrayURLParameter(_url, param, _paramVals) {
+    const paramVals = new Set(_paramVals); // remove duplicate items
+    const url = new URL(_url);
+    url.searchParams.delete(param);
+    paramVals.forEach(paramVal => {
+        url.searchParams.append(param, paramVal);
+    });
+    return url.toString();
 }
 
-function getURLParameter(_name, _url) {
-    const url = _url || window.location.href;
-    const name = _name.replace(/[[\]]/g, "\\$&");
-    const regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)");
-    const results = regex.exec(url);
-    if (!results) return null;
-    if (!results[2]) return "";
-    return decodeURIComponent(results[2].replace(/\+/g, " "));
+function getURLParameter(name, _url) {
+    const url = new URL(_url ?? window.location.href);
+    return url.searchParams.get(name);
 }
 
 function getArrayURLParameter(name, _url) {
-    const url = _url || window.location.href;
-    const result = [];
-    for (const part of url.split(/[?&]/)) {
-        const regResults = new RegExp(`${name}%5B%5D=([^#]+)`).exec(part);
-        if (regResults && regResults[1]) {
-            result.push(decodeURIComponent(regResults[1]));
-        }
-    }
-    return result;
+    const url = new URL(_url ?? window.location.href);
+    return url.searchParams.getAll(name);
 }
 
 /*

app/views/activities/show.html.erb

@@ -162,7 +162,8 @@ end %>
             <%= user_signed_in? %>,
             <%= policy(@activity).submit? || !user_signed_in? %>,
             <%= @course&.id || "null" %>,
-            <%= raw "\"#{@series&.deadline&.httpdate}\"" || "null" %>
+            <%= raw "\"#{@series&.deadline&.httpdate}\"" || "null" %>,
+            "<%= submission_url %>"
         );
     });
 </script>

app/views/courses/index.html.erb

@@ -18,7 +18,7 @@
     <div class="card course-search">
       <div class="card-supporting-text">
         <div class="card-tab">
-          <ul id="course-tabs" class="nav nav-tabs" data-baseurl="<%= courses_path %>" role="tablist">
+          <ul id="course-tabs" class="nav nav-tabs" data-baseurl="<%= courses_url %>" role="tablist">
             <% if @show_institution_courses %>
               <li role="presentation"><a href="#institution"><%= t '.institution_courses', institution: (current_user.institution&.short_name || current_user.institution&.name) %></a></li>
             <% end %>

test/javascript/util.test.js

@@ -0,0 +1,63 @@
+import { updateArrayURLParameter, updateURLParameter, getURLParameter, getArrayURLParameter } from "../../app/assets/javascripts/util";
+
+let noParameterURL;
+let oneParameterURL;
+let twoParameterURL;
+let multipleValueUrl;
+
+beforeEach(() => {
+    noParameterURL = "https://www.dodona.ugent.be/test_functions";
+    oneParameterURL = "https://www.dodona.ugent.be/test_functions?param1=paramVal1";
+    twoParameterURL = "https://www.dodona.ugent.be/test_functions?param1=paramVal1&param2=paramVal2";
+    multipleValueUrl = "https://www.dodona.ugent.be/test_functions?param=paramVal1&param=paramVal2&param=paramVal3";
+});
+
+test("return correct parameter value if present", () => {
+    expect(getURLParameter("param1", oneParameterURL)).toBe("paramVal1");
+    expect(getURLParameter("param2", twoParameterURL)).toBe("paramVal2");
+    expect(getURLParameter("param", multipleValueUrl)).toBe("paramVal1");
+
+    expect(getArrayURLParameter("param1", twoParameterURL)).toEqual(["paramVal1"]);
+    expect(getArrayURLParameter("param", multipleValueUrl)).toEqual(["paramVal1", "paramVal2", "paramVal3"]);
+});
+
+test("return null or empty list when parameter not present", () => {
+    expect(getURLParameter("param", noParameterURL)).toBe(null);
+    expect(getURLParameter("wrongParam", oneParameterURL)).toBe(null);
+
+    expect(getArrayURLParameter("param", noParameterURL)).toEqual([]);
+    expect(getArrayURLParameter("wrongParam", twoParameterURL)).toEqual([]);
+});
+
+test("update URL parameter", () => {
+    let updatedURL;
+
+    // test updateURLParameter
+    updatedURL = updateURLParameter(noParameterURL, "param", "paramVal");
+    expect(updatedURL).toEqual(`${noParameterURL}?param=paramVal`);
+
+    updatedURL = updateURLParameter(oneParameterURL, "param1", "newParamVal1");
+    expect(updatedURL).toEqual(`${noParameterURL}?param1=newParamVal1`);
+
+    updatedURL = updateURLParameter(twoParameterURL, "param3", "paramVal3");
+    expect(updatedURL).toEqual(`${twoParameterURL}&param3=paramVal3`);
+
+    updatedURL = updateURLParameter(multipleValueUrl, "param", "newParamVal");
+    expect(updatedURL).toEqual(`${noParameterURL}?param=newParamVal`);
+
+    updatedURL = updateURLParameter(oneParameterURL, "param1");
+    expect(updatedURL).toEqual(noParameterURL);
+
+    // test updateArrayURLParameter
+    updatedURL = updateArrayURLParameter(noParameterURL, "param", ["paramVal1", "paramVal1", "paramVal2", "paramVal3"]);
+    expect(updatedURL).toEqual(`${noParameterURL}?param=paramVal1&param=paramVal2&param=paramVal3`);
+
+    updatedURL = updateArrayURLParameter(oneParameterURL, "param2", ["paramVal2"]);
+    expect(updatedURL).toEqual(`${oneParameterURL}&param2=paramVal2`);
+
+    updatedURL = updateArrayURLParameter(multipleValueUrl, "param", ["paramVal1", "paramVal2"]);
+    expect(updatedURL).toEqual(`${noParameterURL}?param=paramVal1&param=paramVal2`);
+
+    updatedURL = updateArrayURLParameter(oneParameterURL, "param1", []);
+    expect(updatedURL).toEqual(noParameterURL);
+});