63 lines
1.7 KiB
JavaScript
63 lines
1.7 KiB
JavaScript
fetchComments();
|
|
|
|
async function fetchComments() {
|
|
const res = await fetch(`/comments?id=${permalink}`);
|
|
const comments = await res.json();
|
|
const rootId = new URL(permalink, document.location).toString();
|
|
const tree = buildCommentsTree(comments, rootId)[0];
|
|
const html = renderCommentList(tree);
|
|
document.getElementById("comments-container").innerHTML = html;
|
|
}
|
|
|
|
function buildCommentsTree(comments, parent) {
|
|
console.log(`Building tree for ${parent}`);
|
|
let [children, rem] = partition(comments, it => it.inReplyTo === parent);
|
|
for (const child of children) {
|
|
const [subChildren, subRem] = buildCommentsTree(rem, child.id);
|
|
rem = subRem;
|
|
child.children = subChildren;
|
|
}
|
|
return [children, rem]
|
|
}
|
|
|
|
function partition(array, fn) {
|
|
const trueArr = [];
|
|
const falseArr = [];
|
|
for (const el of array) {
|
|
(fn(el) ? trueArr : falseArr).push(el);
|
|
}
|
|
return [trueArr, falseArr];
|
|
}
|
|
|
|
function renderCommentList(comments) {
|
|
const rendered = comments.map(renderComment).join("\n");
|
|
return `<ul class="comments-list">` + rendered + `</ul>`;
|
|
}
|
|
|
|
function renderComment(comment) {
|
|
const formattedDate = new Date(comment.published).toLocaleString("en-us", {
|
|
month: "short",
|
|
day: "numeric",
|
|
year: "numeric",
|
|
hour: "numeric",
|
|
minute: "numeric"
|
|
});
|
|
return `
|
|
<div class="comment">
|
|
<img class="comment-user-avatar" src="${comment.author.icon}">
|
|
<div class="comment-main">
|
|
<p class="comment-info">
|
|
<a class="comment-user-name" href="${comment.author.id}">${comment.author.name}</a>
|
|
on
|
|
<a class="comment-date" href="${comment.id}">${formattedDate}</a>
|
|
</p>
|
|
<div class="comment-body">
|
|
${comment.content}
|
|
</div>
|
|
<div class="comment-children">
|
|
${renderCommentList(comment.children)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
} |