feat: add a router for navigating between application views

src/app/app.ts

@@ -2,7 +2,7 @@ import { Consumer } from './components/consumer/consumer';
 import { Header } from './components/header/header';
 import { Footer } from './components/footer/footer';
 import { Main } from './components/main/main';
-import { Registration } from './components/registration/registration';
+import { Router } from './router/router';
 
 export default class App {
   header: Header;
@@ -13,17 +13,22 @@ export default class App {
 
   consumer: Consumer;
 
+  router: Router;
+
   constructor() {
+    this.router = new Router();
     this.consumer = new Consumer();
     this.header = new Header(this.consumer);
     this.main = new Main();
     this.footer = new Footer();
+
+    this.router.subscribe(this.main);
+    this.router.handleLocation();
   }
 
   init(): void {
     document.body.append(this.header.getElement());
-    document.body.append(this.main.getElement());
-    this.main.getElement().append(new Registration().getElement());
+    document.body.append(this.main.getView());
     document.body.append(this.footer.getElement());
 
     this.consumer.subscribe(this.header);

src/app/components/absent/absent.ts

@@ -12,10 +12,10 @@ export class Absent {
   constructor() {
     this.notFoundView = new ElementCreator({ tag: 'div', classes: 'bg-[#F1EFEF] rounded-xl w-full flex-1 p-5 md:p-10 relative' });
     this.homeButton = new ElementAnchorCreator({ href: '/', classes: 'primary-button', text: 'Home' }).getElement();
-    this.backButton = new ElementButtonCreator({ classes: 'secondary-button', text: 'Go back' })
-      .setHandler('click', window.history.back)
-      .getElement();
-
+    this.backButton = new ElementButtonCreator({ classes: 'secondary-button', text: 'Go back' }).getElement();
+    this.backButton.addEventListener('click', () => {
+      window.history.back();
+    });
     this.createView();
   }
 

src/app/components/header/header.ts

@@ -32,7 +32,6 @@ export class Header implements Observer {
       .getElement();
 
     this.createView();
-    this.handleButtons();
   }
 
   createView(): void {
@@ -43,7 +42,7 @@ export class Header implements Observer {
     burger.appendNode(spanBurger1, spanBurger2, spanBurger3);
 
     const nav = new ElementCreator({ tag: 'nav', classes: 'w-full flex items-center justify-between py-5 gap-8' });
-    const logo = new ElementAnchorCreator({ href: '#', html: logotype });
+    const logo = new ElementAnchorCreator({ href: '/', html: logotype });
     const mobileMenu = new ElementCreator({
       tag: 'div',
       classes: 'mobile-menu md:w-full md:max-w-full max-w-[390px] hidden justify-between md:flex gap-8',
@@ -52,28 +51,40 @@ export class Header implements Observer {
     nav.appendNode(logo, mobileMenu, burger, bg);
 
     const liHome = new ElementCreator({ tag: 'li' });
-    const aHome = new ElementAnchorCreator({ href: '#', text: 'Home', classes: 'h4 hover:text-primary-color' });
+    const aHome = new ElementAnchorCreator({ href: '/', text: 'Home', classes: 'h4 hover:text-primary-color' });
     liHome.appendNode(aHome);
 
     const liAboutUs = new ElementCreator({ tag: 'li' });
-    const aAboutUs = new ElementAnchorCreator({ href: '#', text: 'About us', classes: 'h4 hover:text-primary-color' });
+    const aAboutUs = new ElementAnchorCreator({ href: '/aboutus', text: 'About us', classes: 'h4 hover:text-primary-color' });
     liAboutUs.appendNode(aAboutUs);
 
     const liSummerTime = new ElementCreator({ tag: 'li' });
-    const aSummerTime = new ElementAnchorCreator({ href: '#', classes: 'h5 hover:text-primary-color', text: 'Summer time' });
+    const aSummerTime = new ElementAnchorCreator({
+      href: '/categories#summer-time',
+      classes: 'h5 hover:text-primary-color',
+      text: 'Summer time',
+    });
     liSummerTime.appendNode(aSummerTime);
 
     const liPeakClimber = new ElementCreator({ tag: 'li' });
-    const aPeakClimber = new ElementAnchorCreator({ href: '#', classes: 'h5 hover:text-primary-color', text: 'Peak climber' });
+    const aPeakClimber = new ElementAnchorCreator({
+      href: '/categories#peak-climber',
+      classes: 'h5 hover:text-primary-color',
+      text: 'Peak climber',
+    });
     liPeakClimber.appendNode(aPeakClimber);
 
     const liBallGames = new ElementCreator({ tag: 'li' });
-    const aBallGames = new ElementAnchorCreator({ href: '#', classes: 'h5 hover:text-primary-color', text: 'Ball games' });
+    const aBallGames = new ElementAnchorCreator({
+      href: '/categories#ball-games',
+      classes: 'h5 hover:text-primary-color',
+      text: 'Ball games',
+    });
     liBallGames.appendNode(aBallGames);
 
     const liIceAdventures = new ElementCreator({ tag: 'li' });
     const aIceAdventures = new ElementAnchorCreator({
-      href: '#',
+      href: '/categories#ice-adventures',
       classes: 'h5 hover:text-primary-color',
       text: 'Ice adventures',
     });
@@ -83,7 +94,11 @@ export class Header implements Observer {
     submenu.appendNode(liSummerTime, liPeakClimber, liBallGames, liIceAdventures);
 
     const tab = new ElementCreator({ tag: 'li', classes: 'relative group tab' });
-    const aCategories = new ElementAnchorCreator({ href: '#', text: 'Categories', classes: 'h4 hover:text-primary-color' });
+    const aCategories = new ElementAnchorCreator({
+      href: '/categories',
+      text: 'Categories',
+      classes: 'h4 hover:text-primary-color',
+    });
     tab.appendNode(aCategories, submenu);
 
     const linksList = new ElementCreator({ tag: 'ul', classes: 'items-center justify-between flex gap-5' });
@@ -108,7 +123,7 @@ export class Header implements Observer {
       bg.toggleClass('active');
       document.body.classList.toggle('active');
     });
-    tab.getElement().addEventListener('click', () => {
+    tab.getElement().addEventListener('mouseover', () => {
       submenu.addClass('active');
     });
     submenu.getElement().addEventListener('mouseleave', () => {

src/app/components/main/main.ts

@@ -1,21 +1,62 @@
 import { ElementCreator } from '../../utils/element-creator/element-creator';
 
-export class Main {
-  mainView: ElementCreator<HTMLElement>;
+export class Main implements Observer {
+  mainView: HTMLElement;
 
   constructor() {
     this.mainView = new ElementCreator({
       tag: 'main',
       classes: 'container flex flex-col justify-center items-center h-full my-5 md:my-10',
       text: 'main',
-    });
+    }).getElement();
   }
 
-  getView(): ElementCreator<HTMLElement> {
+  getView(): HTMLElement {
     return this.mainView;
   }
 
-  getElement(): HTMLElement {
-    return this.mainView.getElement();
+  update(data?: string, secondaryData?: string): void {
+    this.mainView.textContent = '';
+    switch (data) {
+      case 'main':
+        this.showMain();
+        break;
+      case 'login':
+        this.showLogin();
+        break;
+      case 'signup':
+        this.showSignup();
+        break;
+      case 'categories':
+        this.showCategories(secondaryData);
+        break;
+      default:
+        this.show404();
+    }
+  }
+
+  showMain(): void {
+    // TODO add future main context
+  }
+
+  async showLogin(): Promise<void> {
+    const { Login } = await import('../login/login');
+    this.mainView.append(new Login().getElement());
+  }
+
+  showCategories(secondaryData?: string): void {
+    if (secondaryData) {
+      this.mainView.textContent = secondaryData;
+    }
+  }
+
+  async showSignup(): Promise<void> {
+    const { Registration } = await import('../registration/registration');
+    this.mainView.append(new Registration().getElement());
+  }
+
+  async show404(): Promise<void> {
+    const { Absent } = await import('../absent/absent');
+    this.mainView.append(new Absent().getElement());
   }
 }

src/app/interfaces/observer.ts

@@ -1,3 +1,3 @@
 interface Observer {
-  update(): void;
+  update(primaryData?: string, secondaryData?: string): void;
 }

src/app/router/router.ts

@@ -0,0 +1,33 @@
+import { routes } from './routes';
+
+export class Router implements Observable {
+  private observers: Observer[] = [];
+
+  constructor() {
+    window.onpopstate = this.handleLocation;
+  }
+
+  subscribe(observer: Observer): void {
+    if (this.observers.includes(observer)) return;
+    this.observers.push(observer);
+  }
+
+  unsubscribe(observer: Observer): void {
+    const index = this.observers.indexOf(observer);
+    if (index === -1) return;
+    this.observers.slice(index, 1);
+  }
+
+  notify(primaryData?: string, secondaryData?: string): void {
+    if (primaryData) {
+      this.observers.forEach((observer) => observer.update(primaryData, secondaryData));
+    }
+  }
+
+  public handleLocation = (): void => {
+    const path = window.location.pathname;
+    const route = routes[path] || routes[404];
+    const hashValue = window.location.hash;
+    this.notify(route, hashValue);
+  };
+}

src/app/router/routes.ts

@@ -0,0 +1,10 @@
+export const routes: Record<string, string> = {
+  404: '404',
+  '/': 'main',
+  '/main': 'main',
+  '/login': 'login',
+  '/signup': 'signup',
+  '/signout': 'signout',
+  '/aboutus': 'aboutus',
+  '/categories': 'categories',
+};

tsconfig.json

@@ -1,5 +1,6 @@
 {
   "compilerOptions": {
+    "module": "es2022",
     "target": "ES2022",
     "esModuleInterop": true,
     "forceConsistentCasingInFileNames": true,