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 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 = '';
             }

diff --git a/index.js b/index.js
index 20e79d04e52e9207cebc1c0c93ac05dfb95e3663..4108ebc2c1a3e35fac22d93079b07fc1b4608f60 100644 (file)
--- 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);
                 });