From 1c346346f23e73c15f2ee70b17acbf60ce20fc99 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fran=20Jurmanovi=C4=87?= <fjurma12@outlook.com>
Date: Sat, 29 May 2021 21:33:07 +0200
Subject: [PATCH] watch for browser back button press and update

---
 src/components/app-main/AppMainElement.ts         | 10 +++++++---
 src/core/services/router-service/RouterService.ts | 12 ++++++++----
 src/core/store/AuthStore.ts                       |  2 ++
 src/pages/home-page/HomePageElement.ts            |  2 +-
 4 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/src/components/app-main/AppMainElement.ts b/src/components/app-main/AppMainElement.ts
index bb631b5..7c8468e 100644
--- a/src/components/app-main/AppMainElement.ts
+++ b/src/components/app-main/AppMainElement.ts
@@ -25,11 +25,11 @@ class AppMainElement extends HTMLElement {
                 path: "/",
                 component: "home-page",
                 layout: "menu-layout",
+                middleware: this.middleAuth,
             },
             {
                 path: "/home",
                 component: "home-page",
-                middleware: this.isAuth,
             },
             {
                 path: "/rb",
@@ -47,12 +47,16 @@ class AppMainElement extends HTMLElement {
         this.routerService.init();
     }
 
-    isAuth = () => {
-        if (this.authStore?.token == null) {
+    middleAuth = () => {
+        if (!this.isAuth) {
             this.routerService.goTo("/unauthorized");
             return true;
         }
     };
+
+    get isAuth(): boolean {
+        return this.authStore && this.authStore.token;
+    }
 }
 
 export type { AppMainElement };
diff --git a/src/core/services/router-service/RouterService.ts b/src/core/services/router-service/RouterService.ts
index 439ecc4..206973e 100644
--- a/src/core/services/router-service/RouterService.ts
+++ b/src/core/services/router-service/RouterService.ts
@@ -40,10 +40,8 @@ class RouterService {
                 }
                 let changed: boolean = false;
                 if (_mainRoot?.childNodes.length > 0) {
-                    console.log(_mainRoot.childNodes);
                     _mainRoot?.childNodes?.forEach?.(
                         (child: BaseLayoutElement) => {
-                            console.log("Eh");
                             if (
                                 route.layout &&
                                 route.layout.toUpperCase() === child.tagName &&
@@ -101,9 +99,10 @@ class RouterService {
         _mainRoot.innerHTML = "404 - Not found";
     }
 
-    @update
     goTo(path: string) {
         if (!Array.isArray(this.historyStack)) this.historyStack = [];
+        const currentPath = window.location.pathname;
+        if (path == currentPath) return;
         const _index = this._routes.findIndex((route) => route.path === path);
         if (_index >= 0) {
             const newRoute = this._routes[_index];
@@ -111,6 +110,7 @@ class RouterService {
             const url = new URL(window.location.toString());
             url.pathname = path;
             window.history.pushState({}, "", url.toString());
+            this.update();
         }
     }
 
@@ -128,7 +128,11 @@ class RouterService {
     }
 
     @update
-    init() {}
+    init() {
+        window.addEventListener("popstate", () => {
+            this.update();
+        });
+    }
 }
 
 class RouteState {
diff --git a/src/core/store/AuthStore.ts b/src/core/store/AuthStore.ts
index 1c2d258..989b5d4 100644
--- a/src/core/store/AuthStore.ts
+++ b/src/core/store/AuthStore.ts
@@ -11,6 +11,8 @@ class AuthStore {
     }
 
     get token() {
+        if (this._token == "null") return null;
+        if (this._token == "undefined") return undefined;
         return this._token;
     }
 
diff --git a/src/pages/home-page/HomePageElement.ts b/src/pages/home-page/HomePageElement.ts
index 2271730..2802c34 100644
--- a/src/pages/home-page/HomePageElement.ts
+++ b/src/pages/home-page/HomePageElement.ts
@@ -14,7 +14,7 @@ class HomePageElement extends HTMLElement {
     @update
     connectedCallback() {
         this.pingService = new PingService(this.appMain?.appService);
-        this.getPong();
+        if (this.appMain.isAuth) this.getPong();
     }
 
     getPong = async () => {