Merge pull request #92 from cse110-fa22-group29/separate-tag-storage

Individual Tags in Local Storage

source/assets/scripts/CreatePage.js

@@ -3,11 +3,7 @@ import { newReviewToStorage } from "./localStorage.js";
 window.addEventListener("DOMContentLoaded", init);
 
 function init() {
-	// get next id
-
-	// creates the key
 	initFormHandler();
-    
 }
 
 function initFormHandler() {
@@ -91,19 +87,27 @@ function initFormHandler() {
 	});
 
 	let tagAddBtn = document.getElementById("tag-add-btn");
+	//Set used to track tags and ensure no duplicates
+	let tagSet = new Set();
 	tagAddBtn.addEventListener("click", ()=> {
 		let tagField = document.getElementById("tag-form");
 		if (tagField.value.length > 0) {
-			let tagLabel = document.createElement("label");
+			let tagSetVal = tagField.value.toLowerCase();
-			tagLabel.innerHTML = tagField.value;
+			if (!tagSet.has(tagSetVal)){
-			tagLabel.setAttribute("class","tag");
+				let tagLabel = document.createElement("label");
-			tagLabel.addEventListener("click",()=> {
+				tagLabel.innerHTML = tagField.value;
-				tagContainer.removeChild(tagLabel);
+				tagLabel.setAttribute("class","tag");
-			});
+				tagSet.add(tagField.value.toLowerCase());
-      
+				tagLabel.addEventListener("click",()=> {
-			tagContainer.append(tagLabel);
+					tagContainer.removeChild(tagLabel);
+					tagSet.delete(tagField.value.toLowerCase());
+				});
+		
+				tagContainer.append(tagLabel);
+			} else {
+				window.alert("No duplicate tags allowed");
+			}
 			tagField.value = "";
-
 		}
 	});
 

source/assets/scripts/ReviewDetails.js

@@ -10,6 +10,9 @@ function init(){
 	setupUpdate();
 }
 
+/**
+ * Populates the relevant data to the details from local storage review
+ */
 function setupInfo(){
 	let currID = JSON.parse(sessionStorage.getItem("currID"));
 	let currReview = getReviewFromStorage(currID);
@@ -51,6 +54,9 @@ function setupInfo(){
 	}
 }
 
+/**
+ * Sets up delete button to delete review from storage and switch to homepage
+ */
 function setupDelete(){
 	let deleteBtn = document.getElementById("delete-btn");
 	let currID = JSON.parse(sessionStorage.getItem("currID"));
@@ -63,6 +69,9 @@ function setupDelete(){
 	});
 }
 
