clean up sorter

webrecorder · Jan 4, 2024 · 69342a7 · 69342a7
1 parent b47df65
commit 69342a7
Showing 1 changed file with 33 additions and 73 deletions.
diff --git a/src/sorter.ts b/src/sorter.ts
@@ -1,53 +1,45 @@
 import { LitElement, html, css } from "lit";
+import { property } from "lit/decorators.js";
+
 import { wrapCss } from "./misc";
 
 import fasSortDown from "@fortawesome/fontawesome-free/svgs/solid/sort-down.svg";
 import fasSortUp from "@fortawesome/fontawesome-free/svgs/solid/sort-up.svg";
 
 // ===========================================================================
-class Sorter extends LitElement {
-  constructor() {
-    super();
-    // @ts-expect-error - TS2551 - Property 'sortedData' does not exist on type 'Sorter'. Did you mean 'sortData'?
-    this.sortedData = [];
-    // @ts-expect-error - TS2339 - Property 'data' does not exist on type 'Sorter'.
-    this.data = [];
-
-    // @ts-expect-error - TS2339 - Property 'pageResults' does not exist on type 'Sorter'.
-    this.pageResults = 0;
-    // @ts-expect-error - TS2339 - Property 'numResults' does not exist on type 'Sorter'.
-    this.numResults = 0;
-
-    // @ts-expect-error - TS2339 - Property 'sortKey' does not exist on type 'Sorter'.
-    this.sortKey = null;
-    // @ts-expect-error - TS2339 - Property 'sortDesc' does not exist on type 'Sorter'.
-    this.sortDesc = null;
-  }
+class Sorter<T> extends LitElement {
+  @property({ attribute: false })
+  sortedData: T[] = [];
 
-  static get properties() {
-    return {
-      id: { type: String },
+  @property({ attribute: false })
+  data: T[] = [];
 
-      pageResults: { type: Number },
+  @property({ type: String })
+  id!: string;
 
-      data: { type: Array },
-      sortedData: { type: Array },
+  @property({ type: Number })
+  pageResults = 0;
 
-      sortKey: { type: String },
-      sortDesc: { type: Boolean },
-    };
-  }
+  @property({ attribute: false })
+  numResults = 0;
+
+  @property({ type: String })
+  sortKey: string | null = null;
+
+  @property({ type: Boolean })
+  sortDesc: boolean | null = null;
+
+  @property({ attribute: false })
+  sortKeys?: { key: string; name: string }[];
 
   firstUpdated() {
     if (this.id) {
       const sortKey = localStorage.getItem(`${this.id}:sortKey`);
       if (sortKey !== null) {
-        // @ts-expect-error - TS2339 - Property 'sortKey' does not exist on type 'Sorter'.
         this.sortKey = sortKey;
       }
       const sortDesc = localStorage.getItem(`${this.id}:sortDesc`);
       if (sortDesc !== null) {
-        // @ts-expect-error - TS2339 - Property 'sortDesc' does not exist on type 'Sorter'.
         this.sortDesc = sortDesc === "1";
       }
     }
@@ -58,15 +50,11 @@ class Sorter extends LitElement {
     const descChanged = changedProperties.has("sortDesc");
     const dataChanged = changedProperties.has("data");
 
-    // @ts-expect-error - TS2339 - Property 'sortKey' does not exist on type 'Sorter'.
     if (keyChanged && this.sortKey !== null) {
-      // @ts-expect-error - TS2339 - Property 'sortKey' does not exist on type 'Sorter'.
       localStorage.setItem(`${this.id}:sortKey`, this.sortKey);
     }
 
-    // @ts-expect-error - TS2339 - Property 'sortDesc' does not exist on type 'Sorter'.
     if (descChanged && this.sortDesc !== null) {
-      // @ts-expect-error - TS2339 - Property 'sortDesc' does not exist on type 'Sorter'.
       localStorage.setItem(`${this.id}:sortDesc`, this.sortDesc ? "1" : "0");
     }
 
@@ -76,28 +64,20 @@ class Sorter extends LitElement {
   }
 
   sortData() {
-    // @ts-expect-error - TS2551 - Property 'sortedData' does not exist on type 'Sorter'. Did you mean 'sortData'? | TS2339 - Property 'data' does not exist on type 'Sorter'.
     this.sortedData = [...this.data];
-    // @ts-expect-error - TS2339 - Property 'numResults' does not exist on type 'Sorter'. | TS2339 - Property 'pageResults' does not exist on type 'Sorter'.
     this.numResults = this.pageResults;
 
-    // @ts-expect-error - TS2339 - Property 'sortKey' does not exist on type 'Sorter'.
     if (this.sortKey === "") {
-      // @ts-expect-error - TS2339 - Property 'sortDesc' does not exist on type 'Sorter'.
       if (this.sortDesc) {
-        // @ts-expect-error - TS2551 - Property 'sortedData' does not exist on type 'Sorter'. Did you mean 'sortData'?
         this.sortedData.reverse();
       }
     } else {
-      // @ts-expect-error - TS2551 - Property 'sortedData' does not exist on type 'Sorter'. Did you mean 'sortData'?
       this.sortedData.sort((first, second) => {
-        // @ts-expect-error - TS2339 - Property 'sortKey' does not exist on type 'Sorter'. | TS2339 - Property 'sortKey' does not exist on type 'Sorter'.
-        if (first[this.sortKey] === second[this.sortKey]) {
+        if (first[this.sortKey!] === second[this.sortKey!]) {
           return 0;
         }
 
-        // @ts-expect-error - TS2339 - Property 'sortDesc' does not exist on type 'Sorter'. | TS2339 - Property 'sortKey' does not exist on type 'Sorter'. | TS2339 - Property 'sortKey' does not exist on type 'Sorter'.
-        return this.sortDesc == first[this.sortKey] < second[this.sortKey]
+        return this.sortDesc == first[this.sortKey!] < second[this.sortKey!]
           ? 1
           : -1;
       });
@@ -108,27 +88,20 @@ class Sorter extends LitElement {
 
   sendSortChanged() {
     const detail = {
-      // @ts-expect-error - TS2339 - Property 'sortKey' does not exist on type 'Sorter'.
       sortKey: this.sortKey,
-      // @ts-expect-error - TS2339 - Property 'sortDesc' does not exist on type 'Sorter'.
       sortDesc: this.sortDesc,
-      // @ts-expect-error - TS2339 - Property 'numResults' does not exist on type 'Sorter'.
       sortedData: this.numResults
-        ? // @ts-expect-error - TS2551 - Property 'sortedData' does not exist on type 'Sorter'. Did you mean 'sortData'? | TS2339 - Property 'numResults' does not exist on type 'Sorter'.
-          this.sortedData.slice(0, this.numResults)
-        : // @ts-expect-error - TS2551 - Property 'sortedData' does not exist on type 'Sorter'. Did you mean 'sortData'?
-          this.sortedData,
+        ? this.sortedData.slice(0, this.numResults)
+        : this.sortedData,
     };
     this.dispatchEvent(new CustomEvent("sort-changed", { detail }));
   }
 
   getMore(more = 100) {
-    // @ts-expect-error - TS2339 - Property 'pageResults' does not exist on type 'Sorter'. | TS2339 - Property 'numResults' does not exist on type 'Sorter'. | TS2551 - Property 'sortedData' does not exist on type 'Sorter'. Did you mean 'sortData'?
     if (this.pageResults && this.numResults >= this.sortedData.length) {
       return;
     }
 
-    // @ts-expect-error - TS2339 - Property 'numResults' does not exist on type 'Sorter'.
     this.numResults += more;
     this.sendSortChanged();
   }
@@ -149,37 +122,24 @@ class Sorter extends LitElement {
     return html`
     <div class="select is-small">
       <select id="sort-select" @change=${(e) =>
-        // @ts-expect-error - TS2339 - Property 'sortKey' does not exist on type 'Sorter'.
         (this.sortKey = e.currentTarget.value)}>
 
-      ${
-        // @ts-expect-error - TS2339 - Property 'sortKeys' does not exist on type 'Sorter'.
-        this.sortKeys.map(
-          (sort) => html`
-            <option
-              value="${sort.key}"
-              ?selected="${
-                // @ts-expect-error - TS2339 - Property 'sortKey' does not exist on type 'Sorter'.
-                sort.key === this.sortKey
-              }"
-            >
-              Sort By: ${sort.name}
-            </option>
-          `,
-        )
-      }
+      ${this.sortKeys?.map(
+        (sort) => html`
+          <option value="${sort.key}" ?selected="${sort.key === this.sortKey}">
+            Sort By: ${sort.name}
+          </option>
+        `,
+      )}
       </select>
     </div>
     <button @click=${() =>
-      // @ts-expect-error - TS2339 - Property 'sortDesc' does not exist on type 'Sorter'. | TS2339 - Property 'sortDesc' does not exist on type 'Sorter'.
       (this.sortDesc = !this.sortDesc)} class="button is-small">
       <span>Order:</span>
       <span class="is-sr-only">${
-        // @ts-expect-error - TS2339 - Property 'sortDesc' does not exist on type 'Sorter'.
         this.sortDesc ? "Ascending" : "Descending"
       }</span>
       <span class="icon"><fa-icon aria-hidden="true" .svg=${
-        // @ts-expect-error - TS2339 - Property 'sortDesc' does not exist on type 'Sorter'.
         this.sortDesc ? fasSortUp : fasSortDown
       }></span>
     </button>`;