From 8754b4391b0fea9358e3e9be30adc6a511492e69 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fran=20Jurmanovi=C4=87?= Date: Wed, 2 Jun 2021 23:29:05 +0200 Subject: [PATCH] fixed types --- src/common/core/BaseElement/BaseElement.ts | 25 +++++++----- .../BaseLayoutElement/BaseLayoutElement.ts | 4 +- src/components/app-link/AppLinkElement.ts | 27 ++++++------- src/components/app-main/AppMainElement.ts | 12 +++--- src/components/app-menu/AppMenuElement.ts | 25 ++++++------ src/components/app-modal/AppModalElement.ts | 6 +-- .../app-pagination/AppPaginationElement.ts | 26 +++++-------- src/components/app-root/AppRootElement.ts | 6 +-- src/components/app-slot/AppSlotElement.ts | 6 +-- .../input-field/InputFieldElement.ts | 12 +++--- src/components/menu-item/MenuItemElement.ts | 20 +++++----- src/core/services/base-service/BaseService.ts | 2 +- .../services/router-service/RouterService.ts | 9 +++-- src/core/store/AuthStore.ts | 38 +++++++++++++------ src/core/utils/closest-deco.ts | 4 +- src/core/utils/isTrue.ts | 2 +- src/core/utils/random-id.ts | 2 +- src/core/utils/toKebabCase.ts | 2 +- src/core/utils/update-deco.ts | 4 +- src/layouts/menu-layout/MenuLayoutElement.ts | 22 ++++++----- src/pages/history-page/HistoryPageElement.ts | 19 +++++----- src/pages/home-page/HomePageElement.ts | 23 +++++------ src/pages/login-page/LoginPageElement.ts | 31 ++++++--------- src/pages/logout-page/LogoutPageElement.ts | 6 +-- src/pages/not-found/NotFoundElement.ts | 10 ++--- .../register-page/RegisterPageElement.ts | 17 +++++---- 26 files changed, 185 insertions(+), 175 deletions(-) diff --git a/src/common/core/BaseElement/BaseElement.ts b/src/common/core/BaseElement/BaseElement.ts index 4c658b1..143cc54 100644 --- a/src/common/core/BaseElement/BaseElement.ts +++ b/src/common/core/BaseElement/BaseElement.ts @@ -1,15 +1,18 @@ -import { html, render } from "@github/jtml"; +import { html, render, TemplateResult } from "@github/jtml"; import { AppMainElement } from "components/"; import { closest } from "core/utils"; class BaseElement extends HTMLElement { @closest appMain: AppMainElement; + private _appMain: AppMainElement; private elementDisconnectCallbacks: Array = []; constructor() { super(); + this.connectedCallback = this.connectedCallback.bind(this); + this.disconnectedCallback = this.disconnectedCallback.bind(this); } - bindEvents = () => { + bindEvents = (): void => { const _elems = this.querySelectorAll("[data-action]"); _elems?.forEach((el) => { for (const action of (el.getAttribute("data-action") || "") @@ -41,35 +44,37 @@ class BaseElement extends HTMLElement { }); }; - render = () => { + render = (): TemplateResult => { return html``; }; - update = () => { + update = (): void => { render(this.render(), this); this.bindEvents(); }; - connectedCallback() { + connectedCallback(): void { this.elementConnected(); + this._appMain = this.appMain; } - disconnectedCallback() { - this.elementDisconnected(); + disconnectedCallback(): void { + const { _appMain } = this; + this.elementDisconnected(_appMain); if (Array.isArray(this.elementDisconnectCallbacks)) { this.elementDisconnectCallbacks.forEach((callback: Function) => { if (typeof callback == "function") { - callback(); + callback(_appMain); } }); } } - elementConnected = () => { + elementConnected = (): void => { this.update(); }; - elementDisconnected = () => {}; + elementDisconnected = (appMain: AppMainElement): void => {}; } export default BaseElement; diff --git a/src/common/layouts/BaseLayoutElement/BaseLayoutElement.ts b/src/common/layouts/BaseLayoutElement/BaseLayoutElement.ts index 632a170..62f542a 100644 --- a/src/common/layouts/BaseLayoutElement/BaseLayoutElement.ts +++ b/src/common/layouts/BaseLayoutElement/BaseLayoutElement.ts @@ -9,7 +9,7 @@ class BaseLayoutElement extends BaseElement { super(); } - get slotTag() { + get slotTag(): string { return this.appSlot?.firstElementChild?.tagName; } @@ -20,7 +20,7 @@ class BaseLayoutElement extends BaseElement { return tag?.tagName === this.slotTag; }; - setElement = (newTag: string) => { + setElement = (newTag: string): void => { const _appSlot = `
<${newTag}>
`; this._appSlot = _appSlot; this.appSlot.innerHTML = _appSlot; diff --git a/src/components/app-link/AppLinkElement.ts b/src/components/app-link/AppLinkElement.ts index 1fad14c..94d5a21 100644 --- a/src/components/app-link/AppLinkElement.ts +++ b/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``}`; }; } + +export type { AppLinkElement }; diff --git a/src/components/app-main/AppMainElement.ts b/src/components/app-main/AppMainElement.ts index 6503dee..956fb26 100644 --- a/src/components/app-main/AppMainElement.ts +++ b/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; }; } diff --git a/src/components/app-menu/AppMenuElement.ts b/src/components/app-menu/AppMenuElement.ts index 3c10fe9..8af181f 100644 --- a/src/components/app-menu/AppMenuElement.ts +++ b/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 => { 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, totalWallets: number) => { + setWallets = (wallets: Array, 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 => { if (this.isAuth && this.totalWallets > 0) { return this.walletData.map( (wallet) => html` { + 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 }; diff --git a/src/components/app-modal/AppModalElement.ts b/src/components/app-modal/AppModalElement.ts index e40b215..9dca837 100644 --- a/src/components/app-modal/AppModalElement.ts +++ b/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 }; diff --git a/src/components/app-pagination/AppPaginationElement.ts b/src/components/app-pagination/AppPaginationElement.ts index 20331bc..a4360d4 100644 --- a/src/components/app-pagination/AppPaginationElement.ts +++ b/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 => { 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 => { 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` @@ -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`
`; }; } + +export { HomePageElement }; diff --git a/src/pages/login-page/LoginPageElement.ts b/src/pages/login-page/LoginPageElement.ts index beadc14..4f149da 100644 --- a/src/pages/login-page/LoginPageElement.ts +++ b/src/pages/login-page/LoginPageElement.ts @@ -1,14 +1,7 @@ -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 { AuthService, PingService } from "services/"; -import { AppMainElement, InputFieldElement } from "components/"; +import { targets, controller } from "@github/catalyst"; +import { html, TemplateResult } from "@github/jtml"; +import { AuthService } from "services/"; +import { InputFieldElement } from "components/"; import { RouterService } from "core/services"; import { BasePageElement } from "common/"; @@ -21,13 +14,13 @@ class LoginPageElement extends BasePageElement { constructor() { super(); } - elementConnected = () => { + elementConnected = (): void => { this.authService = new AuthService(this.appMain.appService); this.routerService = this.appMain.routerService; this.update(); }; - get emailInput() { + get emailInput(): InputFieldElement { for (const i in this.inputs) { if (this.inputs[i]?.name == "email") { return this.inputs[i]; @@ -35,7 +28,7 @@ class LoginPageElement extends BasePageElement { } } - get passwordInput() { + get passwordInput(): InputFieldElement { for (const i in this.inputs) { if (this.inputs[i]?.name == "password") { return this.inputs[i]; @@ -44,7 +37,7 @@ class LoginPageElement extends BasePageElement { } get values(): Object { - const formObject = {}; + const formObject: any = {}; this.inputs.forEach((input: InputFieldElement) => { const inputType = input.inp; formObject[input.name] = (inputType as HTMLInputElement).value; @@ -52,9 +45,8 @@ class LoginPageElement extends BasePageElement { return formObject; } - onSubmit = async () => { + onSubmit = async (): Promise => { try { - console.log("test"); if (!this.validate()) { return; } @@ -63,7 +55,6 @@ class LoginPageElement extends BasePageElement { ); if (response?.token) { - console.log(this.appMain); this.routerService.goTo("/"); } } catch (err) { @@ -89,7 +80,7 @@ class LoginPageElement extends BasePageElement { return _return; } - render = () => { + render = (): TemplateResult => { return html`
{ + elementConnected = (): void => { this.authService = new AuthService(this.appMain.appService); this.appMain?.authStore?.userLogout(); this.appMain?.routerService.goTo("/login"); }; } + +export type { LogoutPageElement }; diff --git a/src/pages/not-found/NotFoundElement.ts b/src/pages/not-found/NotFoundElement.ts index bb085ce..a2850aa 100644 --- a/src/pages/not-found/NotFoundElement.ts +++ b/src/pages/not-found/NotFoundElement.ts @@ -1,7 +1,5 @@ import { controller } from "@github/catalyst"; -import { closest, update } from "core/utils"; -import { html, render } from "@github/jtml"; -import { AppMainElement } from "components/"; +import { html, TemplateResult } from "@github/jtml"; import { BasePageElement } from "common/"; @controller @@ -9,14 +7,16 @@ class NotFoundElement extends BasePageElement { constructor() { super(); } - elementConnected = () => { + elementConnected = (): void => { this.update(); }; - render = () => { + render = (): TemplateResult => { return html`
404 - Page not found
`; }; } + +export type { NotFoundElement }; diff --git a/src/pages/register-page/RegisterPageElement.ts b/src/pages/register-page/RegisterPageElement.ts index 9ef385b..68301a3 100644 --- a/src/pages/register-page/RegisterPageElement.ts +++ b/src/pages/register-page/RegisterPageElement.ts @@ -1,8 +1,7 @@ -import { attr, targets, controller, target } from "@github/catalyst"; -import { closest, index, update, isTrue } from "core/utils"; -import { html, render, until } from "@github/jtml"; -import { AuthService, PingService } from "services/"; -import { AppMainElement, InputFieldElement } from "components/"; +import { targets, controller } from "@github/catalyst"; +import { html, TemplateResult } from "@github/jtml"; +import { AuthService } from "services/"; +import { InputFieldElement } from "components/"; import { BasePageElement } from "common/"; @controller @@ -12,7 +11,7 @@ class RegisterPageElement extends BasePageElement { constructor() { super(); } - elementConnected = () => { + elementConnected = (): void => { this.authService = new AuthService(this.appMain.appService); this.update(); }; @@ -26,7 +25,7 @@ class RegisterPageElement extends BasePageElement { return formObject; } - onSubmit = async () => { + onSubmit = async (): Promise => { try { if (!this.validate()) { return; @@ -50,7 +49,7 @@ class RegisterPageElement extends BasePageElement { return _return; } - render = () => { + render = (): TemplateResult => { return html`