refactor(frontend): extract renderMessages and tidy polling/render flow

- Move DOM creation and update logic into new renderMessages(data) function
- getAllMessages now delegates rendering, schedules next poll, and logs fetch errors

Author: Iswanna

chat-app/frontend/script.js

@@ -6,7 +6,8 @@ let lastIdSeen = -1;
 async function getAllMessages() {
   try {
     const response = await fetch(
-      `${API_BASE_URL}/messages?since=${lastIdSeen}`);
+      `${API_BASE_URL}/messages?since=${lastIdSeen}`,
+    );
 
     // check if the response is not ok
     if (!response.ok) {
@@ -17,58 +18,63 @@ async function getAllMessages() {
     // we only get here if the response was ok
     const data = await response.json();
 
-    const messageContainer = document.getElementById("all-messages");
+    renderMessages(data);
 
-    data.forEach((message) => {
-      const elementId = "msg-" + message.id;
+    setTimeout(getAllMessages, 0);
+  } catch (error) {
+    setTimeout(getAllMessages, 0);
+    console.error("Error fetching messages:", error);
+  }
+}
 
-      const existingElement = document.getElementById(elementId);
+function renderMessages(data) {
+  const messageContainer = document.getElementById("all-messages");
 
-      if (existingElement) {
-        // find the specific span that hold the likes
-        const likeSpan = document.getElementById("likes-count-" + message.id);
+  data.forEach((message) => {
+    const elementId = "msg-" + message.id;
 
-        // update only that span
-        if (likeSpan) {
-          likeSpan.textContent = `(${message.likes} Likes) `;
-        }
-      } else {
-        const newElement = document.createElement("div");
-        newElement.id = "msg-" + message.id;
+    const existingElement = document.getElementById(elementId);
 
-        // layer 1: the text
-        const textSpan = document.createElement("span");
-        textSpan.textContent = `${message.sender}: ${message.text} `;
+    if (existingElement) {
+      // find the specific span that hold the likes
+      const likeSpan = document.getElementById("likes-count-" + message.id);
 
-        //Layer 2: the counter (this is the one we will update later)
-        const likeSpan = document.createElement("span");
-        likeSpan.id = "likes-count-" + message.id;
+      // update only that span
+      if (likeSpan) {
         likeSpan.textContent = `(${message.likes} Likes) `;
-
-        // Layer 3: the button
-        const likeButton = document.createElement("button");
-        likeButton.textContent = "Like";
-
-        likeButton.addEventListener("click", async () => {
-          await fetch(`${API_BASE_URL}/messages/${message.id}/like`, {
-            method: "POST",
-          });
+      }
+    } else {
+      const newElement = document.createElement("div");
+      newElement.id = "msg-" + message.id;
+
+      // layer 1: the text
+      const textSpan = document.createElement("span");
+      textSpan.textContent = `${message.sender}: ${message.text} `;
+
+      //Layer 2: the counter (this is the one we will update later)
+      const likeSpan = document.createElement("span");
+      likeSpan.id = "likes-count-" + message.id;
+      likeSpan.textContent = `(${message.likes} Likes) `;
+
+      // Layer 3: the button
+      const likeButton = document.createElement("button");
+      likeButton.textContent = "Like";
+
+      likeButton.addEventListener("click", async () => {
+        await fetch(`${API_BASE_URL}/messages/${message.id}/like`, {
+          method: "POST",
         });
+      });
 
-        // put it all together
-        newElement.appendChild(textSpan);
-        newElement.appendChild(likeSpan);
-        newElement.appendChild(likeButton);
-        messageContainer.appendChild(newElement);
+      // put it all together
+      newElement.appendChild(textSpan);
+      newElement.appendChild(likeSpan);
+      newElement.appendChild(likeButton);
+      messageContainer.appendChild(newElement);
 
-        lastIdSeen = message.id;
-      }
-    });
-    setTimeout(getAllMessages, 0);
-  } catch (error) {
-    setTimeout(getAllMessages, 0);
-    console.error("Error fetching messages:", error);
-  }
+      lastIdSeen = message.id;
+    }
+  });
 }
 
 getAllMessages();