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/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);
-    }
+    };
 }