Extract logic for hiding or showing elements and for displaying profile rows

frontend/www/scripts/profile.js

+/**
+ *
+ * @param {string} elementID The ID of the element to show
+ */
+function showElement(elementID) {
+  document.getElementById(elementID).classList.remove("hide");
+}
+
+/**
+ *
+ * @param {string} elementID The ID of the element to hide
+ */
+function hideElement(elementID) {
+  document.getElementById(elementID).classList.add("hide");
+}
+
+/**
+ * 
+ * @param {string} textID 
+ * @param {string} rowID 
+ * @param {string} value 
+ */
+function displayRow(textID, rowID, value) {
+  if (value) {
+    document.getElementById(textID).textContent = value;
+    showElement(rowID);
+  }
+}
+
 /**
  *
  * @param {{username: String, id: Number, url: String, email: String, phone_number: String, country: String, city: String, street_address: String, bio: String, athletes: []}} profile
@@ -8,22 +37,10 @@ function renderProfileDetails(profile) {
   }
   document.getElementById("username").textContent = profile.username;
   document.getElementById("email").textContent = profile.email;
-  if (profile.phone_number) {
-    document.getElementById("phone").textContent = profile.phone_number;
-    document.getElementById("phone-row").classList.remove("hide");
-  }
-  if (profile.country) {
-    document.getElementById("country").textContent = profile.country;
-    document.getElementById("country-row").classList.remove("hide");
-  }
-  if (profile.city) {
-    document.getElementById("city").textContent = profile.city;
-    document.getElementById("city-row").classList.remove("hide");
-  }
-  if (profile.street_address) {
-    document.getElementById("address").textContent = profile.street_address;
-    document.getElementById("address-row").classList.remove("hide");
-  }
+  displayRow("phone", "phone-row", profile.phone_number);
+  displayRow("country", "country-row", profile.country);
+  displayRow("city", "city-row", profile.city);
+  displayRow("address", "address-row", profile.street_address);
   document.getElementById("bio").textContent = profile.bio;
 }
 
@@ -34,22 +51,22 @@ function switchToEditBio(profile) {
   const bioEdit = document.getElementById("bio-edit");
   bioEdit.value = profile.bio;
   bioEdit.classList.remove("hide");
-  document.getElementById("bio-display").classList.add("hide");
+  hideElement("bio-display");
 }
 
 function switchToDisplayBio() {
-  document.getElementById("bio-edit").classList.add("hide");
-  document.getElementById("bio-display").classList.remove("hide");
+  hideElement("bio-edit");
+  showElement("bio-display");
 }
 
 function editImage() {
-  document.getElementById("div-image-edit").classList.remove("hide");
-  document.getElementById("btn-image-edit").classList.add("hide");
+  hideElement("btn-image-edit");
+  showElement("div-image-edit");
 }
 
 function displayImage() {
-  document.getElementById("div-image-edit").classList.add("hide");
-  document.getElementById("btn-image-edit").classList.remove("hide");
+  hideElement("div-image-edit");
+  showElement("btn-image-edit");
 }
 
 /**