closed shadowRoot and changed pages, components, layout to extend base class

src/pages/history-page/HistoryPageElement.ts

@@ -3,11 +3,11 @@ import { closest, index, update, isTrue } from "core/utils";
 import { html, render, until } from "@github/jtml";
 import { TransactionsService } from "services/";
 import { AppMainElement, AppPaginationElement } from "components/";
+import { BasePageElement } from "common/";
 
 @controller
-class HistoryPageElement extends HTMLElement {
+class HistoryPageElement extends BasePageElement {
     private transactionsService: TransactionsService;
-    @closest appMain: AppMainElement;
     @target pagination: AppPaginationElement;
     constructor() {
         super();
@@ -42,8 +42,4 @@ class HistoryPageElement extends HTMLElement {
             ></app-pagination>
         `;
     };
-
-    update = () => {
-        render(this.render(), this);
-    };
 }

src/pages/home-page/HomePageElement.ts

@@ -3,11 +3,11 @@ import { closest, index, update, isTrue } from "core/utils";
 import { html, render, until } from "@github/jtml";
 import { PingService } from "services/";
 import { AppMainElement } from "components/";
+import { BasePageElement } from "common/";
 
 @controller
-class HomePageElement extends HTMLElement {
+class HomePageElement extends BasePageElement {
     private pingService: PingService;
-    @closest appMain: AppMainElement;
     constructor() {
         super();
     }
@@ -48,8 +48,4 @@ class HomePageElement extends HTMLElement {
             <button data-action="click:home-page#openModal">Test</button>
         `;
     };
-
-    update = () => {
-        render(this.render(), this);
-    };
 }

src/pages/login-page/LoginPageElement.ts

@@ -1,14 +1,20 @@
-import { attr, targets, controller, target } from "@github/catalyst";
+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 { RouterService } from "core/services";
+import { BasePageElement } from "common/";
 
 @controller
-class LoginPageElement extends HTMLElement {
+class LoginPageElement extends BasePageElement {
     @targets inputs: Array<InputFieldElement>;
-    @closest appMain: AppMainElement;
     authService: AuthService;
     routerService: RouterService;
     errorMessage: string;
@@ -48,6 +54,7 @@ class LoginPageElement extends HTMLElement {
 
     onSubmit = async () => {
         try {
+            console.log("test");
             if (!this.validate()) {
                 return;
             }
@@ -113,8 +120,4 @@ class LoginPageElement extends HTMLElement {
             </div>
         `;
     };
-
-    update() {
-        render(this.render(), this);
-    }
 }

src/pages/logout-page/LogoutPageElement.ts

@@ -2,10 +2,10 @@ import { controller } from "@github/catalyst";
 import { closest, update } from "core/utils";
 import { AuthService } from "services/";
 import { AppMainElement } from "components/";
+import { BasePageElement } from "common/";
 
 @controller
-class LogoutPageElement extends HTMLElement {
-    @closest appMain: AppMainElement;
+class LogoutPageElement extends BasePageElement {
     authService: AuthService;
     constructor() {
         super();

src/pages/not-found/NotFoundElement.ts

@@ -2,10 +2,10 @@ import { controller } from "@github/catalyst";
 import { closest, update } from "core/utils";
 import { html, render } from "@github/jtml";
 import { AppMainElement } from "components/";
+import { BasePageElement } from "common/";
 
 @controller
-class NotFoundElement extends HTMLElement {
-    @closest appMain: AppMainElement;
+class NotFoundElement extends BasePageElement {
     constructor() {
         super();
     }
@@ -19,8 +19,4 @@ class NotFoundElement extends HTMLElement {
             <div><app-link data-to="/" data-title="Homepage"></app-link></div>
         `;
     };
-
-    update = () => {
-        render(this.render(), this);
-    };
 }

src/pages/register-page/RegisterPageElement.ts

@@ -3,11 +3,11 @@ 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 { BasePageElement } from "common/";
 
 @controller
-class RegisterPageElement extends HTMLElement {
+class RegisterPageElement extends BasePageElement {
     @targets inputs: Array<InputFieldElement>;
-    @closest appMain: AppMainElement;
     authService: AuthService;
     constructor() {
         super();
@@ -84,8 +84,4 @@ class RegisterPageElement extends HTMLElement {
             </form>
         `;
     };
-
-    update = () => {
-        render(this.render(), this);
-    };
 }