added different filtering methods + load more btn

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
-	let reviews = getAllReviewsFromStorage();
-	// Add each reviews to the <main> element
-	addReviewsToDocument(reviews);
-	// Add the event listeners to the form elements
+	//initial population of review container
+	sortAndFilter(false, null);
+	//Add the event listeners to dropdown and search bar
 	initFormHandler();
 }
 
@@ -28,40 +26,104 @@ function addReviewsToDocument(reviews) {
 }
 
 /**
- * Adds the necessary event handlers to <form> and the clear storage
- * <button>.
+ * Adds the necessary event handlers to search-btn and sort
  */
 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(){
-		let reviewBox = document.getElementById("review-container");
-		//clearing after a search 
-		while(reviewBox.firstChild){
-			reviewBox.removeChild(reviewBox.firstChild);
-		}
-		let reviewArr = getReviewsByTag(searchField.value);
-		addReviewsToDocument(reviewArr);
-	})	
+	//TODO: Add ability to enter without refresh of search bar
+	//filter by selected tag when button clicked
+	searchBtn.addEventListener("click", function(){
+		searchTag = searchField.value;
+		sortAndFilter(searchTag);
+	});
+
+	//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);
+	}
+
+}