From eda40eb113a87e801cda62ed6ac0d6f9f3639ea2 Mon Sep 17 00:00:00 2001 From: Mike Smith <89040888+smiggiddy@users.noreply.github.com> Date: Wed, 1 Jan 2025 14:59:35 -0500 Subject: [PATCH] feat: added a comment section --- .../src/controllers/indexController.js | 61 ++++++++++++++++++- nodejs-mini-message-board/src/db.js | 7 +++ nodejs-mini-message-board/src/db/query.js | 30 ++++++++- .../src/public/script.js | 4 ++ .../src/public/styles.css | 33 ++++++++++ .../src/routes/indexRouter.js | 3 +- .../src/routes/msgRouter.js | 9 --- .../src/views/comments.ejs | 49 +++++++++++++++ .../src/views/footer.ejs | 1 + .../src/views/header.ejs | 1 + nodejs-mini-message-board/src/views/index.ejs | 11 ++++ 11 files changed, 197 insertions(+), 12 deletions(-) create mode 100644 nodejs-mini-message-board/src/public/script.js delete mode 100644 nodejs-mini-message-board/src/routes/msgRouter.js create mode 100644 nodejs-mini-message-board/src/views/comments.ejs diff --git a/nodejs-mini-message-board/src/controllers/indexController.js b/nodejs-mini-message-board/src/controllers/indexController.js index df77caa..53026a9 100644 --- a/nodejs-mini-message-board/src/controllers/indexController.js +++ b/nodejs-mini-message-board/src/controllers/indexController.js @@ -15,11 +15,40 @@ const validateContent = [ body("message").isLength({ min: 2 }).withMessage("Please enter a message."), ]; +const validateComment = [body("comment").trim().isLength({ min: 2, max: 140 })]; + +async function getCommentPerMessage(rows) { + const commentsTotal = rows.map(async (row) => + db.getAllCommentsForMessage(row.id), + ); + + return Promise.all(commentsTotal) + .then((c) => + c.filter((msg) => { + if (msg.length > 0) return msg; + }), + ) + .then((c) => + c.map((m) => { + return { [m[0].message_id]: m.length }; + }), + ) + .then((result) => Object.assign({}, ...result)); +} + async function indexGet(req, res, next) { try { const rows = await db.getAllMessages(); if (rows === undefined) rows = []; - res.render("index", { links: links, msgs: rows, dateParser: dateParser }); + + const messageComments = await getCommentPerMessage(rows); + + res.render("index", { + links: links, + msgs: rows, + dateParser: dateParser, + comments: messageComments, + }); } catch { res.render("index", { links: links, msgs: [] }); } @@ -46,9 +75,39 @@ async function newPost(req, res) { res.redirect("/"); } +async function commentsGet(req, res) { + const { id } = req.query; + const messageId = Number(id); + try { + if (!isNaN(messageId)) { + const message = await db.getMessageById(messageId); + const comments = await db.getAllCommentsForMessage(messageId); + + res.render("comments", { + message: message, + comments: comments, + links: links, + dateParser: dateParser, + }); + } else { + res.status(404).send("error"); + } + } catch { + res.send("something went wrong"); + } +} + +async function commentsPost(req, res, next) { + const { comment, messageId } = req.body; + db.insertComment(messageId, comment); + res.redirect(`/comment?id=${messageId}`); +} + module.exports = { indexGet, newGet, newPost, + commentsGet, validateContent, + commentsPost, }; diff --git a/nodejs-mini-message-board/src/db.js b/nodejs-mini-message-board/src/db.js index 965e2dc..9192295 100644 --- a/nodejs-mini-message-board/src/db.js +++ b/nodejs-mini-message-board/src/db.js @@ -28,6 +28,13 @@ CREATE TABLE IF NOT EXISTS messages ( username VARCHAR(25), date NUMBER ); + +CREATE TABLE IF NOT EXISTS comments ( + id INTEGER PRIMARY KEY ASC, + comment TEXT, + message_id INTEGER, + FOREIGN KEY (message_id) REFERENCES messages(id) +) `; db.exec(SQL); }); diff --git a/nodejs-mini-message-board/src/db/query.js b/nodejs-mini-message-board/src/db/query.js index 178d658..43231a9 100644 --- a/nodejs-mini-message-board/src/db/query.js +++ b/nodejs-mini-message-board/src/db/query.js @@ -8,15 +8,43 @@ async function getAllMessages() { }); } +async function getMessageById(id) { + return new Promise((resolve) => { + db.get("SELECT * FROM messages WHERE id = (?)", [id], async (err, rows) => { + resolve(rows); + }); + }); +} + async function insertMessage(msg) { - db.run("INSERT INTO MESSAGES (message, username, date) VALUES ($1, $2, $3)", [ + db.run("INSERT INTO messages (message, username, date) VALUES ($1, $2, $3)", [ msg.message, msg.username, msg.date, ]); } +async function getAllCommentsForMessage(msgId) { + return new Promise((resolve) => { + db.all( + "SELECT * FROM COMMENTS WHERE message_id = (?)", + [msgId], + async (err, rows) => resolve(rows), + ); + }); +} + +async function insertComment(msgId, comment) { + db.run("INSERT INTO comments (comment, message_id) VALUES ($1, $2)", [ + comment, + msgId, + ]); +} + module.exports = { + getMessageById, getAllMessages, insertMessage, + getAllCommentsForMessage, + insertComment, }; diff --git a/nodejs-mini-message-board/src/public/script.js b/nodejs-mini-message-board/src/public/script.js new file mode 100644 index 0000000..6255a17 --- /dev/null +++ b/nodejs-mini-message-board/src/public/script.js @@ -0,0 +1,4 @@ +function test(event) { + const messageId = event.target.dataset.messageId; + window.location.href = `comment?id=${messageId}`; +} diff --git a/nodejs-mini-message-board/src/public/styles.css b/nodejs-mini-message-board/src/public/styles.css index 75b14de..aca9886 100644 --- a/nodejs-mini-message-board/src/public/styles.css +++ b/nodejs-mini-message-board/src/public/styles.css @@ -68,6 +68,10 @@ a { box-shadow: 0px 1px 4px #525252; } +.material-symbols-outlined:hover { + cursor: pointer; +} + .card-message { width: 100%; background-color: white; @@ -100,6 +104,12 @@ a { font-weight: 400; } +.metadata-right { + display: flex; + gap: 1rem; + padding: 0 10px; +} + .form-item { display: flex; flex-direction: column; @@ -162,3 +172,26 @@ a { .errors { color: red; } +.comment-section { + display: flex; + flex-direction: column; + align-items: flex-start; + justify-content: center; + width: 100%; + max-width: 600px; +} + +.comment { + display: flex; + justify-content: center; + align-items: center; +} + +.comment span { + margin-right: 1rem; + display: inline-block; +} + +.comment .material-symbols-outlined:hover { + cursor: initial; +} diff --git a/nodejs-mini-message-board/src/routes/indexRouter.js b/nodejs-mini-message-board/src/routes/indexRouter.js index 3bf8bcf..76c07e8 100644 --- a/nodejs-mini-message-board/src/routes/indexRouter.js +++ b/nodejs-mini-message-board/src/routes/indexRouter.js @@ -1,6 +1,5 @@ const { Router } = require("express"); const indexController = require("../controllers/indexController"); -const db = require("../db"); const indexRouter = Router(); @@ -11,5 +10,7 @@ indexRouter.post( indexController.validateContent, indexController.newPost, ); +indexRouter.get("/comment", indexController.commentsGet); +indexRouter.post("/comment", indexController.commentsPost); module.exports = { indexRouter }; diff --git a/nodejs-mini-message-board/src/routes/msgRouter.js b/nodejs-mini-message-board/src/routes/msgRouter.js deleted file mode 100644 index 354caa1..0000000 --- a/nodejs-mini-message-board/src/routes/msgRouter.js +++ /dev/null @@ -1,9 +0,0 @@ -const { Router } = require("express"); - -const msgRouter = Router(); - -msgRouter.get("/", (req, res) => { - res.render("msgs"); -}); - -module.exports = { msgRouter }; diff --git a/nodejs-mini-message-board/src/views/comments.ejs b/nodejs-mini-message-board/src/views/comments.ejs new file mode 100644 index 0000000..7e9ec37 --- /dev/null +++ b/nodejs-mini-message-board/src/views/comments.ejs @@ -0,0 +1,49 @@ +<%- include('header') %> +<%- include('partials/errors.ejs') %> + +
+

@<%= message.username %>'s message

+
+
+

@<%= message.username %>

+
+ <%= dateParser(message.date) %> +
+
+
+

<%= message.message %>

+
+
+

Comments

+
+ <% if (comments.length > 0) { %> + <% comments.forEach((comment) => { %> +
+ chat +

<%= comment.comment %>

+
+ + <% }); %> + <% } else { %> +

No comments yet, add one below

+ <% } %> +
+ +
+ +
+
+

Add a comment :)

+
+ + + id="messageId"> +
+
+ + +
+
+
+<%- include('footer') %> + diff --git a/nodejs-mini-message-board/src/views/footer.ejs b/nodejs-mini-message-board/src/views/footer.ejs index b605728..6b0fb5c 100644 --- a/nodejs-mini-message-board/src/views/footer.ejs +++ b/nodejs-mini-message-board/src/views/footer.ejs @@ -1,2 +1,3 @@ + diff --git a/nodejs-mini-message-board/src/views/header.ejs b/nodejs-mini-message-board/src/views/header.ejs index 9b246de..354bc33 100644 --- a/nodejs-mini-message-board/src/views/header.ejs +++ b/nodejs-mini-message-board/src/views/header.ejs @@ -6,6 +6,7 @@ + diff --git a/nodejs-mini-message-board/src/views/index.ejs b/nodejs-mini-message-board/src/views/index.ejs index 2cce263..d82f0da 100644 --- a/nodejs-mini-message-board/src/views/index.ejs +++ b/nodejs-mini-message-board/src/views/index.ejs @@ -8,7 +8,18 @@

@<%= msg.username %>

+
<%= dateParser(msg.date) %> + <% if (comments[msg.id]) { %> + + comment + + <% } else { %> + + mode_comment + + <% } %> +

<%= msg.message %>