From 35f44049a263d598ce5a89376c3d1922fc1d62a7 Mon Sep 17 00:00:00 2001 From: rheabhutada02 <83424582+rheabhutada02@users.noreply.github.com> Date: Thu, 17 Nov 2022 18:45:53 -0800 Subject: [PATCH 1/9] updated crud features to work better Co-authored-by: look-its-ashton Co-authored-by: Kara Hoagland Co-authored-by: Gavyn Ezell --- source/CreatePage.html | 8 +-- source/ReviewDetails.html | 1 + source/assets/scripts/CreatePage.js | 78 ++++++++++++++++++++++++++ source/assets/scripts/ReviewCard.js | 39 +++++-------- source/assets/scripts/ReviewDetails.js | 68 ++++++++++------------ source/assets/scripts/localStorage.js | 18 ++++-- source/assets/scripts/main.js | 14 +++-- source/index.html | 6 +- 8 files changed, 150 insertions(+), 82 deletions(-) create mode 100644 source/assets/scripts/CreatePage.js diff --git a/source/CreatePage.html b/source/CreatePage.html index 64dfe78..bc37e7a 100644 --- a/source/CreatePage.html +++ b/source/CreatePage.html @@ -14,12 +14,13 @@ - - + + +
Pic: @@ -69,8 +70,7 @@
- - +
diff --git a/source/ReviewDetails.html b/source/ReviewDetails.html index 74b6365..c790b4e 100644 --- a/source/ReviewDetails.html +++ b/source/ReviewDetails.html @@ -19,6 +19,7 @@
+
diff --git a/source/assets/scripts/CreatePage.js b/source/assets/scripts/CreatePage.js new file mode 100644 index 0000000..f334be6 --- /dev/null +++ b/source/assets/scripts/CreatePage.js @@ -0,0 +1,78 @@ +window.addEventListener("DOMContentLoaded", init); + +function init() { + // get next id + + // creates the key + initFormHandler(); + +} + +function initFormHandler() { + + //accessing form components + let tagContainer = document.getElementById("tag-container-form"); + let form = document.querySelector("form"); + + form.addEventListener("submit", function(e){ + /* + * User submits the form for their review. + * We create reviewCard and put in storage + */ + e.preventDefault(); + let formData = new FormData(form); + let reviewObject = {}; + for (let [key, value] of formData) { + console.log(`${key}`); + console.log(`${value}`); + if (`${key}` !== "tag-form") { + reviewObject[`${key}`] = `${value}`; + } + } + reviewObject["tags"] = []; + + let tags = document.querySelectorAll(".tag"); + for(let i = 0; i < tags.length; i ++) { + reviewObject["tags"].push(tags[i].innerHTML); + tagContainer.removeChild(tags[i]); + } + + //grabbing the nextID, and putting our review object in storage associated with the ID + let nextReviewId = JSON.parse(localStorage.getItem("nextID")); + reviewObject["reviewID"] = nextReviewId; + + localStorage.setItem("review"+nextReviewId, JSON.stringify(reviewObject)); + sessionStorage.setItem("currID", JSON.stringify(nextReviewId)); + + //updating our activeIDS list + let tempIdArr = JSON.parse(localStorage.getItem("activeIDS")); + tempIdArr.push(nextReviewId); + localStorage.setItem("activeIDS", JSON.stringify(tempIdArr)); + + + //increment nextID for next review creation + nextReviewId++; + localStorage.setItem("nextID", JSON.stringify(nextReviewId)); + + window.location.assign('./ReviewDetails.html'); + + }); + + let tagAddBtn = document.getElementById("tagAdd"); + tagAddBtn.addEventListener("click", ()=> { + let tagField = document.getElementById("tag-form"); + if (tagField.value.length > 0) { + let tagLabel = document.createElement("label"); + tagLabel.innerHTML = tagField.value; + tagLabel.setAttribute("class","tag"); + tagLabel.addEventListener("click",()=> { + tagContainer.removeChild(tagLabel); + }); + + tagContainer.append(tagLabel); + tagField.value = ""; + + } + }); + +} diff --git a/source/assets/scripts/ReviewCard.js b/source/assets/scripts/ReviewCard.js index 07df6a6..d7bd1ce 100644 --- a/source/assets/scripts/ReviewCard.js +++ b/source/assets/scripts/ReviewCard.js @@ -6,7 +6,6 @@ class ReviewCard extends HTMLElement { constructor() { super(); - let shadowEl = this.attachShadow({mode:"open"}); let articleEl = document.createElement("article"); @@ -88,9 +87,9 @@ class ReviewCard extends HTMLElement { //attach event listener to each recipe-card this.addEventListener("click", (event) => { console.log(event.target); - console.log(event.target.data); + console.log(event.target.reviewId); //Option 1: sending current data to second html page using localStorage (could also just store index) - sessionStorage.setItem("current", JSON.stringify(event.target.data)); + sessionStorage.setItem("currID", JSON.stringify(event.target.data.reviewID)); window.location.assign("./ReviewDetails.html"); /* //Option 2: sending current data to second html page using string query w/ url (currently not storing value) @@ -133,12 +132,18 @@ class ReviewCard extends HTMLElement { let articleEl = this.shadowEl.querySelector("article"); // setting the article elements for the review card + this.reviewID = data["reviewID"]; //image setup let mealImg = document.createElement("img"); mealImg.setAttribute("id", "a-mealImg"); - mealImg.setAttribute("src",data["mealImg"]); mealImg.setAttribute("alt",data["imgAlt"]); + if(data["mealImg"] != ""){ + mealImg.setAttribute("src",data["mealImg"]); + } + else{ + mealImg.setAttribute("src", "./assets/images/icons/plate_with_cutlery.png"); + } //meal name setup let mealLabel = document.createElement("label"); @@ -147,26 +152,6 @@ class ReviewCard extends HTMLElement { mealLabel.innerHTML = data["mealName"]; //restaurant name setup - /* - //review page link - //giving it functionality to save the review card's info to session storage for loading the review page - let reviewLink = document.createElement('a'); - reviewLink.setAttribute('href','./review.html') - reviewLink.innerHTML = 'review page' - reviewLink.addEventListener('click', () => { - sessionStorage.clear(); - let currReview = { - "imgSrc": data['imgSrc'], - "imgAlt": data['imgAlt'], - "mealName": data['mealName'], - "restaurant": data['restaurant'], - "comments": data['comments'], - "rating": data['rating'], - "tags": data['tags'] - } - sessionStorage.setItem('currReview', JSON.stringify(currReview)); - }); -*/ let restaurantLabel = document.createElement("label"); restaurantLabel.setAttribute("id", "a-restaurant"); restaurantLabel.setAttribute("class","restaurant-name"); @@ -197,14 +182,15 @@ class ReviewCard extends HTMLElement { for (let i = 0; i < data["tags"].length; i++) { let newTag = document.createElement("label"); newTag.setAttribute("class","tag"); - newTag.innerHTML = data["tags"][i] + " "; + newTag.innerHTML = data["tags"][i]; tagContainer.append(newTag); } } + //adding final ID to data! + articleEl.append(mealImg); articleEl.append(mealLabel); - //articleEl.append(reviewLink) articleEl.append(restaurantLabel); articleEl.append(ratingDiv); articleEl.append(tagContainer); @@ -237,6 +223,7 @@ class ReviewCard extends HTMLElement { let dataContainer = {}; // getting the article elements for the review card + dataContainer["reviewID"] = this.reviewID; //get image let mealImg = this.shadowEl.getElementById("a-mealImg"); diff --git a/source/assets/scripts/ReviewDetails.js b/source/assets/scripts/ReviewDetails.js index 8447ebe..70a0b2d 100644 --- a/source/assets/scripts/ReviewDetails.js +++ b/source/assets/scripts/ReviewDetails.js @@ -11,23 +11,18 @@ function init(){ function setupDelete(){ let deleteBtn = document.getElementById("delete-btn"); - let reviews = getReviewsFromStorage(); - let current = JSON.parse(sessionStorage.getItem("current")); + let currID = JSON.parse(sessionStorage.getItem("currID")); + let activeIDS = JSON.parse(localStorage.getItem("activeIDS")); deleteBtn.addEventListener("click", function(){ if(window.confirm("Are you sure you want to delete this entry?")){ - //delete function - if(current){ - console.log(current); - for(let i = 0; i < reviews.length; i++){ - console.log(reviews[i]); - if(reviews[i]["mealName"] == current["mealName"] && reviews[i]["restaurant"] == current["restaurant"]){ - console.log("match found"); - reviews.splice(i,1); - saveReviewsToStorage(reviews); - sessionStorage.removeItem("current"); - window.location.assign("./index.html"); - break; - } + for (let i in activeIDS) { + if (activeIDS[i] == currID) { + activeIDS.splice(i,1); + localStorage.setItem('activeIDS', JSON.stringify(activeIDS)); + sessionStorage.removeItem('currID'); + localStorage.removeItem(`review${currID}`); + window.location.assign("./index.html"); + break; } } } @@ -36,30 +31,31 @@ function setupDelete(){ function setupUpdate(){ let updateBtn = document.getElementById("update-btn"); - let reviews = getReviewsFromStorage(); - let current = JSON.parse(sessionStorage.getItem("current")); + let currID = JSON.parse(sessionStorage.getItem("currID")); + let currReview = JSON.parse(localStorage.getItem(`review${currID}`)); let form = document.getElementById("update-food-entry"); updateBtn.addEventListener("click", function(){ //update function - if(current){ - console.log(current); + if(currReview){ form.style.display = "block"; let tagContainer = document.getElementById("tag-container-form"); - console.log(document.querySelectorAll("#update-food-entry input")); //Set value of each input element to current's values - document.getElementById("mealImg").defaultValue = current["mealImg"]; - document.getElementById("imgAlt").defaultValue = current["imgAlt"]; - document.getElementById("mealName").defaultValue = current["mealName"]; - document.getElementById("comments").textContent = current["comments"]; - document.getElementById("rating-" + `${current["rating"]}`).checked = true; - document.getElementById("restaurant").defaultValue = current["restaurant"]; + document.getElementById("mealImg").defaultValue = currReview["mealImg"]; + document.getElementById("imgAlt").defaultValue = currReview["imgAlt"]; + document.getElementById("mealName").defaultValue = currReview["mealName"]; + document.getElementById("comments").textContent = currReview["comments"]; + document.getElementById("s" + `${currReview["rating"]}`).checked = true; + document.getElementById("restaurant").defaultValue = currReview["restaurant"]; - if(current["tags"]){ - for (let i = 0; i < current["tags"].length; i++) { + if(currReview["tags"]){ + while (tagContainer.firstChild) { + tagContainer.removeChild(tagContainer.firstChild); + } + for (let i = 0; i < currReview["tags"].length; i++) { let newTag = document.createElement("label"); newTag.setAttribute("class","tag"); - newTag.innerHTML = current["tags"][i] + " "; + newTag.innerHTML = currReview["tags"][i]; newTag.addEventListener("click",()=> { tagContainer.removeChild(newTag); }); @@ -89,16 +85,10 @@ function setupUpdate(){ tagContainer.removeChild(tags[i]); } - for(let i = 0; i < reviews.length; i++){ - console.log(reviews[i]); - if(reviews[i]["mealName"] == current["mealName"] && reviews[i]["restaurant"] == current["restaurant"]){ - console.log("match found"); - reviews.splice(i,1,newData); - saveReviewsToStorage(reviews); - sessionStorage.setItem("current", JSON.stringify(newData)); - break; - } - } + newData["reviewID"] = currID; + + + localStorage.setItem("review"+currID, JSON.stringify(newData)); form.style.display = "none"; diff --git a/source/assets/scripts/localStorage.js b/source/assets/scripts/localStorage.js index 48fc891..f160d1d 100644 --- a/source/assets/scripts/localStorage.js +++ b/source/assets/scripts/localStorage.js @@ -2,11 +2,19 @@ * @returns {Array} An array of reviews found in localStorage */ export function getReviewsFromStorage() { - let result = JSON.parse(localStorage.getItem("reviews")); - if (result) { - return result; + if (!(localStorage.getItem("activeIDS"))) { + // we wanna init the active ID array and start the nextID count + localStorage.setItem("activeIDS", JSON.stringify([])); + localStorage.setItem("nextID", JSON.stringify(0)); } - return new Array(0); + //iterate thru activeIDS + let activeIDS = JSON.parse(localStorage.getItem("activeIDS")); + let reviews = [] + for (let i = 0; i < activeIDS.length; i++) { + let currReview = JSON.parse(localStorage.getItem('review'+activeIDS[i])); + reviews.push(currReview); + } + return reviews; } /** @@ -15,5 +23,5 @@ export function getReviewsFromStorage() { * @param {Array} reviews An array of reviews */ export function saveReviewsToStorage(reviews) { - localStorage.setItem("reviews", JSON.stringify(reviews)); + localStorage.setItem(`review${reviewId}`, JSON.stringify(reviews)); } diff --git a/source/assets/scripts/main.js b/source/assets/scripts/main.js index 9d37c44..0c76db4 100644 --- a/source/assets/scripts/main.js +++ b/source/assets/scripts/main.js @@ -13,6 +13,7 @@ function init() { initFormHandler(); } + /** * @param {Array} reviews An array of reviews */ @@ -33,14 +34,14 @@ function addReviewsToDocument(reviews) { */ function initFormHandler() { - /* //btn to create form (could be its own function?) - let createBtn = document.getElementById("create"); + let createBtn = document.getElementById("create-btn"); createBtn.addEventListener("click", function(){ window.location.assign("./CreatePage.html"); - });*/ - + }); + //accessing form components + /* let tagContainer = document.getElementById("tag-container-form"); let form = document.querySelector("form"); @@ -48,7 +49,6 @@ function initFormHandler() { /* * User submits the form for their review. * We create reviewCard and put in storage - */ let formData = new FormData(form); let reviewObject = {}; for (let [key, value] of formData) { @@ -74,6 +74,9 @@ function initFormHandler() { let mainEl = document.querySelector("main"); mainEl.append(newReview); + // TODO: assign an ID to be used for referencing this object form the activeIDs array and the tag arrays + let ID = localStorage.nextID; + let storedReviews = getReviewsFromStorage(); storedReviews.push(reviewObject); saveReviewsToStorage(storedReviews); @@ -115,5 +118,6 @@ function initFormHandler() { } }); + */ } diff --git a/source/index.html b/source/index.html index 4418ea0..c83fe94 100644 --- a/source/index.html +++ b/source/index.html @@ -22,8 +22,8 @@
- -
+ + +
--> From 6493fbd17197aff98519726fa5b2422681880465 Mon Sep 17 00:00:00 2001 From: Arthur Lu Date: Fri, 18 Nov 2022 07:13:53 +0000 Subject: [PATCH 2/9] modularize localStorage calls into localStorage.js in preparation for unit testing --- source/assets/scripts/CreatePage.js | 18 +-- source/assets/scripts/ReviewDetails.js | 147 ++++++++++++------------- source/assets/scripts/localStorage.js | 78 ++++++++++--- source/assets/scripts/main.js | 4 +- 4 files changed, 139 insertions(+), 108 deletions(-) diff --git a/source/assets/scripts/CreatePage.js b/source/assets/scripts/CreatePage.js index f334be6..fca6dc5 100644 --- a/source/assets/scripts/CreatePage.js +++ b/source/assets/scripts/CreatePage.js @@ -1,3 +1,5 @@ +import { newReviewToStorage } from "./localStorage.js"; + window.addEventListener("DOMContentLoaded", init); function init() { @@ -37,23 +39,9 @@ function initFormHandler() { tagContainer.removeChild(tags[i]); } - //grabbing the nextID, and putting our review object in storage associated with the ID - let nextReviewId = JSON.parse(localStorage.getItem("nextID")); - reviewObject["reviewID"] = nextReviewId; - - localStorage.setItem("review"+nextReviewId, JSON.stringify(reviewObject)); + let nextReviewId = newReviewToStorage(reviewObject); sessionStorage.setItem("currID", JSON.stringify(nextReviewId)); - //updating our activeIDS list - let tempIdArr = JSON.parse(localStorage.getItem("activeIDS")); - tempIdArr.push(nextReviewId); - localStorage.setItem("activeIDS", JSON.stringify(tempIdArr)); - - - //increment nextID for next review creation - nextReviewId++; - localStorage.setItem("nextID", JSON.stringify(nextReviewId)); - window.location.assign('./ReviewDetails.html'); }); diff --git a/source/assets/scripts/ReviewDetails.js b/source/assets/scripts/ReviewDetails.js index 70a0b2d..f2545fa 100644 --- a/source/assets/scripts/ReviewDetails.js +++ b/source/assets/scripts/ReviewDetails.js @@ -1,5 +1,5 @@ //reviewDetails.js -import {getReviewsFromStorage, saveReviewsToStorage} from "./localStorage.js"; +import {deleteReviewFromStorage, getReviewFromStorage, updateReviewToStorage} from "./localStorage.js"; // Run the init() function when the page has loaded window.addEventListener("DOMContentLoaded", init); @@ -12,19 +12,11 @@ function init(){ function setupDelete(){ let deleteBtn = document.getElementById("delete-btn"); let currID = JSON.parse(sessionStorage.getItem("currID")); - let activeIDS = JSON.parse(localStorage.getItem("activeIDS")); deleteBtn.addEventListener("click", function(){ if(window.confirm("Are you sure you want to delete this entry?")){ - for (let i in activeIDS) { - if (activeIDS[i] == currID) { - activeIDS.splice(i,1); - localStorage.setItem('activeIDS', JSON.stringify(activeIDS)); - sessionStorage.removeItem('currID'); - localStorage.removeItem(`review${currID}`); - window.location.assign("./index.html"); - break; - } - } + deleteReviewFromStorage(currID); + sessionStorage.removeItem('currID'); + window.location.assign("./index.html"); } }); } @@ -32,83 +24,82 @@ function setupDelete(){ function setupUpdate(){ let updateBtn = document.getElementById("update-btn"); let currID = JSON.parse(sessionStorage.getItem("currID")); - let currReview = JSON.parse(localStorage.getItem(`review${currID}`)); + let currReview = getReviewFromStorage(currID); let form = document.getElementById("update-food-entry"); updateBtn.addEventListener("click", function(){ //update function - if(currReview){ - form.style.display = "block"; - let tagContainer = document.getElementById("tag-container-form"); - //Set value of each input element to current's values - document.getElementById("mealImg").defaultValue = currReview["mealImg"]; - document.getElementById("imgAlt").defaultValue = currReview["imgAlt"]; - document.getElementById("mealName").defaultValue = currReview["mealName"]; - document.getElementById("comments").textContent = currReview["comments"]; - document.getElementById("s" + `${currReview["rating"]}`).checked = true; - document.getElementById("restaurant").defaultValue = currReview["restaurant"]; + form.style.display = "block"; + form.classList.remove("hidden"); + let tagContainer = document.getElementById("tag-container-form"); - if(currReview["tags"]){ - while (tagContainer.firstChild) { - tagContainer.removeChild(tagContainer.firstChild); - } - for (let i = 0; i < currReview["tags"].length; i++) { - let newTag = document.createElement("label"); - newTag.setAttribute("class","tag"); - newTag.innerHTML = currReview["tags"][i]; - newTag.addEventListener("click",()=> { - tagContainer.removeChild(newTag); - }); - tagContainer.append(newTag); + //Set value of each input element to current's values + document.getElementById("mealImg").defaultValue = currReview["mealImg"]; + document.getElementById("imgAlt").defaultValue = currReview["imgAlt"]; + document.getElementById("mealName").defaultValue = currReview["mealName"]; + document.getElementById("comments").textContent = currReview["comments"]; + document.getElementById("s" + `${currReview["rating"]}`).checked = true; + document.getElementById("restaurant").defaultValue = currReview["restaurant"]; + + if(currReview["tags"]){ + while (tagContainer.firstChild) { + tagContainer.removeChild(tagContainer.firstChild); + } + for (let i = 0; i < currReview["tags"].length; i++) { + let newTag = document.createElement("label"); + newTag.setAttribute("class","tag"); + newTag.innerHTML = currReview["tags"][i]; + newTag.addEventListener("click",()=> { + tagContainer.removeChild(newTag); + }); + tagContainer.append(newTag); + } + } + //Take formdata values as newData when submit + form.addEventListener("submit", function(){ + /* + * User submits the form for their review. + * We create reviewCard and put in storage + */ + let formData = new FormData(form); + let newData = {}; + for (let [key, value] of formData) { + console.log(`${key}`); + console.log(`${value}`); + if (`${key}` !== "tag-form") { + newData[`${key}`] = `${value}`; } } - //Take formdata values as newData when submit - form.addEventListener("submit", function(){ - /* - * User submits the form for their review. - * We create reviewCard and put in storage - */ - let formData = new FormData(form); - let newData = {}; - for (let [key, value] of formData) { - console.log(`${key}`); - console.log(`${value}`); - if (`${key}` !== "tag-form") { - newData[`${key}`] = `${value}`; - } - } - newData["tags"] = []; - - let tags = document.querySelectorAll(".tag"); - for(let i = 0; i < tags.length; i ++) { - newData["tags"].push(tags[i].innerHTML); - tagContainer.removeChild(tags[i]); - } + newData["tags"] = []; + + let tags = document.querySelectorAll(".tag"); + for(let i = 0; i < tags.length; i ++) { + newData["tags"].push(tags[i].innerHTML); + tagContainer.removeChild(tags[i]); + } - newData["reviewID"] = currID; + newData["reviewID"] = currID; + updateReviewToStorage(currID, newData); - localStorage.setItem("review"+currID, JSON.stringify(newData)); + form.style.display = "none"; - form.style.display = "none"; + }); - }); - - let tagAddBtn = document.getElementById("tag-add-btn"); - tagAddBtn.addEventListener("click", ()=> { - let tagField = document.getElementById("tag-form"); - if (tagField.value.length > 0) { - let tagLabel = document.createElement("label"); - tagLabel.innerHTML = tagField.value; - tagLabel.setAttribute("class","tag"); - tagLabel.addEventListener("click",()=> { - tagContainer.removeChild(tagLabel); - }); - - tagContainer.append(tagLabel); - tagField.value = ""; - } - }); - } + let tagAddBtn = document.getElementById("tag-add-btn"); + tagAddBtn.addEventListener("click", ()=> { + let tagField = document.getElementById("tag-form"); + if (tagField.value.length > 0) { + let tagLabel = document.createElement("label"); + tagLabel.innerHTML = tagField.value; + tagLabel.setAttribute("class","tag"); + tagLabel.addEventListener("click",()=> { + tagContainer.removeChild(tagLabel); + }); + + tagContainer.append(tagLabel); + tagField.value = ""; + } + }); }); } diff --git a/source/assets/scripts/localStorage.js b/source/assets/scripts/localStorage.js index f160d1d..62b834d 100644 --- a/source/assets/scripts/localStorage.js +++ b/source/assets/scripts/localStorage.js @@ -1,7 +1,68 @@ /** - * @returns {Array} An array of reviews found in localStorage + * Creates a new review to storage and performs related meta tasks + * @param {Object} review to store + * @return {number} ID of the newly added review */ -export function getReviewsFromStorage() { +export function newReviewToStorage(review){ + //grabbing the nextID, and putting our review object in storage associated with the ID + let nextReviewId = JSON.parse(localStorage.getItem("nextID")); + review["reviewID"] = nextReviewId; + + // set the review entry to the review object + localStorage.setItem(`review${nextReviewId}`, JSON.stringify(review)); + + //updating our activeIDS list + let tempIdArr = JSON.parse(localStorage.getItem("activeIDS")); + tempIdArr.push(nextReviewId); + localStorage.setItem("activeIDS", JSON.stringify(tempIdArr)); + + //increment nextID for next review creation + nextReviewId++; + localStorage.setItem("nextID", JSON.stringify(nextReviewId)); + + return nextReviewId; +} + +/** + * Gets a single review by ID from storage + * @param {string} ID of the review to get + * @returns {Object} review object corresponding to param ID + */ +export function getReviewFromStorage(ID){ + return JSON.parse(localStorage.getItem(`review${ID}`)); +} + +/** + * Updates a single review by ID to storage + * @param {string} ID of review to update + * @param {Object} review to store + */ +export function updateReviewToStorage(ID, review){ + // set the review entry with ID to the review object + localStorage.setItem(`review${ID}`, JSON.stringify(review)); +} + +/** + * Deletes a review by ID from storage + * @param {string} ID of the review to delete + */ +export function deleteReviewFromStorage(ID){ + let activeIDS = JSON.parse(localStorage.getItem("activeIDS")); + + for (let i in activeIDS) { + if (activeIDS[i] == ID) { + activeIDS.splice(i,1); + localStorage.setItem('activeIDS', JSON.stringify(activeIDS)); + localStorage.removeItem(`review${ID}`) + return; + } + } + + console.error(`could not find review${ID} in localStorage`); +} + +// legacy function +export function getAllReviewsFromStorage() { if (!(localStorage.getItem("activeIDS"))) { // we wanna init the active ID array and start the nextID count localStorage.setItem("activeIDS", JSON.stringify([])); @@ -11,17 +72,8 @@ export function getReviewsFromStorage() { let activeIDS = JSON.parse(localStorage.getItem("activeIDS")); let reviews = [] for (let i = 0; i < activeIDS.length; i++) { - let currReview = JSON.parse(localStorage.getItem('review'+activeIDS[i])); + let currReview = JSON.parse(localStorage.getItem(`review${activeIDS[i]}`)); reviews.push(currReview); } return reviews; -} - -/** - * Takes in an array of reviews, converts it to a string, and then - * saves that string to 'reviews' in localStorage - * @param {Array} reviews An array of reviews - */ -export function saveReviewsToStorage(reviews) { - localStorage.setItem(`review${reviewId}`, JSON.stringify(reviews)); -} +} \ No newline at end of file diff --git a/source/assets/scripts/main.js b/source/assets/scripts/main.js index 0c76db4..331492e 100644 --- a/source/assets/scripts/main.js +++ b/source/assets/scripts/main.js @@ -1,12 +1,12 @@ // main.js -import {getReviewsFromStorage, saveReviewsToStorage} from "./localStorage.js"; +import {getAllReviewsFromStorage} from "./localStorage.js"; // Run the init() function when the page has loaded window.addEventListener("DOMContentLoaded", init); function init() { // Get the reviews from localStorage - let reviews = getReviewsFromStorage(); + let reviews = getAllReviewsFromStorage(); // Add each reviews to the
element addReviewsToDocument(reviews); // Add the event listeners to the form elements From 5e833386687d511ce074c7bf248ebaa2fe0c4b64 Mon Sep 17 00:00:00 2001 From: Arthur Lu Date: Fri, 18 Nov 2022 07:51:08 +0000 Subject: [PATCH 3/9] update unit tests to match new localStorage implementations --- source/assets/scripts/localStorage.test.js | 113 ++++++++++++++++----- 1 file changed, 86 insertions(+), 27 deletions(-) diff --git a/source/assets/scripts/localStorage.test.js b/source/assets/scripts/localStorage.test.js index 90ed2b7..94730d1 100644 --- a/source/assets/scripts/localStorage.test.js +++ b/source/assets/scripts/localStorage.test.js @@ -1,49 +1,108 @@ import {strict as assert} from "node:assert"; import {describe, it, beforeEach} from "mocha"; -import {saveReviewsToStorage, getReviewsFromStorage} from "./localStorage.js"; +import {newReviewToStorage, getReviewFromStorage, updateReviewToStorage, deleteReviewFromStorage, getAllReviewsFromStorage} from "./localStorage.js"; describe("test app localStorage interaction", () => { - beforeEach(() => { + before(() => { localStorage.clear(); + localStorage.setItem("activeIDS", JSON.stringify([])); + localStorage.setItem("nextID", JSON.stringify(0)); }); - it("get after init", () => { - assert.deepEqual(getReviewsFromStorage(), []); + it("test localStorage state after init", () => { + assert.deepEqual(getAllReviewsFromStorage(), []); + assert.deepEqual(JSON.parse(localStorage.getItem("activeIDS")), []); + assert.strictEqual(JSON.parse(localStorage.getItem("nextID")), 0); }); - it("store one then get", () => { - let reviews = [{ + + it("test localStorage state after adding one review", () => { + let review = { "imgSrc": "sample src", "imgAlt": "sample alt", "mealName": "sample name", "restaurant": "sample restaurant", "rating": 5, "tags": ["tag 1", "tag 2", "tag 3"] - }]; + }; - saveReviewsToStorage(reviews); - assert.deepEqual(getReviewsFromStorage(), reviews); + newReviewToStorage(review); + + review.reviewID = 0; + + assert.deepEqual(getAllReviewsFromStorage(), [review]); + assert.deepEqual(getReviewFromStorage(0), review); + assert.deepEqual(JSON.parse(localStorage.getItem("activeIDS")), [0]); + assert.strictEqual(JSON.parse(localStorage.getItem("nextID")), 1); }); - it("repeated store one more and get", () => { - let reviews = []; - assert.deepEqual(getReviewsFromStorage(), reviews); + it("test localStorage state during adding 999 reviews", () => { + let reviews = getAllReviewsFromStorage(); + let ids = [0]; + + for(let i = 1; i < 1000; i++){ + ids.push(i); + let new_review = { + "imgSrc": `sample src ${i}`, + "imgAlt": `sample alt ${i}`, + "mealName": `sample name ${i}`, + "restaurant": `sample restaurant ${i}`, + "rating": i, + "tags": [`tag ${3*i}`, `tag ${3*i + 1}`, `tag ${3*i + 2}`] + } + + newReviewToStorage(new_review); + + new_review.reviewID = i; + reviews.push(new_review); + + assert.deepEqual(getAllReviewsFromStorage(), reviews); + assert.deepEqual(getReviewFromStorage(i), new_review); + assert.deepEqual(JSON.parse(localStorage.getItem("activeIDS")), ids); + assert.strictEqual(JSON.parse(localStorage.getItem("nextID")), (i+1)); + } + }).timeout(5000); + + it("test localStorage state during updating 1000 reviews", () => { + let reviews = getAllReviewsFromStorage(); + let ids = JSON.parse(localStorage.getItem("activeIDS")); for(let i = 0; i < 1000; i++){ - reviews = getReviewsFromStorage(); - - reviews.push( - { - "imgSrc": `sample src ${i}`, - "imgAlt": `sample alt ${i}`, - "mealName": `sample name ${i}`, - "restaurant": `sample restaurant ${i}`, - "rating": i, - "tags": [`tag ${3*i}`, `tag ${3*i + 1}`, `tag ${3*i + 2}`] - } - ); - saveReviewsToStorage(reviews); - assert.deepEqual(getReviewsFromStorage(), reviews); + let new_review = { + "imgSrc": `updated sample src ${i}`, + "imgAlt": `updated sample alt ${i}`, + "mealName": `updated sample name ${i}`, + "restaurant": `updated sample restaurant ${i}`, + "rating": i*2+i, + "tags": [`tag ${3*i}`, `tag ${3*i + 1}`, `tag ${3*i + 2}`] + } + new_review.reviewID = i; + + reviews[i] = new_review; + + updateReviewToStorage(i, new_review); + + assert.deepEqual(getAllReviewsFromStorage(), reviews); + assert.deepEqual(getReviewFromStorage(i), new_review); + assert.deepEqual(JSON.parse(localStorage.getItem("activeIDS")), ids); + assert.strictEqual(JSON.parse(localStorage.getItem("nextID")), 1000); } - }).timeout(10000); + }).timeout(5000); + + it("test localStorage state during deleting 1000 reviews", () => { + let reviews = getAllReviewsFromStorage(); + let ids = JSON.parse(localStorage.getItem("activeIDS")); + + for(let i = 999; i >= 0; i--){ + deleteReviewFromStorage(i); + ids.pop(); + reviews.pop(); + + assert.deepEqual(getAllReviewsFromStorage(), reviews); + assert.deepEqual(JSON.parse(localStorage.getItem("activeIDS")), ids); + assert.strictEqual(JSON.parse(localStorage.getItem("nextID")), 1000); + } + }).timeout(5000); + + after(() => {}); }); From 89b7319dd86166a594123ac94d936070b666bee3 Mon Sep 17 00:00:00 2001 From: Arthur Lu Date: Fri, 18 Nov 2022 07:52:43 +0000 Subject: [PATCH 4/9] cleanup unused html and js code --- source/assets/scripts/ReviewPage.js | 13 ----- source/assets/scripts/main.js | 81 ----------------------------- source/review.html | 16 ------ 3 files changed, 110 deletions(-) delete mode 100644 source/assets/scripts/ReviewPage.js delete mode 100644 source/review.html diff --git a/source/assets/scripts/ReviewPage.js b/source/assets/scripts/ReviewPage.js deleted file mode 100644 index 89cd440..0000000 --- a/source/assets/scripts/ReviewPage.js +++ /dev/null @@ -1,13 +0,0 @@ -// Run the init() function when the page has loaded -window.addEventListener("DOMContentLoaded", init); - -function init() { - let result = sessionStorage.getItem("currReview"); - - let main = document.querySelector("main"); - - main.innerHTML = result; - let p = document.createElement("p"); - p.innerHTML = JSON.parse(result)["comments"]; - main.append(p); -} diff --git a/source/assets/scripts/main.js b/source/assets/scripts/main.js index 331492e..c402faf 100644 --- a/source/assets/scripts/main.js +++ b/source/assets/scripts/main.js @@ -39,85 +39,4 @@ function initFormHandler() { createBtn.addEventListener("click", function(){ window.location.assign("./CreatePage.html"); }); - - //accessing form components - /* - let tagContainer = document.getElementById("tag-container-form"); - let form = document.querySelector("form"); - - form.addEventListener("submit", function(){ - /* - * User submits the form for their review. - * We create reviewCard and put in storage - let formData = new FormData(form); - let reviewObject = {}; - for (let [key, value] of formData) { - console.log(`${key}`); - console.log(`${value}`); - if (`${key}` !== "tag-form") { - reviewObject[`${key}`] = `${value}`; - } - } - reviewObject["tags"] = []; - - let tags = document.querySelectorAll(".tag"); - for(let i = 0; i < tags.length; i ++) { - reviewObject["tags"].push(tags[i].innerHTML); - tagContainer.removeChild(tags[i]); - } - - - let newReview = document.createElement("review-card"); - newReview.data = reviewObject; - - //TODO: want to append it to whatever the box is in layout - let mainEl = document.querySelector("main"); - mainEl.append(newReview); - - // TODO: assign an ID to be used for referencing this object form the activeIDs array and the tag arrays - let ID = localStorage.nextID; - - let storedReviews = getReviewsFromStorage(); - storedReviews.push(reviewObject); - saveReviewsToStorage(storedReviews); - document.getElementById("new-food-entry").reset(); - }); - - // DEV-MODE: for testing purposes - let clearBtn = document.querySelector(".danger"); - clearBtn.addEventListener("click", function() { - localStorage.clear(); - let mainEl = document.querySelector("main"); - while (mainEl.firstChild) { - mainEl.removeChild(mainEl.firstChild); - } - let deleteTags = document.querySelectorAll(".tag"); - for(let i = 0; i < deleteTags.length; i ++) { - tagContainer.removeChild(deleteTags[i]); - } - - //clears reviews AS WELL as resets form - document.getElementById("new-food-entry").reset(); - - - }); - - let tagAddBtn = document.getElementById("tagAdd"); - tagAddBtn.addEventListener("click", ()=> { - let tagField = document.getElementById("tag-form"); - if (tagField.value.length > 0) { - let tagLabel = document.createElement("label"); - tagLabel.innerHTML = tagField.value; - tagLabel.setAttribute("class","tag"); - tagLabel.addEventListener("click",()=> { - tagContainer.removeChild(tagLabel); - }); - - tagContainer.append(tagLabel); - tagField.value = ""; - - } - }); - */ - } diff --git a/source/review.html b/source/review.html deleted file mode 100644 index b9894ad..0000000 --- a/source/review.html +++ /dev/null @@ -1,16 +0,0 @@ - - - - - - - Food Journal - - - - -

Current Review:

-
-
- - \ No newline at end of file From 3422f584f98dc9f6f74786a261a7ef0c1a0f537d Mon Sep 17 00:00:00 2001 From: Arthur Lu Date: Fri, 18 Nov 2022 07:56:07 +0000 Subject: [PATCH 5/9] fix linting in js --- source/assets/scripts/CreatePage.js | 8 ++++---- source/assets/scripts/ReviewCard.js | 18 +++++++++--------- source/assets/scripts/ReviewDetails.js | 2 +- source/assets/scripts/localStorage.js | 6 +++--- source/assets/scripts/localStorage.test.js | 6 +++--- 5 files changed, 20 insertions(+), 20 deletions(-) diff --git a/source/assets/scripts/CreatePage.js b/source/assets/scripts/CreatePage.js index fca6dc5..c5c641f 100644 --- a/source/assets/scripts/CreatePage.js +++ b/source/assets/scripts/CreatePage.js @@ -3,10 +3,10 @@ import { newReviewToStorage } from "./localStorage.js"; window.addEventListener("DOMContentLoaded", init); function init() { - // get next id + // get next id - // creates the key - initFormHandler(); + // creates the key + initFormHandler(); } @@ -42,7 +42,7 @@ function initFormHandler() { let nextReviewId = newReviewToStorage(reviewObject); sessionStorage.setItem("currID", JSON.stringify(nextReviewId)); - window.location.assign('./ReviewDetails.html'); + window.location.assign("./ReviewDetails.html"); }); diff --git a/source/assets/scripts/ReviewCard.js b/source/assets/scripts/ReviewCard.js index d7bd1ce..70a0660 100644 --- a/source/assets/scripts/ReviewCard.js +++ b/source/assets/scripts/ReviewCard.js @@ -132,18 +132,18 @@ class ReviewCard extends HTMLElement { let articleEl = this.shadowEl.querySelector("article"); // setting the article elements for the review card - this.reviewID = data["reviewID"]; + this.reviewID = data["reviewID"]; //image setup let mealImg = document.createElement("img"); mealImg.setAttribute("id", "a-mealImg"); mealImg.setAttribute("alt",data["imgAlt"]); - if(data["mealImg"] != ""){ - mealImg.setAttribute("src",data["mealImg"]); - } - else{ - mealImg.setAttribute("src", "./assets/images/icons/plate_with_cutlery.png"); - } + if(data["mealImg"] != ""){ + mealImg.setAttribute("src",data["mealImg"]); + } + else{ + mealImg.setAttribute("src", "./assets/images/icons/plate_with_cutlery.png"); + } //meal name setup let mealLabel = document.createElement("label"); @@ -187,7 +187,7 @@ class ReviewCard extends HTMLElement { } } - //adding final ID to data! + //adding final ID to data! articleEl.append(mealImg); articleEl.append(mealLabel); @@ -223,7 +223,7 @@ class ReviewCard extends HTMLElement { let dataContainer = {}; // getting the article elements for the review card - dataContainer["reviewID"] = this.reviewID; + dataContainer["reviewID"] = this.reviewID; //get image let mealImg = this.shadowEl.getElementById("a-mealImg"); diff --git a/source/assets/scripts/ReviewDetails.js b/source/assets/scripts/ReviewDetails.js index f2545fa..b07282b 100644 --- a/source/assets/scripts/ReviewDetails.js +++ b/source/assets/scripts/ReviewDetails.js @@ -15,7 +15,7 @@ function setupDelete(){ deleteBtn.addEventListener("click", function(){ if(window.confirm("Are you sure you want to delete this entry?")){ deleteReviewFromStorage(currID); - sessionStorage.removeItem('currID'); + sessionStorage.removeItem("currID"); window.location.assign("./index.html"); } }); diff --git a/source/assets/scripts/localStorage.js b/source/assets/scripts/localStorage.js index 62b834d..20be650 100644 --- a/source/assets/scripts/localStorage.js +++ b/source/assets/scripts/localStorage.js @@ -52,8 +52,8 @@ export function deleteReviewFromStorage(ID){ for (let i in activeIDS) { if (activeIDS[i] == ID) { activeIDS.splice(i,1); - localStorage.setItem('activeIDS', JSON.stringify(activeIDS)); - localStorage.removeItem(`review${ID}`) + localStorage.setItem("activeIDS", JSON.stringify(activeIDS)); + localStorage.removeItem(`review${ID}`); return; } } @@ -70,7 +70,7 @@ export function getAllReviewsFromStorage() { } //iterate thru activeIDS let activeIDS = JSON.parse(localStorage.getItem("activeIDS")); - let reviews = [] + let reviews = []; for (let i = 0; i < activeIDS.length; i++) { let currReview = JSON.parse(localStorage.getItem(`review${activeIDS[i]}`)); reviews.push(currReview); diff --git a/source/assets/scripts/localStorage.test.js b/source/assets/scripts/localStorage.test.js index 94730d1..0ed85c4 100644 --- a/source/assets/scripts/localStorage.test.js +++ b/source/assets/scripts/localStorage.test.js @@ -1,5 +1,5 @@ import {strict as assert} from "node:assert"; -import {describe, it, beforeEach} from "mocha"; +import {describe, it, before, after} from "mocha"; import {newReviewToStorage, getReviewFromStorage, updateReviewToStorage, deleteReviewFromStorage, getAllReviewsFromStorage} from "./localStorage.js"; describe("test app localStorage interaction", () => { @@ -49,7 +49,7 @@ describe("test app localStorage interaction", () => { "restaurant": `sample restaurant ${i}`, "rating": i, "tags": [`tag ${3*i}`, `tag ${3*i + 1}`, `tag ${3*i + 2}`] - } + }; newReviewToStorage(new_review); @@ -75,7 +75,7 @@ describe("test app localStorage interaction", () => { "restaurant": `updated sample restaurant ${i}`, "rating": i*2+i, "tags": [`tag ${3*i}`, `tag ${3*i + 1}`, `tag ${3*i + 2}`] - } + }; new_review.reviewID = i; reviews[i] = new_review; From 425bc45453fa26e5f3458795dbdd7c864a368e7d Mon Sep 17 00:00:00 2001 From: Arthur Lu Date: Fri, 18 Nov 2022 09:23:54 +0000 Subject: [PATCH 6/9] fix unit test action stall issue --- .github/workflows/js-unittest.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/js-unittest.yml b/.github/workflows/js-unittest.yml index 5c07e35..918ce70 100644 --- a/.github/workflows/js-unittest.yml +++ b/.github/workflows/js-unittest.yml @@ -24,6 +24,6 @@ jobs: - name: Install dependencies run: sudo npm install - name: Start local http server - run: sudo npm run http-server + run: sudo npm run http-server & - name: Run tests run: sudo npm test \ No newline at end of file From f6a9fb7fc52b1b521b15084e5369fc6282fc1b27 Mon Sep 17 00:00:00 2001 From: Arthur Lu Date: Fri, 18 Nov 2022 14:08:19 -0800 Subject: [PATCH 7/9] remove implied init from localStorage unit tests Signed-off-by: Arthur Lu --- source/assets/scripts/localStorage.test.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/source/assets/scripts/localStorage.test.js b/source/assets/scripts/localStorage.test.js index 0ed85c4..8f87ce0 100644 --- a/source/assets/scripts/localStorage.test.js +++ b/source/assets/scripts/localStorage.test.js @@ -6,8 +6,6 @@ describe("test app localStorage interaction", () => { before(() => { localStorage.clear(); - localStorage.setItem("activeIDS", JSON.stringify([])); - localStorage.setItem("nextID", JSON.stringify(0)); }); it("test localStorage state after init", () => { From 9cf7baf3e526eace3d9dc1db8fefae8f039f280f Mon Sep 17 00:00:00 2001 From: Arthur Lu Date: Fri, 18 Nov 2022 14:43:59 -0800 Subject: [PATCH 8/9] remove commented form from index Signed-off-by: Arthur Lu --- source/index.html | 52 ----------------------------------------------- 1 file changed, 52 deletions(-) diff --git a/source/index.html b/source/index.html index c83fe94..b8d4438 100644 --- a/source/index.html +++ b/source/index.html @@ -23,57 +23,5 @@
- From c5229c7bc1fcce588217199f8d84d703b2392f54 Mon Sep 17 00:00:00 2001 From: rheabhutada02 <83424582+rheabhutada02@users.noreply.github.com> Date: Sat, 19 Nov 2022 10:45:28 -0800 Subject: [PATCH 9/9] Updated ReviewDetails.js --- source/assets/scripts/ReviewDetails.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/source/assets/scripts/ReviewDetails.js b/source/assets/scripts/ReviewDetails.js index b07282b..2f560f7 100644 --- a/source/assets/scripts/ReviewDetails.js +++ b/source/assets/scripts/ReviewDetails.js @@ -29,7 +29,7 @@ function setupUpdate(){ updateBtn.addEventListener("click", function(){ //update function - form.style.display = "block"; + //form.style.display = "block"; form.classList.remove("hidden"); let tagContainer = document.getElementById("tag-container-form");