From 9bc5b5624bb4021f757f1afe159d35794cadd5d9 Mon Sep 17 00:00:00 2001
From: Kara Hoagland <khoaglan@ucsd.edu>
Date: Wed, 30 Nov 2022 16:11:42 -0800
Subject: [PATCH] add clear search and no result

---
 source/assets/scripts/localStorage.js | 20 +++++++++++++-------
 source/assets/scripts/main.js         | 22 +++++++++++++++++++++-
 source/index.html                     |  2 +-
 3 files changed, 35 insertions(+), 9 deletions(-)

diff --git a/source/assets/scripts/localStorage.js b/source/assets/scripts/localStorage.js
index fce39fe..ecf607a 100644
--- a/source/assets/scripts/localStorage.js
+++ b/source/assets/scripts/localStorage.js
@@ -164,7 +164,10 @@ function addTagsToStorage(ID, addedTags) {
 	}
 }
 
-// legacy function
+/**
+ * Test Helper Function to get all reviews from local storage
+ * @returns {Object} all active reviews from local storage
+ */
 export function getAllReviewsFromStorage() {
 	if (!(localStorage.getItem("activeIDS"))) {
 		// we wanna init the active ID array and start the nextID count
@@ -182,8 +185,8 @@ export function getAllReviewsFromStorage() {
 }
 
 /**
- * Get all IDs of active reviews
- * @returns {number[]} list of all active IDs
+ * Get all IDs of active reviews (order: most recent)
+ * @returns {number[]} list of all active IDs by recency
  */
 export function getIDsFromStorage() {
 	if (!(localStorage.getItem("activeIDS"))) {
@@ -192,17 +195,20 @@ export function getIDsFromStorage() {
 		localStorage.setItem("nextID",  JSON.stringify(0));
 	}
 	let activeIDS = JSON.parse(localStorage.getItem("activeIDS"));
-	return activeIDS;
+	return activeIDS.reverse();
 }
 
 /**
- * Returns all review IDs which contain the same tag specified. 
+ * Returns all review IDs which contain the same tag specified (order: most recent)
  * @param {string} tag to filter by
- * @returns {number[]} list of IDs of reviews that all contain the specified tag
+ * @returns {number[]} list of IDs of reviews that all contain the specified tag by recency
  */
 export function getIDsByTag(tag) {
 	let tagArr = JSON.parse(localStorage.getItem("!" + tag.toLowerCase()));
-	return tagArr;
+	if(!tagArr){
+		tagArr = [];
+	}
+	return tagArr.reverse();
 }
 
 /**
diff --git a/source/assets/scripts/main.js b/source/assets/scripts/main.js
index a3b9b45..afea866 100644
--- a/source/assets/scripts/main.js
+++ b/source/assets/scripts/main.js
@@ -42,6 +42,14 @@ function initFormHandler() {
 		sortAndFilter(searchTag);
 	});
 
+	//for clearing tag filter
+	let clearSearchBtn = document.getElementById("clear-search");
+	clearSearchBtn.addEventListener("click", function(){
+		searchTag = null;
+		searchField.value = "";
+		sortAndFilter(searchTag);
+	})
+
 	//sort by selected method
 	let sortMethod = document.getElementById("sort");
 	sortMethod.addEventListener("input", function(){
@@ -74,7 +82,7 @@ function sortAndFilter(searchTag){
 			reviewIDs = getIDsFromStorage();
 		}
 		//reversed for recency
-		loadReviews(0, reviewIDs.reverse());
+		loadReviews(0, reviewIDs);
 	} 
 	//sort method: top rated
 	else if (sortMethod.value == "top"){
@@ -98,6 +106,18 @@ function sortAndFilter(searchTag){
  */
 function loadReviews(index, reviewIDs){
 	let reviewBox = document.getElementById("review-container");
+	// label if there are no reviews to display
+	if(reviewIDs.length == 0){
+		let emptyLabel = document.createElement("label");
+		emptyLabel.setAttribute("id", "empty");
+		emptyLabel.innerText = "No Reviews To Display";
+		reviewBox.append(emptyLabel);
+	} else {
+		let emptyLabel = document.getElementById("empty");
+		if(emptyLabel){
+			reviewBox.removeChild(emptyLabel);
+		}
+	}
 	let moreBtn = document.getElementById("more-btn");
 	//delete load more button if exists
 	if(moreBtn){
diff --git a/source/index.html b/source/index.html
index 5d41065..2f692fb 100644
--- a/source/index.html
+++ b/source/index.html
@@ -46,12 +46,12 @@
 						<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>-->
 						<label for="sort">Filtering Method:</label>
 						<select id="sort">
 							<option value="recent">Most Recent</option>
 							<option value="top">Top Rated</option>
 						</select>
+						<button id="clear-search">Clear Search</button>
 					</div>
 
 					<div class="review-container" id="review-container"></div>