feat(RSS-ECOMM-5_12): implement wishlist page

src/app/App/model/AppModel.ts

@@ -71,6 +71,10 @@ class AppModel {
         const { default: UserProfilePageModel } = await import('@/pages/UserProfilePage/model/UserProfilePageModel.ts');
         return new UserProfilePageModel(this.appView.getHTML());
       },
+      [PAGE_ID.WISHLIST_PAGE]: async (): Promise<Page> => {
+        const { default: WishlistPageModel } = await import('@/pages/WishlistPage/model/WishlistPageModel.ts');
+        return new WishlistPageModel(this.appView.getHTML());
+      },
     };
 
     const routes = new Map<string, (params: PageParams) => Promise<Page>>();

src/entities/Navigation/view/NavigationView.ts

@@ -1,6 +1,7 @@
 import LinkModel from '@/shared/Link/model/LinkModel.ts';
 import getStore from '@/shared/Store/Store.ts';
-import { PAGE_ID, PAGE_LINK_TEXT, PAGE_LINK_TEXT_KEYS } from '@/shared/constants/pages.ts';
+import { PAGE_LINK_TEXT, PAGE_LINK_TEXT_KEYS } from '@/shared/constants/links.ts';
+import { PAGE_ID } from '@/shared/constants/pages.ts';
 import createBaseElement from '@/shared/utils/createBaseElement.ts';
 import observeCurrentLanguage from '@/shared/utils/observeCurrentLanguage.ts';
 

src/features/WishlistButton/model/WishlistButtonModel.ts

@@ -3,8 +3,10 @@ import type { Product } from '@/shared/types/product.ts';
 import type { ShoppingList, ShoppingListProduct } from '@/shared/types/shopping-list.ts';
 
 import getShoppingListModel from '@/shared/API/shopping-list/model/ShoppingListModel.ts';
+import EventMediatorModel from '@/shared/EventMediator/model/EventMediatorModel.ts';
 import getStore from '@/shared/Store/Store.ts';
 import { LANGUAGE_CHOICE } from '@/shared/constants/common.ts';
+import MEDIATOR_EVENT from '@/shared/constants/events.ts';
 import { productAddedToWishListMessage, productRemovedFromWishListMessage } from '@/shared/utils/messageTemplates.ts';
 import { showErrorMessage, showSuccessMessage } from '@/shared/utils/userMessage.ts';
 
@@ -30,6 +32,7 @@ class WishlistButtonModel {
           ),
         );
         this.view.switchStateWishListButton(true);
+        EventMediatorModel.getInstance().notify(MEDIATOR_EVENT.REDRAW_WISHLIST, '');
       })
       .catch(showErrorMessage);
   }
@@ -44,6 +47,7 @@ class WishlistButtonModel {
           ),
         );
         this.view.switchStateWishListButton(false);
+        EventMediatorModel.getInstance().notify(MEDIATOR_EVENT.REDRAW_WISHLIST, '');
       })
       .catch(showErrorMessage);
   }

src/features/WishlistButton/view/wishlistButtonView.module.scss

@@ -22,10 +22,10 @@
 
   @media (hover: hover) {
     &:hover {
-      outline: calc(var(--one) * 1.5) solid var(--red-power-600);
+      outline: calc(var(--one) * 1.5) solid var(--steam-green-800);
 
       svg {
-        fill: var(--red-power-600);
+        fill: var(--steam-green-800);
       }
     }
   }
@@ -44,9 +44,9 @@
 }
 
 .inWishList {
-  outline: calc(var(--one) * 1.5) solid var(--red-power-600);
+  outline: calc(var(--one) * 1.5) solid var(--steam-green-800);
 
   svg {
-    fill: var(--red-power-600);
+    fill: var(--steam-green-800);
   }
 }

src/pages/LoginPage/model/LoginPageModel.ts

@@ -4,7 +4,8 @@ import RouterModel from '@/app/Router/model/RouterModel.ts';
 import getStore from '@/shared/Store/Store.ts';
 import { setCurrentPage } from '@/shared/Store/actions.ts';
 import observeStore, { selectIsUserLoggedIn } from '@/shared/Store/observer.ts';
