From 551543a9e7a9688cb5eb0e142aeea66f92880070 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fran=20Jurmanovi=C4=87?= Date: Mon, 31 May 2021 18:23:39 +0200 Subject: [PATCH] multiple changes WW-26 - render and update methods are now arrow functions WW-18 - created history page for listing transactions WW-12 - list wallets on menu --- src/components/app-link/AppLinkElement.ts | 7 +- src/components/app-main/AppMainElement.ts | 6 + src/components/app-menu/AppMenuElement.ts | 107 ++++++++++++++++++ src/components/app-shadow/AppShadowElement.ts | 10 +- src/components/index.ts | 1 + .../input-field/InputFieldElement.ts | 31 ++--- src/core/services/app-service/AppService.ts | 2 +- src/core/services/base-service/BaseService.ts | 4 +- .../services/router-service/RouterService.ts | 4 +- src/layouts/menu-layout/MenuLayoutElement.ts | 15 +-- src/pages/history-page/HistoryPageElement.ts | 69 +++++++++++ src/pages/home-page/HomePageElement.ts | 15 +-- src/pages/index.ts | 1 + src/pages/login-page/LoginPageElement.ts | 11 +- src/pages/not-found/NotFoundElement.ts | 13 ++- .../register-page/RegisterPageElement.ts | 10 +- src/services/TransactionsService.ts | 9 ++ src/services/WalletService.ts | 9 ++ src/services/index.ts | 2 + 19 files changed, 262 insertions(+), 64 deletions(-) create mode 100644 src/components/app-menu/AppMenuElement.ts create mode 100644 src/pages/history-page/HistoryPageElement.ts create mode 100644 src/services/TransactionsService.ts create mode 100644 src/services/WalletService.ts diff --git a/src/components/app-link/AppLinkElement.ts b/src/components/app-link/AppLinkElement.ts index 8f88deb..5e6dc06 100644 --- a/src/components/app-link/AppLinkElement.ts +++ b/src/components/app-link/AppLinkElement.ts @@ -19,6 +19,11 @@ class AppLinkElement extends HTMLElement { public connectedCallback(): void { this.routerService = this.appMain?.routerService; + if (!this.title && this.innerText) { + const _slottedText = this.innerText; + this.innerText = null; + this.title = _slottedText; + } this.update(); if (isTrue(this.goBack)) { window.addEventListener("routechanged", this.update); @@ -44,7 +49,7 @@ class AppLinkElement extends HTMLElement { return isTrue(this.goBack) && this.routerService.emptyState; } - render() { + render = () => { return html`${this.disabled ? html`${this.title}; + private totalWallets: number; + @closest appMain: AppMainElement; + constructor() { + super(); + } + + connectedCallback() { + this.walletService = new WalletService(this.appMain?.appService); + this.update(); + if (this.appMain.isAuth) this.getWallets(); + window.addEventListener("tokenchange", this.updateToken); + } + + disconnectedCallback(): void { + window.removeEventListener("tokenchange", this.updateToken); + } + + getWallets = async () => { + try { + const response = await this.walletService.getAll({ rpp: 2 }); + this.setWallets(response.items, response.totalRecords); + } catch (err) { + this.update(); + } + }; + + setWallets(wallets: Array, totalWallets: number) { + this.walletData = wallets; + this.totalWallets = totalWallets; + console.log("eh"); + this.update(); + } + + updateToken = () => { + if (this.isAuth) { + this.getWallets(); + } else { + this.update(); + } + }; + + update = () => { + render(this.render(), this); + }; + + get isAuth() { + return this.appMain.isAuth; + } + + render = () => { + return html` + + `; + }; +} diff --git a/src/components/app-shadow/AppShadowElement.ts b/src/components/app-shadow/AppShadowElement.ts index f1c2fa5..68f97cf 100644 --- a/src/components/app-shadow/AppShadowElement.ts +++ b/src/components/app-shadow/AppShadowElement.ts @@ -11,16 +11,16 @@ class AppShadowElement extends HTMLElement { super(); } - @update connectedCallback() { this.attachShadow({ mode: "open" }); + this.update(); } - render() { + render = () => { return html` `; - } + }; - update() { + update = () => { render(this.render(), this.shadowRoot!); - } + }; } diff --git a/src/components/index.ts b/src/components/index.ts index 98486df..53a3fc4 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -4,4 +4,5 @@ export * from "./app-link/AppLinkElement"; export * from "./app-modal/AppModalElement"; export * from "./app-root/AppRootElement"; export * from "./app-slot/AppSlotElement"; +export * from "./app-menu/AppMenuElement"; export * from "./input-field/InputFieldElement"; diff --git a/src/components/input-field/InputFieldElement.ts b/src/components/input-field/InputFieldElement.ts index c2d8cbd..7f9051a 100644 --- a/src/components/input-field/InputFieldElement.ts +++ b/src/components/input-field/InputFieldElement.ts @@ -24,9 +24,9 @@ class InputFieldElement extends HTMLElement { super(); } - @update public connectedCallback(): void { this.randId = `${name}${randomId()}`; + this.update(); } get valid(): boolean { @@ -37,7 +37,6 @@ class InputFieldElement extends HTMLElement { return this.rules.includes("required"); } - @update validate(): boolean { let _return = true; const rules = this.rules?.split("|").filter((a) => a); @@ -66,22 +65,24 @@ class InputFieldElement extends HTMLElement { if (_return) { this.error = null; } + this.update(); return _return; } - update() { - render( - html`
- ${this.label && - html``} - - ${this.error && html`${this.error}`} -
`, - this - ); - } + render = () => { + return html`
+ ${this.label && + html``} + + ${this.error && html`${this.error}`} +
`; + }; + + update = () => { + render(this.render(), this); + }; } export type { InputFieldElement }; diff --git a/src/core/services/app-service/AppService.ts b/src/core/services/app-service/AppService.ts index 818bc81..b5e55be 100644 --- a/src/core/services/app-service/AppService.ts +++ b/src/core/services/app-service/AppService.ts @@ -120,8 +120,8 @@ class AppService { response?.statusCode == 401 ) { if (response?.statusCode == 401) { - this.appMain.authStore.token = null; this.appMain.routerService.goTo("/token-expired"); + this.appMain.authStore.token = null; } throw response; } diff --git a/src/core/services/base-service/BaseService.ts b/src/core/services/base-service/BaseService.ts index 94f2890..7e04978 100644 --- a/src/core/services/base-service/BaseService.ts +++ b/src/core/services/base-service/BaseService.ts @@ -3,8 +3,8 @@ import { AppService, HttpClient } from "core/services"; class BaseService { constructor(public endpoint: string, public appService: AppService) {} - getAll = (headers?: HeadersInit) => { - return this.appService.get(this.endpoint, null, headers); + getAll = (params?: Object, headers?: HeadersInit) => { + return this.appService.get(this.endpoint, params, headers); }; get = (params?: Object, headers?: HeadersInit) => { diff --git a/src/core/services/router-service/RouterService.ts b/src/core/services/router-service/RouterService.ts index fdc0098..c85cc13 100644 --- a/src/core/services/router-service/RouterService.ts +++ b/src/core/services/router-service/RouterService.ts @@ -136,7 +136,6 @@ class RouterService { } } - @update goBack() { if (!Array.isArray(this.historyStack)) this.historyStack = []; const lenHistory = this.historyStack.length; @@ -147,14 +146,15 @@ class RouterService { window.history.pushState({}, "", url.toString()); this.historyStack.pop(); } + this.update(); } - @update init() { window.addEventListener("popstate", () => { this.historyStack.pop(); this.update(); }); + this.update(); } findByPath() { diff --git a/src/layouts/menu-layout/MenuLayoutElement.ts b/src/layouts/menu-layout/MenuLayoutElement.ts index e5df483..8a2aea7 100644 --- a/src/layouts/menu-layout/MenuLayoutElement.ts +++ b/src/layouts/menu-layout/MenuLayoutElement.ts @@ -24,28 +24,21 @@ class MenuLayoutElement extends BaseLayoutElement { get isAuth() { const _hasToken = this.appMain?.isAuth; const _hasData = this.appMain?.authStore?.user; - return _hasData && _hasToken; + return _hasToken; } updateAuth = () => { this.update(); }; - render() { + render = () => { return html` - ${this.isAuth && - html`
- -
`} + `; - } + }; update = () => { render(this.render(), this); - const _appSlot = this._appSlot; - if (_appSlot && this.appSlot) { - this.appSlot.innerHTML = _appSlot; - } }; } diff --git a/src/pages/history-page/HistoryPageElement.ts b/src/pages/history-page/HistoryPageElement.ts new file mode 100644 index 0000000..2c7fdc1 --- /dev/null +++ b/src/pages/history-page/HistoryPageElement.ts @@ -0,0 +1,69 @@ +import { attr, targets, controller, target } from "@github/catalyst"; +import { closest, index, update, isTrue } from "core/utils"; +import { html, render, until } from "@github/jtml"; +import { TransactionsService } from "services/"; +import { AppMainElement } from "components/"; + +@controller +class HistoryPageElement extends HTMLElement { + private transactionsService: TransactionsService; + private transactions: Array = []; + @closest appMain: AppMainElement; + constructor() { + super(); + } + + connectedCallback() { + this.transactionsService = new TransactionsService( + this.appMain?.appService + ); + if (this.appMain.isAuth) this.getTransactions(); + this.update(); + window.addEventListener("tokenchange", this.update); + } + + disconnectedCallback(): void { + window.removeEventListener("tokenchange", this.update); + } + + getTransactions = async () => { + try { + const response = await this.transactionsService.getAll(); + if (response) { + this.setTransactions(response); + } + } catch (err) { + throw err; + } + }; + + setTransactions(transactions: Array) { + this.transactions = transactions; + this.update(); + } + + openModal = () => { + const _modal = this.appMain.appModal; + if (_modal) { + this.appMain.closeModal(); + } else { + this.appMain.createModal("login-page"); + } + }; + + render = () => { + return html` +
    + ${this.transactions + ? this.transactions.map((transaction) => { + html`
  • ${transaction.description}
    • `; + }) + : null} +
+ `; + }; + + update = () => { + render(this.render(), this); + }; +} diff --git a/src/pages/home-page/HomePageElement.ts b/src/pages/home-page/HomePageElement.ts index be3cd35..1e9757c 100644 --- a/src/pages/home-page/HomePageElement.ts +++ b/src/pages/home-page/HomePageElement.ts @@ -44,22 +44,11 @@ class HomePageElement extends HTMLElement { } }; - render() { + render = () => { return html` - | - ${this.appMain.isAuth - ? html` - |` - : html``} `; - } + }; update = () => { render(this.render(), this); diff --git a/src/pages/index.ts b/src/pages/index.ts index a15baa5..54953c9 100644 --- a/src/pages/index.ts +++ b/src/pages/index.ts @@ -3,3 +3,4 @@ export * from "./home-page/HomePageElement"; export * from "./register-page/RegisterPageElement"; export * from "./login-page/LoginPageElement"; export * from "./not-found/NotFoundElement"; +export * from "./history-page/HistoryPageElement"; diff --git a/src/pages/login-page/LoginPageElement.ts b/src/pages/login-page/LoginPageElement.ts index a76869a..c463e00 100644 --- a/src/pages/login-page/LoginPageElement.ts +++ b/src/pages/login-page/LoginPageElement.ts @@ -11,13 +11,14 @@ class LoginPageElement extends HTMLElement { @closest appMain: AppMainElement; authService: AuthService; routerService: RouterService; + errorMessage: string; constructor() { super(); } - @update connectedCallback() { this.authService = new AuthService(this.appMain.appService); this.routerService = this.appMain.routerService; + this.update(); } get emailInput() { @@ -65,6 +66,9 @@ class LoginPageElement extends HTMLElement { } else if (err?.errorCode == 400104) { this.passwordInput.error = err?.message; this.passwordInput.update(); + } else { + this.errorMessage = "Unable to log in!"; + this.update(); } } }; @@ -78,7 +82,7 @@ class LoginPageElement extends HTMLElement { return _return; } - render() { + render = () => { return html`
+ ${this.errorMessage && html`
${this.errorMessage}
`} @@ -107,7 +112,7 @@ class LoginPageElement extends HTMLElement { > `; - } + }; update() { render(this.render(), this); diff --git a/src/pages/not-found/NotFoundElement.ts b/src/pages/not-found/NotFoundElement.ts index b7adff1..e5fa481 100644 --- a/src/pages/not-found/NotFoundElement.ts +++ b/src/pages/not-found/NotFoundElement.ts @@ -9,17 +9,18 @@ class NotFoundElement extends HTMLElement { constructor() { super(); } - @update - connectedCallback() {} + connectedCallback() { + this.update(); + } - render() { + render = () => { return html`
404 - Page not found
`; - } + }; - update() { + update = () => { render(this.render(), this); - } + }; } diff --git a/src/pages/register-page/RegisterPageElement.ts b/src/pages/register-page/RegisterPageElement.ts index e6075a1..96d04d7 100644 --- a/src/pages/register-page/RegisterPageElement.ts +++ b/src/pages/register-page/RegisterPageElement.ts @@ -12,9 +12,9 @@ class RegisterPageElement extends HTMLElement { constructor() { super(); } - @update connectedCallback() { this.authService = new AuthService(this.appMain.appService); + this.update(); } get values(): Object { @@ -50,7 +50,7 @@ class RegisterPageElement extends HTMLElement { return _return; } - render() { + render = () => { return html` `; - } + }; - update() { + update = () => { render(this.render(), this); - } + }; } diff --git a/src/services/TransactionsService.ts b/src/services/TransactionsService.ts new file mode 100644 index 0000000..613c1e4 --- /dev/null +++ b/src/services/TransactionsService.ts @@ -0,0 +1,9 @@ +import { AppService, BaseService } from "core/services"; + +class TransactionsService extends BaseService { + constructor(appService: AppService) { + super("/transaction", appService); + } +} + +export default TransactionsService; diff --git a/src/services/WalletService.ts b/src/services/WalletService.ts new file mode 100644 index 0000000..f183918 --- /dev/null +++ b/src/services/WalletService.ts @@ -0,0 +1,9 @@ +import { AppService, BaseService } from "core/services"; + +class WalletService extends BaseService { + constructor(appService: AppService) { + super("/wallet", appService); + } +} + +export default WalletService; diff --git a/src/services/index.ts b/src/services/index.ts index 1c63abb..905493a 100644 --- a/src/services/index.ts +++ b/src/services/index.ts @@ -1,2 +1,4 @@ export { default as PingService } from "./PingService"; export { default as AuthService } from "./AuthService"; +export { default as WalletService } from "./WalletService"; +export { default as TransactionsService } from "./TransactionsService";