feat: allow third click to disable sorting (fixes #132)

src/home/sorting/sorting-manager.ts

@@ -9,6 +9,8 @@ export class SortingManager {
   private _filterTextBox: HTMLInputElement;
   private _sortingButtons: HTMLElement;
   private _instanceId: string;
+  private _sortingState: { [key: string]: "unsorted" | "ascending" | "descending" } = {}; // Track state for each sorting option
+  private _filterTimeout: number | null = null; // Timeout ID for debouncing
 
   constructor(filtersId: string, sortingOptions: readonly string[], instanceId: string) {
     const filters = document.getElementById(filtersId);
@@ -17,6 +19,11 @@ export class SortingManager {
     this._instanceId = instanceId;
     this._filterTextBox = this._generateFilterTextBox();
     this._sortingButtons = this._generateSortingButtons(sortingOptions);
+
+    // Initialize sorting states to 'unsorted' for all options
+    sortingOptions.forEach((option) => {
+      this._sortingState[option] = "unsorted";
+    });
   }
 
   public render() {
@@ -65,27 +72,26 @@ export class SortingManager {
       }
     };
 
-    // Observer to detect when children are added to the issues container
+    // Observer to detect when children are added to the issues container (only once)
     const observer = new MutationObserver(() => {
       if (issuesContainer.children.length > 0) {
         observer.disconnect(); // Stop observing once children are present
         if (searchQuery) filterIssues(); // Filter on load if search query exists
       }
     });
-
-    // Start observing the issues container for child elements
     observer.observe(issuesContainer, { childList: true });
 
-    // Add event listener for input changes to filter and update URL
+    // Debounce input to avoid frequent filtering
     textBox.addEventListener("input", () => {
-      const filterText = textBox.value;
-      // Update the URL with the search parameter
-      const newURL = new URL(window.location.href);
-      newURL.searchParams.set("search", filterText);
-      window.history.replaceState({}, "", newURL.toString());
-
-      // Filter the issues based on the input
-      filterIssues();
+      if (this._filterTimeout) clearTimeout(this._filterTimeout); // Clear previous timeout
+      this._filterTimeout = window.setTimeout(() => {
+        const filterText = textBox.value;
+        // Update the URL with the search parameter
+        const newURL = new URL(window.location.href);
+        newURL.searchParams.set("search", filterText);
+        window.history.replaceState({}, "", newURL.toString());
+        filterIssues(); // Run the filter function
+      }, 300); // 300ms debounce delay
     });
 
     return textBox;
@@ -131,31 +137,50 @@ export class SortingManager {
   }
 
   private _handleSortingClick(input: HTMLInputElement, option: string) {
-    const ordering = input === this._lastChecked ? "reverse" : "normal";
-    input.checked = input !== this._lastChecked;
-    input.setAttribute("data-ordering", ordering);
-    this._lastChecked = input.checked ? input : null;
-    this._filterTextBox.value = "";
+    const currentOrdering = input.getAttribute("data-ordering");
+    let newOrdering: string;
+
+    // Determine the new ordering based on the current state
+    if (currentOrdering === "normal") {
+      newOrdering = "reverse";
+    } else if (currentOrdering === "reverse") {
+      newOrdering = "disabled";
+    } else {
+      newOrdering = "normal";
+    }
+
+    // Apply the new ordering state
+    input.setAttribute("data-ordering", newOrdering);
     input.parentElement?.childNodes.forEach((node) => {
       if (node instanceof HTMLInputElement) {
         node.setAttribute("data-ordering", "");
       }
     });
 
-    input.setAttribute("data-ordering", ordering);
-    // instantly load from cache
+    if (newOrdering === "disabled") {
+      this._lastChecked = null;
+      input.checked = false;
+      this._clearSorting();
+    } else {
+      input.checked = input !== this._lastChecked;
+      this._lastChecked = input.checked ? input : null;
+      input.setAttribute("data-ordering", newOrdering);
+
+      // Apply the sorting based on the new state (normal or reverse)
+      try {
+        void displayGitHubIssues(option as Sorting, { ordering: newOrdering });
+      } catch (error) {
+        renderErrorCatch(error as ErrorEvent);
+      }
+    }
+  }
+
+  private _clearSorting() {
     try {
-      void displayGitHubIssues(option as Sorting, { ordering });
+      void displayGitHubIssues();
     } catch (error) {
-      renderErrorCatch(error as ErrorEvent);
+      renderErrorInModal(error as Error);
     }
-    // load from network in the background
-    // const fetchedPreviews = await fetchIssuePreviews();
-    // const cachedTasks = taskManager.getTasks();
-    // const updatedCachedIssues = verifyGitHubIssueState(cachedTasks, fetchedPreviews);
-    // displayGitHubIssues(sorting, options);
-    // taskManager.syncTasks(updatedCachedIssues);
-    // return fetchAvatars();
   }
 }