+/**
+ * Sets up update button to reveal form and update info in storage and the current page 
+ */
 function setupUpdate(){
 	let updateBtn = document.getElementById("update-btn");
 	let currID = JSON.parse(sessionStorage.getItem("currID"));
@@ -83,16 +92,22 @@ function setupUpdate(){
 		document.getElementById("s" + `${currReview["rating"]}`).checked = true;
 		document.getElementById("restaurant").defaultValue = currReview["restaurant"];
 
+		//Set used to track tags and ensure no duplicates
+		let tagSet = new Set();
+
 		if(currReview["tags"]){
 			while (tagContainer.firstChild) {
 				tagContainer.removeChild(tagContainer.firstChild);
 			}
+			let tagSetVal = currReview["tags"][i].toLowerCase()
 			for (let i = 0; i < currReview["tags"].length; i++) {
+				tagSet.add(tagSetVal);
 				let newTag = document.createElement("label");
 				newTag.setAttribute("class","tag");
 				newTag.innerHTML = currReview["tags"][i];
 				newTag.addEventListener("click",()=> {
 					tagContainer.removeChild(newTag);
+					tagSet.delete(tagSetVal);
 				});
 				tagContainer.append(newTag);
 			}
@@ -141,10 +156,11 @@ function setupUpdate(){
 		form.addEventListener("submit", function(){
 			/*
 			*  User submits the form for their review.
-			*  We create reviewCard and put in storage
+			*  We create reviewCard data, replace in storage, and update tags
 			*/
 			let formData = new FormData(form);
 			let newData = {};
+			//iterate through formData and add to newData
 			for (let [key, value] of formData) {
 				console.log(`${key}`);
 				console.log(`${value}`);
@@ -168,25 +184,33 @@ function setupUpdate(){
 			}
 
 			newData["reviewID"] = currID;
-
+			
 			updateReviewToStorage(currID, newData);
 
 			updateDiv.classList.add("hidden");
 
 		});
 
+		//adding tag to form functionality
 		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");
+				let tagSetVal = tagField.value.toLowerCase();
-				tagLabel.innerHTML = tagField.value;
+				if (!tagSet.has(tagSetVal)){
-				tagLabel.setAttribute("class","tag");
+					let tagLabel = document.createElement("label");
-				tagLabel.addEventListener("click",()=> {
+					tagLabel.innerHTML = tagField.value;
-					tagContainer.removeChild(tagLabel);
+					tagLabel.setAttribute("class","tag");
-				});
+					tagSet.add(tagSetVal);
+					tagLabel.addEventListener("click",()=> {
+						tagContainer.removeChild(tagLabel);
+						tagSet.delete(tagSetVal);
+					});
 			
-				tagContainer.append(tagLabel);
+					tagContainer.append(tagLabel);
+				} else {
+					window.alert("No duplicate tags allowed");
+				}
 				tagField.value = "";
 			}
 		});

source/assets/scripts/localStorage.js

@@ -10,6 +10,9 @@ export function newReviewToStorage(review){
 
 	// set the review entry to the review object
 	localStorage.setItem(`review${nextReviewId}`, JSON.stringify(review));
+
+	// adding to the tag keys
+	addTagsToStorage(nextReviewId, review["tags"]);
 	
 	//updating our activeIDS list
 	let tempIdArr = JSON.parse(localStorage.getItem("activeIDS"));
@@ -37,6 +40,14 @@ export function getReviewFromStorage(ID){
  * @param {Object} review to store
  */
 export function updateReviewToStorage(ID, review){
+	let oldReview = JSON.parse(localStorage.getItem(`review${ID}`));
+
+	//Get diff of tags and update storage
+	let deletedTags = oldReview["tags"].filter(x => !review["tags"].includes(x));
+	let addedTags = review["tags"].filter(x => !oldReview["tags"].includes(x));
+	deleteTagsFromStorage(ID, deletedTags);
+	addTagsToStorage(ID, addedTags);
+
 	// set the review entry with ID to the review object
 	localStorage.setItem(`review${ID}`, JSON.stringify(review));
 }
@@ -52,6 +63,8 @@ export function deleteReviewFromStorage(ID){
 		if (activeIDS[i] == ID) {
 			activeIDS.splice(i,1);
 			localStorage.setItem("activeIDS", JSON.stringify(activeIDS));
+			let currReview = JSON.parse(localStorage.getItem(`review${ID}`));
+			deleteTagsFromStorage(ID, currReview["tags"]);
 			localStorage.removeItem(`review${ID}`);
 			return;
 		}
@@ -60,21 +73,45 @@ export function deleteReviewFromStorage(ID){
 	console.error(`could not find review${ID} in localStorage`);
 }
 
-// legacy function
+/**
-export function getAllReviewsFromStorage() {
+ * Delete ID from the specified tags' storage
-	if (!(localStorage.getItem("activeIDS"))) {
+ * @param {string} ID to delete from lists
-		// we wanna init the active ID array and start the nextID count
+ * @param {string[]} deletedTags to modify storage of
-		localStorage.setItem("activeIDS", JSON.stringify([]));
+ */
-		localStorage.setItem("nextID",  JSON.stringify(0));
+function deleteTagsFromStorage(ID, deletedTags) {
+	for(let i in deletedTags){
+		//get local storage of each tag and remove id from tag list
+		let tagName = "!"+ deletedTags[i].toLowerCase();
+		let tagArr = JSON.parse(localStorage.getItem(tagName));
+		for(let j in tagArr){
+			if(tagArr[j] == ID){
+				tagArr.splice(j,1);
+				break;
+			}
+		}
+		if(tagArr.length != 0){
+			localStorage.setItem(tagName, JSON.stringify(tagArr));
+		} else {
+			localStorage.removeItem(tagName);
+		}
 	}
-	//iterate thru activeIDS
+}
-	let activeIDS = JSON.parse(localStorage.getItem("activeIDS"));
+
-	let reviews = [];
+/**
-	for (let i = 0; i < activeIDS.length; i++) {
+ * Add ID from the specified tags' storage
-		let currReview = JSON.parse(localStorage.getItem(`review${activeIDS[i]}`));
+ * @param {string} ID to add to lists
-		reviews.push(currReview);
+ * @param {string[]} addedTags to modify storage of
+ */
+function addTagsToStorage(ID, addedTags) {
+	for(let i in addedTags){
+		let tagName = "!" + addedTags[i].toLowerCase();
+		let tagArr = JSON.parse(localStorage.getItem(tagName));
+		if(!tagArr){
+			tagArr = [];
+		}
+		tagArr.push(ID);
+		localStorage.setItem(tagName, JSON.stringify(tagArr));
 	}
-	return reviews;
 }
 
 /**
@@ -93,4 +130,21 @@ export function getTopReviewsFromStorage(n) {
  */
 export function getReviewsByTag(tag) {
 
+}
+
+// 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([]));
+		localStorage.setItem("nextID",  JSON.stringify(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;
 }