From 6493fbd17197aff98519726fa5b2422681880465 Mon Sep 17 00:00:00 2001 From: Arthur Lu Date: Fri, 18 Nov 2022 07:13:53 +0000 Subject: [PATCH] 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