add tag search

add top rating sort
add star localstorage

source/assets/scripts/ReviewCard.js

@@ -17,6 +17,7 @@ class ReviewCard extends HTMLElement {
 			margin: 0;
 			padding: 0;
 			overflow-wrap: anywhere;
+			cursor: pointer;
 		}
 		
 		a {

source/assets/scripts/ReviewDetails.js

@@ -99,8 +99,9 @@ function setupUpdate(){
 			while (tagContainer.firstChild) {
 				tagContainer.removeChild(tagContainer.firstChild);
 			}
-			let tagSetVal = currReview["tags"][i].toLowerCase()
+			let tagSetVal;
 			for (let i = 0; i < currReview["tags"].length; i++) {
+				tagSetVal = currReview["tags"][i].toLowerCase()
 				tagSet.add(tagSetVal);
 				let newTag = document.createElement("label");
 				newTag.setAttribute("class","tag");

source/assets/scripts/localStorage.js

@@ -13,6 +13,14 @@ export function newReviewToStorage(review){
 
 	// adding to the tag keys
 	addTagsToStorage(nextReviewId, review["tags"]);
+
+	//adding to the star storage
+	let starArr = JSON.parse(localStorage.getItem(`star${review["rating"]}`));
+	if(!starArr){
+		starArr = [];
+	}
+	starArr.push(nextReviewId);
+	localStorage.setItem(`star${review["rating"]}`, JSON.stringify(starArr));
 	
 	//updating our activeIDS list
 	let tempIdArr = JSON.parse(localStorage.getItem("activeIDS"));
@@ -42,6 +50,31 @@ export function getReviewFromStorage(ID){
 export function updateReviewToStorage(ID, review){
 	let oldReview = JSON.parse(localStorage.getItem(`review${ID}`));
 
+	//star local storage update
+	if(oldReview["rating"] !== review["rating"]){
+		//first delete from previous rating array in storage
+		let oldStarArr = JSON.parse(localStorage.getItem(`star${oldReview["rating"]}`));
+		for (let i in oldStarArr) {
+			if (oldStarArr[i] == ID) {
+				//removing from corresponding rating array and updating local Storage
+				oldStarArr.splice(i,1);
+				break;
+			}
+		}
+		if(oldStarArr.length != 0){
+			localStorage.setItem(`star${oldReview["rating"]}`, JSON.stringify(oldStarArr));
+		} else {
+			localStorage.removeItem(`star${oldReview["rating"]}`);
+		}
+		//then add ID to array corresponding to new review rating
+		let newStarArr = JSON.parse(localStorage.getItem(`star${review["rating"]}`));
+		if(!newStarArr){
+			newStarArr = [];
+		}
+		newStarArr.push(ID);
+		localStorage.setItem(`star${review["rating"]}`, JSON.stringify(newStarArr));
+	}
+
 	//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));
@@ -57,12 +90,29 @@ export function updateReviewToStorage(ID, review){
  * @param {string} ID of the review to delete
  */
 export function deleteReviewFromStorage(ID){
+	//removing id number from activeIDS and star{rating}
 	let activeIDS = JSON.parse(localStorage.getItem("activeIDS"));
-
+	let reviewRating = JSON.parse(localStorage.getItem(`review${ID}`))["rating"];
+	let starArr = JSON.parse(localStorage.getItem(`star${reviewRating}`));
+	
+	for (let i in starArr) {
+		if (starArr[i] == ID) {
+			//removing from corresponding rating array and updating local Storage
+			starArr.splice(i,1);
+			break;
+		}
+	}
+	if(starArr.length != 0){
+		localStorage.setItem(`star${reviewRating}`, JSON.stringify(starArr));
+	} else {
+		localStorage.removeItem(`star${reviewRating}`);
+	}
+	
 	for (let i in activeIDS) {
 		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}`);
@@ -117,10 +167,27 @@ function addTagsToStorage(ID, addedTags) {
 /**
  * Returns the top n reviews by ID. If there are less than n reviews, returns the most possible. 
  * @param {number} n number of reviews to return
- * @returns {Object} list of n reviews that are the top rated
+ * @returns {Array} list of n reviews that are the top rated
  */
 export function getTopReviewsFromStorage(n) {
-
+	let resultArr = [];
+	for(let i = 5; i > 0; i--){
+		let starArr = JSON.parse(localStorage.getItem(`star${i}`));
+		if(!starArr){
+			continue;
+		}
+		for(let j = starArr.length - 1; j >= 0; j--) {
+			let review = JSON.parse(localStorage.getItem(`review${starArr[j]}`))
+			resultArr.push(review);
+			if(resultArr.length == n) {
+				break;
+			}
+		}
+		if(resultArr.length == n) {
+			break;
+		}
+	}
+	return resultArr;
 }
 
 /**
@@ -129,7 +196,12 @@ export function getTopReviewsFromStorage(n) {
  * @returns {Object} list of reviews that all contain the specified tag
  */
 export function getReviewsByTag(tag) {
-
+	let reviewArr = [];
+	let tagArr = JSON.parse(localStorage.getItem("!" + tag.toLowerCase()));
+	for (let i in tagArr){
+		reviewArr.push(JSON.parse(localStorage.getItem(`review${tagArr[i]}`)));
+	}
+	return reviewArr;
 }
 
 // legacy function
@@ -142,7 +214,7 @@ export function getAllReviewsFromStorage() {
 	//iterate thru activeIDS
 	let activeIDS = JSON.parse(localStorage.getItem("activeIDS"));
 	let reviews = [];
-	for (let i = 0; i < activeIDS.length; i++) {
+	for (let i = activeIDS.length - 1; i >= 0; i--) {
 		let currReview = JSON.parse(localStorage.getItem(`review${activeIDS[i]}`));
 		reviews.push(currReview);
 	}

source/assets/scripts/main.js

@@ -1,5 +1,5 @@
 // main.js
-import {getAllReviewsFromStorage} from "./localStorage.js";
+import {getAllReviewsFromStorage, getTopReviewsFromStorage, getReviewsByTag} from "./localStorage.js";
 
 // Run the init() function when the page has loaded
 window.addEventListener("DOMContentLoaded", init);
@@ -22,7 +22,6 @@ function addReviewsToDocument(reviews) {
 	reviews.forEach(review => {
 		let newReview = document.createElement("review-card");
 		newReview.data = review;
-		//TODO: want to append it to whatever the box is in layout 
 		reviewBox.append(newReview);
 	});
 
@@ -39,4 +38,30 @@ function initFormHandler() {
 	createBtn.addEventListener("click", function(){
 		window.location.assign("./CreatePage.html");
 	});
+
+	let ratingBtn = document.getElementById("rating-btn");
+	ratingBtn.addEventListener("click", function() {
+		let reviewBox = document.getElementById("review-container");
+		while(reviewBox.firstChild){
+			reviewBox.removeChild(reviewBox.firstChild);
+		}
+		let reviewArr = getTopReviewsFromStorage(12);
+		addReviewsToDocument(reviewArr);
+	});
+
+	//grabbing search field
+	let searchField = document.getElementById("search-bar");
+	let searchBtn = document.getElementById("search-btn");
+	//adding search functionality
+	searchBtn.addEventListener('click', function(){
+		let reviewBox = document.getElementById("review-container");
+		//clearing after a search 
+		while(reviewBox.firstChild){
+			reviewBox.removeChild(reviewBox.firstChild);
+		}
+		let reviewArr = getReviewsByTag(searchField.value);
+		addReviewsToDocument(reviewArr);
+	})	
+
+	
 }

source/index.html

@@ -32,18 +32,21 @@
 				<div style="width: 60%;">
 					<div class="search-bar">
 						<form id="form">
-							<input type="search" id="searching" name="searchBar" placeholder="Search journal...">
+							<input type="search" id="search-bar" name="searchBar" placeholder="Search tags...">
-							<button class="click" type="search"> Search </button>
+							<!--- 
+								<button class="click" type="search"> Search </button>
+							--->
 							<div class="Filter-box">
 								
 							</div>
 						</form>
+						<img src ="./assets/images/search_button.png" alt="SEARCH BTN" id="search-btn"/>
 					</div>
 					<div class="center-display">		
 						<img src ="./assets/images/Grouppink.png" alt="CREATE" style="opacity: 100%;" id="create-btn" title="Add an entry!" onclick="window.location.assign('./CreatePage.html')"/>
 						<h2 id="recent-reviews-text"> Recent Reviews </h2>
 						<img src ="./assets/images/Grouppink.png" style="opacity:0;"/>
-						
+						<button id="rating-btn">Sort By Top Rating</button>
 					</div>
 
 					<div class="review-container" id="review-container"></div>

source/static/homepage.css

@@ -57,13 +57,21 @@ body {
 .search-bar > form {
 	float: right;
 	padding: 6px 10px;
-	margin-top: 8px;
+	/* 
+	margin-top: 8px; 
 	margin-right: 16px;
+	*/
 	background: rgb(239 183 183);
 	font-size: 17px;
 	border: none;
 	border-radius: 12px;
-	cursor: pointer;
+}
+
+#search-btn {
+	position: relative;
+	align-self: center;
+	width: 30px; 
+    height: 30px;
 }
 
 #recent-reviews-text {
@@ -78,6 +86,7 @@ img#create-btn {
 	align-self: center;
 	padding-left: 2.5%;
 	padding-right: 2.5%;
+	cursor: pointer;
 }
 
 .review-container {