Draft

.eslintrc

@@ -37,6 +37,7 @@
     "no-console": "error",
     "no-unused-vars": "error",
     "import/extensions": "off",
+    "import/no-cycle": "off",
     "unicorn/template-indent": "off",
     "unicorn/prefer-string-replace-all": "off",
     "@typescript-eslint/explicit-member-accessibility": "error",

components/main-app.ts

@@ -26,9 +26,7 @@ class MainApp extends HTMLElement {
   private selectedSearchElm: HTMLInputElement =
     this.querySelector("#selectedSearch");
 
-  public get pageSize(): number {
-    return 10;
-  }
+  public pageSize = 10;
 
   public get currentPage(): number {
     return Number.parseInt(this.getAttribute("current-page"), 10);
@@ -169,21 +167,21 @@ class MainApp extends HTMLElement {
         break;
       }
       case "selectedVariable": {
-        this.removeCheckbox();
+        MainApp.removeCheckbox();
         break;
       }
       default: {
-        this.removeSelect(currentFilter);
+        MainApp.removeSelect(currentFilter);
       }
     }
   }
 
   private removeAllFilters(): void {
-    if (this.selectedCategory) this.removeSelect("selectedCategory");
-    if (this.selectedSubset) this.removeSelect("selectedSubset");
-    if (this.selectedVariant) this.removeSelect("selectedVariant");
-    if (this.selectedVariable) this.removeCheckbox();
-    if (this.selectedTag) this.removeSelect("selectedTag");
+    if (this.selectedCategory) MainApp.removeSelect("selectedCategory");
+    if (this.selectedSubset) MainApp.removeSelect("selectedSubset");
+    if (this.selectedVariant) MainApp.removeSelect("selectedVariant");
+    if (this.selectedVariable) MainApp.removeCheckbox();
+    if (this.selectedTag) MainApp.removeSelect("selectedTag");
     if (this.selectedSearch) this.removeSearch();
   }
 
@@ -192,15 +190,15 @@ class MainApp extends HTMLElement {
     (this.selectedSearchElm as HTMLInputElement).value = "";
   }
 
-  private removeSelect(value: string): void {
+  private static removeSelect(value: string): void {
     window.dispatchEvent(
       customEvent("remove-select", {
         value,
       }),
     );
   }
 
-  private removeCheckbox(): void {
+  private static removeCheckbox(): void {
     window.dispatchEvent(customEvent("remove-checkbox"));
   }
 

components/pagination-buttons.ts

@@ -3,6 +3,8 @@ export type ButtonType = MouseEvent & { target: HTMLButtonElement };
 class PaginationButtons extends HTMLElement {
   private mainApp = document.querySelector("main-app");
 
+  private pageSize = 10;
+
   public constructor() {
     super();
     this.handlePage = this.handlePage.bind(this);
@@ -25,10 +27,6 @@ class PaginationButtons extends HTMLElement {
     return Number.parseInt(this.getAttribute("results-length"), 10);
   }
 
-  public get pageSize(): number {
-    return 10;
-  }
-
   private get totalPages(): number {
     return Math.ceil(this.resultsLength / this.pageSize);
   }

components/search-status.ts

@@ -56,7 +56,7 @@ class SearchStatus extends HTMLElement {
     if (hasSelectedFilters) {
       elm.push(
         this.selectedFilters
-          .map((filter) => this.renderFilter(filter))
+          .map((filter): string => SearchStatus.renderFilter(filter))
           .join(""),
         `<button is="clear-button" aria-label="remove all filters" class="btn btn-clear">Clear</button>`,
       );
@@ -65,7 +65,7 @@ class SearchStatus extends HTMLElement {
     this.innerHTML = `${elm.join("\n")}`;
   }
 
-  private renderFilter({
+  private static renderFilter({
     label,
     value,
     id,