main page states (search & initial) are now working

src/main/resources/static/main.js

@@ -15,6 +15,7 @@ const filterButton = document.getElementById("filter-btn");
 const searchButton = document.getElementById("search-btn");
 const searchBar = document.getElementById("search-entry");
 const sortButton = document.getElementById("sort-btn");
+const resetButton = document.getElementById("reset-tools-btn");
 const upvoteButtons = document.getElementsByClassName("upvote-btn");
 const downvoteButtons = document.getElementsByClassName("downvote-btn");
 export const searchSection = document.getElementById("search");
@@ -32,7 +33,9 @@ addButton.addEventListener("click", () => {
 
 filterButton.addEventListener("change", () => {
     const filterString = filterButton.value;
-    filter(filterString);
+    if (filterString !== filterButton.querySelector("#default-filter").value) {
+        filter(filterString);
+    }
 });
 
 searchButton.addEventListener("click", () => {
@@ -61,6 +64,13 @@ sortButton.addEventListener("change", () => {
     sort(sortString);
 });
 
+resetButton.addEventListener("click", () => {
+    searchBar.value = "";
+    filterButton.value = filterButton.querySelector("#default-filter").value;
+    sortButton.value = sortButton.querySelector("#default-sort").value;
+    updateSections();
+})
+
 // Consider moving this to datasets.js completely
 const upvoteButtonClickListener = e => {
     const entryID = e.target.parentElement.parentElement.dataset.id;
@@ -86,6 +96,7 @@ function navigateToAdd() {
 }
 
 function filter(filterString) {
+    updateSections();
     filterString = filterString.toUpperCase();
     let fetchURL = new URL(apiEndpoint, baseURL);
     fetchURL.searchParams.append("type", filterString);
@@ -95,9 +106,9 @@ function filter(filterString) {
 }
 
 function search(searchString) {
+    updateSections();
     let fetchURL = new URL(apiEndpoint + "/search", baseURL);
     fetchURL.searchParams.append("search", searchString.length === 0 ? "%" : searchString);
-
     console.log(fetchURL); // TODO: remove
     fetchQuery(fetchURL);
 }
@@ -109,6 +120,7 @@ function sort(sortString) {
     } else {
         query[1] = "desc";
     }
+    updateSections();
     let fetchURL = new URL(apiEndpoint, baseURL);
     fetchURL.searchParams.append("sort", query[0]);
     fetchURL.searchParams.append("direction", query[1]);
@@ -140,14 +152,17 @@ function incrementPageCount() {
 }
 
 function updateSections() {
-    if (searchBar.value === "") {
+    if (searchBar.value === "" && sortButton.value === sortButton.querySelector("#default-sort").value
+        && filterButton.value === filterButton.querySelector("#default-filter").value) {
         searchSection.classList.add("hidden");
         recentSection.classList.remove("hidden");
         mostLikedSection.classList.remove("hidden");
+        resetButton.classList.add("hidden");
     } else {
         searchSection.classList.remove("hidden");
         recentSection.classList.add("hidden");
         mostLikedSection.classList.add("hidden");
+        resetButton.classList.remove("hidden");
     }
 }