Fix missed rename, and improve types (#276)

Fixes a missed rename, in `src/item-index.ts`: I'd renamed `coll` to `item` but missed updating it in the `update` method's `changedProperties` map. This PR fixes that, and adds better typing to all of the instances of `changedProperties` by using [`PropertyValues<this>`](https://lit.dev/docs/components/lifecycle/#typescript-types-for-changedproperties), and implementing class properties for missing Lit properties.
2024-01-05 18:32:22 -08:00
parent 3bee02bd89
commit a40471128f
15 changed files with 229 additions and 396 deletions
@@ -1,4 +1,4 @@
-import { LitElement, html, css } from "lit";
+import { LitElement, html, css, type PropertyValues } from "lit";
 import { wrapCss, clickOnSpacebarPress } from "./misc";

 import { getReplayLink } from "./pageutils";
@@ -6,12 +6,35 @@ import { getReplayLink } from "./pageutils";
 import fasSearch from "@fortawesome/fontawesome-free/svgs/solid/search.svg";

 import "keyword-mark-element/lib/keyword-mark.js";
+import { type Item as ItemType } from "./types";
+
+type URLResource = {
+  url: string;
+  mime: string;
+  status: string;
+  date: string;
+  ts: string;
+};

 // ===========================================================================
 /**
 * @prop {boolean | undefined} active
 */
 class URLResources extends LitElement {
+  collInfo: ItemType | Record<string, never> | null = null;
+  isSidebar: boolean;
+  currMime: string;
+  query: string;
+  urlSearchType: string;
+  filteredResults: URLResource[];
+  sortedResults: URLResource[];
+  results: URLResource[];
+  newQuery: null;
+  tryMore: boolean;
+  loading: boolean;
+  sortKey: string;
+  sortDesc: boolean;
+  private _ival?: number;
  static get filters() {
    return [
      { name: "HTML", filter: "text/html,text/xhtml" },
@@ -58,37 +81,23 @@ class URLResources extends LitElement {

  constructor() {
    super();
-    // @ts-expect-error - TS2339 - Property 'collInfo' does not exist on type 'URLResources'.
-    this.collInfo = null;
-    // @ts-expect-error - TS2339 - Property 'isSidebar' does not exist on type 'URLResources'.
    this.isSidebar = false;

-    // @ts-expect-error - TS2339 - Property 'currMime' does not exist on type 'URLResources'.
    this.currMime = "";
-    // @ts-expect-error - TS2339 - Property 'query' does not exist on type 'URLResources'.
    this.query = "";
-    // @ts-expect-error - TS2339 - Property 'urlSearchType' does not exist on type 'URLResources'.
    this.urlSearchType = "";

-    // @ts-expect-error - TS2339 - Property 'filteredResults' does not exist on type 'URLResources'.
    this.filteredResults = [];
-    // @ts-expect-error - TS2339 - Property 'sortedResults' does not exist on type 'URLResources'.
    this.sortedResults = [];

-    // @ts-expect-error - TS2339 - Property 'results' does not exist on type 'URLResources'.
    this.results = [];

-    // @ts-expect-error - TS2339 - Property 'newQuery' does not exist on type 'URLResources'.
    this.newQuery = null;

-    // @ts-expect-error - TS2339 - Property 'tryMore' does not exist on type 'URLResources'.
    this.tryMore = false;
-    // @ts-expect-error - TS2339 - Property 'loading' does not exist on type 'URLResources'.
    this.loading = false;

-    // @ts-expect-error - TS2339 - Property 'sortKey' does not exist on type 'URLResources'.
    this.sortKey = "url";
-    // @ts-expect-error - TS2339 - Property 'sortDesc' does not exist on type 'URLResources'.
    this.sortDesc = false;
  }

@@ -109,24 +118,19 @@ class URLResources extends LitElement {

  firstUpdated() {
    //this.doLoadResources();
-    // @ts-expect-error - TS2339 - Property 'urlSearchType' does not exist on type 'URLResources'.
    if (this.urlSearchType === "") {
-      // @ts-expect-error - TS2339 - Property 'urlSearchType' does not exist on type 'URLResources'.
      this.urlSearchType = "prefix";
    }
  }

  _timedUpdate() {
-    // @ts-expect-error - TS2339 - Property 'newQuery' does not exist on type 'URLResources'.
    if (this.newQuery !== null) {
-      // @ts-expect-error - TS2339 - Property 'query' does not exist on type 'URLResources'. | TS2339 - Property 'newQuery' does not exist on type 'URLResources'.
      this.query = this.newQuery;
-      // @ts-expect-error - TS2339 - Property 'newQuery' does not exist on type 'URLResources'.
      this.newQuery = null;
    }
  }

-  updated(changedProperties) {
+  updated(changedProperties: PropertyValues<this>) {
    if (
      changedProperties.has("query") ||
      changedProperties.has("urlSearchType") ||
@@ -134,11 +138,8 @@ class URLResources extends LitElement {
    ) {
      this.doLoadResources();
      const data = {
-        // @ts-expect-error - TS2339 - Property 'query' does not exist on type 'URLResources'.
        query: this.query,
-        // @ts-expect-error - TS2339 - Property 'urlSearchType' does not exist on type 'URLResources'.
        urlSearchType: this.urlSearchType,
-        // @ts-expect-error - TS2339 - Property 'currMime' does not exist on type 'URLResources'.
        currMime: this.currMime,
      };
      const replaceLoc =
@@ -156,22 +157,16 @@ class URLResources extends LitElement {

  async doLoadResources(isMore = false) {
    const count = 100;
-
-    // @ts-expect-error - TS2339 - Property 'tryMore' does not exist on type 'URLResources'. | TS2339 - Property 'results' does not exist on type 'URLResources'.
    if (isMore && (!this.tryMore || !this.results.length)) {
      return;
    }

-    // @ts-expect-error - TS2339 - Property 'loading' does not exist on type 'URLResources'.
    if (this.loading) {
      return;
    }

-    // @ts-expect-error - TS2339 - Property 'loading' does not exist on type 'URLResources'.
    this.loading = true;
-    // @ts-expect-error - TS2339 - Property 'urlSearchType' does not exist on type 'URLResources'. | TS2339 - Property 'query' does not exist on type 'URLResources'.
    let url = this.urlSearchType !== "contains" ? this.query : "";
-    // @ts-expect-error - TS2339 - Property 'urlSearchType' does not exist on type 'URLResources'.
    const prefix = url && this.urlSearchType === "prefix" ? 1 : 0;

    // optimization: if not starting with http, likely won't have a match here, so just add https://
@@ -179,78 +174,60 @@ class URLResources extends LitElement {
      url = "https://" + url;
    }

-    // @ts-expect-error - TS2339 - Property 'currMime' does not exist on type 'URLResources'.
    const mime = this.currMime;

-    // @ts-expect-error - TS2345 - Argument of type '{ mime: any; url: any; prefix: number; count: number; }' is not assignable to parameter of type 'string | Record<string, string> | URLSearchParams | string[][] | undefined'.
    const params = new URLSearchParams({
      mime,
      url,
-      prefix,
-      count,
+      prefix: String(prefix),
+      count: String(count),
    });

    if (isMore) {
-      // @ts-expect-error - TS2339 - Property 'results' does not exist on type 'URLResources'. | TS2339 - Property 'results' does not exist on type 'URLResources'.
      const last = this.results[this.results.length - 1];
      params.set("fromMime", last.mime);
      params.set("fromUrl", last.url);
      params.set("fromStatus", last.status);
-      // @ts-expect-error - TS2345 - Argument of type 'number' is not assignable to parameter of type 'string'.
-      params.set("fromTs", new Date(last.date).getTime());
+      params.set("fromTs", String(new Date(last.date).getTime()));
    }

-    let resp = await fetch(
-      // @ts-expect-error - TS2339 - Property 'collInfo' does not exist on type 'URLResources'.
-      `${this.collInfo.apiPrefix}/urls?${params.toString()}`,
+    const resp = await fetch(
+      `${this.collInfo!.apiPrefix}/urls?${params.toString()}`,
    );
-    resp = await resp.json();
-    // @ts-expect-error - TS2339 - Property 'results' does not exist on type 'URLResources'. | TS2339 - Property 'results' does not exist on type 'URLResources'. | TS2551 - Property 'urls' does not exist on type 'Response'. Did you mean 'url'? | TS2551 - Property 'urls' does not exist on type 'Response'. Did you mean 'url'?
-    this.results = isMore ? this.results.concat(resp.urls) : resp.urls;
+    const data = await resp.json();
+    this.results = isMore ? this.results.concat(data.urls) : data.urls;
    // can be more than count if multiple mimes
-    // @ts-expect-error - TS2339 - Property 'tryMore' does not exist on type 'URLResources'. | TS2551 - Property 'urls' does not exist on type 'Response'. Did you mean 'url'?
-    this.tryMore = resp.urls.length >= count;
+    this.tryMore = data.urls.length >= count;
    this.filter();

-    // @ts-expect-error - TS2339 - Property 'loading' does not exist on type 'URLResources'.
    this.loading = false;
  }

  onChangeTypeSearch(event) {
-    // @ts-expect-error - TS2339 - Property 'currMime' does not exist on type 'URLResources'.
    this.currMime = event.currentTarget.value;
  }

  onChangeQuery(event) {
-    // @ts-expect-error - TS2339 - Property 'newQuery' does not exist on type 'URLResources'.
    this.newQuery = event.currentTarget.value;
-    // @ts-expect-error - TS2339 - Property '_ival' does not exist on type 'URLResources'.
    if (this._ival) {
-      // @ts-expect-error - TS2339 - Property '_ival' does not exist on type 'URLResources'.
      window.clearTimeout(this._ival);
    }
-    // @ts-expect-error - TS2339 - Property '_ival' does not exist on type 'URLResources'.
    this._ival = window.setTimeout(() => this._timedUpdate(), 250);
  }

  onClickUrlType(event) {
-    // @ts-expect-error - TS2339 - Property 'urlSearchType' does not exist on type 'URLResources'.
    this.urlSearchType = event.currentTarget.value;
  }

  filter() {
-    const filteredResults = [];
-    // @ts-expect-error - TS2339 - Property 'urlSearchType' does not exist on type 'URLResources'. | TS2339 - Property 'query' does not exist on type 'URLResources'.
+    const filteredResults: URLResource[] = [];
    const filterText = this.urlSearchType === "contains" ? this.query : "";
-    // @ts-expect-error - TS2339 - Property 'results' does not exist on type 'URLResources'.
    for (const result of this.results) {
      if (!filterText || result.url.indexOf(filterText) >= 0) {
-        // @ts-expect-error - TS2345 - Argument of type 'any' is not assignable to parameter of type 'never'.
        filteredResults.push(result);
      }
    }

-    // @ts-expect-error - TS2339 - Property 'filteredResults' does not exist on type 'URLResources'.
    this.filteredResults = filteredResults;
  }

@@ -258,7 +235,6 @@ class URLResources extends LitElement {
    const element = event.currentTarget;
    const diff =
      element.scrollHeight - element.scrollTop - element.clientHeight;
-    // @ts-expect-error - TS2339 - Property 'tryMore' does not exist on type 'URLResources'.
    if (this.tryMore && diff < 40) {
      this.doLoadResources(true);
    }
@@ -365,25 +341,15 @@ class URLResources extends LitElement {
    return html`
      <div
        role="heading"
-        aria-level="${
-          // @ts-expect-error - TS2339 - Property 'isSidebar' does not exist on type 'URLResources'.
-          this.isSidebar ? "2" : "1"
-        }"
+        aria-level="${this.isSidebar ? "2" : "1"}"
        class="is-sr-only"
      >
-        URLs in
-        ${
-          // @ts-expect-error - TS2339 - Property 'collInfo' does not exist on type 'URLResources'.
-          this.collInfo.title
-        }
+        URLs in ${this.collInfo!.title}
      </div>

      <div
        role="heading"
-        aria-level="${
-          // @ts-expect-error - TS2339 - Property 'isSidebar' does not exist on type 'URLResources'.
-          this.isSidebar ? "3" : "2"
-        }"
+        aria-level="${this.isSidebar ? "3" : "2"}"
        class="is-sr-only"
      >
        Search and Filter
@@ -398,10 +364,7 @@ class URLResources extends LitElement {
                  (filter) => html`
                    <option
                      value="${filter.filter}"
-                      ?selected="${
-                        // @ts-expect-error - TS2339 - Property 'currMime' does not exist on type 'URLResources'.
-                        filter.filter === this.currMime
-                      }"
+                      ?selected="${filter.filter === this.currMime}"
                    >
                      ${filter.name}
                    </option>
@@ -411,19 +374,15 @@ class URLResources extends LitElement {
            </div>
            <div class="field flex-auto">
              <div
-                class="control has-icons-left ${
-                  // @ts-expect-error - TS2339 - Property 'loading' does not exist on type 'URLResources'.
-                  this.loading ? "is-loading" : ""
-                }"
+                class="control has-icons-left ${this.loading
+                  ? "is-loading"
+                  : ""}"
              >
                <input
                  type="text"
                  class="input"
                  @input="${this.onChangeQuery}"
-                  .value="${
-                    // @ts-expect-error - TS2339 - Property 'query' does not exist on type 'URLResources'.
-                    this.query
-                  }"
+                  .value="${this.query}"
                  placeholder="Enter URL to Search"
                />
                <span class="icon is-left"
@@ -440,10 +399,7 @@ class URLResources extends LitElement {
                type="radio"
                name="urltype"
                value="contains"
-                ?checked="${
-                  // @ts-expect-error - TS2339 - Property 'urlSearchType' does not exist on type 'URLResources'.
-                  this.urlSearchType === "contains"
-                }"
+                ?checked="${this.urlSearchType === "contains"}"
                @click="${this.onClickUrlType}"
              />&nbsp;Contains</label
            >
@@ -452,10 +408,7 @@ class URLResources extends LitElement {
                type="radio"
                name="urltype"
                value="prefix"
-                ?checked="${
-                  // @ts-expect-error - TS2339 - Property 'urlSearchType' does not exist on type 'URLResources'.
-                  this.urlSearchType === "prefix"
-                }"
+                ?checked="${this.urlSearchType === "prefix"}"
                @click="${this.onClickUrlType}"
              />&nbsp;Prefix</label
            >
@@ -464,10 +417,7 @@ class URLResources extends LitElement {
                type="radio"
                name="urltype"
                value="exact"
-                ?checked="${
-                  // @ts-expect-error - TS2339 - Property 'urlSearchType' does not exist on type 'URLResources'.
-                  this.urlSearchType === "exact"
-                }"
+                ?checked="${this.urlSearchType === "exact"}"
                @click="${this.onClickUrlType}"
              />&nbsp;Exact</label
            >
@@ -477,11 +427,7 @@ class URLResources extends LitElement {
              is-pulled-right
              aria-live="polite"
              aria-atomic="true"
-              >${
-                // @ts-expect-error - TS2339 - Property 'filteredResults' does not exist on type 'URLResources'.
-                this.filteredResults.length
-              }
-              Result(s)</span
+              >${this.filteredResults.length} Result(s)</span
            >
          </div>
        </div>
@@ -490,19 +436,10 @@ class URLResources extends LitElement {
      <div class="sort-header is-hidden-tablet">
        <wr-sorter
          id="urls"
-          .sortKey="${
-            // @ts-expect-error - TS2339 - Property 'sortKey' does not exist on type 'URLResources'.
-            this.sortKey
-          }"
-          .sortDesc="${
-            // @ts-expect-error - TS2339 - Property 'sortDesc' does not exist on type 'URLResources'.
-            this.sortDesc
-          }"
+          .sortKey="${this.sortKey}"
+          .sortDesc="${this.sortDesc}"
          .sortKeys="${URLResources.sortKeys}"
-          .data="${
-            // @ts-expect-error - TS2339 - Property 'filteredResults' does not exist on type 'URLResources'.
-            this.filteredResults
-          }"
+          .data="${this.filteredResults}"
          @sort-changed="${this.onSortChanged}"
        >
        </wr-sorter>
@@ -510,10 +447,7 @@ class URLResources extends LitElement {

      <div
        role="heading"
-        aria-level="${
-          // @ts-expect-error - TS2339 - Property 'isSidebar' does not exist on type 'URLResources'.
-          this.isSidebar ? "3" : "2"
-        }"
+        aria-level="${this.isSidebar ? "3" : "2"}"
        id="results-heading"
        class="is-sr-only"
      >
@@ -530,15 +464,11 @@ class URLResources extends LitElement {
                @click="${this.onSort}"
                @keyup="${clickOnSpacebarPress}"
                data-key="url"
-                class="${
-                  // @ts-expect-error - TS2339 - Property 'sortKey' does not exist on type 'URLResources'.
-                  this.sortKey === "url"
-                    ? // @ts-expect-error - TS2339 - Property 'sortDesc' does not exist on type 'URLResources'.
-                      this.sortDesc
-                      ? "desc"
-                      : "asc"
-                    : ""
-                }"
+                class="${this.sortKey === "url"
+                  ? this.sortDesc
+                    ? "desc"
+                    : "asc"
+                  : ""}"
                >URL</a
              >
            </th>
@@ -549,15 +479,11 @@ class URLResources extends LitElement {
                @click="${this.onSort}"
                @keyup="${clickOnSpacebarPress}"
                data-key="ts"
-                class="${
-                  // @ts-expect-error - TS2339 - Property 'sortKey' does not exist on type 'URLResources'.
-                  this.sortKey === "ts"
-                    ? // @ts-expect-error - TS2339 - Property 'sortDesc' does not exist on type 'URLResources'.
-                      this.sortDesc
-                      ? "desc"
-                      : "asc"
-                    : ""
-                }"
+                class="${this.sortKey === "ts"
+                  ? this.sortDesc
+                    ? "desc"
+                    : "asc"
+                  : ""}"
                >Date</a
              >
            </th>
@@ -568,15 +494,11 @@ class URLResources extends LitElement {
                @click="${this.onSort}"
                @keyup="${clickOnSpacebarPress}"
                data-key="mime"
-                class="${
-                  // @ts-expect-error - TS2339 - Property 'sortKey' does not exist on type 'URLResources'.
-                  this.sortKey === "mime"
-                    ? // @ts-expect-error - TS2339 - Property 'sortDesc' does not exist on type 'URLResources'.
-                      this.sortDesc
-                      ? "desc"
-                      : "asc"
-                    : ""
-                }"
+                class="${this.sortKey === "mime"
+                  ? this.sortDesc
+                    ? "desc"
+                    : "asc"
+                  : ""}"
                >Mime Type</a
              >
            </th>
@@ -587,15 +509,11 @@ class URLResources extends LitElement {
                @click="${this.onSort}"
                @keyup="${clickOnSpacebarPress}"
                data-key="status"
-                class="${
-                  // @ts-expect-error - TS2339 - Property 'sortKey' does not exist on type 'URLResources'.
-                  this.sortKey === "status"
-                    ? // @ts-expect-error - TS2339 - Property 'sortDesc' does not exist on type 'URLResources'.
-                      this.sortDesc
-                      ? "desc"
-                      : "asc"
-                    : ""
-                }"
+                class="${this.sortKey === "status"
+                  ? this.sortDesc
+                    ? "desc"
+                    : "asc"
+                  : ""}"
                >Status</a
              >
            </th>
@@ -603,53 +521,45 @@ class URLResources extends LitElement {
        </thead>

        <tbody class="main-scroll" @scroll="${this.onScroll}">
-          ${
-            // @ts-expect-error - TS2339 - Property 'sortedResults' does not exist on type 'URLResources'.
-            this.sortedResults.length
-              ? // @ts-expect-error - TS2339 - Property 'sortedResults' does not exist on type 'URLResources'.
-                this.sortedResults.map(
-                  (result) => html`
-                    <tr class="columns result">
-                      <td class="column col-url is-6">
-                        <p class="minihead is-hidden-tablet">URL</p>
-                        <a
-                          @click="${this.onReplay}"
-                          data-url="${result.url}"
-                          data-ts="${result.ts}"
-                          href="${getReplayLink(
-                            "resources",
-                            result.url,
-                            result.ts,
-                          )}"
+          ${this.sortedResults.length
+            ? this.sortedResults.map(
+                (result) => html`
+                  <tr class="columns result">
+                    <td class="column col-url is-6">
+                      <p class="minihead is-hidden-tablet">URL</p>
+                      <a
+                        @click="${this.onReplay}"
+                        data-url="${result.url}"
+                        data-ts="${result.ts}"
+                        href="${getReplayLink(
+                          "resources",
+                          result.url,
+                          result.ts,
+                        )}"
+                      >
+                        <keyword-mark keywords="${this.query}"
+                          >${result.url}</keyword-mark
                        >
-                          <keyword-mark
-                            keywords="${
-                              // @ts-expect-error - TS2339 - Property 'query' does not exist on type 'URLResources'.
-                              this.query
-                            }"
-                            >${result.url}</keyword-mark
-                          >
-                        </a>
-                      </td>
-                      <td class="column col-ts is-2">
-                        <p class="minihead is-hidden-tablet">Date</p>
-                        ${new Date(result.date).toLocaleString()}
-                      </td>
-                      <td class="column col-mime is-3">
-                        <p class="minihead is-hidden-tablet">Mime Type</p>
-                        ${result.mime}
-                      </td>
-                      <td class="column col-status is-1">
-                        <p class="minihead is-hidden-tablet">Status</p>
-                        ${result.status}
-                      </td>
-                    </tr>
-                  `,
-                )
-              : html`<tr class="section">
-                  <td colspan="4"><i>No Results Found.</i></td>
-                </tr>`
-          }
+                      </a>
+                    </td>
+                    <td class="column col-ts is-2">
+                      <p class="minihead is-hidden-tablet">Date</p>
+                      ${new Date(result.date).toLocaleString()}
+                    </td>
+                    <td class="column col-mime is-3">
+                      <p class="minihead is-hidden-tablet">Mime Type</p>
+                      ${result.mime}
+                    </td>
+                    <td class="column col-status is-1">
+                      <p class="minihead is-hidden-tablet">Status</p>
+                      ${result.status}
+                    </td>
+                  </tr>
+                `,
+              )
+            : html`<tr class="section">
+                <td colspan="4"><i>No Results Found.</i></td>
+              </tr>`}
        </tbody>
      </table>
    `;
@@ -659,24 +569,17 @@ class URLResources extends LitElement {
    event.preventDefault();

    const key = event.currentTarget.getAttribute("data-key");
-    // @ts-expect-error - TS2339 - Property 'sortKey' does not exist on type 'URLResources'.
    if (key === this.sortKey) {
-      // @ts-expect-error - TS2339 - Property 'sortDesc' does not exist on type 'URLResources'. | TS2339 - Property 'sortDesc' does not exist on type 'URLResources'.
      this.sortDesc = !this.sortDesc;
    } else {
-      // @ts-expect-error - TS2339 - Property 'sortDesc' does not exist on type 'URLResources'.
      this.sortDesc = false;
-      // @ts-expect-error - TS2339 - Property 'sortKey' does not exist on type 'URLResources'.
      this.sortKey = key;
    }
  }

  onSortChanged(event) {
-    // @ts-expect-error - TS2339 - Property 'sortedResults' does not exist on type 'URLResources'.
    this.sortedResults = event.detail.sortedData;
-    // @ts-expect-error - TS2339 - Property 'sortKey' does not exist on type 'URLResources'.
    this.sortKey = event.detail.sortKey;
-    // @ts-expect-error - TS2339 - Property 'sortDesc' does not exist on type 'URLResources'.
    this.sortDesc = event.detail.sortDesc;
  }