Add tests for comments counter

dist/index.html

@@ -16,7 +16,7 @@
       <!-- /* //navbar //* -->
       <nav class="navbar navbar-expand-md bg-blue fs-5" data-bs-theme="dark">
         <div class="container-lg">
-          <a class="navbar-brand m-0 d-flex align-items-center" href="#">
+          <a class="navbar-brand m-0 d-flex align-items-center" href="/">
             <img src="#" alt="SeriesFeedbacks" id="logoWebpage" />
             SeriesFeedbacks
           </a>
@@ -37,7 +37,7 @@
                 <a
                   class="nav-link active"
                   aria-current="page"
-                  href="#"
+                  href="/"
                   data-page="home"
                   >All Shows (<span class="show-count">0</span>)</a
                 >
@@ -51,7 +51,7 @@
       </nav>
       <!-- /* //navbar //* -->
     </header>
-    <main>
+    <main class="min-vh-100">
       <section class="shows">
         <div class="container">
           <div id="shows" class="row"></div>
@@ -66,12 +66,12 @@
             class="col d-flex justify-content-around text-light fs-5 gap-3 mt-2"
           >
             <p>
-              <a class="navbar-brand m-0 d-flex align-items-center" href="#">
+              <a class="navbar-brand m-0 d-flex align-items-center" href="/">
                 <img src="#" alt="SeriesFeedbacks" id="logoWebpage-footer" />
                 SeriesFeedbacks
               </a>
             </p>
-            <p>Created by Carmen Bravo & Pablo Bonasera</p>
+            <p>Created by <a href="https://github.com/NitBravoA92" class="text-info fw-bold text-decoration-none" target="_blank" rel="noopener">Carmen Bravo</a> & <a href="https://github.com/PabloBona" class="text-info fw-bold text-decoration-none" target="_blank" rel="noopener">Pablo Bonasera</a></p>
           </div>
         </div>
       </div>

src/index.html

@@ -16,7 +16,7 @@
       <!-- /* //navbar //* -->
       <nav class="navbar navbar-expand-md bg-blue fs-5" data-bs-theme="dark">
         <div class="container-lg">
-          <a class="navbar-brand m-0 d-flex align-items-center" href="#">
+          <a class="navbar-brand m-0 d-flex align-items-center" href="/">
             <img src="#" alt="SeriesFeedbacks" id="logoWebpage" />
             SeriesFeedbacks
           </a>
@@ -37,7 +37,7 @@
                 <a
                   class="nav-link active"
                   aria-current="page"
-                  href="#"
+                  href="/"
                   data-page="home"
                   >All Shows (<span class="show-count">0</span>)</a
                 >
@@ -51,7 +51,7 @@
       </nav>
       <!-- /* //navbar //* -->
     </header>
-    <main>
+    <main class="min-vh-100">
       <section class="shows">
         <div class="container">
           <div id="shows" class="row"></div>
@@ -66,12 +66,12 @@
             class="col d-flex justify-content-around text-light fs-5 gap-3 mt-2"
           >
             <p>
-              <a class="navbar-brand m-0 d-flex align-items-center" href="#">
+              <a class="navbar-brand m-0 d-flex align-items-center" href="/">
                 <img src="#" alt="SeriesFeedbacks" id="logoWebpage-footer" />
                 SeriesFeedbacks
               </a>
             </p>
-            <p>Created by Carmen Bravo & Pablo Bonasera</p>
+            <p>Created by <a href="https://github.com/NitBravoA92" class="text-info fw-bold text-decoration-none" target="_blank" rel="noopener">Carmen Bravo</a> & <a href="https://github.com/PabloBona" class="text-info fw-bold text-decoration-none" target="_blank" rel="noopener">Pablo Bonasera</a></p>
           </div>
         </div>
       </div>

src/modules/commentsCounter.js

@@ -0,0 +1,7 @@
+const commentsCounter = () => {
+  const commentsList = document.getElementsByClassName('comment-item');
+  const commentsCounter = document.getElementById('commentsCount');
+  commentsCounter.textContent = commentsList.length;
+};
+
+export default commentsCounter;

src/modules/handlerEvents.js

@@ -1,6 +1,40 @@
 import { getShowDetails } from './api.js';
-import { renderShowDetails, renderCommentsList } from './renderCommentsModal.js';
-import { getShowComments } from './involvementApi.js';
+import {
+  renderShowDetails, renderCommentsList, renderCommentsForm,
+} from './renderCommentsModal.js';
+import { getShowComments, saveNewComment } from './involvementApi.js';
+import commentsCounter from './commentsCounter.js';
+
+const AddCommentEventHandler = () => {
+  const formAddComment = document.getElementById('add-comment-form');
+  formAddComment.addEventListener('submit', async (e) => {
+    e.preventDefault();
+
+    const { inputUsername, inputComment } = formAddComment;
+    const showId = Number(formAddComment.dataset.show);
+
+    const dataComment = {
+      item_id: showId,
+      username: inputUsername.value,
+      comment: inputComment.value,
+    };
+
+    formAddComment.reset();
+
+    const saveCommentResult = await saveNewComment(dataComment);
+    if (saveCommentResult) {
+      const showCommentsList = await getShowComments(showId);
+      renderCommentsList(showCommentsList);
+      commentsCounter();
+    } else {
+      const errorContainer = document.getElementById('add-comment-error');
+      errorContainer.textContent = 'Error! Comment not saved. Refresh the page and Try again.';
+      setTimeout(() => {
+        errorContainer.textContent = '';
+      }, 4500);
+    }
+  });
+};
 
 const showHideModalEventHandlers = () => {
   const commentsModal = document.getElementById('showCommentsPopup');
@@ -10,11 +44,15 @@ const showHideModalEventHandlers = () => {
     const showCommentsList = await getShowComments(showId);
     renderShowDetails(showDetails);
     renderCommentsList(showCommentsList);
+    renderCommentsForm(showId);
+    commentsCounter();
+    AddCommentEventHandler();
   });
 
   commentsModal.addEventListener('hide.bs.modal', async () => {
     document.getElementById('container-show-details').innerHTML = '';
     document.getElementById('container-list-comments').innerHTML = '';
+    document.getElementById('container-add-comments').innerHTML = '';
   });
 };
 

src/modules/helpers.js

@@ -0,0 +1,30 @@
+export const commentItemMarkup = (commentDate, username, commentText) => `
+  <div class="col-12">
+    <p class="fs-6 comment-item">
+      <b>${commentDate} ${username}: </b> 
+      <span>${commentText}</span>
+    </p>
+  </div>
+`;
+
+export const getCommentDateFormatted = (originalDate) => {
+  const date = new Date(originalDate);
+  const dateFormatted = new Date(
+    Date.UTC(date.getFullYear(), date.getMonth(), date.getDate(), 0, 0, 0),
+  );
+  return dateFormatted.toLocaleDateString('en-US');
+};
+
+export const getPremieredDateFormatted = (originalDate) => {
+  const premieredFormatted = new Date(originalDate).toLocaleDateString('en-us', {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+  });
+  return premieredFormatted;
+};
+
+export const getSeasonsTextFormatted = (seasons) => {
+  const numberSeasons = seasons.length;
+  return `${numberSeasons} season${numberSeasons !== 1 ? 's' : ''}`;
+};

src/modules/involvementApi.js

@@ -28,4 +28,28 @@ export const getShowComments = async (id) => {
   } catch (error) {
     return [];
   }
+};
+
+export const saveNewComment = async (commentData) => {
+  try {
+    const requestOptions = {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json; charset=UTF-8',
+      },
+      body: JSON.stringify(commentData),
+    };
+
+    const response = await fetch(`${involveApiUrl}/comments`, requestOptions);
+
+    if (!response.ok) {
+      throw new Error('Failed: There is a fatal error in the request');
+    }
+
+    const result = await response.text();
+
+    return result;
+  } catch (error) {
+    return null;
+  }
 };

src/modules/renderCommentsModal.js

@@ -1,3 +1,9 @@
+import {
+  commentItemMarkup, getCommentDateFormatted,
+  getPremieredDateFormatted, getSeasonsTextFormatted,
+}
+from './helpers.js';
+
 export const renderBaseTemplateModal = () => {
   const footerElement = document.querySelector('footer');
   footerElement.insertAdjacentHTML(
@@ -12,8 +18,10 @@ export const renderBaseTemplateModal = () => {
           </div>
           <div class="modal-body">
             <div id="container-show-details" class="mb-4"></div>
-            <div id="container-list-comments" class="bg-light-blue rounded"></div>
-            <div id="container-add-comments"></div>
+            <div class="bg-light-blue rounded px-4">
+              <div id="container-list-comments"></div>
+              <div id="container-add-comments"></div>
+            </div>
           </div>
         </div>
       </div>
@@ -24,10 +32,10 @@ export const renderBaseTemplateModal = () => {
 export const renderShowDetails = ({
   name, genres, image, language, premiered, rating, _embedded,
 }) => {
-  const seasons = _embedded.seasons.length;
-  const premieredFormatted = new Date(premiered).toLocaleDateString('en-us', { year: 'numeric', month: 'long', day: 'numeric' });
-
+  const seasons = getSeasonsTextFormatted(_embedded.seasons);
+  const premieredDate = getPremieredDateFormatted(premiered);
   const showDetailsContainer = document.getElementById('container-show-details');
+
   showDetailsContainer.innerHTML = `
   <div class="row justify-content-center align-items-center">
     <div class="col-12 d-flex justify-content-center align-items-center">
@@ -42,13 +50,13 @@ export const renderShowDetails = ({
           <p class="fs-5"><b>Language: </b> <span>${language}</span></p>
         </div>
         <div class="col-md-6">
-          <p class="fs-5"><b>Premiered: </b> <span>${premieredFormatted}</span></p>
+          <p class="fs-5"><b>Premiered: </b> <span>${premieredDate}</span></p>
         </div>
         <div class="col-md-6">
           <p class="fs-5"><b>Rating: </b> <span>${rating.average}</span></p>
         </div>
         <div class="col-md-6">
-          <p class="fs-5"><b>Seasons: </b> <span>${seasons} season${seasons !== 1 ? 's' : ''}</span></p>
+          <p class="fs-5"><b>Seasons: </b> <span>${seasons}</span></p>
         </div>
         <div class="col-md-12">
           <p class="fs-5"><b>Genres: </b> <span>${genres.join(' | ')}</span></p>
@@ -60,35 +68,47 @@ export const renderShowDetails = ({
 };
 
 export const renderCommentsList = (comments) => {
-  let date;
-  let dateFormatted;
+  const commentsList = comments.map((comment) => commentItemMarkup(
+    getCommentDateFormatted(comment.creation_date), comment.username, comment.comment,
+  )).join('');
 
-  const commentsList = comments.map((commentInfo) => {
-    date = new Date(commentInfo.creation_date);
-    dateFormatted = new Date(
-      Date.UTC(date.getFullYear(), date.getMonth(), date.getDate(), 0, 0, 0),
-    );
-    return `
-    <div class="col-12">
-      <p class="fs-6 comment-details">
-        <b>${dateFormatted.toLocaleDateString('en-US')} ${commentInfo.username}: </b> 
-        <span>${commentInfo.comment}</span>
-      </p>
-    </div>
-  `;
-  }).join('');
   const commentsContainer = document.getElementById('container-list-comments');
+
   commentsContainer.innerHTML = `
-  <h3 class="modal-comments-title fs-2 py-4 text-center fw-bolder">Comments (1)</h3>
+  <h3 class="modal-comments-title fs-2 py-4 text-center fw-bolder">
+    Comments (<span id="commentsCount"></span>)
+  </h3>
   <div class="row justify-content-center">
     <div class="col-md-6">
-      <div class="row">
+      <div class="row" id="comments-list">
         ${commentsList}
-        <div class="col-12">
-          <p class="fs-6 comment-details"><b>6/28/2023 Carmen: </b> <span>This is a Testing comment</span></p>
-        </div>
       </div>
     </div>
   </div>
   `;
+};
+
+export const renderCommentsForm = (id) => {
+  const commentsFormContainer = document.getElementById(
+    'container-add-comments',
+  );
+  commentsFormContainer.innerHTML = `
+  <h3 class="modal-comments-form-title fs-2 py-4 text-center fw-bolder">Add a comment</h3>
+  <div class="row justify-content-center">
+    <div class="col-md-6">
+      <form action="#" id="add-comment-form" data-show="${id}">
+        <div class="mb-3">
+          <input type="text" class="form-control" id="inputUsername" placeholder="Your Name" required>
+        </div>
+        <div class="mb-3">
+          <textarea class="form-control" id="inputComment" rows="3" placeholder="Your insights" required></textarea>
+        </div>
+        <div class="mb-3 d-flex justify-content-between align-items-center">
+          <button type="submit" class="btn btn-info mb-3 fs-5">Comment</button>
+        </div>
+        <p id="add-comment-error" class="mb-3 fw-bold text-danger fs-6"></p>
+      </form>
+    </div>
+  </div>
+  `;
 };

src/test/commentsCounter.test.js

@@ -0,0 +1,52 @@
+import commentsCounter from '../modules/commentsCounter.js';
+
+describe('Function commentsCounter', () => {
+  const commentItem = '<p class="fs-6 comment-item">Comment!</p>';
+  beforeEach(() => {
+    document.body.innerHTML = `
+    <h3>Comments (<span id="commentsCount"></span>)</h3>
+    <div class="row" id="comments-list"></div>
+    `;
+  });
+  afterEach(() => {
+    document.getElementById('comments-list').innerHTML = '';
+    document.getElementById('commentsCount').innerHTML = '';
+  });
+
+  test('Calculate and display 0 when there is not comments', () => {
+    // Arrange
+    const commentsCount = document.getElementById('commentsCount');
+
+    // Act
+    commentsCounter();
+
+    // Assert
+    expect(commentsCount.textContent).toBe('0');
+  });
+
+  test('Calculate and display 3 when there is 3 comments displayed', () => {
+    // Arrange
+    const threeComments = Array(3).fill(commentItem);
+    document.getElementById('comments-list').innerHTML = `${threeComments.join('')}`;
+    const commentsCount = document.getElementById('commentsCount');
+
+    // Act
+    commentsCounter();
+
+    // Assert
+    expect(commentsCount.textContent).toBe('3');
+  });
+
+  test('Calculate and display 10 when there is 10 comments displayed', () => {
+    // Arrange
+    const tenComments = Array(10).fill(commentItem);
+    document.getElementById('comments-list').innerHTML = `${tenComments.join('')}`;
+    const commentsCount = document.getElementById('commentsCount');
+
+    // Act
+    commentsCounter();
+
+    // Assert
+    expect(commentsCount.textContent).toEqual('10');
+  });
+});