Fixed too nested code in workouts.js

frontend/www/scripts/workouts.js

@@ -7,67 +7,76 @@ async function fetchWorkouts(ordering) {
         let data = await response.json();
 
         let workouts = data.results;
-        let container = document.getElementById('div-content');
+        
+        await convertWorkoutDataToFrontend(workouts);
 
-        for(const workout of workouts){
+        return workouts;
+    }
+}
 
-            let workoutLikes = await sendRequest("GET", `${HOST}/api/workoutLiking/${workout.id}`);
+async function convertWorkoutDataToFrontend(workouts){
+    let container = document.getElementById('div-content');
 
-            let workoutLikesData = [true, 1]
+    for(const workout of workouts){
 
-            if(workoutLikes.ok){
-                workoutLikesData = await workoutLikes.json()
-            }
+        let workoutLikes = await sendRequest("GET", `${HOST}/api/workoutLiking/${workout.id}`);
 
-            let templateWorkout = document.querySelector("#template-workout");
-            let cloneWorkout = templateWorkout.content.cloneNode(true);
+        let workoutLikesData = [true, 1]
 
-            let aWorkout = cloneWorkout.querySelector("a");
-            aWorkout.href = `workout.html?id=${workout.id}`;
+        if(workoutLikes.ok){
+            workoutLikesData = await workoutLikes.json()
+        }
 
-            let h5 = aWorkout.querySelector("h5");
-            h5.textContent = workout.name;
+        let templateWorkout = document.querySelector("#template-workout");
+        let cloneWorkout = templateWorkout.content.cloneNode(true);
 
-            let localDate = new Date(workout.date);
+        let aWorkout = cloneWorkout.querySelector("a");
+        aWorkout.href = `workout.html?id=${workout.id}`;
 
-            let table = aWorkout.querySelector("table");
-            let rows = table.querySelectorAll("tr");
-            rows[0].querySelectorAll("td")[1].textContent = localDate.toLocaleDateString(); // Date
-            rows[1].querySelectorAll("td")[1].textContent = localDate.toLocaleTimeString(); // Time
-            rows[2].querySelectorAll("td")[1].textContent = workout.owner_username; //Owner
-            rows[3].querySelectorAll("td")[1].textContent = workout.exercise_instances.length; // Exercises
+        let h5 = aWorkout.querySelector("h5");
+        h5.textContent = workout.name;
 
-            rows[4].querySelectorAll("td")[1].textContent = workoutLikesData[1]
+        let localDate = new Date(workout.date);
 
-            let likeButton = rows[4].querySelectorAll("td")[2].querySelector(".like-button")
+        let table = aWorkout.querySelector("table");
+        let rows = table.querySelectorAll("tr");
+        rows[0].querySelectorAll("td")[1].textContent = localDate.toLocaleDateString(); // Date
+        rows[1].querySelectorAll("td")[1].textContent = localDate.toLocaleTimeString(); // Time
+        rows[2].querySelectorAll("td")[1].textContent = workout.owner_username; //Owner
+        rows[3].querySelectorAll("td")[1].textContent = workout.exercise_instances.length; // Exercises
 
-            if(!workoutLikesData[0]){
-                likeButton.classList.add("active")
-            }
+        rows[4].querySelectorAll("td")[1].textContent = workoutLikesData[1]
 
-            likeButton.addEventListener("click", async function(e) {
-                e.preventDefault();
+        let likeButton = rows[4].querySelectorAll("td")[2].querySelector(".like-button")
 
-                if(!this.classList.contains("active")){
-                    this.classList.add("active");
-                    this.classList.add("animated");
-                    generateClones(this);
+        if(!workoutLikesData[0]){
+            likeButton.classList.add("active")
+        }
 
-                    let likeWorkoutResponse = await sendRequest("POST", `${HOST}/api/workoutLiking/${workout.id}/`, {});
+        await addEventListenersForLikeButtons(workout, likeButton, rows);
 
-                    if(likeWorkoutResponse.ok){
-                        let likeWorkoutData = await likeWorkoutResponse.json()
-                        rows[4].querySelectorAll("td")[1].textContent = likeWorkoutData[1]
-                        likeButton.classList.add("active")
-                    }
-                }
-            })
+        container.appendChild(aWorkout);
+    }
+}
+
+async function addEventListenersForLikeButtons(workout, likeButton, rows){
+    likeButton.addEventListener("click", async function(e) {
+        e.preventDefault();
+
+        if(!this.classList.contains("active")){
+            this.classList.add("active");
+            this.classList.add("animated");
+            generateClones(this);
 
+            let likeWorkoutResponse = await sendRequest("POST", `${HOST}/api/workoutLiking/${workout.id}/`, {});
 
-            container.appendChild(aWorkout);
+            if(likeWorkoutResponse.ok){
+                let likeWorkoutData = await likeWorkoutResponse.json()
+                rows[4].querySelectorAll("td")[1].textContent = likeWorkoutData[1]
+                likeButton.classList.add("active")
+            }
         }
-        return workouts;
-    }
+    })
 }
 
 function createWorkout() {