Merge branch 'feature/WW-26-architecture'

src/components/app-menu/AppMenuElement.ts

@@ -1,5 +1,5 @@
 import { controller, target } from "@github/catalyst";
-import { html, render } from "@github/jtml";
+import { html, render, TemplateResult } from "@github/jtml";
 import { AppMainElement } from "components/app-main/AppMainElement";
 import { closest, update } from "core/utils";
 import { WalletService } from "services/";
@@ -16,8 +16,11 @@ class AppMenuElement extends HTMLElement {
 
     connectedCallback() {
         this.walletService = new WalletService(this.appMain?.appService);
+        if (this.appMain.isAuth) {
+            this.getWallets();
+        } else {
             this.update();
-        if (this.appMain.isAuth) this.getWallets();
+        }
         window.addEventListener("tokenchange", this.updateToken);
     }
 
@@ -34,12 +37,11 @@ class AppMenuElement extends HTMLElement {
         }
     };
 
-    setWallets(wallets: Array<any>, totalWallets: number) {
+    setWallets = (wallets: Array<any>, totalWallets: number) => {
         this.walletData = wallets;
         this.totalWallets = totalWallets;
-        console.log("eh");
         this.update();
-    }
+    };
 
     updateToken = () => {
         if (this.isAuth) {
@@ -53,60 +55,63 @@ class AppMenuElement extends HTMLElement {
         render(this.render(), this);
     };
 
-    get isAuth() {
+    get isAuth(): boolean {
-        return this.appMain.isAuth;
+        if (this.appMain?.isAuth) {
+            console.log(true);
+            return true;
+        }
+        return false;
     }
 
+    renderWallets = () => {
+        if (this.isAuth && this.totalWallets > 0) {
+            return this.walletData.map(
+                (wallet) => html`<menu-item data-path="/wallet/${wallet.id}"
+                    >${wallet.name}</menu-item
+                >`
+            );
+        }
+        return null;
+    };
+
     render = () => {
+        const { isAuth, totalWallets, walletData } = this;
+
+        const regularMenu = (path: string, title: string): TemplateResult =>
+            html`<menu-item data-path="${path}">${title}</menu-item>`;
+        const authMenu = (path: string, title: string): TemplateResult => {
+            if (isAuth) {
+                return regularMenu(path, title);
+            }
+            return html``;
+        };
+        const notAuthMenu = (path: string, title: string): TemplateResult => {
+            if (!isAuth) {
+                return regularMenu(path, title);
+            }
+            return html``;
+        };
+        const renderWallets = (wallets: Array<any>) => {
+            if (isAuth && totalWallets > 0) {
+                return html`${wallets.map((wallet) =>
+                    regularMenu(`wallet/${wallet.id}`, wallet.name)
+                )}`;
+            }
+            return html``;
+        };
+        const otherWallets = () => {
+            if (isAuth && totalWallets > 2) {
+                return regularMenu("/wallet/all", "Other");
+            }
+            return html``;
+        };
         return html`
             <div data-target="app-menu.sidebar">
-                <ul>
+                ${regularMenu("/", "Home")} ${authMenu("/history", "History")}
-                    <li>
+                ${renderWallets(walletData)} ${otherWallets()}
-                        <app-link data-to="/">Home</app-link>
+                ${authMenu("/logout", "Logout")}
-                    </li>
+                ${notAuthMenu("/login", "Login")}
-                    ${this.isAuth
+                ${notAuthMenu("/register", "Register")}
-                        ? 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>
             </div>
         `;
     };

src/components/index.ts

@@ -1,6 +1,7 @@
 export * from "./app-shadow/AppShadowElement";
-export * from "./app-main/AppMainElement";
 export * from "./app-link/AppLinkElement";
+export * from "./menu-item/MenuItemElement";
+export * from "./app-main/AppMainElement";
 export * from "./app-modal/AppModalElement";
 export * from "./app-root/AppRootElement";
 export * from "./app-slot/AppSlotElement";

src/components/menu-item/MenuItemElement.ts

@@ -0,0 +1,52 @@
+import { attr, targets, controller, target } from "@github/catalyst";
+import { closest, index, update, isTrue } from "core/utils";
+import { html, render, until } from "@github/jtml";
+import { PingService } from "services/";
+import { AppMainElement } from "components/app-main/AppMainElement";
+import { RouterService } from "core/services";
+
+@controller
+class MenuItemElement extends HTMLElement {
+    @closest appMain: AppMainElement;
+    @attr path: string;
+    @attr title: string;
+    @target itemEl: HTMLElement;
+    routerService: RouterService;
+    constructor() {
+        super();
+    }
+
+    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();
+        window.addEventListener("routechanged", this.update);
+    }
+
+    public disconnectedCallback(): void {
+        window.removeEventListener("routechanged", this.update);
+    }
+
+    get current() {
+        return this.routerService.comparePath(this.path);
+    }
+
+    render = () => {
+        return html`
+            <div
+                class="${this.current ? "selected " : ""}menu-item"
+                data-target="menu-item.itemEl"
+            >
+                <app-link data-to="${this.path}">${this.title}</app-link>
+            </div>
+        `;
+    };
+
+    update = () => {
+        render(this.render(), this);
+    };
+}

src/core/services/router-service/RouterService.ts

@@ -9,7 +9,7 @@ class RouterService {
     };
     constructor(private mainRoot: ShadowRoot | HTMLElement) {}
 
-    get routerState() {
+    get routerState(): RouteState {
         const historyLen = this.historyStack?.length;
         if (historyLen < 1) {
             return null;
@@ -17,7 +17,7 @@ class RouterService {
         return this.historyStack[historyLen - 1];
     }
 
-    get emptyState() {
+    get emptyState(): boolean {
         const historyLen = this.historyStack?.length;
         if (historyLen < 2) {
             return true;
@@ -26,7 +26,7 @@ class RouterService {
         }
     }
 
-    setRoutes = (routes: Array<any>) => {
+    public setRoutes = (routes: Array<any>): void => {
         if (!Array.isArray(this._routes)) this._routes = [];
         routes.forEach((route) => {
             const { path, component, data, layout, middleware } = route;
@@ -41,7 +41,7 @@ class RouterService {
         });
     };
 
-    update() {
+    public update = (): void => {
         if (!this._routes) return;
         const path = window.location.pathname;
         const _mainRoot = this.mainRoot;
@@ -119,9 +119,9 @@ class RouterService {
             this.update();
         }
         window.dispatchEvent(this.domEvents.routechanged);
-    }
+    };
 
-    goTo(path: string) {
+    public goTo = (path: string): void => {
         if (!Array.isArray(this.historyStack)) this.historyStack = [];
         const currentPath = window.location.pathname;
         if (path == currentPath) return;
@@ -134,9 +134,9 @@ class RouterService {
             window.history.pushState({}, "", url.toString());
             this.update();
         }
-    }
+    };
 
-    goBack() {
+    public goBack = (): void => {
         if (!Array.isArray(this.historyStack)) this.historyStack = [];
         const lenHistory = this.historyStack.length;
         if (lenHistory > 1) {
@@ -147,17 +147,17 @@ class RouterService {
             this.historyStack.pop();
         }
         this.update();
-    }
+    };
 
-    init() {
+    public init = (): void => {
         window.addEventListener("popstate", () => {
             this.historyStack.pop();
             this.update();
         });
         this.update();
-    }
+    };
 
-    findByPath() {
+    public findByPath = (): RouteState => {
         const path = window.location.pathname;
         const _index = this._routes.findIndex((route) => route.path === path);
         const _indexOfEmpty = this._routes.findIndex(
@@ -169,7 +169,14 @@ class RouterService {
             return new RouteState("/not-found", "not-found");
         }
         return this._routes[_index];
+    };
+
+    public comparePath = (path: string): boolean => {
+        if (this.routerState?.path === path) {
+            return true;
         }
+        return false;
+    };
 }
 
 class RouteState {

src/pages/history-page/HistoryPageElement.ts

@@ -30,7 +30,7 @@ class HistoryPageElement extends HTMLElement {
         try {
             const response = await this.transactionsService.getAll();
             if (response) {
-                this.setTransactions(response);
+                this.setTransactions(response?.items);
             }
         } catch (err) {
             throw err;
@@ -39,6 +39,7 @@ class HistoryPageElement extends HTMLElement {
 
     setTransactions(transactions: Array<any>) {
         this.transactions = transactions;
+        console.log(transactions);
         this.update();
     }
 
@@ -56,7 +57,7 @@ class HistoryPageElement extends HTMLElement {
             <ul>
                 ${this.transactions
                     ? this.transactions.map((transaction) => {
-                          html` <li>${transaction.description}</li> `;
+                          return html` <li>${transaction.description}</li> `;
                       })
                     : null}
             </ul>

src/pages/home-page/HomePageElement.ts

@@ -14,7 +14,6 @@ class HomePageElement extends HTMLElement {
 
     connectedCallback() {
         this.pingService = new PingService(this.appMain?.appService);
-        if (this.appMain.isAuth) this.getPong();
         this.update();
         window.addEventListener("tokenchange", this.update);
     }

src/styles/sidebar/sidebar.scss

@@ -9,6 +9,33 @@ app-menu {
         overflow: auto;
         top: 0;
         left: 0;
+
+        menu-item {
+            [data-target="menu-item.itemEl"] {
+                app-link {
+                    [data-target="app-link.main"] {
+                        width: 100%;
+                        height: 25px;
+                        background-color: #828282;
+                        color: #d5d5d5;
+                        border-radius: 0;
+                        padding-bottom: 25px;
+                        margin: 1px auto;
+                        &:hover {
+                            background-color: #82878a;
+                        }
+                    }
+                }
+                &.selected {
+                    app-link {
+                        [data-target="app-link.main"] {
+                            color: #1a1a1a;
+                            background-color: #6e838d;
+                        }
+                    }
+                }
+            }
+        }
     }
 }