Chapter 21 - Comment field reset

Author: schaable

chapter-21/package-lock.json

@@ -4,7 +4,8 @@
   "main": "skillsharing_server.js",
   "description": "Skill-sharing website example from Eloquent JavaScript",
   "dependencies": {
-    "serve-handler": "^6.1.3"
+    "serve-handler": "^6.1.3",
+    "uuid": "^8.3.2"
   },
   "license": "MIT",
   "bugs": "https://github.com/marijnh/Eloquent-JavaScript/issues",

chapter-21/package.json

@@ -71,7 +71,7 @@ function elt(type, props, ...children) {
 function renderTalk(talk, dispatch) {
   return elt(
     'section',
-    { className: 'talk' },
+    { className: 'talk', id: talk.id },
     elt(
       'h2',
       null,
@@ -90,7 +90,7 @@ function renderTalk(talk, dispatch) {
     ),
     elt('div', null, 'by ', elt('strong', null, talk.presenter)),
     elt('p', null, talk.summary),
-    ...talk.comments.map(renderComment),
+    elt('section', { className: 'comments' }, ...talk.comments.map(renderComment)),
     elt(
       'form',
       {
@@ -109,7 +109,7 @@ function renderTalk(talk, dispatch) {
 }
 
 function renderComment(comment) {
-  return elt('p', { className: 'comment' }, elt('strong', null, comment.author), ': ', comment.message);
+  return elt('p', { className: 'comment', id: comment.id }, elt('strong', null, comment.author), ': ', comment.message);
 }
 
 function renderTalkForm(dispatch) {
@@ -155,14 +155,33 @@ var SkillShareApp = class SkillShareApp {
     this.dispatch = dispatch;
     this.talkDOM = elt('div', { className: 'talks' });
     this.dom = elt('div', null, renderUserField(state.user, dispatch), this.talkDOM, renderTalkForm(dispatch));
+    this.talks = [];
     this.syncState(state);
   }
 
   syncState(state) {
     if (state.talks != this.talks) {
-      this.talkDOM.textContent = '';
-      for (let talk of state.talks) {
-        this.talkDOM.appendChild(renderTalk(talk, this.dispatch));
+      // update / add talks
+      for (let stateTalk of state.talks) {
+        const talk = this.talks.find(({ id }) => id === stateTalk.id);
+        if (talk) {
+          if (talk.comments.length < stateTalk.comments.length) {
+            const commentsContainer = this.talkDOM.querySelector(`#${stateTalk.id} .comments`);
+            for (let i = talk.comments.length; i < stateTalk.comments.length; i++) {
+              const comment = stateTalk.comments[i];
+              commentsContainer.appendChild(renderComment(comment));
+            }
+          }
+        } else {
+          this.talkDOM.appendChild(renderTalk(stateTalk, this.dispatch));
+        }
+      }
+      // remove deleted talks
+      for (let talk of this.talks) {
+        if (!state.talks.some(({ id }) => id === talk.id)) {
+          const talkNode = document.getElementById(talk.id);
+          this.talkDOM.removeChild(talkNode);
+        }
       }
       this.talks = state.talks;
     }

chapter-21/public/skillsharing-client.js

@@ -1,6 +1,7 @@
 import { createServer } from 'http';
 import { writeFileSync } from 'fs';
 import handler from 'serve-handler';
+import { v4 as uuidv4 } from 'uuid';
 import Router from './router.js';
 import database from './db.json' assert { type: 'json' };
 
@@ -78,7 +79,7 @@ router.add('PUT', talkPath, async (server, title, request) => {
   if (!talk || typeof talk.presenter != 'string' || typeof talk.summary != 'string') {
     return { status: 400, body: 'Bad talk data' };
   }
-  server.talks[title] = { title, presenter: talk.presenter, summary: talk.summary, comments: [] };
+  server.talks[title] = { id: uuidv4(), title, presenter: talk.presenter, summary: talk.summary, comments: [] };
   server.updated();
   return { status: 204 };
 });
@@ -95,7 +96,7 @@ router.add('POST', /^\/talks\/([^\/]+)\/comments$/, async (server, title, reques
   if (!comment || typeof comment.author != 'string' || typeof comment.message != 'string') {
     return { status: 400, body: 'Bad comment data' };
   } else if (title in server.talks) {
-    server.talks[title].comments.push(comment);
+    server.talks[title].comments.push({ id: uuidv4(), ...comment });
     server.updated();
     return { status: 204 };
   } else {