Display comments

dist/index.html

@@ -25,7 +25,7 @@
       <div class="movie__details">
       </div>
       <div class="movie__comments">
-        <h3>Comments (2)</h3>
+        <!-- <h3>Comments (2)</h3>
         <ul class="comments__list">
           <li>
             <div class="owner">
@@ -49,13 +49,13 @@ <h3>Comments (2)</h3>
               <p class="item-comment">I'd love to buy it</p>
             </div>
           </li>
-        </ul>
+        </ul> -->
       </div>
       <div class="movie__add-comment">
         <h3>Add a comment</h3>
         <form action="#" id="form__comment">
           <input type="text" name="inp__username" id="inp__username" class="input__field" placeholder="Your name">
-          <textarea name="inp__insights" id="inp__insights" class="input__field" cols="30" rows="10"
+          <textarea name="inp__insights" id="inp__insights" class="input__field" cols="30" rows="5"
             placeholder="Your insights"></textarea>
           <input type="submit" id="btn__submit" class="btn" value="COMMENT">
           <span class="form__message" id="form__message">Error</span>

src/index.html

@@ -25,31 +25,6 @@
       <div class="movie__details">
       </div>
       <div class="movie__comments">
-        <h3>Comments (2)</h3>
-        <ul class="comments__list">
-          <li>
-            <div class="owner">
-              <span>03/11/2021</span>
-              <span class="item-name">Alex:</span>
-            </div>
-            <div class="comment">
-              <p class="item-comment">I'd love to buy it This Emmy winning series is a comic look at the assorted
-                humiliations and rare triumphs of a group of
-                girls
-                in their
-                20s.</p>
-            </div>
-          </li>
-          <li>
-            <div class="owner">
-              <span>03/11/2021</span>
-              <span class="item-name">Alex:</span>
-            </div>
-            <div class="comment">
-              <p class="item-comment">I'd love to buy it</p>
-            </div>
-          </li>
-        </ul>
       </div>
       <div class="movie__add-comment">
         <h3>Add a comment</h3>

src/modules/consumeInvolvementAPI.js

@@ -0,0 +1,26 @@
+const iBaseURL = 'https://us-central1-involvement-api.cloudfunctions.net/capstoneApi/apps/zggEBXzpFcQqjDxvMhMz/comments';
+
+const getComments = async (movieId) => {
+  const connect = await fetch(`${iBaseURL}?item_id=${movieId}`);
+  const commentsList = await connect.json();
+  if (commentsList.error) return [];
+  return commentsList;
+};
+
+const addComment = async (movieId, username, comment) => {
+  const connect = await fetch(`${iBaseURL}`, {
+    method: 'POST',
+    body: JSON.stringify({
+      item_id: movieId,
+      username,
+      comment,
+    }),
+    headers: {
+      'Content-type': 'application/json; charset=UTF-8',
+    },
+  });
+  const response = await connect.text();
+  return response;
+};
+
+export { getComments, addComment };

src/modules/displayMovieDetails.js

@@ -1,5 +1,10 @@
+import { getComments, addComment } from './consumeInvolvementAPI.js';
+
 const modalBox = document.querySelector('.modal__box');
 const modalCloseBtn = document.querySelector('#btn__close-modal');
+const commentForm = document.querySelector('#form__comment');
+const formMessage = document.querySelector('#form__message');
+let timerId = '';
 
 const arrIntoString = (arr) => {
   let str = '';
@@ -16,7 +21,7 @@ const buildMovieDescription = (data) => {
         <h2>${data.name}</h2>
         <ul class="movie__more">
           <li>
-            <span class="item-category">Gender:</span>
+            <span class="item-category">Genre:</span>
             <p>${arrIntoString(data.genres)}</p>
           </li>
           <li>
@@ -31,13 +36,99 @@ const buildMovieDescription = (data) => {
         ${data.summary}`;
 };
 
+const buildMovieComments = (arr) => {
+  const movieComments = document.querySelector('.movie__comments');
+  movieComments.innerHTML = '';
+  const title = document.createElement('h3');
+  title.textContent = `Comments (${arr.length})`;
+  movieComments.appendChild(title);
+  const commentList = document.createElement('ul');
+  commentList.classList.add('comments__list');
+  arr.forEach((comment) => {
+    const listItem = document.createElement('li');
+    listItem.innerHTML = ` <div class="owner">
+              <span>${comment.creation_date}</span>
+              <span class="item-name">${comment.username}:</span>
+            </div>
+            <div class="comment">
+              <p class="item-comment">${comment.comment}</p>
+            </div>`;
+    commentList.appendChild(listItem);
+  });
+  movieComments.appendChild(commentList);
+};
+
 const displayMovieDetails = (movie) => {
   buildMovieDescription(movie);
+  getComments(movie.id).then((list) => {
+    buildMovieComments(list);
+  });
   modalBox.classList.add('modal__box-display');
 };
 
 modalCloseBtn.addEventListener('click', () => {
   modalBox.classList.remove('modal__box-display');
 });
 
+const displayMessage = (msg) => {
+  clearTimeout(timerId);
+  if (msg) {
+    formMessage.textContent = msg;
+    formMessage.classList.add('error-message');
+  }
+  formMessage.classList.add('visible');
+  timerId = setTimeout(() => {
+    formMessage.classList.remove('error-message', 'visible');
+  }, 5000);
+};
+
+const validString = (str) => {
+  if (str.match(/^[a-zA-Z0-9À-ÿ\u00f1\u00d1\u00E0\u00FC_\- ]{1,30}$/)) return true;
+  return false;
+};
+
+const validForm = (name, comment) => {
+  name.value = name.value.trim();
+  comment.value = comment.value.trim();
+  if (!validString(name.value)) {
+    name.focus();
+    displayMessage('Name field only allows alphanumeric, hyphens, underscores, and max 30 characters.');
+    return false;
+  }
+  if (comment.value === '' || comment.value.length > 250) {
+    comment.focus();
+    displayMessage('Insights field allows 1 to 250 characters.');
+    return false;
+  }
+  return true;
+};
+
+const sendComment = () => {
+  const name = document.querySelector('#inp__username');
+  const comment = document.querySelector('#inp__insights');
+  const movieId = document.querySelector('.movie__details').getAttribute('data-movieId');
+
+  if (validForm(name, comment)) {
+    addComment(movieId, name.value, comment.value).then((ans) => {
+      if (ans === 'Created') {
+        getComments(movieId).then((list) => {
+          buildMovieComments(list);
+        });
+        name.value = '';
+        name.focus();
+        comment.value = '';
+        formMessage.textContent = 'Comment sent successfully';
+        displayMessage();
+      } else {
+        displayMessage('Comments are not available for now. Try again later.');
+      }
+    });
+  }
+};
+
+commentForm.addEventListener('submit', (e) => {
+  e.preventDefault();
+  sendComment();
+});
+
 export { displayMovieDetails as default };

src/scss/style.scss

@@ -144,9 +144,12 @@ header {
     .btn__close-modal {
       width: 1.5rem;
       border: 1px solid transparent;
+      background-color: $gray-light;
       margin: 0;
       padding: 0;
-      position: absolute;
+      color: $accent;
+      font-size: 2rem;
+      position: fixed;
       top: 1rem;
       right: 1rem;
       z-index: 11;