feat: translate wishlist breadcrumbs

src/pages/WishlistPage/model/WishlistPageModel.ts

@@ -4,25 +4,26 @@ import type { Page } from '@/shared/types/page.ts';
 import BreadcrumbsModel from '@/features/Breadcrumbs/model/BreadcrumbsModel.ts';
 import getStore from '@/shared/Store/Store.ts';
 import { setCurrentPage } from '@/shared/Store/actions.ts';
-import { PAGE_ID } from '@/shared/constants/pages.ts';
+import observeStore, { selectCurrentLanguage } from '@/shared/Store/observer.ts';
+import { PAGE_ID, PAGE_TITLE } from '@/shared/constants/pages.ts';
 
 import WishlistPageView from '../view/WishlistPageView.ts';
 
 class WishlistPageModel implements Page {
-  private breadcrumbs = new BreadcrumbsModel();
-
   private view: WishlistPageView;
 
   constructor(parent: HTMLDivElement) {
     this.view = new WishlistPageView(parent);
     this.init();
+
+    this.observeLanguage();
   }
 
   private createBreadcrumbLinksData(): BreadcrumbLink[] {
     return [
-      { link: PAGE_ID.MAIN_PAGE, name: PAGE_ID.MAIN_PAGE.toString() },
-      { link: PAGE_ID.CATALOG_PAGE, name: PAGE_ID.CATALOG_PAGE.toString() },
-      { link: PAGE_ID.WISHLIST_PAGE, name: PAGE_ID.WISHLIST_PAGE.toString() },
+      { link: PAGE_ID.MAIN_PAGE, name: PAGE_TITLE[getStore().getState().currentLanguage].main },
+      { link: PAGE_ID.CATALOG_PAGE, name: PAGE_TITLE[getStore().getState().currentLanguage].catalog },
+      { link: PAGE_ID.WISHLIST_PAGE, name: PAGE_TITLE[getStore().getState().currentLanguage].wishlist },
     ];
   }
 
@@ -32,8 +33,24 @@ class WishlistPageModel implements Page {
   }
 
   private initBreadcrumbs(): void {
-    this.breadcrumbs.addBreadcrumbLinks(this.createBreadcrumbLinksData());
-    this.getHTML().append(this.breadcrumbs.getHTML());
+    const breadcrumbsContainer = this.view.getBreadcrumbsContainer();
+    if (!breadcrumbsContainer) {
+      return;
+    }
+
+    const breadcrumbs = new BreadcrumbsModel();
+    breadcrumbs.addBreadcrumbLinks(this.createBreadcrumbLinksData());
+
+    while (breadcrumbsContainer.firstChild) {
+      breadcrumbsContainer.removeChild(breadcrumbsContainer.firstChild);
+    }
+    breadcrumbsContainer.appendChild(breadcrumbs.getHTML());
+  }
+
+  private observeLanguage(): void {
+    observeStore(selectCurrentLanguage, () => {
+      this.initBreadcrumbs();
+    });
   }
 
   public getHTML(): HTMLDivElement {

src/pages/WishlistPage/view/WishlistPageView.ts

@@ -21,6 +21,8 @@ import { showErrorMessage } from '@/shared/utils/userMessage.ts';
 import styles from './wishlistPageView.module.scss';
 
 class WishlistPageView {
+  private breadcrumbsContainer: HTMLDivElement;
+
   private page: HTMLDivElement;
 
   private parent: HTMLDivElement;
@@ -30,17 +32,27 @@ class WishlistPageView {
   constructor(parent: HTMLDivElement) {
     this.parent = parent;
     this.parent.innerHTML = '';
+    this.breadcrumbsContainer = this.createBreadcrumbsContainer();
     this.wishlist = this.createWishlist();
     this.page = this.createHTML();
     window.scrollTo(0, 0);
   }
 
+  private createBreadcrumbsContainer(): HTMLDivElement {
+    this.breadcrumbsContainer = createBaseElement({
+      cssClasses: [styles.breadcrumbsContainer],
+      tag: 'div',
+    });
+    return this.breadcrumbsContainer;
+  }
+
   private createHTML(): HTMLDivElement {
     this.page = createBaseElement({
       cssClasses: [styles.wishlistPage],
       tag: 'div',
     });
 
+    this.page.prepend(this.breadcrumbsContainer);
     this.page.append(this.wishlist);
     this.parent.append(this.page);
 
@@ -97,6 +109,10 @@ class WishlistPageView {
     this.switchEmptyList(!shoppingList.products.length);
   }
 
+  public getBreadcrumbsContainer(): HTMLDivElement {
+    return this.breadcrumbsContainer;
+  }
+
   public getHTML(): HTMLDivElement {
     return this.page;
   }