Require === and !== comparisons

Signed-off-by: Rūdolfs Ošiņš <rudolfs@osins.org>

.eslintrc.json

@@ -109,7 +109,9 @@
     "no-const-assign": "error",
     // Require let or const instead of var.
     // https://eslint.org/docs/rules/no-var
-    "no-var": "error"
+    "no-var": "error",
+    // Require `===` and `!==` comparisons.
+    "eqeqeq": "error"
   },
   "settings": {
     "svelte3/typescript": true

src/App.svelte

@@ -36,7 +36,7 @@
   function handleKeydown(event: KeyboardEvent) {
     if (event.key === 'Enter') {
       const elems = document.querySelectorAll<HTMLElement>('button.primary');
-      if (elems.length == 1) { // We only allow this when there's one primary button.
+      if (elems.length === 1) { // We only allow this when there's one primary button.
         elems[0].click();
       }
     }

src/Header.svelte

@@ -185,9 +185,9 @@
   </div>
 
   <div class="right">
-    {#if config && config.network.name == 'rinkeby'}
+    {#if config && config.network.name === 'rinkeby'}
       <span class="network">Rinkeby</span>
-    {:else if config && config.network.name == 'homestead'}
+    {:else if config && config.network.name === 'homestead'}
       <!-- Don't show anything -->
     {:else}
       <span class="network unavailable">No Network</span>

src/base/faucet/Index.svelte

@@ -98,7 +98,7 @@
 
 <main class="off-centered">
   <div>
-    {#if config.network.name == "homestead"}
+    {#if config.network.name === "homestead"}
       <div class="input-caption">
         To get RAD tokens on <strong>{config.network.name}</strong>, please
         check the known exchanges.

src/base/orgs/Org.ts

@@ -268,7 +268,7 @@ export class Org {
 
   static async getMulti(ids: string[], config: Config): Promise<Array<Org>> {
     const results = await Promise.all(ids.map(addr => Org.get(addr, config)));
-    const orgs = results.filter((org): org is Org => org != null);
+    const orgs = results.filter((org): org is Org => org !== null);
 
     return orgs;
   }

src/base/orgs/TransferOwnership.svelte

@@ -108,24 +108,24 @@
     </div>
   </Modal>
 {:else}
-  <Modal floating error={state == State.Failed} small={state == State.Failed}>
+  <Modal floating error={state === State.Failed} small={state === State.Failed}>
     <div slot="title">
       🔑
       <div>Transfer ownership</div>
     </div>
 
     <div slot="subtitle">
-      {#if state == State.Signing}
+      {#if state === State.Signing}
         Please confirm the transaction in your wallet.
-      {:else if state == State.Pending}
+      {:else if state === State.Pending}
         Waiting for transaction to be processed...
-      {:else if state == State.Proposing && org}
+      {:else if state === State.Proposing && org}
         Proposal is being submitted to the safe
         <strong>{formatAddress(org.owner)}</strong>,
         please sign the transaction in your wallet.
-      {:else if state == State.Idle}
+      {:else if state === State.Idle}
         Transfer the ownership of Org <strong>{formatAddress(org.address)}</strong> to a new address.
-      {:else if state == State.Failed}
+      {:else if state === State.Failed}
         <div class="error">
           {error}
         </div>
@@ -133,25 +133,25 @@
     </div>
 
     <div slot="body">
-      {#if state == State.Idle}
+      {#if state === State.Idle}
         <input type="text" size="40" disabled={state !== State.Idle} bind:this={input} bind:value={newOwner} />
-      {:else if state == State.Pending || state == State.Proposing || state == State.Signing}
+      {:else if state === State.Pending || state === State.Proposing || state === State.Signing}
         <Loading small center />
-      {:else if state == State.Failed}
+      {:else if state === State.Failed}
         <!-- ... -->
       {/if}
     </div>
 
     <div slot="actions">
-      {#if state == State.Signing}
+      {#if state === State.Signing}
         <button class="regular" on:click={() => dispatch('close')}>
           Cancel
         </button>
-      {:else if state == State.Pending}
+      {:else if state === State.Pending}
         <button class="regular" on:click={() => dispatch('close')}>
           Close
         </button>
-      {:else if state == State.Failed}
+      {:else if state === State.Failed}
         <button class="regular" on:click={resetForm}>
           Back
         </button>

src/base/profiles/AnchorActions.svelte

@@ -148,39 +148,39 @@
     </span>
 
     <span slot="subtitle">
-      {#if state == State.Confirm}
+      {#if state === State.Confirm}
         <span>Initiate the transaction...</span>
-      {:else if state == State.Signing}
+      {:else if state === State.Signing}
         <span>Sign the transaction in your wallet...</span>
-      {:else if state == State.Submitting}
+      {:else if state === State.Submitting}
         <span>Transaction is being confirmed...</span>
-      {:else if state == State.Success}
+      {:else if state === State.Success}
         <span>Transaction confirmed.</span>
-      {:else if state == State.Failed}
+      {:else if state === State.Failed}
         <span>Transaction failed</span>
       {/if}
     </span>
 
     <span slot="body">
-      {#if state == State.Confirm}
+      {#if state === State.Confirm}
         <div class="table">
           <div>Project</div><code>{anchor.id}</code>
           <div>Hash</div><code>{anchor.anchor.stateHash}</code>
         </div>
-      {:else if state == State.Failed}
+      {:else if state === State.Failed}
         <div>{error}</div>
       {/if}
     </span>
 
     <span slot="actions">
-      {#if state == State.Confirm}
+      {#if state === State.Confirm}
         <button class="primary" on:click={() => confirmAnchor(anchor.safeTxHash)}>
           Confirm
         </button>
         <button class="text" on:click={close}>
           Cancel
         </button>
-      {:else if state == State.Success || state == State.Failed}
+      {:else if state === State.Success || state === State.Failed}
         <button on:click={() => {
           close();
           dispatch("success");
@@ -196,39 +196,39 @@
     </span>
 
     <span slot="subtitle">
-      {#if state == State.Confirm}
+      {#if state === State.Confirm}
         <span>Initiate the transaction...</span>
-      {:else if state == State.Signing}
+      {:else if state === State.Signing}
         <span>Sign the transaction in your wallet...</span>
-      {:else if state == State.Submitting}
+      {:else if state === State.Submitting}
         <span>Transaction is being confirmed...</span>
-      {:else if state == State.Success}
+      {:else if state === State.Success}
         <span>Transaction confirmed.</span>
-      {:else if state == State.Failed}
+      {:else if state === State.Failed}
         <span>Transaction failed</span>
       {/if}
     </span>
 
     <span slot="body">
-      {#if state == State.Confirm}
+      {#if state === State.Confirm}
         <div class="table">
           <div>TxHash</div><code>{utils.formatHash(anchor.safeTxHash)}</code>
           <div>Quorum</div><code>{anchor.confirmations.length} of {safe.threshold}</code>
         </div>
-      {:else if state == State.Failed}
+      {:else if state === State.Failed}
         <div>{error}</div>
       {/if}
     </span>
 
     <span slot="actions">
-      {#if state == State.Confirm}
+      {#if state === State.Confirm}
         <button class="primary" on:click={() => executeTransaction(anchor.safeTxHash)}>
           Confirm
         </button>
         <button class="text" on:click={close}>
           Cancel
         </button>
-      {:else if state == State.Success || state == State.Failed}
+      {:else if state === State.Success || state === State.Failed}
         <button on:click={() => {
           close();
           dispatch("success");

src/base/profiles/AnchorBadge.svelte

@@ -46,12 +46,12 @@
 
 {#if anchors && head}
   <!-- commit is head and latest anchor  -->
-  {#if commit == anchors[0] && commit === head}
+  {#if commit === anchors[0] && commit === head}
     <span class="anchor-widget anchor-latest" class:no-bg={noBg}>
       <span class="anchor-label" title="{anchors[0]}">{#if text}latest&nbsp;{/if}🔐</span>
     </span>
   <!-- commit is not head but latest anchor  -->
-  {:else if commit == anchors[0] && commit !== head}
+  {:else if commit === anchors[0] && commit !== head}
     <span class="anchor-widget" class:no-bg={noBg} on:click={() => dispatch("click", head)}>
       <span class="anchor-label" title="{anchors[0]}">{#if text}latest&nbsp;{/if}🔐</span>
     </span>

src/base/projects/Blob.svelte

@@ -146,7 +146,7 @@
         </div>
       {:else}
         {#if line}
-          <div class="highlight" style="top: {line == 1 ? 1 : (1.5 * line) - 0.5}rem" />
+          <div class="highlight" style="top: {line === 1 ? 1 : (1.5 * line) - 0.5}rem" />
         {/if}
         <div class="line-numbers">
           {#each lineNumbers as lineNumber}

src/base/projects/BranchSelector.spec.ts

@@ -21,7 +21,7 @@ const defaultProps = {
 };
 
 describe('Logic', () => {
-  it("should show defaultBranch label and head commit if revision == head", () => {
+  it("should show defaultBranch label and head commit if revision === head", () => {
     const { rerender } = render(BranchSelector, {
       props: defaultProps,
     });
@@ -112,7 +112,7 @@ describe('Logic', () => {
     cy.get("div.hash.desktop").should("be.visible").should("have.text", "debf82ef3623ec11751a993bda85bac2ff1c6f00");
   });
 
-  it("should show defaultBranch label if revision == head", () => {
+  it("should show defaultBranch label if revision === head", () => {
     render(BranchSelector, {
       props: {
         ...defaultProps,

src/base/projects/BranchSelector.svelte

@@ -20,7 +20,7 @@
   $: showSelector = branchList.length > 1;
   $: head = project.head ?? branches[project.defaultBranch];
   $: commit = getOid(revision, branches) || head;
-  $: if (commit == head) {
+  $: if (commit === head) {
     branchLabel = project.defaultBranch;
   } else if (branches[revision]) {
     branchLabel = revision;

src/base/projects/Browser.svelte

@@ -33,7 +33,7 @@
   let mobileFileTree = false;
 
   const loadBlob = async (path: string): Promise<proj.Blob> => {
-    if (state.status == Status.Loaded && state.path === path) {
+    if (state.status === Status.Loaded && state.path === path) {
       return state.blob;
     }
 
@@ -78,7 +78,7 @@
   };
 
   $: getBlob = loadBlob(path);
-  $: loadingPath = state.status == Status.Loading ? state.path : null;
+  $: loadingPath = state.status === Status.Loading ? state.path : null;
 </script>
 
 <style>
@@ -185,12 +185,12 @@
         {:catch}
           <Placeholder icon="🍂">
             <span slot="title">
-              {#if path != "/"}
+              {#if path !== "/"}
                 <div><code>{path}</code></div>
               {/if}
             </span>
             <span slot="body">
-              {#if path == "/"}
+              {#if path === "/"}
                 The README could not be loaded.
               {:else}
                 This path could not be loaded.

src/base/projects/Header.svelte

@@ -130,14 +130,14 @@
   </span>
   <div
     class="stat commit-count clickable widget"
-    class:active={content == ProjectContent.History}
+    class:active={content === ProjectContent.History}
     on:click={() => toggleContent(ProjectContent.History, true)}>
     <strong>{tree.stats.commits}</strong> commit(s)
   </div>
   {#if project.issues > 0}
     <div
       class="stat issue-count clickable widget"
-      class:active={content == ProjectContent.Issues}
+      class:active={content === ProjectContent.Issues}
       on:click={() => toggleContent(ProjectContent.Issues, false)}>
       <strong>{project.issues}</strong> issue(s)
     </div>
@@ -149,7 +149,7 @@
   {#if project.patches > 0}
     <div
       class="stat patch-count clickable widget"
-      class:active={content == ProjectContent.Patches}
+      class:active={content === ProjectContent.Patches}
       on:click={() => toggleContent(ProjectContent.Patches, false)}>
       <strong>{project.patches}</strong> patch(es)
     </div>

src/base/projects/Patch.svelte

@@ -107,7 +107,7 @@
         class="summary-state"
         class:proposed={patch.state === "proposed"}
         class:draft={patch.state === "draft"}
-        class:archived={patch.state == "archived"}>
+        class:archived={patch.state === "archived"}>
         {capitalize(patch.state)}
       </div>
     </div>

src/base/projects/Project.svelte

@@ -70,13 +70,13 @@
   {:then { tree, commit }}
     <Header {tree} {commit} {browserStore} {project} noAnchor />
 
-    {#if content == proj.ProjectContent.Tree}
+    {#if content === proj.ProjectContent.Tree}
       <Browser {project} {commit} {tree} {browserStore} />
-    {:else if content == proj.ProjectContent.History}
+    {:else if content === proj.ProjectContent.History}
       <Async fetch={fetchCommits(project, commit)} let:result>
         <History {project} history={result} />
       </Async>
-    {:else if content == proj.ProjectContent.Commit}
+    {:else if content === proj.ProjectContent.Commit}
       <Async fetch={project.getCommit(commit)} let:result>
         <Commit {project} commit={result} />
       </Async>
@@ -91,19 +91,19 @@
     </div>
   {/await}
 
-  {#if content == proj.ProjectContent.Issues}
+  {#if content === proj.ProjectContent.Issues}
     <Async fetch={issue.Issue.getIssues(project.urn, project.seed.api)} let:result>
       <Issues {project} state={$browserStore.search?.get("state") || "open"} {config} issues={result} />
     </Async>
-  {:else if content == proj.ProjectContent.Issue && $browserStore.issue}
+  {:else if content === proj.ProjectContent.Issue && $browserStore.issue}
     <Async fetch={issue.Issue.getIssue(project.urn, $browserStore.issue, project.seed.api)} let:result>
       <Issue {project} {config} issue={result} />
     </Async>
-  {:else if content == proj.ProjectContent.Patches}
+  {:else if content === proj.ProjectContent.Patches}
     <Async fetch={patch.Patch.getPatches(project.urn, project.seed.api)} let:result>
       <Patches {project} {config} patches={result} />
     </Async>
-  {:else if content == proj.ProjectContent.Patch && $browserStore.patch}
+  {:else if content === proj.ProjectContent.Patch && $browserStore.patch}
     <Async fetch={patch.Patch.getPatch(project.urn, $browserStore.patch, project.seed.api)} let:result>
       <Patch {project} {config} patch={result} />
     </Async>

src/base/registrations/registrar.ts

@@ -86,7 +86,7 @@ export async function getRegistration(name: string, config: Config, resolver?: E
   ]);
 
   const [address, avatar, url, id, seedId, seedHost, seedGit, seedApi, anchorsAccount, twitter, github] =
-    meta.map(r => r.status == "fulfilled" && r.value ? r.value : undefined);
+    meta.map(r => r.status === "fulfilled" && r.value ? r.value : undefined);
 
   const profile: EnsProfile = {
     name,

src/ens/SetName.svelte

@@ -135,11 +135,11 @@
     </div>
 
     <div slot="subtitle">
-      {#if state == State.Signing}
+      {#if state === State.Signing}
         Please confirm the transaction in your wallet.
-      {:else if state == State.Pending}
+      {:else if state === State.Pending}
         Waiting for transaction to be processed...
-      {:else if state == State.Proposing && org}
+      {:else if state === State.Proposing && org}
         Proposal is being submitted
         <strong>{formatAddress(org.owner)}</strong>,
         please sign the transaction in your wallet.
@@ -161,11 +161,11 @@
     </div>
 
     <div slot="actions">
-      {#if state == State.Signing}
+      {#if state === State.Signing}
         <button class="regular" on:click={() => dispatch('close')}>
           Cancel
         </button>
-      {:else if state == State.Pending}
+      {:else if state === State.Pending}
         <button class="regular" on:click={() => dispatch('close')}>
           Close
         </button>

src/utils.ts

@@ -270,7 +270,7 @@ export const formatTimestamp = (timestamp: number, current = new Date().getTime(
   }
 
   for (const u in units) {
-    if (elapsed > units[u] || u == 'second') {
+    if (elapsed > units[u] || u === 'second') {
       // We convert the division result to a negative number to get "XX [unit] ago"
       return rtf.format(Math.round(elapsed / units[u]) * -1, u as Intl.RelativeTimeFormatUnit);
     }
@@ -323,7 +323,7 @@ export function getSearchParam(key: string, location: RouteLocation): string | n
 
 // Get the explorer link of an address, eg. Etherscan.
 export function explorerLink(addr: string, config: Config): string {
-  if (config.network.name == "rinkeby") {
+  if (config.network.name === "rinkeby") {
     return `https://rinkeby.etherscan.io/address/${addr}`;
   }
   return `https://etherscan.io/address/${addr}`;
@@ -494,7 +494,7 @@ export async function resolveEnsProfile(addressOrName: string, profileType: Prof
       const [avatar, address, seed, anchorsAccount] =
         // Just checking for r.value equal null and casting to undefined,
         // since resolver functions return null.
-        project.map(r => r.status == "fulfilled" && r.value ? r.value : null);
+        project.map(r => r.status === "fulfilled" && r.value ? r.value : null);
 
       return {
         name,