stage 4

portsoc · Mar 8, 2024 · 83e6eb1 · 83e6eb1
1 parent 56459d6
commit 83e6eb1
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 7 deletions.
diff --git a/stages/client/index.html b/stages/client/index.html
@@ -12,3 +12,7 @@ <h1>Message Board</h1>
   <li>One day this will be a message board.</li>
   <li>Until then we can dream.</li>
 </ul>
+
+<aside id=detail>
+  <p>message details will show here…</p>
+</aside>
diff --git a/stages/client/index.js b/stages/client/index.js
@@ -9,8 +9,22 @@ function removeContentFrom(what) {
 function showMessages(messages, where) {
   for (const message of messages) {
     const li = document.createElement('li');
-    li.textContent = message;
+    li.textContent = message.msg;
+    li.dataset.id = message.id;
     where.append(li);
+
+    li.addEventListener('mouseenter', showDetail);
+  }
+}
+
+async function showDetail(e) {
+  const response = await fetch('messages/' + e.target.dataset.id);
+  if (response.ok) {
+    const detail = await response.json();
+    const p = document.createElement('p');
+    p.textContent = `Message received on server at ${detail.time}`;
+    removeContentFrom(el.detail);
+    el.detail.append(p);
   }
 }
 
@@ -20,7 +34,7 @@ async function loadMessages() {
   if (response.ok) {
     messages = await response.json();
   } else {
-    messages = ['failed to load messages :-('];
+    messages = [{ msg: 'failed to load messages :-(' }];
   }
   removeContentFrom(el.messagelist);
   showMessages(messages, el.messagelist);
@@ -62,6 +76,7 @@ function prepareHandles() {
   el.messagelist = document.querySelector('#messagelist');
   el.message = document.querySelector('#message');
   el.send = document.querySelector('#send');
+  el.detail = document.querySelector('#detail');
 }
 
 /**

diff --git a/stages/svr.js b/stages/svr.js
@@ -1,26 +1,57 @@
 // message board app
-// stage 3: add route for posting new messages
+// stage 4: An API route for every message
 import express from 'express';
+import uuid from 'uuid-random';
 
 const app = express();
 app.use(express.static('client'));
 
 let messages = [
-  'these are three default messages',
-  'delivered from the server',
-  'using a custom route',
+  {
+    id: 'xnshfdsafasd',
+    msg: 'these are three default messages',
+    time: 'an hour ago',
+  },
+  {
+    id: 'dskjdshkjhsd',
+    msg: 'delivered from the server',
+    time: 'yesterday',
+  },
+  {
+    id: 'vcxbxcvfggzv',
+    msg: 'using a custom route',
+    time: 'last week',
+  },
 ];
 
+
 function getMessages(req, res) {
   res.json(messages);
 }
 
+
+function getMessage(req, res) {
+  for (const message of messages) {
+    if (message.id === req.params.id) {
+      res.json(message);
+      return; // short
+    }
+  }
+  res.status(404).send('No match for that ID.');
+}
+
 function postMessages(req, res) {
-  messages = [req.body.msg, ...messages.slice(0, 9)];
+  const newMessage = {
+    id: uuid(),
+    msg: req.body.msg,
+    time: Date(),
+  };
+  messages = [newMessage, ...messages.slice(0, 9)];
   res.json(messages);
 }
 
 app.get('/messages', getMessages);
+app.get('/messages/:id', getMessage);
 app.post('/messages', express.json(), postMessages);
 
 app.listen(8080);