Format src files with Prettier (#215)

Formats files in `src` with [prettier for consistent code style](https://prettier.io/docs/en/why-prettier) and adds npm script

Related to https://github.com/webrecorder/replayweb.page/issues/201

src/url-resources.js

@@ -7,44 +7,49 @@ import fasSearch from "@fortawesome/fontawesome-free/svgs/solid/search.svg";
 
 import "keyword-mark-element/lib/keyword-mark.js";
 
-
 // ===========================================================================
-class URLResources extends LitElement
-{
+class URLResources extends LitElement {
   static get filters() {
     return [
-      {name: "HTML", filter: "text/html,text/xhtml"},
-      {name: "Images", filter: "image/"},
-      {name: "Audio/Video", filter: "audio/,video/"},
-      {name: "PDF", filter: "application/pdf"},
-      {name: "Javascript", filter: "application/javascript,application/x-javascript"},
-      {name: "CSS", filter: "text/css"},
-      {name: "Fonts", filter: "font/,application/font-woff"},
-      {name: "Plain Text", filter: "text/plain"},
-      {name: "JSON", filter: "application/json"},
-      {name: "DASH/HLS", filter: "application/dash+xml,application/x-mpegURL,application/vnd.apple.mpegurl"},
-      {name: "All URLs", filter: ""}
+      { name: "HTML", filter: "text/html,text/xhtml" },
+      { name: "Images", filter: "image/" },
+      { name: "Audio/Video", filter: "audio/,video/" },
+      { name: "PDF", filter: "application/pdf" },
+      {
+        name: "Javascript",
+        filter: "application/javascript,application/x-javascript",
+      },
+      { name: "CSS", filter: "text/css" },
+      { name: "Fonts", filter: "font/,application/font-woff" },
+      { name: "Plain Text", filter: "text/plain" },
+      { name: "JSON", filter: "application/json" },
+      {
+        name: "DASH/HLS",
+        filter:
+          "application/dash+xml,application/x-mpegURL,application/vnd.apple.mpegurl",
+      },
+      { name: "All URLs", filter: "" },
     ];
   }
 
   static get sortKeys() {
     return [
       {
-        "key": "url",
-        "name": "URL"
+        key: "url",
+        name: "URL",
       },
       {
-        "key": "ts",
-        "name": "Date"
+        key: "ts",
+        name: "Date",
       },
       {
-        "key": "mime",
-        "name": "Mime Type",
+        key: "mime",
+        name: "Mime Type",
       },
       {
-        "key": "status",
-        "name": "Status"
-      }
+        key: "status",
+        name: "Status",
+      },
     ];
   }
 
@@ -82,7 +87,7 @@ class URLResources extends LitElement
       sortedResults: { type: Array },
       loading: { type: Boolean },
       sortKey: { type: String },
-      sortDesc: { type: Boolean }
+      sortDesc: { type: Boolean },
     };
   }
 
@@ -101,18 +106,23 @@ class URLResources extends LitElement
   }
 
   updated(changedProperties) {
-    if (changedProperties.has("query") ||
-        changedProperties.has("urlSearchType") ||
-        changedProperties.has("currMime")) {
-
+    if (
+      changedProperties.has("query") ||
+      changedProperties.has("urlSearchType") ||
+      changedProperties.has("currMime")
+    ) {
       this.doLoadResources();
       const data = {
         query: this.query,
         urlSearchType: this.urlSearchType,
-        currMime: this.currMime
+        currMime: this.currMime,
       };
-      const replaceLoc = !changedProperties.has("currMime") && !changedProperties.has("urlSearchType");
-      this.dispatchEvent(new CustomEvent("coll-tab-nav", {detail: {replaceLoc, data}}));
+      const replaceLoc =
+        !changedProperties.has("currMime") &&
+        !changedProperties.has("urlSearchType");
+      this.dispatchEvent(
+        new CustomEvent("coll-tab-nav", { detail: { replaceLoc, data } }),
+      );
     }
 
     if (changedProperties.has("sortKey") || changedProperties.has("sortDesc")) {
@@ -132,7 +142,7 @@ class URLResources extends LitElement
     }
 
     this.loading = true;
-    let url = (this.urlSearchType !== "contains" ? this.query : "");
+    let url = this.urlSearchType !== "contains" ? this.query : "";
     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://
@@ -146,7 +156,7 @@ class URLResources extends LitElement
       mime,
       url,
       prefix,
-      count
+      count,
     });
 
     if (isMore) {
@@ -157,11 +167,13 @@ class URLResources extends LitElement
       params.set("fromTs", new Date(last.date).getTime());
     }
 
