Refactor code to comply with ESLint rules

Major refactoring using ESLint with rules from AirBnb and Vue.

Enable most of the ESLint rules and do necessary linting in the code.
Also add more information for rules that are disabled to describe what
they are and why they are disabled.

Allow logging (`console.log`) in test files, and in development mode
(e.g. when working with `npm run serve`), but disable it when
environment is production (as pre-configured by Vue). Also add flag
(`--mode production`) in `lint:eslint` command so production linting is
executed earlier in lifecycle.

Disable rules that requires a separate work. Such as ESLint rules that
are broken in TypeScript: no-useless-constructor (eslint/eslint#14118)
and no-shadow (eslint/eslint#13014).

src/presentation/components/Shared/Dialog.vue

@@ -1,12 +1,12 @@
 <template>
-    <modal
-        :name="name"
-        :scrollable="true"
-        :adaptive="true"
-        height="auto">
+  <modal
+    :name="name"
+    :scrollable="true"
+    :adaptive="true"
+    height="auto">
     <div class="dialog">
       <div class="dialog__content">
-          <slot></slot>
+        <slot></slot>
       </div>
       <div class="dialog__close-button">
         <font-awesome-icon :icon="['fas', 'times']"  @click="$modal.hide(name)"/>

src/presentation/components/Shared/Responsive.vue

@@ -11,8 +11,11 @@ import { throttle } from './Throttle';
 @Component
 export default class Responsive extends Vue {
   private width: number;
+
   private height: number;
+
   private observer: ResizeObserver;
+
   private get container(): HTMLElement { return this.$refs.containerElement as HTMLElement; }
 
   public async mounted() {
@@ -29,6 +32,7 @@ export default class Responsive extends Vue {
     this.observer.observe(this.container);
     this.fireChangeEvents();
   }
+
   public updateSize() {
     let sizeChanged = false;
     if (this.isWidthChanged()) {
@@ -43,12 +47,15 @@ export default class Responsive extends Vue {
       this.$emit('sizeChanged');
     }
   }
+
   @Emit('widthChanged') public updateWidth(width: number) {
     this.width = width;
   }
+
   @Emit('heightChanged') public updateHeight(height: number) {
     this.height = height;
   }
+
   public destroyed() {
     if (this.observer) {
       this.observer.disconnect();
@@ -60,9 +67,11 @@ export default class Responsive extends Vue {
     this.updateHeight(this.container.offsetHeight);
     this.$emit('sizeChanged');
   }
+
   private isWidthChanged(): boolean {
     return this.width !== this.container.offsetWidth;
   }
+
   private isHeightChanged(): boolean {
     return this.height !== this.container.offsetHeight;
   }
@@ -77,4 +86,3 @@ export default class Responsive extends Vue {
   display: inline-block; // if inline then it has no height or weight
 }
 </style>
-

src/presentation/components/Shared/StatefulVue.ts

@@ -1,38 +1,37 @@
 import { Component, Vue } from 'vue-property-decorator';
 import { AsyncLazy } from '@/infrastructure/Threading/AsyncLazy';
-import { IApplicationContext } from '@/application/Context/IApplicationContext';
+import { IApplicationContext, IApplicationContextChangedEvent } from '@/application/Context/IApplicationContext';
 import { buildContext } from '@/application/Context/ApplicationContextFactory';
-import { IApplicationContextChangedEvent } from '@/application/Context/IApplicationContext';
 import { IReadOnlyCategoryCollectionState } from '@/application/Context/State/ICategoryCollectionState';
 import { EventSubscriptionCollection } from '@/infrastructure/Events/EventSubscriptionCollection';
 
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore because https://github.com/vuejs/vue-class-component/issues/91
 @Component
 export abstract class StatefulVue extends Vue {
-    private static readonly instance = new AsyncLazy<IApplicationContext>(() => buildContext());
+  private static readonly instance = new AsyncLazy<IApplicationContext>(() => buildContext());
 
-    protected readonly events = new EventSubscriptionCollection();
+  protected readonly events = new EventSubscriptionCollection();
 
-    private readonly ownEvents = new EventSubscriptionCollection();
+  private readonly ownEvents = new EventSubscriptionCollection();
 
-    public async mounted() {
-        const context = await this.getCurrentContext();
-        this.ownEvents.register(context.contextChanged.on((event) => this.handleStateChangedEvent(event)));
-        this.handleCollectionState(context.state, undefined);
-    }
-    public destroyed() {
-        this.ownEvents.unsubscribeAll();
-        this.events.unsubscribeAll();
-    }
+  public async mounted() {
+    const context = await this.getCurrentContext();
+    this.ownEvents.register(
+      context.contextChanged.on((event) => this.handleStateChangedEvent(event)),
+    );
+    this.handleCollectionState(context.state, undefined);
+  }
 
-    protected abstract handleCollectionState(
-        newState: IReadOnlyCategoryCollectionState,
-        oldState: IReadOnlyCategoryCollectionState | undefined): void;
-    protected getCurrentContext(): Promise<IApplicationContext> {
-        return StatefulVue.instance.getValue();
-    }
+  protected abstract handleCollectionState(
+    newState: IReadOnlyCategoryCollectionState,
+    oldState: IReadOnlyCategoryCollectionState | undefined): void;
 
-    private handleStateChangedEvent(event: IApplicationContextChangedEvent) {
-        this.handleCollectionState(event.newState, event.oldState);
-    }
+  protected getCurrentContext(): Promise<IApplicationContext> {
+    return StatefulVue.instance.getValue();
+  }
+
+  private handleStateChangedEvent(event: IApplicationContextChangedEvent) {
+    this.handleCollectionState(event.newState, event.oldState);
+  }
 }

src/presentation/components/Shared/Throttle.ts

@@ -1,52 +1,62 @@
-export type CallbackType = (..._: any[]) => void;
+export type CallbackType = (..._: unknown[]) => void;
 
 export function throttle(
-    callback: CallbackType, waitInMs: number,
-    timer: ITimer = NodeTimer): CallbackType {
-    const throttler = new Throttler(timer, waitInMs, callback);
-    return (...args: any[]) => throttler.invoke(...args);
+  callback: CallbackType,
+  waitInMs: number,
+  timer: ITimer = NodeTimer,
+): CallbackType {
+  const throttler = new Throttler(timer, waitInMs, callback);
+  return (...args: unknown[]) => throttler.invoke(...args);
 }
 
+// Allows aligning with both NodeJs (NodeJs.Timeout) and Window type (number)
+export type TimeoutType = ReturnType<typeof setTimeout>;
+
 export interface ITimer {
-    setTimeout: (callback: () => void, ms: number) => ReturnType<typeof setTimeout>;
-    clearTimeout: (timeoutId: ReturnType<typeof setTimeout>) => void;
-    dateNow(): number;
+  setTimeout: (callback: () => void, ms: number) => TimeoutType;
+  clearTimeout: (timeoutId: TimeoutType) => void;
+  dateNow(): number;
 }
 
 const NodeTimer: ITimer = {
-    setTimeout: (callback, ms) => setTimeout(callback, ms),
-    clearTimeout: (timeoutId) => clearTimeout(timeoutId),
-    dateNow: () => Date.now(),
+  setTimeout: (callback, ms) => setTimeout(callback, ms),
+  clearTimeout: (timeoutId) => clearTimeout(timeoutId),
+  dateNow: () => Date.now(),
 };
 
 interface IThrottler {
-    invoke: CallbackType;
+  invoke: CallbackType;
 }
 
 class Throttler implements IThrottler {
-    private queuedToRun: ReturnType<typeof setTimeout>;
-    private previouslyRun: number;
-    constructor(
-        private readonly timer: ITimer,
-        private readonly waitInMs: number,
-        private readonly callback: CallbackType) {
-        if (!timer) { throw new Error('undefined timer'); }
-        if (!waitInMs) { throw new Error('no delay to throttle'); }
-        if (waitInMs < 0) { throw new Error('negative delay'); }
-        if (!callback) { throw new Error('undefined callback'); }
+  private queuedExecutionId: TimeoutType;
+
+  private previouslyRun: number;
+
+  constructor(
+    private readonly timer: ITimer,
+    private readonly waitInMs: number,
+    private readonly callback: CallbackType,
+  ) {
+    if (!timer) { throw new Error('undefined timer'); }
+    if (!waitInMs) { throw new Error('no delay to throttle'); }
+    if (waitInMs < 0) { throw new Error('negative delay'); }
+    if (!callback) { throw new Error('undefined callback'); }
+  }
+
+  public invoke(...args: unknown[]): void {
+    const now = this.timer.dateNow();
+    if (this.queuedExecutionId !== undefined) {
+      this.timer.clearTimeout(this.queuedExecutionId);
+      this.queuedExecutionId = undefined;
     }
-    public invoke(...args: any[]): void {
-        const now = this.timer.dateNow();
-        if (this.queuedToRun) {
-            this.queuedToRun = this.timer.clearTimeout(this.queuedToRun) as undefined;
-        }
-        if (!this.previouslyRun || (now - this.previouslyRun >= this.waitInMs)) {
-            this.callback(...args);
-            this.previouslyRun = now;
-        } else {
-            const nextCall = () => this.invoke(...args);
-            const nextCallDelayInMs = this.waitInMs - (now - this.previouslyRun);
-            this.queuedToRun = this.timer.setTimeout(nextCall, nextCallDelayInMs);
-        }
+    if (!this.previouslyRun || (now - this.previouslyRun >= this.waitInMs)) {
+      this.callback(...args);
+      this.previouslyRun = now;
+    } else {
+      const nextCall = () => this.invoke(...args);
+      const nextCallDelayInMs = this.waitInMs - (now - this.previouslyRun);
+      this.queuedExecutionId = this.timer.setTimeout(nextCall, nextCallDelayInMs);
     }
+  }
 }