refactored frontend exercise javascript

frontend/www/scripts/exercise.js

@@ -31,49 +31,57 @@ class MuscleGroup {
     }
 }
 
+function deleteFormData() {  
+  setReadOnly(true, "#form-exercise");
+  okButton.className += " hide";
+  deleteButton.className += " hide";
+  cancelButton.className += " hide";
+  editButton.className = editButton.className.replace(" hide", "");
+
+  cancelButton.removeEventListener("click", handleCancelButtonDuringEdit);
+
+  oldFormData.delete("name");
+  oldFormData.delete("description");
+  oldFormData.delete("duration");
+  oldFormData.delete("calories");
+  oldFormData.delete("muscleGroup");
+  oldFormData.delete("unit");
+}
+
 function handleCancelButtonDuringEdit() {
-    setReadOnly(true, "#form-exercise");
     document.querySelector("select").setAttribute("disabled", "")
-    okButton.className += " hide";
-    deleteButton.className += " hide";
-    cancelButton.className += " hide";
-    editButton.className = editButton.className.replace(" hide", "");
-
-    cancelButton.removeEventListener("click", handleCancelButtonDuringEdit);
-
     let form = document.querySelector("#form-exercise");
+
     if (oldFormData.has("name")) form.name.value = oldFormData.get("name");
     if (oldFormData.has("description")) form.description.value = oldFormData.get("description");
     if (oldFormData.has("duration")) form.duration.value = oldFormData.get("duration");
     if (oldFormData.has("calories")) form.calories.value = oldFormData.get("calories");
     if (oldFormData.has("muscleGroup")) form.muscleGroup.value = oldFormData.get("muscleGroup");
     if (oldFormData.has("unit")) form.unit.value = oldFormData.get("unit");
-    
-    oldFormData.delete("name");
-    oldFormData.delete("description");
-    oldFormData.delete("duration");
-    oldFormData.delete("calories");
-    oldFormData.delete("muscleGroup");
-    oldFormData.delete("unit");
 
+    deleteFormData();
 }
 
 function handleCancelButtonDuringCreate() {
     window.location.replace("exercises.html");
 }
 
+function addFormData(form) {
+  let formData = new FormData(form);
+  let selectedMuscleGroup = new MuscleGroup(formData.get("muscleGroup"));
+  let updatedMuscleGroup = selectedMuscleGroup.getMuscleGroupType()
+  return {"name": formData.get("name"), 
+          "description": formData.get("description"),
+          "duration": formData.get("duration"),
+          "calories": formData.get("calories"),
+          "muscleGroup": updatedMuscleGroup ? updatedMuscleGroup : formData.get("muscleGroup"), 
+          "unit": formData.get("unit")};
+}
+
 async function createExercise() {
     document.querySelector("select").removeAttribute("disabled")
     let form = document.querySelector("#form-exercise");
-    let formData = new FormData(form);
-    let body = {"name": formData.get("name"), 
-                "description": formData.get("description"),
-                "duration": formData.get("duration"),
-                "calories": formData.get("calories"),
-                "muscleGroup": formData.get("muscleGroup"), 
-                "unit": formData.get("unit")};
-
-    let response = await sendRequest("POST", `${HOST}/api/exercises/`, body);
+    let response = await sendRequest("POST", `${HOST}/api/exercises/`, addFormData(form));
 
     if (response.ok) {
         window.location.replace("exercises.html");
@@ -139,20 +147,10 @@ async function retrieveExercise(id) {
 
 async function updateExercise(id) {
     let form = document.querySelector("#form-exercise");
-    let formData = new FormData(form);
-
     let muscleGroupSelector = document.querySelector("select")
     muscleGroupSelector.removeAttribute("disabled")
 
-    let selectedMuscleGroup = new MuscleGroup(formData.get("muscleGroup"));
-
-    let body = {"name": formData.get("name"), 
-                "description": formData.get("description"),
-                "duration": formData.get("duration"),
-                "calories": formData.get("calories"),
-                "muscleGroup": selectedMuscleGroup.getMuscleGroupType(),
-                "unit": formData.get("unit")};
-    let response = await sendRequest("PUT", `${HOST}/api/exercises/${id}/`, body);
+    let response = await sendRequest("PUT", `${HOST}/api/exercises/${id}/`, addFormData(form));
 
     if (!response.ok) {
         let data = await response.json();
@@ -160,22 +158,7 @@ async function updateExercise(id) {
         document.body.prepend(alert);
     } else {
         muscleGroupSelector.setAttribute("disabled", "")
-        // duplicate code from handleCancelButtonDuringEdit
-        // you should refactor this
-        setReadOnly(true, "#form-exercise");
-        okButton.className += " hide";
-        deleteButton.className += " hide";
-        cancelButton.className += " hide";
-        editButton.className = editButton.className.replace(" hide", "");
-    
-        cancelButton.removeEventListener("click", handleCancelButtonDuringEdit);
-        
-        oldFormData.delete("name");
-        oldFormData.delete("description");
-        oldFormData.delete("duration");
-        oldFormData.delete("calories");
-        oldFormData.delete("muscleGroup");
-        oldFormData.delete("unit");
+        deleteFormData()
     }
 }