Rework the state structure so comments live as part of images, not separately

[zombocom-ai] / index.html

diff --git a/index.html b/index.html
index 243e1da301e56737691f23f760d5eca84056129b..ea4f0abc41913047ac138c883ee3ed50649040ff 100644 (file)
--- a/index.html
+++ b/index.html
@@ -130,14 +130,18 @@ mute.addEventListener("click", () => {
         socket.emit('set-name', name_input.value);
     });
 
-    socket.on('comment', function(comment) {
-        const comments = document.querySelector("#" + comment.comments_id);
+    function add_comment(comments, comment) {
         const dt = document.createElement('dt');
         const dd = document.createElement('dd');
         dt.textContent = comment.name + ':';
         dd.textContent = comment.text;
         comments.appendChild(dt);
         comments.appendChild(dd);
+    }
+
+    socket.on('comment', function(comment) {
+        const comments = document.querySelector("#comments_" + comment.image_id);
+        add_comment(comments, comment);
     });
 
     socket.on('inform-name', (name) => {
@@ -168,6 +172,7 @@ mute.addEventListener("click", () => {
 
     socket.on('image', (image) => {
         const figure = document.createElement('figure');
+        figure.id = "image_" + image.id;
 
         const img = document.createElement('img');
         img.src = image.filename;
@@ -189,9 +194,13 @@ mute.addEventListener("click", () => {
         figure.appendChild(figcaption);
 
         const dl_comments = document.createElement('dl');
-        const comments_id = "comments_" + image.index;
         dl_comments.className = "comments";
-        dl_comments.id = comments_id;
+        dl_comments.id = "comments_" + image.id;
+
+        image.comments.forEach((comment) => {
+            add_comment(dl_comments, comment);
+        });
+
         figure.appendChild(dl_comments);
 
         const comment_form = document.createElement('form');
@@ -221,7 +230,7 @@ mute.addEventListener("click", () => {
         comment_form.addEventListener('submit', function(e) {
             e.preventDefault();
             if (comment_input.value) {
-                socket.emit('comment', {comments_id: comments_id,
+                socket.emit('comment', {image_id: image.id,
                                         text: comment_input.value});
                 comment_input.value = '';
             }