fix(RSS-ECOMM-2_29): fix router (#115)

* feat: add logic for switching page visibility

* fix: fix logic Router component

.env

@@ -7,5 +7,5 @@ VITE_APP_CTP_AUTH_URL=https://auth.europe-west1.gcp.commercetools.com
 VITE_APP_CTP_API_URL=https://api.europe-west1.gcp.commercetools.com
 VITE_APP_CTP_SCOPES=manage_orders:green-shop manage_payments:green-shop manage_types:green-shop view_shopping_lists:green-shop manage_customers:green-shop manage_my_orders:green-shop view_orders:green-shop manage_quotes:green-shop view_discount_codes:green-shop view_quote_requests:green-shop manage_order_edits:green-shop manage_products:green-shop manage_quote_requests:green-shop view_quotes:green-shop view_api_clients:green-shop view_order_edits:green-shop manage_shipping_methods:green-shop manage_cart_discounts:green-shop manage_my_shopping_lists:green-shop view_products:green-shop view_categories:green-shop manage_my_payments:green-shop manage_my_profile:green-shop manage_discount_codes:green-shop manage_categories:green-shop manage_shopping_lists:green-shop manage_extensions:green-shop
 VITE_APP_DEFAULT_SEGMENT='/'
-VITE_APP_NEXT_SEGMENT=0
+VITE_APP_NEXT_SEGMENT=1
 VITE_APP_PATH_SEGMENTS_TO_KEEP=0

src/app/App/model/AppModel.ts

@@ -20,7 +20,7 @@ class AppModel {
 
   private initPages(): Map<string, PageInterface> {
     const root = this.getHTML();
-    const loginPage = new LoginPageModel(root);
+    const loginPage = new LoginPageModel(root, this.router);
     const mainPage = new MainPageModel(root);
     const registrationPage = new RegistrationPageModel(root);
     const notFoundPage = new NotFoundPageModel(root);

src/app/Router/model/RouterModel.ts

@@ -35,11 +35,11 @@ class RouterModel {
     const pathParts = path.split(DEFAULT_SEGMENT);
     const hasRoute = this.pages.has(pathParts.join(''));
     if (!hasRoute) {
-      this.navigateTo(PAGES_IDS.NOT_FOUND_PAGE);
+      window.location.pathname = PAGES_IDS.NOT_FOUND_PAGE;
       return null;
     }
 
-    this.eventMediator.notify(MEDIATOR_EVENTS.CHANGE_PAGE, pathParts.join());
+    this.eventMediator.notify(MEDIATOR_EVENTS.CHANGE_PAGE, pathParts.join(''));
     return pathParts.join('');
   }
 
@@ -50,8 +50,10 @@ class RouterModel {
       .split(DEFAULT_SEGMENT)
       .slice(NEXT_SEGMENT, PATH_SEGMENTS_TO_KEEP + NEXT_SEGMENT)
       .join(DEFAULT_SEGMENT);
-    const url = `/${pathnameApp}/${route}`;
-    window.history.pushState({}, '', url);
+    const url = `${pathnameApp}/${route}`;
+
+    history.pushState({}, '', url);
+
     return window.history;
   }
 

src/pages/LoginPage/model/LoginPageModel.ts

@@ -1,21 +1,54 @@
+import type RouterModel from '@/app/Router/model/RouterModel.ts';
 import type { PageInterface } from '@/shared/types/interfaces.ts';
 
+import EventMediatorModel from '@/shared/EventMediator/model/EventMediatorModel.ts';
+import { EVENT_NAMES, MEDIATOR_EVENTS, PAGES_IDS } from '@/shared/constants/enums.ts';
 import LoginFormModel from '@/widgets/LoginForm/model/LoginFormModel.ts';
 
 import LoginPageView from '../view/LoginPageView.ts';
 
 class LoginPageModel implements PageInterface {
+  private eventMediator = EventMediatorModel.getInstance();
+
   private loginForm = new LoginFormModel();
 
+  private router: RouterModel;
+
   private view: LoginPageView;
 
-  constructor(parent: HTMLDivElement) {
+  constructor(parent: HTMLDivElement, router: RouterModel) {
+    this.router = router;
     this.view = new LoginPageView(parent);
     this.init();
   }
 
   private init(): boolean {
+    this.subscribeToEventMediator();
     this.view.getAuthWrapper().append(this.loginForm.getHTML());
+    this.registerLinkHandler();
+    return true;
+  }
+
+  private registerLinkHandler(): void {
+    const registerLink = this.view.getRegisterLink();
+
+    registerLink.addEventListener(EVENT_NAMES.CLICK, (event) => {
+      event.preventDefault();
+      this.router.navigateTo(PAGES_IDS.REGISTRATION_PAGE);
+    });
+  }
+
+  private subscribeToEventMediator(): void {
+    this.eventMediator.subscribe(MEDIATOR_EVENTS.CHANGE_PAGE, (route) => this.switchPageVisibility(route));
+  }
+
+  private switchPageVisibility(route: unknown): boolean {
+    if (route === PAGES_IDS.LOGIN_PAGE) {
+      this.view.show();
+    } else {
+      this.view.hide();
+      return false;
+    }
     return true;
   }
 

src/pages/LoginPage/view/LoginPageView.ts

@@ -101,6 +101,10 @@ class LoginPageView {
     return this.page;
   }
 
+  public getRegisterLink(): HTMLAnchorElement {
+    return this.registerLink;
+  }
+
   public hide(): boolean {
     this.page.classList.add(LOGIN_PAGE_STYLES.loginPage_hidden);
     return true;

src/pages/MainPage/model/MainPageModel.ts

@@ -1,12 +1,32 @@
 import type { PageInterface } from '@/shared/types/interfaces.ts';
 
+import EventMediatorModel from '@/shared/EventMediator/model/EventMediatorModel.ts';
+import { MEDIATOR_EVENTS, PAGES_IDS } from '@/shared/constants/enums.ts';
+
 import MainPageView from '../view/MainPageView.ts';
 
 class MainPageModel implements PageInterface {
+  private eventMediator = EventMediatorModel.getInstance();
+
   private view: MainPageView;
 
   constructor(parent: HTMLDivElement) {
     this.view = new MainPageView(parent);
+    this.subscribeToEventMediator();
+  }
+
+  private subscribeToEventMediator(): void {
+    this.eventMediator.subscribe(MEDIATOR_EVENTS.CHANGE_PAGE, (route) => this.switchPageVisibility(route));
+  }
+
+  private switchPageVisibility(route: unknown): boolean {
+    if (route === PAGES_IDS.MAIN_PAGE || route === PAGES_IDS.DEFAULT_PAGE) {
+      this.view.show();
+    } else {
+      this.view.hide();
+      return false;
+    }
+    return true;
   }
 
   public getHTML(): HTMLDivElement {

src/pages/NotFoundPage/model/NotFoundPageModel.ts

@@ -1,12 +1,32 @@
 import type { PageInterface } from '@/shared/types/interfaces.ts';
 
+import EventMediatorModel from '@/shared/EventMediator/model/EventMediatorModel.ts';
+import { MEDIATOR_EVENTS, PAGES_IDS } from '@/shared/constants/enums.ts';
+
 import NotFoundPageView from '../view/NotFoundPageView.ts';
 
 class NotFoundPageModel implements PageInterface {
+  private eventMediator = EventMediatorModel.getInstance();
+
   private view: NotFoundPageView;
 
   constructor(parent: HTMLDivElement) {
     this.view = new NotFoundPageView(parent);
+    this.subscribeToEventMediator();
+  }
+
+  private subscribeToEventMediator(): void {
+    this.eventMediator.subscribe(MEDIATOR_EVENTS.CHANGE_PAGE, (route) => this.switchPageVisibility(route));
+  }
+
+  private switchPageVisibility(route: unknown): boolean {
+    if (route === PAGES_IDS.NOT_FOUND_PAGE) {
+      this.view.show();
+    } else {
+      this.view.hide();
+      return false;
+    }
+    return true;
   }
 
   public getHTML(): HTMLDivElement {

src/pages/RegistrationPage/model/RegistrationPageModel.ts

@@ -1,12 +1,32 @@
 import type { PageInterface } from '@/shared/types/interfaces.ts';
 
+import EventMediatorModel from '@/shared/EventMediator/model/EventMediatorModel.ts';
+import { MEDIATOR_EVENTS, PAGES_IDS } from '@/shared/constants/enums.ts';
+
 import RegistrationPageView from '../view/RegistrationPageView.ts';
 
 class RegistrationPageModel implements PageInterface {
+  private eventMediator = EventMediatorModel.getInstance();
+
   private view: RegistrationPageView;
 
   constructor(parent: HTMLDivElement) {
     this.view = new RegistrationPageView(parent);
+    this.subscribeToEventMediator();
+  }
+
+  private subscribeToEventMediator(): void {
+    this.eventMediator.subscribe(MEDIATOR_EVENTS.CHANGE_PAGE, (route) => this.switchPageVisibility(route));
+  }
+
+  private switchPageVisibility(route: unknown): boolean {
+    if (route === PAGES_IDS.REGISTRATION_PAGE) {
+      this.view.show();
+    } else {
+      this.view.hide();
+      return false;
+    }
+    return true;
   }
 
   public getHTML(): HTMLDivElement {