thread rendering is updated, guest can view msg

public/css/user.css

@@ -21,7 +21,8 @@ max-width: 800px;
   width: 100%;
 }
 
-.box-title, .box-value{
+.box-title,
+.box-value {
   color: #606060;
   font-weight: 300;
 }

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);
         });
 });
 

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,9 +21,15 @@ 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("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;").replaceAll("\"", "&quot;").replaceAll("'", "&#39;").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();
 });

views/thread.ejs

@@ -35,33 +35,38 @@
 
 
         <div id="messages" value="<%= thread.id %>">
-          <% if (!user){ %>
-            <h1>Guests cant view messages!</h1>
-            <% }%>
        
-            <!--EXAMPLE MESSAGE-->
-            <div class="message" id="message-3">
+            <% messages.filter(Boolean).forEach(message=>{ %>
 
-              <h3 style="float:right;">26.08.2022 15:37:42</h3>
+            <div class="message" id="message-<%= message.id %>">
+    
+              <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>