From 92da83cb9ce786b88158372ab9e6c7a7ede6385a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E3=82=A2=E3=83=AC=E3=82=AF=E3=82=B5=E3=83=B3=E3=83=80?=
 =?UTF-8?q?=E3=83=BC=2Eeth?= <gpg@pavlovcik.com>
Date: Tue, 23 Jan 2024 14:30:01 +0900
Subject: [PATCH] chore: move text filter box to right of sorting buttons

---
 src/home/home.ts                             |  4 +--
 src/home/sorting/generate-sorting-buttons.ts |  6 ++--
 src/home/sorting/sorting-manager.ts          | 33 +++++++++++++-------
 3 files changed, 26 insertions(+), 17 deletions(-)

diff --git a/src/home/home.ts b/src/home/home.ts
index 5e32a71f..139bac5b 100644
--- a/src/home/home.ts
+++ b/src/home/home.ts
@@ -2,9 +2,9 @@ import { grid } from "../the-grid";
 import { authentication } from "./authentication";
 import { fetchAndDisplayPreviews } from "./fetch-github/fetch-and-display-previews";
 import { fetchIssuesFull } from "./fetch-github/fetch-issues-full";
-import { generateSortingButtons } from "./sorting/generate-sorting-buttons";
+import { generateSortingToolbar } from "./sorting/generate-sorting-buttons";
 
-generateSortingButtons();
+generateSortingToolbar();
 grid(document.getElementById("grid") as HTMLElement);
 
 authentication()
diff --git a/src/home/sorting/generate-sorting-buttons.ts b/src/home/sorting/generate-sorting-buttons.ts
index 79667cc0..f327d831 100644
--- a/src/home/sorting/generate-sorting-buttons.ts
+++ b/src/home/sorting/generate-sorting-buttons.ts
@@ -3,7 +3,7 @@ import { SortingManager } from "./sorting-manager";
 export const SORTING_OPTIONS = ["price", "time", "priority", "activity"] as const;
 export type Sorting = (typeof SORTING_OPTIONS)[number];
 
-export function generateSortingButtons() {
-  const sortingManager = new SortingManager("filters");
-  sortingManager.generateSortingButtons(SORTING_OPTIONS);
+export function generateSortingToolbar() {
+  const sortingManager = new SortingManager("filters", SORTING_OPTIONS);
+  sortingManager.render();
 }
diff --git a/src/home/sorting/sorting-manager.ts b/src/home/sorting/sorting-manager.ts
index 54311ad1..164865a9 100644
--- a/src/home/sorting/sorting-manager.ts
+++ b/src/home/sorting/sorting-manager.ts
@@ -3,40 +3,49 @@ import { Sorting } from "./generate-sorting-buttons";
 
 export class SortingManager {
   private _lastChecked: HTMLInputElement | null = null;
-  private _filters: HTMLElement;
+  private _toolBarFilters: HTMLElement;
+  private _filterTextBox: HTMLInputElement;
+  private _sortingButtons: HTMLElement;
 
-  constructor(filtersId: string) {
+  constructor(filtersId: string, sortingOptions: readonly string[]) {
     const filters = document.getElementById(filtersId);
     if (!filters) throw new Error(`${filtersId} not found`);
-    this._filters = filters;
-    this.generateFilterTextbox();
+    this._toolBarFilters = filters;
+    this._filterTextBox = this._generateFilterTextBox();
+    this._sortingButtons = this._generateSortingButtons(sortingOptions);
   }
 
-  public generateFilterTextbox() {
+  public render() {
+    this._toolBarFilters.appendChild(this._sortingButtons);
+    this._toolBarFilters.appendChild(this._filterTextBox);
+  }
+
+  private _generateFilterTextBox() {
     const textBox = document.createElement("input");
     textBox.type = "text";
     textBox.id = "filter";
     textBox.placeholder = "Text Filter";
-    this._filters.insertBefore(textBox, this._filters.firstChild);
+    return textBox;
   }
 
-  public generateSortingButtons(sortingOptions: readonly string[]) {
-    const labels = document.createElement("div");
-    labels.className = "labels";
+  private _generateSortingButtons(sortingOptions: readonly string[]) {
+    const buttons = document.createElement("div");
+    buttons.className = "labels";
 
     sortingOptions.forEach((option) => {
       const input = this._createRadioButton(option);
       const label = this._createLabel(option);
 
-      labels.appendChild(input);
-      labels.appendChild(label);
+      buttons.appendChild(input);
+      buttons.appendChild(label);
 
       input.addEventListener("click", () => {
         this._handleSortingClick(input, option);
       });
     });
 
-    this._filters.appendChild(labels);
+    return buttons;
+    // this._filters.appendChild(labels);
   }
 
   private _createRadioButton(option: string): HTMLInputElement {