modularize localStorage calls into localStorage.js in preparation for unit testing

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 = newReviewToStorage(reviewObject);
-		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');
         
 	});

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) {
+			deleteReviewFromStorage(currID);
-				if (activeIDS[i] == currID) {
+			sessionStorage.removeItem('currID');
-					activeIDS.splice(i,1);
+			window.location.assign("./index.html");
-					localStorage.setItem('activeIDS', JSON.stringify(activeIDS));
-					sessionStorage.removeItem('currID');
-					localStorage.removeItem(`review${currID}`);
-					window.location.assign("./index.html");
-					break;
-				}
-			}
 		}
 	});
 }
@@ -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
+		form.style.display = "block";
-			document.getElementById("mealImg").defaultValue = currReview["mealImg"];
+		form.classList.remove("hidden");
-			document.getElementById("imgAlt").defaultValue = currReview["imgAlt"];
+		let tagContainer = document.getElementById("tag-container-form");
-			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"]){
+		//Set value of each input element to current's values
-				while (tagContainer.firstChild) {
+		document.getElementById("mealImg").defaultValue = currReview["mealImg"];
-					tagContainer.removeChild(tagContainer.firstChild);
+		document.getElementById("imgAlt").defaultValue = currReview["imgAlt"];
-				}
+		document.getElementById("mealName").defaultValue = currReview["mealName"];
-				for (let i = 0; i < currReview["tags"].length; i++) {
+		document.getElementById("comments").textContent = currReview["comments"];
-					let newTag = document.createElement("label");
+		document.getElementById("s" + `${currReview["rating"]}`).checked = true;
-					newTag.setAttribute("class","tag");
+		document.getElementById("restaurant").defaultValue = currReview["restaurant"];
-					newTag.innerHTML = currReview["tags"][i];
+
-					newTag.addEventListener("click",()=> {
+		if(currReview["tags"]){
-						tagContainer.removeChild(newTag);
+			while (tagContainer.firstChild) {
-					});
+				tagContainer.removeChild(tagContainer.firstChild);
-					tagContainer.append(newTag);
+			}
+			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
+			newData["tags"] = [];
-			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");
+			let tags = document.querySelectorAll(".tag");
-				for(let i = 0; i < tags.length; i ++) {
+			for(let i = 0; i < tags.length; i ++) {
-					newData["tags"].push(tags[i].innerHTML);
+				newData["tags"].push(tags[i].innerHTML);
-					tagContainer.removeChild(tags[i]);
+				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);
+				});
 			
-			let tagAddBtn = document.getElementById("tag-add-btn");
+				tagContainer.append(tagLabel);
-			tagAddBtn.addEventListener("click", ()=> {
+				tagField.value = "";
-				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 = "";
-				}
-			});
-		}
 	});
 }

source/assets/scripts/localStorage.js

@@ -1,7 +1,68 @@
 /**
- * @returns {Array<Object>} 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<Object>} reviews An array of reviews
- */
-export function saveReviewsToStorage(reviews) {
-	localStorage.setItem(`review${reviewId}`, JSON.stringify(reviews));
-}

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 <main> element
 	addReviewsToDocument(reviews);
 	// Add the event listeners to the form elements