long method in scripts/gallery.js refactored

frontend/www/scripts/gallery.js

 let goBackButton;
-let submitNewFileButton;
 
-async function retrieveWorkoutImages(id) {  
-    let workoutData = null;
-    let response = await sendRequest("GET", `${HOST}/api/workouts/${id}/`);
-    if (!response.ok) {
-        let data = await response.json();
-        let alert = createAlert("Could not retrieve workout data!", data);
-        document.body.prepend(alert);
-    } else {
-        workoutData = await response.json();
-
-        document.getElementById("workout-title").innerHTML = "Workout name: " + workoutData["name"];
-        document.getElementById("workout-owner").innerHTML = "Owner: " + workoutData["owner_username"];
-
-        let hasNoImages = workoutData.files.length == 0;
-        let noImageText = document.querySelector("#no-images-text");
-
-        if(hasNoImages){
-            noImageText.classList.remove("hide");
-            return;
-        }
-
-        noImageText.classList.add("hide");
-
-        
-        let filesDiv = document.getElementById("img-collection");
+function addImages(workoutData){
+    let filesDiv = document.getElementById("img-collection");
         let filesDeleteDiv = document.getElementById("img-collection-delete");
-        
+
         const currentImageFileElement = document.querySelector("#current");
         let isFirstImg = true;
 
@@ -40,8 +16,6 @@ async function retrieveWorkoutImages(id) {
             a.text = pathArray[pathArray.length - 1];
             a.className = "me-2";
 
-            
-
             let isImage = ["jpg", "png", "gif", "jpeg", "JPG", "PNG", "GIF", "JPEG"].includes(a.text.split(".")[1]);
 
             if(isImage){
@@ -49,12 +23,19 @@ async function retrieveWorkoutImages(id) {
                 deleteImgButton.type = "button";
                 deleteImgButton.className = "btn btn-close";
                 deleteImgButton.id = file.url.split("/")[file.url.split("/").length - 2];
-                deleteImgButton.addEventListener('click', () => handleDeleteImgClick(deleteImgButton.id, "DELETE", `Could not delete workout ${deleteImgButton.id}!`, HOST, ["jpg", "png", "gif", "jpeg", "JPG", "PNG", "GIF", "JPEG"]));
+                deleteImgButton.addEventListener(
+                    'click',
+                    () => handleDeleteImgClick(deleteImgButton.id,
+                    "DELETE",
+                    `Could not delete workout ${deleteImgButton.id}!`,
+                    HOST,
+                    ["jpg", "png", "gif", "jpeg", "JPG", "PNG", "GIF", "JPEG"]
+                        ));
                 filesDeleteDiv.appendChild(deleteImgButton);
-                
+
                 let img = document.createElement("img");
                 img.src = file.file;
-                
+
                 filesDiv.appendChild(img);
                 deleteImgButton.style.left = `${(fileCounter % 4) * 191}px`;
                 deleteImgButton.style.top = `${Math.floor(fileCounter / 4) * 105}px`;
@@ -66,6 +47,23 @@ async function retrieveWorkoutImages(id) {
                 fileCounter++;
             }
         }
+}
+
+
+function handleWorkoutData(workoutData){
+        document.getElementById("workout-title").innerHTML = "Workout name: " + workoutData["name"];
+        document.getElementById("workout-owner").innerHTML = "Owner: " + workoutData["owner_username"];
+
+        let hasNoImages = workoutData.files.length == 0;
+        let noImageText = document.querySelector("#no-images-text");
+
+        if(hasNoImages){
+            noImageText.classList.remove("hide");
+            return;
+        }
+
+        noImageText.classList.add("hide");
+        addImages(workoutData);
 
         const otherImageFileElements = document.querySelectorAll(".imgs img");
         const selectedOpacity = 0.6;
@@ -82,7 +80,19 @@ async function retrieveWorkoutImages(id) {
             //Sets the opacity of the selected image to 0.4
             otherImageFileElements.forEach((imageFileElement) => imageFileElement.style.opacity = 1)
             event.target.style.opacity = selectedOpacity;
-        }))
+        }));
+}
+
+async function retrieveWorkoutImages(id) {  
+    let workoutData = null;
+    let response = await sendRequest("GET", `${HOST}/api/workouts/${id}/`);
+    if (!response.ok) {
+        let data = await response.json();
+        let alert = createAlert("Could not retrieve workout data!", data);
+        document.body.prepend(alert);
+    } else {
+        workoutData = await response.json();
+        handleWorkoutData(workoutData);
 
     }
     return workoutData;