From 614372ad12c54961eebc494e7cb24cc9caca089d Mon Sep 17 00:00:00 2001
From: Carl Worth <cworth@cworth.org>
Date: Fri, 9 Dec 2022 08:59:20 -0800
Subject: [PATCH] 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).
---
 index.html | 19 ++++++++++++++-----
 index.js   | 11 +++++------
 2 files changed, 19 insertions(+), 11 deletions(-)

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);
                 });
-- 
2.43.0