Add delete function

rikster-r · Jan 21, 2023 · 402b2b9 · 402b2b9
1 parent 520bcb1
commit 402b2b9
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 3 deletions.
diff --git a/public/stylesheets/style.css b/public/stylesheets/style.css
@@ -196,6 +196,7 @@ header .secondary-action {
 }
 
 .messages-list {
+  max-width: 500px;
   display: flex;
   flex-direction: column;
   gap: 1rem;
@@ -212,10 +213,25 @@ header .secondary-action {
 
 .message-block {
   border-left: 10px solid #c084fc;
-  padding: 0.1rem 1.5rem;
+  padding: 0 1.5rem;
   height: max-content;
 }
 
 .message-block .title {
   font-weight: 700;
+  display: flex;
+}
+
+.message-block .title .delete {
+  margin-left: 0.5rem;
+}
+
+.message-block .title .delete:hover {
+  cursor: pointer;
+}
+
+.delete-icon {
+  width: 24px;
+  height: 24px;
+  color: #7e22ce;
 }
diff --git a/routes/index.js b/routes/index.js
@@ -160,4 +160,12 @@ router.post('/new-message', body('message').trim().not().isEmpty().escape(), (re
   res.redirect('/');
 });
 
+router.get('/:id/delete', (req, res, next) => {
+  Message.findByIdAndDelete(req.params.id, err => {
+    if (err) return next(err);
+
+    res.redirect('/');
+  });
+});
+
 module.exports = router;
diff --git a/views/index.ejs b/views/index.ejs
@@ -14,13 +14,21 @@
       <% messages.forEach(message => { %>
       <div class="message-block">
         <p><%= message.text %> </p>
-        <p class="title">
+        <div class="title">
           <% if (user?.isMember) { %>
           <%= message.author.username %> -
           <% } else { %>
           Anonymous -
           <% } %>
-          <%= message.date %> </p>
+          <%= message.date %>
+          <% if (user?.username === message.author.username) { %>
+          <a href="/<%= `${message._id}/delete` %>" class="delete">
+            <svg class="delete-icon" viewBox="0 0 24 24">
+              <path fill="currentColor" d="M9,3V4H4V6H5V19A2,2 0 0,0 7,21H17A2,2 0 0,0 19,19V6H20V4H15V3H9M7,6H17V19H7V6M9,8V17H11V8H9M13,8V17H15V8H13Z" />
+            </svg>
+          </a>
+          <% } %>
+        </div>
       </div>
       <% }) %>
     </div>