fixed types

src/components/app-link/AppLinkElement.ts

@@ -1,13 +1,6 @@
-import {
-    attr,
-    targets,
-    controller,
-    target,
-    listenForBind,
-} from "@github/catalyst";
-import { closest, index, update, isTrue } from "core/utils";
-import { html, render, until } from "@github/jtml";
-import { PingService } from "services/";
+import { attr, controller, target } from "@github/catalyst";
+import { isTrue } from "core/utils";
+import { html, TemplateResult } from "@github/jtml";
 import { AppMainElement } from "components/app-main/AppMainElement";
 import { RouterService } from "core/services";
 import { BaseComponentElement } from "common/";
@@ -32,17 +25,17 @@ class AppLinkElement extends BaseComponentElement {
         }
         this.update();
         if (isTrue(this.goBack)) {
-            window.addEventListener("routechanged", this.update);
+            this.appMain.addEventListener("routechanged", this.update);
         }
     };
 
-    elementDisconnected = (): void => {
+    elementDisconnected = (appMain: AppMainElement): void => {
         if (isTrue(this.goBack)) {
-            window.removeEventListener("routechanged", this.update);
+            appMain?.removeEventListener("routechanged", this.update);
         }
     };
 
-    goTo = (e: Event) => {
+    goTo = (e: Event): void => {
         e.preventDefault();
         if (!isTrue(this.goBack) && this.to) {
             this.routerService.goTo(this.to);
@@ -52,11 +45,11 @@ class AppLinkElement extends BaseComponentElement {
         this.update();
     };
 
-    get disabled() {
+    get disabled(): boolean {
         return isTrue(this.goBack) && this.routerService.emptyState;
     }
 
-    render = () => {
+    render = (): TemplateResult => {
         return html`${this.disabled
             ? html`<a
                   class="btn btn-link btn-disabled"
@@ -74,3 +67,5 @@ class AppLinkElement extends BaseComponentElement {
               >`}`;
     };
 }
+
+export type { AppLinkElement };

src/components/app-main/AppMainElement.ts

@@ -1,8 +1,8 @@
 import { controller, target } from "@github/catalyst";
-import { closest } from "core/utils";
 import { AppService, HttpClient, RouterService } from "core/services";
 import { AuthStore } from "core/store";
 import { BaseComponentElement } from "common/";
+import { AppModalElement, AppRootElement } from "components/";
 
 @controller
 class AppMainElement extends BaseComponentElement {
@@ -10,8 +10,8 @@ class AppMainElement extends BaseComponentElement {
     public authStore: AuthStore;
     private httpClient: HttpClient;
     public appService: AppService;
-    @target appModal;
-    @target mainRoot;
+    @target appModal: AppModalElement;
+    @target mainRoot: AppRootElement;
 
     constructor() {
         super();
@@ -21,8 +21,8 @@ class AppMainElement extends BaseComponentElement {
         const mainRoot = this.createMainRoot();
         this.httpClient = new HttpClient();
         this.appService = new AppService(this, this.httpClient);
-        this.routerService = new RouterService(mainRoot);
-        this.authStore = new AuthStore(this.appService);
+        this.routerService = new RouterService(this, mainRoot);
+        this.authStore = new AuthStore(this, this.appService);
         this.routerService.setRoutes([
             {
                 path: "/",
@@ -134,7 +134,7 @@ class AppMainElement extends BaseComponentElement {
     };
 
     isAuth = (): boolean => {
-        return this.authStore && this.authStore.token;
+        return this.authStore && !!this.authStore.token;
     };
 }
 

src/components/app-menu/AppMenuElement.ts

@@ -1,8 +1,7 @@
-import { controller, target } from "@github/catalyst";
-import { html, render, TemplateResult } from "@github/jtml";
+import { controller } from "@github/catalyst";
+import { html, TemplateResult } from "@github/jtml";
 import { BaseComponentElement } from "common/";
 import { AppMainElement } from "components/app-main/AppMainElement";
-import { closest, update } from "core/utils";
 import { WalletService } from "services/";
 
 @controller
@@ -14,21 +13,21 @@ class AppMenuElement extends BaseComponentElement {
         super();
     }
 
-    elementConnected = () => {
+    elementConnected = (): void => {
         this.walletService = new WalletService(this.appMain?.appService);
         if (this.appMain.isAuth) {
             this.getWallets();
         } else {
             this.update();
         }
-        window.addEventListener("tokenchange", this.updateToken);
+        this.appMain.addEventListener("tokenchange", this.updateToken);
     };
 
-    elementDisconnected = () => {
-        window.removeEventListener("tokenchange", this.updateToken);
+    elementDisconnected = (appMain: AppMainElement): void => {
+        appMain?.removeEventListener("tokenchange", this.updateToken);
     };
 
-    getWallets = async () => {
+    getWallets = async (): Promise<void> => {
         try {
             const response = await this.walletService.getAll({ rpp: 2 });
             this.setWallets(response.items, response.totalRecords);
@@ -37,13 +36,13 @@ class AppMenuElement extends BaseComponentElement {
         }
     };
 
-    setWallets = (wallets: Array<any>, totalWallets: number) => {
+    setWallets = (wallets: Array<any>, totalWallets: number): void => {
         this.walletData = wallets;
         this.totalWallets = totalWallets;
         this.update();
     };
 
-    updateToken = () => {
+    updateToken = (): void => {
         if (this.isAuth) {
             this.getWallets();
         } else {
@@ -58,7 +57,7 @@ class AppMenuElement extends BaseComponentElement {
         return false;
     }
 
-    renderWallets = () => {
+    renderWallets = (): Array<TemplateResult> => {
         if (this.isAuth && this.totalWallets > 0) {
             return this.walletData.map(
                 (wallet) => html`<menu-item data-path="/wallet/${wallet.id}"
@@ -69,7 +68,7 @@ class AppMenuElement extends BaseComponentElement {
         return null;
     };
 
-    render = () => {
+    render = (): TemplateResult => {
         const { isAuth, totalWallets, walletData } = this;
 
         const regularMenu = (path: string, title: string): TemplateResult =>
@@ -111,3 +110,5 @@ class AppMenuElement extends BaseComponentElement {
         `;
     };
 }
+
+export type { AppMenuElement };

src/components/app-modal/AppModalElement.ts

@@ -1,7 +1,5 @@
 import { controller, target } from "@github/catalyst";
 import { BaseComponentElement } from "common/";
-import { AppMainElement } from "components/app-main/AppMainElement";
-import { closest } from "core/utils";
 
 @controller
 class AppModalElement extends BaseComponentElement {
@@ -10,5 +8,7 @@ class AppModalElement extends BaseComponentElement {
         super();
     }
 
-    elementConnected = () => {};
+    elementConnected = (): void => {};
 }
+
+export type { AppModalElement };

src/components/app-pagination/AppPaginationElement.ts

@@ -1,8 +1,6 @@
-import { attr, controller, target } from "@github/catalyst";
-import { html, render } from "@github/jtml";
+import { attr, controller } from "@github/catalyst";
+import { html, TemplateResult } from "@github/jtml";
 import { BaseComponentElement } from "common/";
-import { AppMainElement } from "components/app-main/AppMainElement";
-import { closest, isTrue } from "core/utils";
 
 @controller
 class AppPaginationElement extends BaseComponentElement {
@@ -16,18 +14,18 @@ class AppPaginationElement extends BaseComponentElement {
         super();
     }
 
-    elementConnected = () => {};
+    elementConnected = (): void => {};
 
-    attributeChangedCallback() {
+    attributeChangedCallback(): void {
         this.update();
     }
 
-    setItems = (items) => {
+    setItems = (items): void => {
         this.items = items;
         this.update();
     };
 
-    setFetchFunc = async (fetchFunc: Function, autoInit?) => {
+    setFetchFunc = async (fetchFunc: Function, autoInit?): Promise<void> => {
         this.fetchFunc = fetchFunc;
         if (autoInit) {
             const options = {
@@ -38,8 +36,7 @@ class AppPaginationElement extends BaseComponentElement {
         }
     };
 
-    executeFetch = async (options?) => {
-        console.log(this.page);
+    executeFetch = async (options?): Promise<void> => {
         if (!options) {
             options = {
                 rpp: this.rpp || 5,
@@ -53,13 +50,12 @@ class AppPaginationElement extends BaseComponentElement {
             this.totalItems = response?.totalRecords;
             this.page = response?.page;
             this.rpp = response?.rpp;
-            console.log(this.page);
         } catch (err) {
             console.error(err);
         }
     };
 
-    pageBack = () => {
+    pageBack = (): void => {
         const { page } = this;
         if (page > 1) {
             this.page--;
@@ -67,9 +63,8 @@ class AppPaginationElement extends BaseComponentElement {
         }
     };
 
-    pageNext = () => {
+    pageNext = (): void => {
         const { rpp, totalItems, page } = this;
-        console.log(this.page);
         const pageRange = Math.ceil(totalItems / rpp);
         if (page < pageRange) {
             this.page++;
@@ -77,7 +72,7 @@ class AppPaginationElement extends BaseComponentElement {
         }
     };
 
-    render = () => {
+    render = (): TemplateResult => {
         const { rpp, totalItems, page, items } = this;
 
         const renderItem = (item) => html`<tr>
@@ -97,7 +92,6 @@ class AppPaginationElement extends BaseComponentElement {
         const renderPagination = () => {
             if (totalItems > items?.length) {
                 const pageRange = Math.ceil(totalItems / rpp);
-                console.log(pageRange);
                 return html`
                     <div>
                         <button

src/components/app-root/AppRootElement.ts

@@ -1,7 +1,5 @@
 import { controller, target } from "@github/catalyst";
 import { BaseComponentElement } from "common/";
-import { AppMainElement } from "components/app-main/AppMainElement";
-import { closest } from "core/utils";
 
 @controller
 class AppRootElement extends BaseComponentElement {
@@ -10,5 +8,7 @@ class AppRootElement extends BaseComponentElement {
         super();
     }
 
-    elementConnected = () => {};
+    elementConnected = (): void => {};
 }
+
+export type { AppRootElement };

src/components/app-slot/AppSlotElement.ts

@@ -1,7 +1,5 @@
 import { controller, target } from "@github/catalyst";
 import { BaseComponentElement } from "common/";
-import { AppMainElement } from "components/app-main/AppMainElement";
-import { closest } from "core/utils";
 
 @controller
 class AppSlotElement extends BaseComponentElement {
@@ -10,5 +8,7 @@ class AppSlotElement extends BaseComponentElement {
         super();
     }
 
-    elementConnected = () => {};
+    elementConnected = (): void => {};
 }
+
+export type { AppSlotElement };

src/components/input-field/InputFieldElement.ts

@@ -1,8 +1,6 @@
-import { attr, targets, controller, target } from "@github/catalyst";
-import { closest, index, update, isTrue, firstUpper } from "core/utils";
-import { html, render, until } from "@github/jtml";
-import { PingService } from "services/";
-import { AppMainElement } from "components/app-main/AppMainElement";
+import { attr, controller, target } from "@github/catalyst";
+import { firstUpper } from "core/utils";
+import { html, TemplateResult } from "@github/jtml";
 import { RouterService } from "core/services";
 import randomId from "core/utils/random-id";
 import validator from "validator";
@@ -24,7 +22,7 @@ class InputFieldElement extends BaseComponentElement {
         super();
     }
 
-    public elementConnected = () => {
+    public elementConnected = (): void => {
         this.randId = `${name}${randomId()}`;
         this.update();
     };
@@ -69,7 +67,7 @@ class InputFieldElement extends BaseComponentElement {
         return _return;
     }
 
-    render = () => {
+    render = (): TemplateResult => {
         return html`<div data-target="input-field.main">
             ${this.label &&
             html`<label for="${this.randId}"

src/components/menu-item/MenuItemElement.ts

@@ -1,7 +1,5 @@
-import { attr, targets, controller, target } from "@github/catalyst";
-import { closest, index, update, isTrue } from "core/utils";
-import { html, render, until } from "@github/jtml";
-import { PingService } from "services/";
+import { attr, controller, target } from "@github/catalyst";
+import { html, TemplateResult } from "@github/jtml";
 import { AppMainElement } from "components/app-main/AppMainElement";
 import { RouterService } from "core/services";
 import { BaseComponentElement } from "common/";
@@ -16,7 +14,7 @@ class MenuItemElement extends BaseComponentElement {
         super();
     }
 
-    public elementConnected = () => {
+    public elementConnected = (): void => {
         this.routerService = this.appMain?.routerService;
         if (!this.title && this.innerText) {
             const _slottedText = this.innerText;
@@ -24,18 +22,18 @@ class MenuItemElement extends BaseComponentElement {
             this.title = _slottedText;
         }
         this.update();
-        window.addEventListener("routechanged", this.update);
+        this.appMain.addEventListener("routechanged", this.update);
     };
 
-    public elementDisconnected = () => {
-        window.removeEventListener("routechanged", this.update);
+    public elementDisconnected = (appMain: AppMainElement): void => {
+        appMain?.removeEventListener("routechanged", this.update);
     };
 
-    get current() {
+    get current(): boolean {
         return this.routerService.comparePath(this.path);
     }
 
-    render = () => {
+    render = (): TemplateResult => {
         return html`
             <div
                 class="${this.current ? "selected " : ""}menu-item"
@@ -46,3 +44,5 @@ class MenuItemElement extends BaseComponentElement {
         `;
     };
 }
+
+export type { MenuItemElement };