Merge branch 'feature/WW-3-advanced-routing'

src/common/layouts/BaseLayoutElement/BaseLayoutElement.ts

@@ -19,7 +19,6 @@ class BaseLayoutElement extends HTMLElement {
     };
 
     setElement = (newTag: string) => {
-        console.log(this.innerHTML);
         this.slotted.innerHTML = `<${newTag}></${newTag}>`;
     };
 }

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

@@ -4,6 +4,9 @@ import { update } from "core/utils";
 class RouterService {
     private historyStack: Array<RouteState> = [];
     private _routes: Array<RouteState> = [];
+    private domEvents: any = {
+        routechanged: new Event("routechanged"),
+    };
     constructor(private mainRoot: Element) {}
 
     get routerState() {
@@ -14,6 +17,15 @@ class RouterService {
         return this.historyStack[historyLen - 1];
     }
 
+    get emptyState() {
+        const historyLen = this.historyStack?.length;
+        if (historyLen < 2) {
+            return true;
+        } else {
+            return false;
+        }
+    }
+
     setRoutes = (routes: Array<any>) => {
         if (!Array.isArray(this._routes)) this._routes = [];
         routes.forEach((route) => {
@@ -31,23 +43,21 @@ class RouterService {
 
     update() {
         if (!this._routes) return;
+        window.dispatchEvent(this.domEvents.routechanged);
         const path = window.location.pathname;
         const _mainRoot = this.mainRoot;
-        for (const route of this._routes) {
+        const route = this.routerState;
-            if (path == route.path) {
+        if (path == route?.path || route?.path == "/not-found") {
             if (route.middleware && typeof route.middleware == "function") {
                 if (route.middleware()) return;
             }
             let changed: boolean = false;
             if (_mainRoot?.childNodes.length > 0) {
-                    _mainRoot?.childNodes?.forEach?.(
+                _mainRoot?.childNodes?.forEach?.((child: BaseLayoutElement) => {
-                        (child: BaseLayoutElement) => {
                     if (
                         route.layout &&
                         route.layout.toUpperCase() === child.tagName &&
-                                !child.compareTags(
+                        !child.compareTags(route.component.toUpperCase())
-                                    route.component.toUpperCase()
-                                )
                     ) {
                         changed = true;
                         child.setElement(route.component);
@@ -73,31 +83,28 @@ class RouterService {
                         changed = true;
                         _mainRoot.replaceChild(_newElement, child);
                     }
-                        }
+                });
-                    );
             } else {
                 if (route.layout) {
                     changed = true;
-                        const _newElement = document.createElement(
+                    const _newElement = document.createElement(route.layout);
-                            route.layout
-                        );
                     _mainRoot.appendChild(_newElement);
                     (_newElement as BaseLayoutElement).setElement(
                         route.component
                     );
                 } else {
-                        const _newElement = document.createElement(
+                    const _newElement = document.createElement(route.component);
-                            route.component
-                        );
                     changed = true;
                     _mainRoot.appendChild(_newElement);
                 }
             }
             return;
+        } else {
+            const newRoute = this.findByPath();
+            this.historyStack.push(newRoute);
+            this.update();
         }
     }
-        _mainRoot.innerHTML = "404 - Not found";
-    }
 
     goTo(path: string) {
         if (!Array.isArray(this.historyStack)) this.historyStack = [];
@@ -130,18 +137,33 @@ class RouterService {
     @update
     init() {
         window.addEventListener("popstate", () => {
+            this.historyStack.pop();
             this.update();
         });
     }
+
+    findByPath() {
+        const path = window.location.pathname;
+        const _index = this._routes.findIndex((route) => route.path === path);
+        const _indexOfEmpty = this._routes.findIndex(
+            (route) => route.path === "/not-found"
+        );
+        if (_index === -1 && _indexOfEmpty !== -1) {
+            return this._routes[_indexOfEmpty];
+        } else if (_index === -1 && _indexOfEmpty === -1) {
+            return new RouteState("/not-found", "not-found");
+        }
+        return this._routes[_index];
+    }
 }
 
 class RouteState {
     constructor(
         public path: string,
         public component: string,
-        public data: any,
+        public data?: any,
-        public layout: string,
+        public layout?: string,
-        public middleware: any
+        public middleware?: any
     ) {}
 }
 

src/pages/register-page/RegisterPageElement.ts

@@ -34,14 +34,11 @@ class RegisterPageElement extends HTMLElement {
             const response = await this.appMain.authStore.userLogin(
                 this.values
             );
-            console.log(response);
 
             if (response?.token) {
                 this.appMain.routerService.goTo("/");
             }
-        } catch (err) {
+        } catch (err) {}
-            console.log(err);
-        }
     };
 
     validate(): boolean {