added different filtering methods + load more btn

source/assets/scripts/localStorage.js

@@ -169,6 +169,7 @@ function addTagsToStorage(ID, addedTags) {
  * @param {number} n number of reviews to return
  * @returns {Array} list of n reviews that are the top rated
  */
+//legacy
 export function getTopReviewsFromStorage(n) {
 	let resultArr = [];
 	for(let i = 5; i > 0; i--){
@@ -195,6 +196,7 @@ export function getTopReviewsFromStorage(n) {
  * @param {string} tag to filter by
  * @returns {Object} list of reviews that all contain the specified tag
  */
+//legacy
 export function getReviewsByTag(tag) {
 	let reviewArr = [];
 	let tagArr = JSON.parse(localStorage.getItem("!" + tag.toLowerCase()));
@@ -214,9 +216,49 @@ export function getAllReviewsFromStorage() {
 	//iterate thru activeIDS
 	let activeIDS = JSON.parse(localStorage.getItem("activeIDS"));
 	let reviews = [];
-	for (let i = activeIDS.length - 1; i >= 0; i--) {
+	for (let i = 0; i < activeIDS.length; i++) {
 		let currReview = JSON.parse(localStorage.getItem(`review${activeIDS[i]}`));
 		reviews.push(currReview);
 	}
 	return reviews;
+}
+
+/**
+ * Get all IDs of active reviews
+ * @returns {number[]} list of all active IDs
+ */
+export function getIDsFromStorage() {
+	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));
+	}
+	let activeIDS = JSON.parse(localStorage.getItem("activeIDS"));
+	return activeIDS;
+}
+
+/**
+ * Returns all review IDs which contain the same tag specified. 
+ * @param {string} tag to filter by
+ * @returns {number[]} list of IDs of reviews that all contain the specified tag
+ */
+export function getIDsByTag(tag) {
+	let tagArr = JSON.parse(localStorage.getItem("!" + tag.toLowerCase()));
+	return tagArr;
+}
+
+/**
+ * Returns the top rated review IDs in order.
+ * @returns {number[]} list of IDs of reviews in order of top rating (most recent if equal rating)
+ */
+export function getTopIDsFromStorage() {
+	let resultArr = [];
+	for(let i = 5; i > 0; i--){
+		let starArr = JSON.parse(localStorage.getItem(`star${i}`));
+		if(!starArr){
+			continue;
+		}
+		resultArr = resultArr.concat(starArr.reverse());
+	}
+	return resultArr;
 }

source/assets/scripts/main.js

@@ -1,15 +1,13 @@
 // main.js
-import {getAllReviewsFromStorage, getTopReviewsFromStorage, getReviewsByTag} from "./localStorage.js";
+import {getAllReviewsFromStorage, getTopReviewsFromStorage, getReviewsByTag, getIDsByTag, getIDsFromStorage, getReviewFromStorage, getTopIDsFromStorage} from "./localStorage.js";
 
 // Run the init() function when the page has loaded
 window.addEventListener("DOMContentLoaded", init);
 
 function init() {
-	// Get the reviews from localStorage
+	//initial population of review container
-	let reviews = getAllReviewsFromStorage();
+	sortAndFilter(false, null);
-	// Add each reviews to the <main> element
+	//Add the event listeners to dropdown and search bar
-	addReviewsToDocument(reviews);
-	// Add the event listeners to the form elements
 	initFormHandler();
 }
 
@@ -28,40 +26,104 @@ function addReviewsToDocument(reviews) {
 }
 
 /**
- * Adds the necessary event handlers to <form> and the clear storage
+ * Adds the necessary event handlers to search-btn and sort
- * <button>.
  */
 function initFormHandler() {
 
-	//btn to create form (could be its own function?)
-	let createBtn = document.getElementById("create-btn");
-	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");
+	let searchTag = null;
 	//adding search functionality
-	searchBtn.addEventListener('click', function(){
+	//TODO: Add ability to enter without refresh of search bar
-		let reviewBox = document.getElementById("review-container");
+	//filter by selected tag when button clicked
-		//clearing after a search 
+	searchBtn.addEventListener("click", function(){
-		while(reviewBox.firstChild){
+		searchTag = searchField.value;
-			reviewBox.removeChild(reviewBox.firstChild);
+		sortAndFilter(searchTag);
-		}
+	});
-		let reviewArr = getReviewsByTag(searchField.value);
+
-		addReviewsToDocument(reviewArr);
+	//sort by selected method
-	})	
+	let sortMethod = document.getElementById("sort");
+	sortMethod.addEventListener("input", function(){
+		sortAndFilter(searchTag);
+	});
 
 	
 }
+
+/**
+ * Deciphers sort and filter to populate the review-container
+ * @param {string} searchTag tag name to filter by
+ */
+function sortAndFilter(searchTag){
+	let reviewBox = document.getElementById("review-container");
+	let sortMethod = document.getElementById("sort");
+	//clear review container
+	while(reviewBox.firstChild){
+		reviewBox.removeChild(reviewBox.firstChild);
+	}
+	let reviewIDs = [];
+	//sort method: most recent
+	if(sortMethod.value == "recent"){
+		//tag filtered most recent
+		if(searchTag){
+			reviewIDs = getIDsByTag(searchTag);
+		} 
+		//most recent
+		else {
+			reviewIDs = getIDsFromStorage();
+		}
+		//reversed for recency
+		loadReviews(0, reviewIDs.reverse());
+	} 
+	//sort method: top rated
+	else if (sortMethod.value == "top"){
+		//tag filtered top rated
+		if(searchTag){
+			//intersection of top ids list and ids by tag in top ids order
+			reviewIDs = getTopIDsFromStorage().filter(x => getIDsByTag(searchTag).includes(x));
+		} 
+		//top rated
+		else {
+			reviewIDs = getTopIDsFromStorage();
+		}
+		loadReviews(0, reviewIDs);
+	}
+}
+
+/**
+ * Populate review-container with 9 more reviews
+ * @param {number} index review index to begin with
+ * @param {number[]} reviewIDs ordered array of reviews
+ */
+function loadReviews(index, reviewIDs){
+	let reviewBox = document.getElementById("review-container");
+	let moreBtn = document.getElementById("more-btn");
+	//delete load more button if exists
+	if(moreBtn){
+		reviewBox.removeChild(moreBtn);
+	}
+	let reviewArr = [];
+	//check if there are more than 9 reviews left
+	if(index + 9 > reviewIDs.length - 1){
+		//add remaining reviews to review container
+		for(let i = index; i < reviewIDs.length; i++){
+			reviewArr.push(getReviewFromStorage(reviewIDs[i]));
+		}
+		addReviewsToDocument(reviewArr);
+	} else {
+		//add 9 more reviews to container
+		for(let i = index; i < index + 9; i++){
+			reviewArr.push(getReviewFromStorage(reviewIDs[i]));
+		}
+		addReviewsToDocument(reviewArr);
+		//create and add load more button
+		moreBtn = document.createElement("button");
+		moreBtn.setAttribute("id", "more-btn");
+		moreBtn.innerText = "Load More";
+		//if load more clicked, load 9 more
+		moreBtn.addEventListener("click", function(){loadReviews(index + 9, reviewIDs)});
+		reviewBox.append(moreBtn);
+	}
+
+}

source/index.html

@@ -46,7 +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>
+						<!--<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>
 					</div>
 
 					<div class="review-container" id="review-container"></div>