-import { PAGE_ID, PAGE_LINK_TEXT, PAGE_LINK_TEXT_KEYS } from '@/shared/constants/pages.ts';
+import { PAGE_LINK_TEXT, PAGE_LINK_TEXT_KEYS } from '@/shared/constants/links.ts';
+import { PAGE_ID } from '@/shared/constants/pages.ts';
 import observeCurrentLanguage from '@/shared/utils/observeCurrentLanguage.ts';
 import LoginFormModel from '@/widgets/LoginForm/model/LoginFormModel.ts';
 

src/pages/LoginPage/view/LoginPageView.ts

@@ -1,13 +1,12 @@
 import LinkModel from '@/shared/Link/model/LinkModel.ts';
 import getStore from '@/shared/Store/Store.ts';
+import { PAGE_LINK_TEXT, PAGE_LINK_TEXT_KEYS } from '@/shared/constants/links.ts';
 import {
   PAGE_ANSWER,
   PAGE_ANSWER_KEYS,
   PAGE_DESCRIPTION,
   PAGE_DESCRIPTION_KEYS,
   PAGE_ID,
-  PAGE_LINK_TEXT,
-  PAGE_LINK_TEXT_KEYS,
 } from '@/shared/constants/pages.ts';
 import createBaseElement from '@/shared/utils/createBaseElement.ts';
 import observeCurrentLanguage from '@/shared/utils/observeCurrentLanguage.ts';

src/pages/RegistrationPage/model/RegistrationPageModel.ts

@@ -4,7 +4,8 @@ import RouterModel from '@/app/Router/model/RouterModel.ts';
 import getStore from '@/shared/Store/Store.ts';
 import { setCurrentPage } from '@/shared/Store/actions.ts';
 import observeStore, { selectIsUserLoggedIn } from '@/shared/Store/observer.ts';
-import { PAGE_ID, PAGE_LINK_TEXT, PAGE_LINK_TEXT_KEYS } from '@/shared/constants/pages.ts';
+import { PAGE_LINK_TEXT, PAGE_LINK_TEXT_KEYS } from '@/shared/constants/links.ts';
+import { PAGE_ID } from '@/shared/constants/pages.ts';
 import observeCurrentLanguage from '@/shared/utils/observeCurrentLanguage.ts';
 import RegisterFormModel from '@/widgets/RegistrationForm/model/RegistrationFormModel.ts';
 

src/pages/RegistrationPage/view/RegistrationPageView.ts

@@ -1,13 +1,12 @@
 import LinkModel from '@/shared/Link/model/LinkModel.ts';
 import getStore from '@/shared/Store/Store.ts';
+import { PAGE_LINK_TEXT, PAGE_LINK_TEXT_KEYS } from '@/shared/constants/links.ts';
 import {
   PAGE_ANSWER,
   PAGE_ANSWER_KEYS,
   PAGE_DESCRIPTION,
   PAGE_DESCRIPTION_KEYS,
   PAGE_ID,
-  PAGE_LINK_TEXT,
-  PAGE_LINK_TEXT_KEYS,
 } from '@/shared/constants/pages.ts';
 import createBaseElement from '@/shared/utils/createBaseElement.ts';
 import observeCurrentLanguage from '@/shared/utils/observeCurrentLanguage.ts';

src/pages/WishlistPage/model/WishlistPageModel.ts

