Skip to content

Commit

Permalink
Merge pull request #35 from thomas-martin-uf/forum_style
Browse files Browse the repository at this point in the history 
fixing forum functionality for replies
  • Loading branch information
@ricardocarva
ricardocarva authored Dec 5, 2023
2 parents 21120a4 + cbc9a91 commit b500070
Show file tree
Hide file tree
Showing 5 changed files with 129 additions and 27 deletions.
76 changes: 62 additions & 14 deletions public/scripts/connect.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@ const submitReply = async (e) => {
console.log(replyParent, posttext);
if (replyParent && posttext) {
console.log("reply valid");

fetch("http://localhost:3000/connect/reply", {
method: "POST",
headers: {
Expand All @@ -50,12 +51,58 @@ const submitReply = async (e) => {
thread: posttext,
}),
})
.then((res) => console.log(res.json()))
.then((res) => {
axios
.get(
`http://localhost:3000/connect/get-replies?postId=${replyParent}`
)
.then((response) => {
console.log("Response:", response.data);
//console.log(res.json()))
const parent = response.data.replies[0].parent;
const replySection = document.getElementById(
`reply_list_${parent}`
);
let html = "";
response.data.replies.forEach((reply) => {
html += buildReplyHtml(reply);
});

html += ` <div class="POST_REPLY center">
<div class="input-field col s12 mb-0 p-1">
<textarea id="reply-text" class="materialize-textarea"></textarea>
<label style="width:100%;" for="reply-text">Write your reply here</label>
</div>
<button
id="reply-submit"
class="REPLYBUTTON btn btn-login teal lighten-3 m-auto mb-15"
threadid="${parent}"
>
<i class="fa-solid fa-question left"></i>
Submit a reply
</button>
</div></div></div>`;
replySection.innerHTML = html;
})
.catch((error) => {
// Handle errors
console.error("Error:", error);
});
})

.catch((err) => console.error(err));
buildPostHTML();
//buildReplyHtml();
}
};

// builds reply html blocks
const buildReplyHtml = (reply) => {
return `<li class="reply-item row m-0 flex wrap align">
<p class="p-1 m-0">${reply.content}</p>
<small class="right mr-15">${reply.creator}</small>
</li>`;
};

