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">
-                ${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
-        );
-    }
+    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>`;
+    };
+
+    update = () => {
+        render(this.render(), this);
+    };
 }
 
 export type { InputFieldElement };