@@ -0,0 +1,86 @@
+import type { BreadCrumbLink } from '@/shared/types/link.ts';
+import type { Page } from '@/shared/types/page.ts';
+
+import ProductCardModel from '@/entities/ProductCard/model/ProductCardModel.ts';
+import BreadcrumbsModel from '@/features/Breadcrumbs/model/BreadcrumbsModel.ts';
+import getCartModel from '@/shared/API/cart/model/CartModel.ts';
+import getProductModel from '@/shared/API/product/model/ProductModel.ts';
+import getShoppingListModel from '@/shared/API/shopping-list/model/ShoppingListModel.ts';
+import EventMediatorModel from '@/shared/EventMediator/model/EventMediatorModel.ts';
+import LoaderModel from '@/shared/Loader/model/LoaderModel.ts';
+import getStore from '@/shared/Store/Store.ts';
+import { setCurrentPage } from '@/shared/Store/actions.ts';
+import MEDIATOR_EVENT from '@/shared/constants/events.ts';
+import { PAGE_ID } from '@/shared/constants/pages.ts';
+import { LOADER_SIZE } from '@/shared/constants/sizes.ts';
+import { buildPathName } from '@/shared/utils/buildPathname.ts';
+import { showErrorMessage } from '@/shared/utils/userMessage.ts';
+
+import WishlistPageView from '../view/WishlistPageView.ts';
+
+class WishlistPageModel implements Page {
+  private view: WishlistPageView;
+
+  constructor(parent: HTMLDivElement) {
+    this.view = new WishlistPageView(parent);
+    this.init();
+  }
+
+  private createNavigationLinks(): BreadCrumbLink[] {
+    const links = [
+      {
+        link: buildPathName(PAGE_ID.MAIN_PAGE, null, null),
+        name: PAGE_ID.MAIN_PAGE.toString(),
+      },
+      {
+        link: buildPathName(PAGE_ID.CATALOG_PAGE, null, null),
+        name: PAGE_ID.CATALOG_PAGE.toString(),
+      },
+    ];
+
+    return links;
+  }
+
+  private async drawWishlist(): Promise<void> {
+    const wishList = this.view.getWishlist();
+    wishList.innerHTML = '';
+    const loader = new LoaderModel(LOADER_SIZE.EXTRA_LARGE);
+    loader.setAbsolutePosition();
+    wishList.append(loader.getHTML());
+    const shoppingList = await getShoppingListModel().getShoppingList();
+    const cart = await getCartModel().getCart();
+
+    getProductModel()
+      .getProducts()
+      .then((products) => {
+        shoppingList.products.forEach((product) => {
+          const currentProduct = products.products.find((item) => item.id === product.productId);
+          if (currentProduct) {
+            this.view.getWishlist().append(new ProductCardModel(currentProduct, null, cart).getHTML());
+          }
+        });
+
+        this.view.switchEmptyList(!shoppingList.products.length);
+      })
+      .catch(showErrorMessage)
+      .finally(() => loader.getHTML().remove());
+  }
+
+  private init(): void {
+    this.initBreadcrumbs();
+    getStore().dispatch(setCurrentPage(PAGE_ID.WISHLIST_PAGE));
+    this.drawWishlist().catch(showErrorMessage);
+    EventMediatorModel.getInstance().subscribe(MEDIATOR_EVENT.REDRAW_WISHLIST, this.drawWishlist.bind(this));
+  }
+
+  private initBreadcrumbs(): void {
+    const links = this.createNavigationLinks();
+    this.getHTML().append(new BreadcrumbsModel(links).getHTML());
+  }
+
+  public getHTML(): HTMLDivElement {
+    return this.view.getHTML();
+  }
+}
+
+export default WishlistPageModel;

src/pages/WishlistPage/view/WishlistPageView.ts

@@ -0,0 +1,65 @@
+import getStore from '@/shared/Store/Store.ts';
+import observeStore, { selectCurrentLanguage } from '@/shared/Store/observer.ts';
+import { EMPTY_PRODUCT } from '@/shared/constants/product.ts';
+import createBaseElement from '@/shared/utils/createBaseElement.ts';
+
+import styles from './wishlistPageView.module.scss';
+
+class WishlistPageView {
+  private page: HTMLDivElement;
+
+  private parent: HTMLDivElement;
+
+  private wishlist: HTMLUListElement;
+
+  constructor(parent: HTMLDivElement) {
+    this.parent = parent;
+    this.parent.innerHTML = '';
+    this.wishlist = this.createWishlist();
+    this.page = this.createHTML();
+    window.scrollTo(0, 0);
+  }
+
+  private createHTML(): HTMLDivElement {
+    this.page = createBaseElement({
+      cssClasses: [styles.wishlistPage],
+      tag: 'div',
+    });
+
+    this.page.append(this.wishlist);
+    this.parent.append(this.page);
+
+    return this.page;
+  }
+
+  private createWishlist(): HTMLUListElement {
+    this.wishlist = createBaseElement({
+      cssClasses: [styles.wishlist],
+      tag: 'ul',
+    });
+
+    observeStore(selectCurrentLanguage, () => {
+      if (this.wishlist.classList.contains(styles.emptyList)) {
+        this.wishlist.textContent = EMPTY_PRODUCT[getStore().getState().currentLanguage].EMPTY;
+      }
+    });
+
+    return this.wishlist;
+  }
+
+  public getHTML(): HTMLDivElement {
+    return this.page;
+  }
+
+  public getWishlist(): HTMLUListElement {
+    return this.wishlist;
+  }
+
+  public switchEmptyList(isEmpty: boolean): void {
+    this.wishlist.classList.toggle(styles.emptyList, isEmpty);
+    if (isEmpty) {
+      this.wishlist.textContent = EMPTY_PRODUCT[getStore().getState().currentLanguage].EMPTY;
+    }
+  }
+}
+export default WishlistPageView;