const buildPostHTML = () => {
document.getElementById("post-progress-row").classList.remove("d-none");
let postStr = "";
Expand All @@ -66,40 +113,41 @@ const buildPostHTML = () => {
.then((posts) => {
if (Array.isArray(posts.arrForum)) {
posts.arrForum.forEach((post) => {
postStr += `<div id="post_${post._id}" class=" card p-1">
<div class="row m-0 card-title flex align main-post" postid="${
postStr += `<div id="post_${post._id}" class=" card">
<div class="row m-0 card card-title flex align main-post" postid="${
post._id
}">
<span class="left">${post.title}</span>
<div class="row w-100 m-0">
<span class="left bold">${post.title}</span>
</div>
<div class="row w-100 m-0">
<small class="right">${
post.creator
} @ ${post.createdAt.substring(
0,
10
)} - ${post.createdAt.substring(11, 19)}</small>
</div>
</div>
<div id="reply_section_${
post._id
}" class="reply-section d-none">
<p>${post.content}</p>`;
<p class="p-1 card mb-0 main-post-content">${post.content}</p>`;
if (post.replies.length) {
postStr += `<ul>`;
postStr += `<ul id="reply_list_${post._id}">`;
post.replies.forEach((reply) => {
postStr += `<li>
<div class="row m-0">${reply.creator}</div>
<div class="row m-0">${reply.content}</div>
</li>`;
postStr += buildReplyHtml(reply);
});
}
postStr += `
<div class="POST_REPLY">
<div class="input-field col s12">
<div class="POST_REPLY center">
<div class="input-field col s12 mb-0 p-1">
<textarea id="reply-text" class="materialize-textarea"></textarea>
<label style="width:100%;" for="reply-text">Write your reply here</label>
</div>
<button
id="reply-submit"
class="REPLYBUTTON btn btn-login teal lighten-3 m-auto"
class="REPLYBUTTON btn btn-login teal lighten-3 m-auto mb-15"
threadid="${post._id}"
>
<i class="fa-solid fa-question left"></i>
Expand Down
1 change: 0 additions & 1 deletion public/scripts/forum.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,6 @@ const getNumReplies = async (num, p_id) => {
var ObjectId = mongoose.Types.ObjectId;
return await forum_post
.find({ parent: new ObjectId(p_id) })
.sort({ createdAt: -1 })
.limit(num)
.lean();
};
Expand Down
54 changes: 48 additions & 6 deletions public/styles/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,45 @@ h4 {
font-size: 1.5rem;
margin: 15px 0px;
}
.main-content {
background-color: #f9f9f9;
border-bottom: 0px !important;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}

.main-post-content {
background-color: #fff;
margin-top: 0;
border-top: 0px;
border: 0px !important;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
}

.main-post {
padding: 1rem;
margin: 0.5rem 0 1rem 0;
background: #f9f9f9;

border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;

margin-bottom: 0;
}

.reply-item {
border-bottom: 1px solid #e9e8e8 !important;
}
.card-title small {
font-size: 12px;
font-weight: 400;
}

.card-title .bold {
font-size: 20px;
font-weight: 600;
}

.news-row {
height: 10px;
Expand Down Expand Up @@ -78,9 +117,7 @@ a .news-item-img:hover {
overflow-y: scroll;
padding: 1rem;
}
.card-title small {
font-size: 1rem;
}

.news-content p {
padding: 24px;
}
Expand Down Expand Up @@ -169,11 +206,14 @@ i.left {
}

.mb-0 {
margin-bottom: 0px;
margin-bottom: 0px !important;
}

.mb-5 {
margin-bottom: 5px !important;
}
.mb-15 {
margin-bottom: 15px;
margin-bottom: 15px !important;
}

.m-15 {
Expand Down Expand Up @@ -503,7 +543,9 @@ input {
.form-input input:focus {
outline: 1px solid var(--main-green);
} */

.h-0 {
height: 0px;
}
.h-200 {
height: 200px !important;
}
Expand Down
19 changes: 16 additions & 3 deletions routes/connect.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ router.get("/", ensureAuthenticated, async (req, res) => {
// Need to query for forum posts
const { getNumPosts, getNumReplies } = require("../public/scripts/forum");

const arrForum = await getNumPosts(30);
/* const arrForum = await getNumPosts(30);
for (const post in arrForum) {
arrForum[post].replies = [];
const repliesArr = await getNumReplies(
Expand All @@ -26,15 +26,28 @@ router.get("/", ensureAuthenticated, async (req, res) => {
arrForum[post].replies.push(repliesArr[reply]);
}
}

*/
//console.log("Resolved?", arrForum);
res.render("connect", {
layout: "main",
data: data,
forumpost: arrForum,
//forumpost: arrForum,
});
});

router.get("/get-replies", ensureAuthenticated, async (req, res) => {
// Need to query for forum posts
const { getNumReplies } = require("../public/scripts/forum");

// Access the post ID from the query parameters
const postId = req.query.postId;

// Use postId as needed, for example, pass it to your function
const replies = await getNumReplies(30, postId);

res.json({ replies });
});

router.get("/get-posts", ensureAuthenticated, async (req, res) => {
// Need to query for forum posts
const { getNumPosts, getNumReplies } = require("../public/scripts/forum");
Expand Down
6 changes: 3 additions & 3 deletions views/connect.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@
</button>

</div>
<div id="newpost-progress-row" class="news-row row mb-0 d-none">
<div id="newpost-progress-row" class="news-row row mb-0 h-0 d-none">
<div id="newpost-progress" class="progress m-0">
<div class="indeterminate"></div>
</div>
Expand All @@ -42,12 +42,12 @@
<i id="refreshPostIcon" class="fa-solid fa-refresh right"></i>
</button>
</div>
<div id="post-progress-row" class="news-row row mb-0">
<div id="post-progress-row" class="news-row row mb-0 h-0">
<div id="post-progress" class="progress m-0">
<div class="indeterminate"></div>
</div>
</div>
<div id="forum-container">
<div id="forum-container" class="light-container-border light-mode">

</div>
</div>
Expand Down

0 comments on commit b500070

Please sign in to comment.