From: Carl Worth <cworth@cworth.org>
Date: Fri, 9 Dec 2022 16:59:20 +0000 (-0800)
Subject: Rework the state structure so comments live as part of images, not separately
X-Git-Url: https://git.cworth.org/git?a=commitdiff_plain;h=614372ad12c54961eebc494e7cb24cc9caca089d;p=zombocom-ai

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

This is the obvious structure to have and will help with doing things
like reordering images (and having the comments move with them).
---

diff --git a/index.html b/index.html
index 243e1da..ea4f0ab 100644
--- 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 = '';
             }
diff --git a/index.js b/index.js
index 20e79d0..4108ebc 100644
--- a/index.js
+++ b/index.js
@@ -42,7 +42,7 @@ io.use(wrap(session_middleware));
 // Load comments at server startup
 fs.readFile(state_file, (err, data) => {
     if (err)
-        state = { images: [], comments: [] };
+        state = { images: [] };
     else
         state = JSON.parse(data);
 });
@@ -80,9 +80,6 @@ io.on('connection', (socket) => {
     state.images.forEach((image) => {
         socket.emit('image', image)
     });
-    state.comments.forEach((comment) => {
-        socket.emit('comment', comment)
-    });
 
     socket.on('set-name', (name) => {
         console.log("Received set-name event: " + name);
@@ -94,7 +91,9 @@ io.on('connection', (socket) => {
     socket.on('comment', (comment) => {
         comment.name = socket.request.session.name;
         io.emit('comment', comment);
-        state.comments.push(comment);
+        image = state.images.find(image => image.id == comment.image_id);
+        delete comment.image_id;
+        image.comments.push(comment);
     });
 
     // Generate an image when requested
@@ -111,7 +110,7 @@ io.on('connection', (socket) => {
             child.stdout.on('data', (data) => {
                 const images = JSON.parse(data);
                 images.forEach((image) => {
-                    image.index = state.images.length;
+                    image.id = state.images.length;
                     io.emit('image', image);
                     state.images.push(image);
                 });