Advertisement
EntropyStarRover

submitcomment

Mar 5th, 2021
59
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. export function visualiseComments(postId,topicContainer){
  2. getAllComments();
  3.  
  4.  
  5. let homeLink=document.querySelector("a");
  6. homeLink.addEventListener("click", function (e){
  7. e.preventDefault();
  8. console.log("back to all topics")
  9. })
  10.  
  11. let main=document.getElementsByTagName("main")[0];
  12. main.appendChild(topicContainer);
  13.  
  14. let submitForm=document.createElement("div");
  15. submitForm.classname="answer-comment";
  16. submitForm.innerHTML=`<p><span>currentUser</span> comment:</p>
  17. <div class="answer">
  18. <form>
  19. <textarea name="postText" id="comment" cols="30" rows="10"></textarea>
  20. <div>
  21. <label for="username">Username <span class="red">*</span></label>
  22. <input type="text" name="username" id="username">
  23. </div>
  24. <button>Post</button>
  25. </form>
  26. </div>`;
  27.  
  28.  
  29.  
  30. main.appendChild(submitForm);
  31. let postButton=submitForm.querySelector("button");
  32. console.log(postButton)
  33. let nameArea=document.getElementById("comment");
  34. let userInput=document.getElementById("username");
  35.  
  36. postButton.addEventListener("click", function(e){
  37. e.preventDefault();
  38. postComment()
  39. })
  40.  
  41. function postComment(){
  42. let commentText=nameArea.value;
  43. let author=userInput.value;
  44.  
  45.  
  46. let newComment={commentAuthor:author, text:commentText, postId}
  47.  
  48.  
  49. var myHeaders = new Headers();
  50. myHeaders.append("Content-Type", "application/json");
  51.  
  52. var raw = JSON.stringify(newComment);
  53.  
  54. var requestOptions = {
  55. method: 'POST',
  56. headers: myHeaders,
  57. body: raw,
  58. redirect: 'follow'
  59. };
  60.  
  61. fetch("http://localhost:3030/jsonstore/collections/myboard/comments", requestOptions)
  62. .then(response => response.json())
  63. .then(result => getAllComments())
  64. .catch(error => console.log('error', error));
  65. }
  66.  
  67. function getAllComments(){
  68. var requestOptions = {
  69. method: 'GET',
  70. redirect: 'follow'
  71. };
  72.  
  73. fetch("http://localhost:3030/jsonstore/collections/myboard/comments", requestOptions)
  74. .then(response => response.json())
  75. .then(result => filterComments(result))
  76. .catch(error => console.log('error', error));
  77. }
  78.  
  79. function filterComments(data){
  80. let arr=Object.values(data);
  81. let filteredArr=arr.filter(a=>a.postId==postId);
  82. main.innerHTML="";
  83. main.appendChild(topicContainer);
  84.  
  85.  
  86. filteredArr.forEach(c => {
  87. renderComment(c)
  88. });
  89. main.appendChild(submitForm)
  90.  
  91. }
  92.  
  93. function renderComment(data){
  94.  
  95. let newCommentDiv=document.createElement("div");
  96. newCommentDiv.className="comment";
  97. newCommentDiv.innerHTML=`<header class="header">
  98. <p><span>${data.commentAuthor}</span> posted on <time>${Date.now()}</time></p>
  99. </header>
  100. <div class="comment-main">
  101. <div class="userdetails">
  102. <img src="./static/profile.png" alt="avatar">
  103. </div>
  104. <div class="post-content">
  105. <p>${data.text}</p>
  106. </div>
  107. </div>
  108. <div class="footer">
  109. <p><span>5</span> likes</p>
  110. </div>`
  111.  
  112. nameArea.value="";
  113. userInput.value="";
  114. main.appendChild(newCommentDiv);
  115.  
  116. }
  117.  
  118.  
  119.  
  120. }
  121.  
  122.  
Advertisement
RAW Paste Data Copied
Advertisement