-    let resp = await fetch(`${this.collInfo.apiPrefix}/urls?${params.toString()}`);
+    let resp = await fetch(
+      `${this.collInfo.apiPrefix}/urls?${params.toString()}`,
+    );
     resp = await resp.json();
     this.results = isMore ? this.results.concat(resp.urls) : resp.urls;
     // can be more than count if multiple mimes
-    this.tryMore = (resp.urls.length >= count);
+    this.tryMore = resp.urls.length >= count;
     this.filter();
 
     this.loading = false;
@@ -185,7 +197,7 @@ class URLResources extends LitElement
 
   filter() {
     const filteredResults = [];
-    const filterText = (this.urlSearchType === "contains" ? this.query : "");
+    const filterText = this.urlSearchType === "contains" ? this.query : "";
     for (const result of this.results) {
       if (!filterText || result.url.indexOf(filterText) >= 0) {
         filteredResults.push(result);
@@ -197,7 +209,8 @@ class URLResources extends LitElement
 
   onScroll(event) {
     const element = event.currentTarget;
-    const diff = (element.scrollHeight - element.scrollTop) - element.clientHeight;
+    const diff =
+      element.scrollHeight - element.scrollTop - element.clientHeight;
     if (this.tryMore && diff < 40) {
       this.doLoadResources(true);
     }
@@ -205,121 +218,137 @@ class URLResources extends LitElement
 
   static get styles() {
     return wrapCss(css`
-    :host {
-      width: 100%;
-      height: 100%;
-      display: flex;
-      min-width: 0px;
-      flex-direction: column;
-    }
-    :host(.sidebar) .is-hidden-tablet {
-      display: flex !important;
-    }
+      :host {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        min-width: 0px;
+        flex-direction: column;
+      }
+      :host(.sidebar) .is-hidden-tablet {
+        display: flex !important;
+      }
 
-    :host(.sidebar) .is-hidden-mobile {
-      display: none !important;
-    }
+      :host(.sidebar) .is-hidden-mobile {
+        display: none !important;
+      }
 
-    :host(.sidebar) .level, :host(.sidebar) .level-left, :host(.sidebar) .level-right {
-      display: block !important;
-    }
+      :host(.sidebar) .level,
+      :host(.sidebar) .level-left,
+      :host(.sidebar) .level-right {
+        display: block !important;
+      }
 
-    :host(.sidebar) .columns {
-      display: flex !important;
-      flex-direction: column;
-    }
+      :host(.sidebar) .columns {
+        display: flex !important;
+        flex-direction: column;
+      }
 
-    :host(.sidebar) .column {
-      width: 100% !important;
-    }
+      :host(.sidebar) .column {
+        width: 100% !important;
+      }
 
-    .notification {
-      width: 100%;
-    }
-    .all-results {
-      margin: 0 0 0 0.5em;
-      display: flex;
-      flex-direction: column;
-      min-height: 0;
-    }
-    .main-scroll {
-      flex-grow: 1;
-    }
-    .minihead {
-      font-size: 10px;
-      font-weight: bold;
-    }
-    .columns {
-      margin: 0px;
-    }
-    thead {
-      margin-bottom: 24px;
-    }
-    table th:not([align]) {
-      text-align: left;
-    }
-    .result {
-      border-bottom: 1px #dbdbdb solid;
-      min-height: fit-content;
-    }
-    .results-head {
-      border-bottom: 2px #dbdbdb solid;
-      margin-right: 16px;
-      min-height: fit-content;
-      display: block;
-      width: 100%;
-    }
-    .results-head a {
-      color: black;
-    }
-    .all-results .column {
-      word-break: break-word;
-    }
-    div.sort-header {
-      padding: 10px;
-      margin-bottom: 0px !important;
-      min-height: fit-content;
-    }
-    .flex-auto {
-      flex: auto;
-    }
-    .asc:after {
-      content: "▼";
-      font-size: 0.75em;
-    }
-    .desc:after {
-      content: "▲";
-      font-size: 0.75em;
-    }
-    .num-results {
-      margin-left: 1em;
-      font-style: italic;
-    }
+      .notification {
+        width: 100%;
+      }
+      .all-results {
+        margin: 0 0 0 0.5em;
+        display: flex;
+        flex-direction: column;
+        min-height: 0;
+      }
+      .main-scroll {
+        flex-grow: 1;
+      }
+      .minihead {
+        font-size: 10px;
+        font-weight: bold;
+      }
+      .columns {
+        margin: 0px;
+      }
+      thead {
+        margin-bottom: 24px;
+      }
+      table th:not([align]) {
+        text-align: left;
+      }
+      .result {
+        border-bottom: 1px #dbdbdb solid;
+        min-height: fit-content;
+      }
+      .results-head {
+        border-bottom: 2px #dbdbdb solid;
+        margin-right: 16px;
+        min-height: fit-content;
+        display: block;
+        width: 100%;
+      }
+      .results-head a {
+        color: black;
+      }
+      .all-results .column {
+        word-break: break-word;
+      }
+      div.sort-header {
+        padding: 10px;
+        margin-bottom: 0px !important;
+        min-height: fit-content;
+      }
+      .flex-auto {
+        flex: auto;
+      }
+      .asc:after {
+        content: "▼";
+        font-size: 0.75em;
+      }
+      .desc:after {
+        content: "▲";
+        font-size: 0.75em;
+      }
+      .num-results {
+        margin-left: 1em;
+        font-style: italic;
+      }
     `);
   }
 
   render() {
     return html`
-    <div role="heading" aria-level="${this.isSidebar ? "2": "1"}" class="is-sr-only">URLs in ${this.collInfo.title}</div>
+    <div role="heading" aria-level="${
+      this.isSidebar ? "2" : "1"
+    }" class="is-sr-only">URLs in ${this.collInfo.title}</div>
 
-    <div role="heading" aria-level="${this.isSidebar ? "3": "2"}" class="is-sr-only">Search and Filter</div>
+    <div role="heading" aria-level="${
+      this.isSidebar ? "3" : "2"
+    }" class="is-sr-only">Search and Filter</div>
     <div class="notification level is-marginless">
       <div class="level-left flex-auto">
         <div class="level-item flex-auto">
           <span class="is-hidden-mobile">Search:&nbsp;&nbsp;</span>
           <div class="select">
             <select @change="${this.onChangeTypeSearch}">
-            ${URLResources.filters.map((filter) => html`
-            <option value="${filter.filter}"
-            ?selected="${filter.filter === this.currMime}">
-            ${filter.name}
-            </option>
-            `)}
+            ${URLResources.filters.map(
+              (filter) => html`
+                <option
+                  value="${filter.filter}"
+                  ?selected="${filter.filter === this.currMime}"
+                >
+                  ${filter.name}
+                </option>
+              `,
+            )}
             </select>
           </div>
           <div class="field flex-auto">
-            <div class="control has-icons-left ${this.loading ? "is-loading" : ""}">
-              <input type="text" class="input" @input="${this.onChangeQuery}" .value="${this.query}" type="text" placeholder="Enter URL to Search">
+            <div class="control has-icons-left ${
+              this.loading ? "is-loading" : ""
+            }">
+              <input type="text" class="input" @input="${
+                this.onChangeQuery
+              }" .value="${
+                this.query
+              }" type="text" placeholder="Enter URL to Search">
               <span class="icon is-left"><fa-icon .svg="${fasSearch}"/></span>
             </div>
           </div>
@@ -327,10 +356,18 @@ class URLResources extends LitElement
       </div>
       <div class="control level-right">
         <div style="margin-left: 1em" class="control">
-          <label class="radio has-text-left"><input type="radio" name="urltype" value="contains" ?checked="${this.urlSearchType === "contains"}" @click="${this.onClickUrlType}">&nbsp;Contains</label>
-          <label class="radio has-text-left"><input type="radio" name="urltype" value="prefix" ?checked="${this.urlSearchType === "prefix"}" @click="${this.onClickUrlType}">&nbsp;Prefix</label>
-          <label class="radio has-text-left"><input type="radio" name="urltype" value="exact" ?checked="${this.urlSearchType === "exact"}" @click="${this.onClickUrlType}">&nbsp;Exact</label>
-          <span id="num-results" class="num-results" is-pulled-right" aria-live="polite" aria-atomic="true">${this.filteredResults.length} Result(s)</span>
+          <label class="radio has-text-left"><input type="radio" name="urltype" value="contains" ?checked="${
+            this.urlSearchType === "contains"
+          }" @click="${this.onClickUrlType}">&nbsp;Contains</label>
+          <label class="radio has-text-left"><input type="radio" name="urltype" value="prefix" ?checked="${
+            this.urlSearchType === "prefix"
+          }" @click="${this.onClickUrlType}">&nbsp;Prefix</label>
+          <label class="radio has-text-left"><input type="radio" name="urltype" value="exact" ?checked="${
+            this.urlSearchType === "exact"
+          }" @click="${this.onClickUrlType}">&nbsp;Exact</label>
+          <span id="num-results" class="num-results" is-pulled-right" aria-live="polite" aria-atomic="true">${
+            this.filteredResults.length
+          } Result(s)</span>
         </div>
       </div>
     </div>
@@ -345,30 +382,78 @@ class URLResources extends LitElement
       </wr-sorter>
     </div>
 
-    <div role="heading" aria-level="${this.isSidebar ? "3": "2"}" id="results-heading" class="is-sr-only">Results</div>
+    <div role="heading" aria-level="${
+      this.isSidebar ? "3" : "2"
+    }" id="results-heading" class="is-sr-only">Results</div>
 
     <table class="all-results" aria-labelledby="results-heading num-results">
       <thead>
         <tr class="columns results-head has-text-weight-bold">
-          <th scope="col" class="column col-url is-6 is-hidden-mobile"><a role="button" href="#" @click="${this.onSort}" @keyup="${clickOnSpacebarPress}" data-key="url" class="${this.sortKey === "url" ? (this.sortDesc ? "desc" : "asc") : ""}">URL</a></th>
-          <th scope="col" class="column col-ts is-2 is-hidden-mobile"><a role="button" href="#" @click="${this.onSort}" @keyup="${clickOnSpacebarPress}" data-key="ts" class="${this.sortKey === "ts" ? (this.sortDesc ? "desc" : "asc") : ""}">Date</a></th>
-          <th scope="col" class="column col-mime is-3 is-hidden-mobile"><a role="button" href="#" @click="${this.onSort}" @keyup="${clickOnSpacebarPress}" data-key="mime" class="${this.sortKey === "mime" ? (this.sortDesc ? "desc" : "asc") : ""}">Mime Type</a></th>
-          <th scope="col" class="column col-status is-1 is-hidden-mobile"><a role="button" href="#" @click="${this.onSort}" @keyup="${clickOnSpacebarPress}" data-key="status" class="${this.sortKey === "status" ? (this.sortDesc ? "desc" : "asc") : ""}">Status</a></th>
+          <th scope="col" class="column col-url is-6 is-hidden-mobile"><a role="button" href="#" @click="${
+            this.onSort
+          }" @keyup="${clickOnSpacebarPress}" data-key="url" class="${
+            this.sortKey === "url" ? (this.sortDesc ? "desc" : "asc") : ""
+          }">URL</a></th>
+          <th scope="col" class="column col-ts is-2 is-hidden-mobile"><a role="button" href="#" @click="${
+            this.onSort
+          }" @keyup="${clickOnSpacebarPress}" data-key="ts" class="${
+            this.sortKey === "ts" ? (this.sortDesc ? "desc" : "asc") : ""
+          }">Date</a></th>
+          <th scope="col" class="column col-mime is-3 is-hidden-mobile"><a role="button" href="#" @click="${
+            this.onSort
+          }" @keyup="${clickOnSpacebarPress}" data-key="mime" class="${
+            this.sortKey === "mime" ? (this.sortDesc ? "desc" : "asc") : ""
+          }">Mime Type</a></th>
+          <th scope="col" class="column col-status is-1 is-hidden-mobile"><a role="button" href="#" @click="${
+            this.onSort
+          }" @keyup="${clickOnSpacebarPress}" data-key="status" class="${
+            this.sortKey === "status" ? (this.sortDesc ? "desc" : "asc") : ""
+          }">Status</a></th>
         </tr>
       </thead>
 
       <tbody class="main-scroll" @scroll="${this.onScroll}">
-      ${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>
-            </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>`}
+      ${
+        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
+                      >
+                    </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>
       `;
@@ -399,7 +484,7 @@ class URLResources extends LitElement
       ts: event.currentTarget.getAttribute("data-ts"),
     };
 
-    this.dispatchEvent(new CustomEvent("coll-tab-nav", {detail: {data}}));
+    this.dispatchEvent(new CustomEvent("coll-tab-nav", { detail: { data } }));
     return false;
   }
 }