From eb3cacf8a5e620233a61172f2760d3297a597fb2 Mon Sep 17 00:00:00 2001 From: Omar Farouq Date: Fri, 2 Dec 2022 18:27:55 +0200 Subject: [PATCH 1/8] fix linters --- .eslintrc.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/.eslintrc.json b/.eslintrc.json index 606da72..d7f2717 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -16,7 +16,8 @@ "eol-last": "off", "import/extensions": [ 1, { "js": "always", "json": "always" - }] + }], + "import/no-cycle": 0 }, "ignorePatterns": [ "dist/", From e023cb9876ff1064050b0da92d486b88e39f29e1 Mon Sep 17 00:00:00 2001 From: Omar Farouq Date: Fri, 2 Dec 2022 18:28:12 +0200 Subject: [PATCH 2/8] add comments section --- src/index.html | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/index.html b/src/index.html index ef834dd..61eaf46 100644 --- a/src/index.html +++ b/src/index.html @@ -84,6 +84,9 @@
+ +
+
Date: Fri, 2 Dec 2022 18:28:26 +0200 Subject: [PATCH 3/8] add comment section styles --- src/style.css | 112 +++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 111 insertions(+), 1 deletion(-) diff --git a/src/style.css b/src/style.css index 20b5b8f..22c307d 100644 --- a/src/style.css +++ b/src/style.css @@ -198,12 +198,26 @@ main { margin-left: 0; } +.comments { + display: flex; + flex-direction: column; + margin: auto; + gap: 10px; +} + +.displayed-comments { + display: flex; + flex-direction: column; + align-items: flex-start; +} + form { display: flex; flex-direction: column; max-width: 800px; margin: auto; - padding: 15px 10px; + padding: 15px 0; + text-align: left; } form input[type="text"], @@ -225,6 +239,12 @@ form input[type="submit"] { font-size: 20px; } +.form-control { + display: flex; + flex-direction: column; + width: 70%; +} + .comment-count-header { margin-bottom: 20px; font-weight: 700; @@ -267,3 +287,93 @@ li.page-item.active { .ease-out { transition-timing-function: cubic-bezier(0, 0, 0.2, 1); } + +/* Styling Modal */ +.modal { + display: block; + position: fixed; + left: 0; + top: 0; + height: 100vh; + width: 100%; + overflow: auto; + background-color: rgba(65, 63, 63, 0.6); +} + +.modal-content { + background-color: #fff; + margin: 40px auto; + width: 60%; + border-radius: 8px; + padding: 6px; +} + +.close-modal { + float: right; + font-weight: 600; + font-size: 30px; + color: #374151; + margin-right: 10px; +} + +.close-modal:hover { + cursor: pointer; +} + +.modal .container { + border: 1px solid#ccc; + height: 80%; + border-radius: 8px; +} + +.inner-content { + width: 70%; + margin: 20px auto; + padding: 20px; +} + +.inner-content img { + width: 100%; + height: 300px; + border-radius: 8px; +} + +.flex-items { + display: flex; + justify-content: space-between; + margin: 25px 0; +} + +.text-box { + margin-top: 40px; +} + +.heading { + font-weight: 900; + font-size: 30px; +} + +.sub-heading { + font-weight: 600; + font-size: 20px; +} + +.comments-form { + margin-top: 10px; +} + +.comments-form input, +.comments-form input[type="text"] { + margin: 10px 0; + padding: 5px; + border-radius: 1px; + border: 2px solid #3741518a; +} + +.comment-btn { + margin: 10px 0; + padding: 7px 12px; + color: white; + background-color: #374151; + width: 30%; +} From 899a9c9386dd6b7466b263d8870ae933ba6daa37 Mon Sep 17 00:00:00 2001 From: Omar Farouq Date: Fri, 2 Dec 2022 18:29:19 +0200 Subject: [PATCH 4/8] add comments pop up --- src/modal/comments-popup.js | 67 +++++++++++++++++++++++++++++++++++++ 1 file changed, 67 insertions(+) create mode 100644 src/modal/comments-popup.js diff --git a/src/modal/comments-popup.js b/src/modal/comments-popup.js new file mode 100644 index 0000000..ce5afe2 --- /dev/null +++ b/src/modal/comments-popup.js @@ -0,0 +1,67 @@ +import { meals } from '../apis/food.js'; + +const commentsPopup = () => { + const commentsBtn = document.querySelectorAll('.comments-btn'); + const commentsModal = document.querySelector('.comments-modal'); + + for (let i = 0; i < commentsBtn.length; i += 1) { + commentsBtn[i].addEventListener('click', () => { + commentsModal.innerHTML = ` + + `; + const closeBtn = () => { + const closeBtn = document.querySelector('.close-modal'); + closeBtn.addEventListener('click', () => { + commentsModal.innerHTML = ''; + }); + }; + closeBtn(); + }); + } +}; + +export default commentsPopup; \ No newline at end of file From e0fdf18c1544e140c4bc806e0b6ef1a89130f26a Mon Sep 17 00:00:00 2001 From: Omar Farouq Date: Fri, 2 Dec 2022 18:29:28 +0200 Subject: [PATCH 5/8] update script files --- src/apis/food.js | 3 ++- src/defaultTemplate.js | 4 +++- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/src/apis/food.js b/src/apis/food.js index 9252cd5..cf80484 100644 --- a/src/apis/food.js +++ b/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; diff --git a/src/defaultTemplate.js b/src/defaultTemplate.js index 4938f10..02df1f1 100644 --- a/src/defaultTemplate.js +++ b/src/defaultTemplate.js @@ -1,5 +1,6 @@ /* eslint-disable import/no-cycle */ import { getMealsLength } from './apis/food.js'; +import commentsPopup from './modal/comments-popup.js'; export default async (defaultFood, mealsEl, getLike, resultHeading) => { const meals = await defaultFood; @@ -31,7 +32,7 @@ export default async (defaultFood, mealsEl, getLike, resultHeading) => {
- @@ -53,6 +54,7 @@ export default async (defaultFood, mealsEl, getLike, resultHeading) => { ) .join(''); getMealsLength(); + commentsPopup(); } const hearts = document.querySelectorAll('.fa-heart'); From 7fa2ee4bdcd827a9713c28a09f128527672f3c14 Mon Sep 17 00:00:00 2001 From: Omar Farouq Date: Fri, 2 Dec 2022 23:46:53 +0200 Subject: [PATCH 6/8] update styles --- src/base.css | 2 +- src/style.css | 38 +++++++++++++++++++++++++++++++++++--- 2 files changed, 36 insertions(+), 4 deletions(-) diff --git a/src/base.css b/src/base.css index 15a0877..640b467 100644 --- a/src/base.css +++ b/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 { diff --git a/src/style.css b/src/style.css index 22c307d..4c533c1 100644 --- a/src/style.css +++ b/src/style.css @@ -150,6 +150,15 @@ main { padding: 2rem 0; } +.meal-details-content { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + text-align: center; + margin: auto; +} + .meal-details::-webkit-scrollbar { width: 10px; } @@ -165,6 +174,7 @@ main { .meal-details.showRecipe { display: block; + width: 60%; } .single-meal-p { @@ -249,6 +259,7 @@ form input[type="submit"] { margin-bottom: 20px; font-weight: 700; font-size: 2rem; + margin-top: 30px; } .comment-header { @@ -258,14 +269,18 @@ form input[type="submit"] { .comment-display { max-width: 800px; - margin: 50px auto; + margin: 25px auto; + display: flex; + flex-direction: column; + gap: 10px; + align-items: self-start; } .comment-display li { display: flex; flex-direction: row; justify-content: space-between; - margin-left: 20px; + gap: 20px; } /* active page button styles */ @@ -358,8 +373,25 @@ li.page-item.active { font-size: 20px; } +.comments-list { + display: flex; + flex-direction: column; +} + +.comment-li { + display: flex; + flex-direction: row; + gap: 10px; + margin: 1px 0; +} + .comments-form { - margin-top: 10px; + display: flex; + flex-direction: column; + max-width: 800px; + margin: auto; + padding: 15px 0; + text-align: left; } .comments-form input, From ec230ea81cb0332400a011268c9173b2898d0595 Mon Sep 17 00:00:00 2001 From: Omar Farouq Date: Fri, 2 Dec 2022 23:47:14 +0200 Subject: [PATCH 7/8] update html file --- src/index.html | 1 + 1 file changed, 1 insertion(+) diff --git a/src/index.html b/src/index.html index 61eaf46..6e0dda8 100644 --- a/src/index.html +++ b/src/index.html @@ -203,6 +203,7 @@

Contact

+ From 86132b010c9ade220ac3285a8188e6dd188c7bb9 Mon Sep 17 00:00:00 2001 From: Omar Farouq Date: Fri, 2 Dec 2022 23:47:31 +0200 Subject: [PATCH 8/8] update script files --- src/apis/index.js | 0 src/apis/requests.js | 34 +++++++++++ src/compnents.js | 0 src/index.js | 7 ++- src/modal/comments-popup.js | 67 ---------------------- src/modal/index.js | 0 src/modules/comments.js | 86 ++++++++++++++++++++++++++++ src/{ => modules}/defaultTemplate.js | 4 +- src/{ => modules}/template.js | 2 +- 9 files changed, 126 insertions(+), 74 deletions(-) delete mode 100644 src/apis/index.js create mode 100644 src/apis/requests.js delete mode 100644 src/compnents.js delete mode 100644 src/modal/comments-popup.js delete mode 100644 src/modal/index.js create mode 100644 src/modules/comments.js rename src/{ => modules}/defaultTemplate.js (95%) rename src/{ => modules}/template.js (97%) diff --git a/src/apis/index.js b/src/apis/index.js deleted file mode 100644 index e69de29..0000000 diff --git a/src/apis/requests.js b/src/apis/requests.js new file mode 100644 index 0000000..2d31db7 --- /dev/null +++ b/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) + } +}; diff --git a/src/compnents.js b/src/compnents.js deleted file mode 100644 index e69de29..0000000 diff --git a/src/index.js b/src/index.js index 9b0bacf..754d622 100644 --- a/src/index.js +++ b/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); diff --git a/src/modal/comments-popup.js b/src/modal/comments-popup.js deleted file mode 100644 index ce5afe2..0000000 --- a/src/modal/comments-popup.js +++ /dev/null @@ -1,67 +0,0 @@ -import { meals } from '../apis/food.js'; - -const commentsPopup = () => { - const commentsBtn = document.querySelectorAll('.comments-btn'); - const commentsModal = document.querySelector('.comments-modal'); - - for (let i = 0; i < commentsBtn.length; i += 1) { - commentsBtn[i].addEventListener('click', () => { - commentsModal.innerHTML = ` - - `; - const closeBtn = () => { - const closeBtn = document.querySelector('.close-modal'); - closeBtn.addEventListener('click', () => { - commentsModal.innerHTML = ''; - }); - }; - closeBtn(); - }); - } -}; - -export default commentsPopup; \ No newline at end of file diff --git a/src/modal/index.js b/src/modal/index.js deleted file mode 100644 index e69de29..0000000 diff --git a/src/modules/comments.js b/src/modules/comments.js new file mode 100644 index 0000000..528b887 --- /dev/null +++ b/src/modules/comments.js @@ -0,0 +1,86 @@ +import { postComment } from '../apis/requests.js'; + +export default async (modal, meal) => { + modal.innerHTML = ` +
+ ${meal.strMeal} +
+ + +

Commment (0)

+
    + +
+ +

Add Comment

+
+ + + +
+ + + + `; + + 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 += ` + +

  • ${comPost.creation_date}

    ${comPost.username}

    ${comPost.comment}

    • + `; + 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 += ` + +

  • ${comPost.creation_date}

    ${comPost.username}:

    "${comPost.comment}"

    • +`; + commentCount.innerHTML = ''; + + commentCount.innerHTML = `Comments (${comments.length})`; + }); +}; diff --git a/src/defaultTemplate.js b/src/modules/defaultTemplate.js similarity index 95% rename from src/defaultTemplate.js rename to src/modules/defaultTemplate.js index 02df1f1..edb6518 100644 --- a/src/defaultTemplate.js +++ b/src/modules/defaultTemplate.js @@ -1,6 +1,5 @@ /* eslint-disable import/no-cycle */ -import { getMealsLength } from './apis/food.js'; -import commentsPopup from './modal/comments-popup.js'; +import { getMealsLength } from '../apis/food.js'; export default async (defaultFood, mealsEl, getLike, resultHeading) => { const meals = await defaultFood; @@ -54,7 +53,6 @@ export default async (defaultFood, mealsEl, getLike, resultHeading) => { ) .join(''); getMealsLength(); - commentsPopup(); } const hearts = document.querySelectorAll('.fa-heart'); diff --git a/src/template.js b/src/modules/template.js similarity index 97% rename from src/template.js rename to src/modules/template.js index 8799912..47e62b7 100644 --- a/src/template.js +++ b/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