|
@@ -29,14 +29,15 @@
|
|
|
location.href = "/";
|
|
|
}
|
|
|
})
|
|
|
- }
|
|
|
+ }
|
|
|
|
|
|
- const createComment = () => {
|
|
|
+ const postComments = () => {
|
|
|
+ const commentInputArea = document.querySelector('#comment-input');
|
|
|
const req = {
|
|
|
userId: "${ssId}",
|
|
|
- articleId: "${articleDetail.id}"
|
|
|
- // content:
|
|
|
- // created:
|
|
|
+ articleId: "${articleDetail.id}",
|
|
|
+ content: commentInputArea.value,
|
|
|
+ created: new Date()
|
|
|
}
|
|
|
|
|
|
const postOptions = {
|
|
@@ -46,30 +47,76 @@
|
|
|
"Content-Type": "application/json"
|
|
|
}
|
|
|
};
|
|
|
-
|
|
|
- const getOptions = {
|
|
|
- method: 'GET'
|
|
|
+
|
|
|
+ if(commentInputArea.value !== ''){
|
|
|
+ fetch('/article/${articleDetail.id}/comment', postOptions)
|
|
|
+ .then(response => {
|
|
|
+ if(response.status === 201) {
|
|
|
+ return displayComments();
|
|
|
+ }
|
|
|
+ })
|
|
|
}
|
|
|
+ commentInputArea.value = '';
|
|
|
+ }
|
|
|
+
|
|
|
+ function deleteComment(targetCommentId) {
|
|
|
+ fetch("/article/${articleDetail.id}/comment/" + targetCommentId, { method: 'DELETE' })
|
|
|
+ .then(response => {
|
|
|
+ if(response.status === 200) {
|
|
|
+ return displayComments();
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
|
|
|
- fetch('/article/${articleDetail.id}/comment', postOptions)
|
|
|
+ function displayComments() {
|
|
|
+ fetch('/article/${articleDetail.id}/comment/all', { method: 'GET' })
|
|
|
.then(response => {
|
|
|
- if(response.status === 201) {
|
|
|
- return ;
|
|
|
+ if (response.status === 200) {
|
|
|
+ return response.json();
|
|
|
}
|
|
|
})
|
|
|
- .then(() => {
|
|
|
- fetch('/article/${articleDetail.id}/comment/all', getOptions)
|
|
|
- .then(response => {
|
|
|
- if(response.status === 200) {
|
|
|
- return response.json();
|
|
|
+ .then(json => {
|
|
|
+ const { comments } = json;
|
|
|
+ const container = document.querySelector('.comments');
|
|
|
+
|
|
|
+ while (container.firstChild) {
|
|
|
+ container.firstChild.remove();
|
|
|
+ }
|
|
|
+
|
|
|
+ comments.forEach(comment => {
|
|
|
+ const domParser = new DOMParser();
|
|
|
+ const domStrComment =
|
|
|
+ `<div class="card">
|
|
|
+ <div class="card-block">
|
|
|
+ <p class="card-text">
|
|
|
+ \${comment.content}
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ <div class="card-footer comment-footer">
|
|
|
+ <div class="user-info">
|
|
|
+ <a href="userpage-others.html" class="comment-author">
|
|
|
+ <img class="comment-img" src="/resources/images/avatar.png" alt="">
|
|
|
+ </a>
|
|
|
+ <a href="userpage-others.html" class="comment-author">\${comment.username}</a>
|
|
|
+ <span class="date-posted"></span>
|
|
|
+ </div>
|
|
|
+ <i style="display: none" class="fas fa-trash-alt" onclick="deleteComment('\${comment.id}')"></i>
|
|
|
+ </div>
|
|
|
+ </div>`;
|
|
|
+
|
|
|
+ const divComment = domParser.parseFromString(domStrComment, 'text/html').body.firstChild;
|
|
|
+ divComment.querySelector('.date-posted').textContent = new Date(comment.created).toLocaleString();
|
|
|
+ container.appendChild(divComment);
|
|
|
+ const icons = document.querySelectorAll('.fa-trash-alt');
|
|
|
+ icons.forEach(icon => {
|
|
|
+ if (comment.userId == "${ssId}") {
|
|
|
+ icon.style.display = 'block';
|
|
|
}
|
|
|
})
|
|
|
- .then(json => {
|
|
|
- const { comments } = json;
|
|
|
-
|
|
|
- })
|
|
|
+ })
|
|
|
})
|
|
|
- }
|
|
|
+
|
|
|
+ }
|
|
|
|
|
|
window.onload = () => {
|
|
|
const tags = document.querySelector('.tag-list');
|
|
@@ -81,11 +128,12 @@
|
|
|
).join('');
|
|
|
}
|
|
|
|
|
|
-
|
|
|
const date = "${articleDetail.created}"
|
|
|
document.querySelectorAll('.date').forEach(value =>
|
|
|
value.textContent = new Date(date).toLocaleString()
|
|
|
)
|
|
|
+
|
|
|
+ displayComments();
|
|
|
}
|
|
|
|
|
|
</script>
|
|
@@ -200,50 +248,15 @@
|
|
|
<div class="col-8">
|
|
|
<div class="card comment-form">
|
|
|
<div class="card-block">
|
|
|
- <textarea class="form-control" placeholder="Write a comment..." rows="3"></textarea>
|
|
|
- </div>
|
|
|
- <div class="card-footer">
|
|
|
- <img class="comment-img" src="img/avatar.jpg" alt="">
|
|
|
- <button class="btn btn-card btn-sm" onclick="createComment()">Post Comment</button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="card">
|
|
|
- <div class="card-block">
|
|
|
- <p class="card-text">
|
|
|
- While most "todo" demos provide an excellent cursory glance at a framework's capabilities,
|
|
|
- they typically don't convey the knowledge & perspective required to actually build real
|
|
|
- applications with it.
|
|
|
- </p>
|
|
|
+ <textarea id="comment-input" class="form-control" placeholder="Write a comment..." rows="3"></textarea>
|
|
|
</div>
|
|
|
<div class="card-footer">
|
|
|
- <div class="user-info">
|
|
|
- <a href="userpage-others.html" class="comment-author">
|
|
|
- <img class="comment-img" src="img/avatar.jpg" alt="">
|
|
|
- </a>
|
|
|
- <a href="userpage-others.html" class="comment-author">Gerome</a>
|
|
|
- <span class="date-posted">November 24, 2021</span>
|
|
|
- </div>
|
|
|
- <i style="display: none" class="fas fa-trash-alt"></i>
|
|
|
+ <img class="comment-img" src="/resources/images/avatar.png" alt="">
|
|
|
+ <button class="btn btn-card btn-sm" onclick="postComments()">Post Comment</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="card">
|
|
|
- <div class="card-block">
|
|
|
- <p class="card-text">
|
|
|
- RealWorld solves this by allowing you to choose any frontend (React, Angular, & more) and
|
|
|
- any backend (Node, Django, & more) and see how they power a real-world, beautifully designed
|
|
|
- full-stack app called Conduit.
|
|
|
- </p>
|
|
|
- </div>
|
|
|
- <div class="card-footer">
|
|
|
- <div class="user-info">
|
|
|
- <a href="userpage-my.html" class="comment-author">
|
|
|
- <img class="comment-img " src="img/avatar.jpg" alt="">
|
|
|
- </a>
|
|
|
- <a href="userpage-my.html" class="comment-author">username</a>
|
|
|
- <span class="date-posted">posting date</span>
|
|
|
- </div>
|
|
|
- <i class="fas fa-trash-alt"></i>
|
|
|
- </div>
|
|
|
+ <div class="comments">
|
|
|
+
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|