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

@@ -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`<span data-target="app-link.main" style="color:grey"
                   >${this.title}</span

src/components/app-main/AppMainElement.ts

@@ -35,6 +35,12 @@ class AppMainElement extends HTMLElement {
                 layout: "menu-layout",
                 middleware: this.middleAuth,
             },
+            {
+                path: "/history",
+                component: "history-page",
+                layout: "menu-layout",
+                middleware: this.middleAuth,
+            },
             {
                 path: "/register",
                 component: "register-page",

src/components/app-menu/AppMenuElement.ts

@@ -0,0 +1,107 @@
+import { controller, target } from "@github/catalyst";
+import { html, render } from "@github/jtml";
+import { AppMainElement } from "components/app-main/AppMainElement";
+import { closest, update } from "core/utils";
+import { WalletService } from "services/";
+
+@controller
+class AppMenuElement extends HTMLElement {
+    private walletService: WalletService;
+    private walletData: Array<any>;
+    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<any>, 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`
+            <ul>
+                <li>
+                    <app-link data-to="/">Home</app-link>
+                </li>
+                ${this.isAuth
+                    ? html` <li>
+                          <app-link data-to="/history">History</app-link>
+                      </li>`
+                    : null}
+                ${this.isAuth && this.totalWallets > 0
+                    ? this.walletData.map((wallet) => {
+                          return html`
+                              <li>
+                                  <app-link data-to="/wallet/${wallet.id}"
+                                      >${wallet.name}</app-link
+                                  >
+                              </li>
+                          `;
+                      })
+                    : null}
+                ${this.isAuth && this.totalWallets > 2
+                    ? html`
+                          <li>
+                              <app-link data-to="/wallet/all">Other</app-link>
+                          </li>
+                      `
+                    : null}
+                ${this.isAuth
+                    ? html` <li>
+                          <app-link data-to="/logout">Logout</app-link>
+                      </li>`
+                    : null}
+                ${!this.isAuth
+                    ? html`
+                          <li>
+                              <app-link data-to="/login">Login</app-link>
+                          </li>
+                          <li>
+                              <app-link data-to="/register">Register</app-link>
+                          </li>
+                      `
+                    : null}
+            </ul>
+        `;
+    };
+}

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` <app-main></app-main> `;
-    }
+    };
 
-    update() {
+    update = () => {
         render(this.render(), this.shadowRoot!);
-    }
+    };
 }

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";

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`<div data-target="input-field.main">
+    render = () => {
+        return html`<div data-target="input-field.main">
             ${this.label &&
             html`<label for="${this.randId}"
                 >${this.label}${this.required ? " (*)" : ""}</label
             >`}
             <input type="${this.type}" data-target="input-field.inp" />
             ${this.error && html`<span>${this.error}</span>`}
-            </div>`,
-            this
-        );
-    }
+        </div>`;
+    };
+
+    update = () => {
+        render(this.render(), this);
+    };
 }
 
 export type { InputFieldElement };

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;
             }

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) => {

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() {

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`<div>
-                <app-link data-go-back="true" data-title="Go back"></app-link>
-            </div>`}
+            <app-menu></app-menu>
             <app-slot data-target="menu-layout.appSlot"></app-slot>
         `;
-    }
+    };
 
     update = () => {
         render(this.render(), this);
-        const _appSlot = this._appSlot;
-        if (_appSlot && this.appSlot) {
-            this.appSlot.innerHTML = _appSlot;
-        }
     };
 }

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<any> = [];
+    @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<any>) {
+        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`
+            <ul>
+                ${this.transactions
+                    ? this.transactions.map((transaction) => {
+                          html` <li>${transaction.description}</li> `;
+                      })
+                    : null}
+            </ul>
+        `;
+    };
+
+    update = () => {
+        render(this.render(), this);
+    };
+}

src/pages/home-page/HomePageElement.ts

@@ -44,22 +44,11 @@ class HomePageElement extends HTMLElement {
         }
     };
 
-    render() {
+    render = () => {
         return html`
-            <app-link data-to="/" data-title="Main"></app-link> |
-            ${this.appMain.isAuth
-                ? html`<app-link data-to="/home" data-title="Home"></app-link>
-                      |<app-link
-                          data-to="/logout"
-                          data-title="Logout"
-                      ></app-link>`
-                : html`<app-link
-                      data-to="/login"
-                      data-title="Login"
-                  ></app-link>`}
             <button data-action="click:home-page#openModal">Test</button>
         `;
-    }
+    };
 
     update = () => {
         render(this.render(), this);

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";

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`
             <form>
                 <input-field
@@ -96,6 +100,7 @@ class LoginPageElement extends HTMLElement {
                     data-rules="required"
                 >
                 </input-field>
+                ${this.errorMessage && html`<div>${this.errorMessage}</div>`}
                 <button type="button" data-action="click:login-page#onSubmit">
                     Login
                 </button>
@@ -107,7 +112,7 @@ class LoginPageElement extends HTMLElement {
                 ></app-link>
             </div>
         `;
-    }
+    };
 
     update() {
         render(this.render(), this);

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`
             <div>404 - Page not found</div>
             <div><app-link data-to="/" data-title="Homepage"></app-link></div>
         `;
-    }
+    };
 
-    update() {
+    update = () => {
         render(this.render(), this);
-    }
+    };
 }

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`
             <form>
                 <input-field
@@ -83,9 +83,9 @@ class RegisterPageElement extends HTMLElement {
                 </button>
             </form>
         `;
-    }
+    };
 
-    update() {
+    update = () => {
         render(this.render(), this);
-    }
+    };
 }

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;

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;

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";