Comments layout functions

.eslintrc.json

@@ -16,7 +16,8 @@
     "eol-last": "off",
     "import/extensions": [ 1, {
       "js": "always", "json": "always"
-    }]
+    }],
+    "import/no-cycle": 0
   },
   "ignorePatterns": [
     "dist/",

src/apis/food.js

@@ -1,7 +1,8 @@
 /* eslint-disable import/no-cycle */
 import paginate from '../index.js';
 
-let meals = [];
+/* eslint-disable-next-line */
+export let meals = [];
 let currentPosts = [];
 let currentPage = 1;
 const postsPerPage = 10;

src/apis/requests.js

@@ -0,0 +1,34 @@
+/* eslint-disable consistent-return */
+export const postComment = async (post) => {
+  try {
+    await fetch(
+      'https://us-central1-involvement-api.cloudfunctions.net/capstoneApi/apps/XkZb08sfqWimSB3Sqtb3/comments',
+      {
+        method: 'POST',
+        body: JSON.stringify(post),
+        headers: {
+          'Content-type': 'application/json; charset=UTF-8',
+        },
+      },
+    );
+  } catch (err) {
+    // console.error(err);
+  }
+};
+
+export const getComment = async (id) => {
+  try {
+    const response = await fetch(
+      `https://us-central1-involvement-api.cloudfunctions.net/capstoneApi/apps/ofEMqPseJBxt6GrJYVpl/comments?item_id=${id}`,
+      {
+        method: 'GET',
+        headers: {
+          'Content-type': 'application/json; charset=UTF-8',
+        },
+      },
+    );
+    return await response.json();
+  } catch (err) {
+    // console.log(err)
+  }
+};

src/base.css

@@ -1241,7 +1241,7 @@ Ensure the default browser behavior of the `hidden` attribute.
   }
 
   .md\:max-w-full {
-    max-width: 100%;
+    max-width: 60%;
   }
 
   .md\:flex-row {

src/index.html

@@ -84,6 +84,9 @@
 
           <div class="meal-details-content"></div>
         </div>
+
+        <div class="comments-modal"></div>
+
       </main>
 
       <div
@@ -200,6 +203,7 @@ <h2 class="text-sm font-bold text-stone-900">Contact</h2>
         </div>
       </footer>
     </div>
+
   </body>
 </html>
 

src/index.js

@@ -2,6 +2,7 @@ import './base.css';
 import './style.css';
 import logo from './yummly.svg';
 import { getLike } from './apis/likes.js';
+
 /* eslint-disable import/no-cycle */
 import {
   getCurrentPosts,
@@ -11,9 +12,9 @@ import {
   handlePrevBtn,
   handlePageBtn,
 } from './apis/food.js';
-import template from './template.js';
-import defaultTemplate from './defaultTemplate.js';
-import modalPopUp from './modal/index.js';
+import template from './modules/template.js';
+import defaultTemplate from './modules/defaultTemplate.js';
+import modalPopUp from './modules/comments.js';
 // get img tag and set src attribute
 const myLogo = document.querySelector('.logoYummy');
 myLogo.setAttribute('src', logo);

src/modules/comments.js

@@ -0,0 +1,86 @@
+import { postComment } from '../apis/requests.js';
+
+export default async (modal, meal) => {
+  modal.innerHTML = `
+        <div class="recipe-details-image w-full mobile-div relative">
+          <img
+            alt=${meal.strMeal}
+            src=${meal.strMealThumb}
+            class="recipe-image w-11/12 mx-auto md:max-w-full rounded-lg md:rounded-lg mobile"
+          />
+        </div>
+      </div>
+    
+      <h2 class="comment-count-header">Commment (0) </h2>
+      <ul class="comment-display">
+    
+      </ul>
+      
+      <h2 class="comment-header">Add Comment</h2>
+      <form>
+      <input type="text" class="username" placeholder = "Your name" required/>
+      <textarea placeholder="Your comment" class="comment" required></textarea>
+      <input type="submit" class="submitBtn" value="Comment" />
+   </form>
+     
+     
+    </div>
+  </div>`;
+
+  modal.parentElement.classList.add('showRecipe');
+  const btn = document.querySelector('.submitBtn');
+  const username = document.querySelector('.username');
+  const comment = document.querySelector('.comment');
+  const commentCount = document.querySelector('.comment-count-header');
+  const ul = document.querySelector('.comment-display');
+  btn.addEventListener('click', async (e) => {
+    e.preventDefault();
+
+    if (username.value.trim() === '') return;
+    if (comment.value.trim() === '') return;
+
+    const userVal = username.value;
+    const commentVal = comment.value;
+    const id = meal.idMeal;
+    const post = { item_id: id, username: userVal, comment: commentVal };
+    btn.value = 'Processing...';
+    btn.disabled = true;
+    await postComment(post);
+    const response = await fetch(
+      `https://us-central1-involvement-api.cloudfunctions.net/capstoneApi/apps/XkZb08sfqWimSB3Sqtb3/comments?item_id=${id}`,
+    );
+    const comments = await response.json();
+
+    ul.innerHTML = '';
+    comments.forEach((comPost) => {
+      ul.innerHTML += `
+          
+        <li><p>${comPost.creation_date}</p><p>${comPost.username}</p><p>${comPost.comment}</p></li>
+    `;
+      commentCount.innerHTML = '';
+
+      commentCount.innerHTML = `Comments (${comments.length})`;
+      btn.value = 'Comment';
+      btn.disabled = false;
+      username.value = '';
+      comment.value = '';
+    });
+  });
+
+  const response = await fetch(
+    `https://us-central1-involvement-api.cloudfunctions.net/capstoneApi/apps/XkZb08sfqWimSB3Sqtb3/comments?item_id=${meal.idMeal}`,
+  );
+  const comments = await response.json();
+
+  if (!comments.length) return;
+
+  comments.forEach((comPost) => {
+    ul.innerHTML += `
+      
+    <li><p>${comPost.creation_date}</p><p>${comPost.username}:</p><p>"${comPost.comment}"</p></li>
+`;
+    commentCount.innerHTML = '';
+
+    commentCount.innerHTML = `Comments (${comments.length})`;
+  });
+};

src/defaultTemplate.js → src/modules/defaultTemplate.js

@@ -1,5 +1,5 @@
 /* eslint-disable import/no-cycle */
-import { getMealsLength } from './apis/food.js';
+import { getMealsLength } from '../apis/food.js';
 
 export default async (defaultFood, mealsEl, getLike, resultHeading) => {
   const meals = await defaultFood;
@@ -31,7 +31,7 @@ export default async (defaultFood, mealsEl, getLike, resultHeading) => {
       
         </div>
         <div class="comment-like">
-          <button class="meal-btn" data-mealID="${
+          <button class="meal-btn comments-btn" data-mealID="${
   meal.idMeal
 }">Comments<svg class="meal-svg" width="3" height="6" viewBox="0 0 3 6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style=""><path d="M0 0L3 3L0 6"></path></svg>
           </button>

src/template.js → src/modules/template.js

@@ -1,5 +1,5 @@
 /* eslint-disable import/no-cycle */
-import { getMealsLength } from './apis/food.js';
+import { getMealsLength } from '../apis/food.js';
 
 export default async (searchFood, mealsEl, resultHeading) => {
   // Change HTML