From d6f301da7210f525075fd3d17dab4018e470fcc9 Mon Sep 17 00:00:00 2001
From: Akif9748 <akif9748@gmail.com>
Date: Sun, 28 Aug 2022 18:19:03 +0300
Subject: [PATCH] thread rendering is updated, guest can view msg
---
public/css/user.css | 37 +++++++++++++++++++------------------
public/js/thread.js | 12 ++++--------
routes/threads.js | 16 +++++++++++-----
views/thread.ejs | 37 +++++++++++++++++++++----------------
4 files changed, 55 insertions(+), 47 deletions(-)
diff --git a/public/css/user.css b/public/css/user.css
index a0ecc09..55b4b89 100644
--- a/public/css/user.css
+++ b/public/css/user.css
@@ -3,25 +3,26 @@
font-weight: 700;
}
-.content{
-display: flex;
-flex-direction: column;
-box-shadow: 0 0 5px 0 #bebebe;
-max-width: 900px;
-margin: 0 auto;
-padding:10px;
+.content {
+ display: flex;
+ flex-direction: column;
+ box-shadow: 0 0 5px 0 #bebebe;
+ max-width: 900px;
+ margin: 0 auto;
+ padding: 10px;
}
-.box{
-display: flex;
-align-items: center;
-justify-content: space-between;
-margin: 0 auto;
-max-width: 800px;
-width:100%;
+.box {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin: 0 auto;
+ max-width: 800px;
+ width: 100%;
}
-.box-title, .box-value{
-color: #606060;
-font-weight: 300;
-}
+.box-title,
+.box-value {
+ color: #606060;
+ font-weight: 300;
+}
\ No newline at end of file
diff --git a/public/js/thread.js b/public/js/thread.js
index 77d9e50..97c0c51 100644
--- a/public/js/thread.js
+++ b/public/js/thread.js
@@ -1,12 +1,8 @@
import request from "./request.js";
-
const message_div = document.getElementById("messages");
-const messages_raw = await fetch(`/api/threads/${message_div.getAttribute("value")}/messages/`).then(res => res.json());
-for (const message of messages_raw)
- renderMessage(message);
-function renderMessage(message) {
+function render_message(message) {
const messageElement = document.createElement("div");
messageElement.classList.add("message");
messageElement.setAttribute("id", "message-" + message.id);
@@ -16,7 +12,7 @@ function renderMessage(message) {
<h3 style="float:right;">${new Date(message.time).toLocaleString()}</h3>
<h2>
- <img class="circle" src="${message.author.avatar}" alt="${message.author.name}">
+ <img class="circle" src="${message.author.avatar}">
<a href="/users/${message.author.id}"> ${message.author.name}</a>:
</h2>
@@ -34,7 +30,7 @@ function renderMessage(message) {
}
</div>
<div style="float: right;">
- <h3 id="count${message.id}" style="display:inline;">0</h3>
+ <h3 id="count${message.id}" style="display:inline;">${message.reactCount}</h3>
<a onclick="react('${message.id}', 'like');">+🔼</a>
<a onclick="react('${message.id}', 'dislike');">-🔽</a>
</div>
@@ -59,7 +55,7 @@ document.getElementById("send").addEventListener("submit", async e => {
if (!res) return;
form.reset();
res.reactCount = 0;
- renderMessage(res);
+ render_message(res);
});
});
diff --git a/routes/threads.js b/routes/threads.js
index b1a03f9..c46c982 100644
--- a/routes/threads.js
+++ b/routes/threads.js
@@ -1,7 +1,7 @@
const { Router } = require("express");
const app = Router();
-const { ThreadModel } = require("../models")
+const { ThreadModel,MessageModel } = require("../models")
app.get("/", async (req, res) => {
@@ -21,11 +21,17 @@ app.get("/:id", async (req, res) => {
const thread = await ThreadModel.get(id);
thread.views++;
- if (thread && (req.user?.admin || !thread.deleted))
- res.reply("thread", { thread, scroll: req.query.scroll || false });
- else
+ if (thread && (req.user?.admin || !thread.deleted)) {
+ const messages = await Promise.all(thread.messages.map(async id => {
+ const message = await MessageModel.get(id)
+ message.content = message.content.replaceAll("&", "&").replaceAll("<", "<").replaceAll(">", ">").replaceAll("\"", """).replaceAll("'", "'").replaceAll("\n", "<br>")
+ return req.user?.admin || !message?.deleted ? message.toObject({ virtuals: true }) : null;
+ }));
+
+ res.reply("thread", { thread, messages, scroll: req.query.scroll || false });
+ } else
res.error(404, "We have not got this thread.");
- thread.save();
+ thread.save();
});
diff --git a/views/thread.ejs b/views/thread.ejs
index c9a636a..7c59c47 100644
--- a/views/thread.ejs
+++ b/views/thread.ejs
@@ -35,33 +35,38 @@
<div id="messages" value="<%= thread.id %>">
- <% if (!user){ %>
- <h1>Guests cant view messages!</h1>
- <% }%>
+
+ <% messages.filter(Boolean).forEach(message=>{ %>
- <!--EXAMPLE MESSAGE-->
- <div class="message" id="message-3">
+ <div class="message" id="message-<%= message.id %>">
- <h3 style="float:right;">26.08.2022 15:37:42</h3>
+ <h3 style="float:right;"><%= new Date(message.time).toLocaleString() %> </h3>
<h2>
- <img class="circle" src="https://cdn.discordapp.com/avatars/539506680140922890/abd74d10aac094fc8a5ad5c86f29fdb9.png?size=1024">
- <a href="/users/0"> Akif9748</a>:
+ <img class="circle" src="<%= message.author.avatar %>">
+ <a href="/users/<%=message.author.id %>"><%=message.author.name %></a>:
</h2>
- <p>Example message for development</p><br>
- <div id="message-delete-3">
- <a onclick="delete_message('3');">DELETE</a>
- <a onclick="edit_message('3');">EDIT</a>
+ <p><%= message.content%></p><br>
+ <div id="message-delete-<%=message.id %>">
+
+ <% if (!message.deleted){ %>
+
+ <a onclick="delete_message('<%=message.id %>');">DELETE</a>
+ <a onclick="edit_message('<%=message.id %>');">EDIT</a>
+ <% }else{ %>
+ <h3 style="display:inline;">This message has been deleted</h3>
+ <a onclick="undelete_message('<%=message.id %>');">UNDELETE</a>
+ <% } %>
</div>
<div style="float: right;">
- <h3 id="count3" style="display:inline;">0</h3>
- <a onclick="react('3', 'like');">+🔼</a>
- <a onclick="react('3', 'dislike');">-🔽</a>
+ <h3 id="count<%=message.id %>" style="display:inline;"><%=message.reactCount %></h3>
+ <a onclick="react('<%=message.id %>', 'like');">+🔼</a>
+ <a onclick="react('<%=message.id %>', 'dislike');">-🔽</a>
</div>
</div>
- <!--EXAMPLE MESSAGE END-->
+ <% }); %>
</div>