src/pages/WishlistPage/view/wishlistPageView.module.scss

@@ -0,0 +1,71 @@
+@import 'src/app/styles/mixins';
+
+.wishlistPage {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  padding: 0 var(--small-offset);
+  animation: show 0.2s ease-out forwards;
+}
+
+@keyframes show {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    display: flex;
+    opacity: 1;
+  }
+}
+
+.wishlist {
+  position: relative;
+  display: grid;
+  align-items: stretch;
+  justify-content: center;
+  order: 2;
+  grid-template-columns: repeat(3, auto);
+  height: max-content;
+  min-height: 20.438rem;
+  font-size: var(--regular-font);
+  letter-spacing: var(--one);
+  text-align: center;
+  color: var(--steam-green-500);
+  gap: var(--small-offset);
+
+  @media (max-width: 970px) {
+    grid-template-columns: repeat(2, max-content);
+  }
+
+  @media (max-width: 690px) {
+    grid-template-columns: repeat(1, 1fr);
+  }
+
+  @media (min-width: 5300px) {
+    grid-template-columns: repeat(4, max-content);
+  }
+
+  @media (min-width: 6600px) {
+    grid-template-columns: repeat(5, max-content);
+  }
+
+  &.emptyList {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding-top: 12rem;
+    height: 100%;
+    min-height: 20.438rem;
+    background: url('../../../shared/img/png/notFound.png');
+    background-position: center 0;
+    background-size: calc(var(--extra-large-offset) * 2);
+    background-repeat: no-repeat;
+    gap: var(--tiny-offset);
+  }
+}
+
+.goToCatalogLink {
+  @include link(calc(var(--extra-small-offset) / 2) 0);
+}

src/shared/constants/events.ts

@@ -3,6 +3,7 @@ const MEDIATOR_EVENT = {
   REDRAW_PRODUCTS: 'REDRAW_PRODUCTS',
   REDRAW_USER_ADDRESSES: 'REDRAW_USER_ADDRESSES',
   REDRAW_USER_INFO: 'REDRAW_USER_INFO',
+  REDRAW_WISHLIST: 'REDRAW_WISHLIST',
 } as const;
 
 export default MEDIATOR_EVENT;

src/shared/constants/links.ts

@@ -10,3 +10,31 @@ export const USER_PROFILE_MENU_LINK = {
 export const LINK_DETAILS = {
   BLANK: '_blank',
 } as const;
+
+export const PAGE_LINK_TEXT = {
+  en: {
+    ABOUT: 'About us',
+    BLOG: 'Blog',
+    CATALOG: 'Catalog',
+    LOGIN: 'Login',
+    MAIN: 'Main',
+    REGISTRATION: 'Register',
+  },
+  ru: {
+    ABOUT: 'О нас',
+    BLOG: 'Блог',
+    CATALOG: 'Каталог',
+    LOGIN: 'Вход',
+    MAIN: 'Главная',
+    REGISTRATION: 'Регистрация',
+  },
+} as const;
+
+export const PAGE_LINK_TEXT_KEYS = {
+  ABOUT: 'ABOUT',
+  BLOG: 'BLOG',
+  CATALOG: 'CATALOG',
+  LOGIN: 'LOGIN',
+  MAIN: 'MAIN',
+  REGISTRATION: 'REGISTRATION',
+} as const;