Merge branch 'sprint-4' into feat(RSS-ECOMM-4_10)/cart

stardustmeg · May 29, 2024 · 22514bd · 22514bd
2 parents 562113e + 5c48af6
commit 22514bd
Show file tree

Hide file tree

Showing 67 changed files with 1,754 additions and 675 deletions.
diff --git a/src/app/App/model/AppModel.ts b/src/app/App/model/AppModel.ts
@@ -32,9 +32,9 @@ class AppModel {
         const { default: CartPageModel } = await import('@/pages/CartPage/model/CartPageModel.ts');
         return new CartPageModel(this.appView.getHTML());
       },
-      [PAGE_ID.CATALOG_PAGE]: async (params: PageParams): Promise<Page> => {
+      [PAGE_ID.CATALOG_PAGE]: async (): Promise<Page> => {
         const { default: CatalogPageModel } = await import('@/pages/CatalogPage/model/CatalogPageModel.ts');
-        return new CatalogPageModel(this.appView.getHTML(), params);
+        return new CatalogPageModel(this.appView.getHTML());
       },
       [PAGE_ID.DEFAULT_PAGE]: async (): Promise<Page> => {
         const { default: MainPageModel } = await import('@/pages/MainPage/model/MainPageModel.ts');

diff --git a/src/app/Router/model/RouterModel.ts b/src/app/Router/model/RouterModel.ts
@@ -1,5 +1,6 @@
 import type { PageParams, PagesType } from '@/shared/types/page';
 
+import getStore from '@/shared/Store/Store.ts';
 import { PAGE_ID } from '@/shared/constants/pages.ts';
 import { isValidPath, isValidState } from '@/shared/types/validation/paths.ts';
 import formattedText from '@/shared/utils/formattedText.ts';
@@ -9,7 +10,6 @@ const PROJECT_TITLE = import.meta.env.VITE_APP_PROJECT_TITLE;
 const DEFAULT_SEGMENT = import.meta.env.VITE_APP_DEFAULT_SEGMENT;
 const NEXT_SEGMENT = import.meta.env.VITE_APP_NEXT_SEGMENT;
 const PATH_SEGMENTS_TO_KEEP = import.meta.env.VITE_APP_PATH_SEGMENTS_TO_KEEP;
-const SEARCH_SEGMENT = import.meta.env.VITE_APP_SEARCH_SEGMENT;
 
 class RouterModel {
   private static router: RouterModel;
@@ -46,18 +46,49 @@ class RouterModel {
     });
   }
 
+  public static appendSearchParams(key: string, value: string): void {
+    const url = new URL(decodeURIComponent(window.location.href));
+    url.searchParams.append(key, value);
+    const path = url.pathname + encodeURIComponent(url.search);
+    window.history.pushState({ path: path.slice(1) }, '', path);
+  }
+
+  public static clearSearchParams(): void {
+    const url = new URL(decodeURIComponent(window.location.href));
+    const path = `${DEFAULT_SEGMENT}${url.pathname.split(DEFAULT_SEGMENT)[NEXT_SEGMENT]}${DEFAULT_SEGMENT}`;
+    window.history.pushState({ path: path.slice(1) }, '', path);
+  }
+
+  public static deleteSearchParams(key: string): void {
+    const url = new URL(decodeURIComponent(window.location.href));
+    url.searchParams.delete(key);
+    const path = url.pathname + encodeURIComponent(url.search);
+    window.history.pushState({ path: path.slice(1) }, '', path);
+  }
+
   public static getInstance(): RouterModel {
     return RouterModel.router;
   }
 
+  public static getSearchParams(): URLSearchParams {
+    return new URL(decodeURIComponent(window.location.href)).searchParams;
+  }
+
+  public static setSearchParams(key: string, value: string): void {
+    const url = new URL(decodeURIComponent(window.location.href));
+    url.searchParams.delete(key);
+    url.searchParams.set(key, value);
+    const path = url.pathname + encodeURIComponent(url.search);
+    window.history.pushState({ path: path.slice(1) }, '', path);
+  }
+
   private async checkPageAndParams(
     currentPage: string,
     path: string,
   ): Promise<{ hasRoute: boolean; params: PageParams } | null> {
     const hasRoute = this.routes.has(currentPage);
     const decodePath = decodeURIComponent(path);
     const id = decodePath.split(DEFAULT_SEGMENT).slice(PATH_SEGMENTS_TO_KEEP, -NEXT_SEGMENT)[NEXT_SEGMENT];
-    const searchParams = decodeURIComponent(decodePath).split(SEARCH_SEGMENT)[NEXT_SEGMENT];
     const title = `${PROJECT_TITLE} | ${hasRoute ? formattedText(currentPage === PAGE_ID.DEFAULT_PAGE ? PAGE_ID.MAIN_PAGE.slice(PATH_SEGMENTS_TO_KEEP, -NEXT_SEGMENT) : currentPage.slice(PATH_SEGMENTS_TO_KEEP, -NEXT_SEGMENT)) : PAGE_ID.NOT_FOUND_PAGE.slice(PATH_SEGMENTS_TO_KEEP, -NEXT_SEGMENT)}`;
     document.title = title;
 
@@ -71,7 +102,6 @@ class RouterModel {
       params: {
         [currentPage.slice(PATH_SEGMENTS_TO_KEEP, -NEXT_SEGMENT)]: {
           id: id ?? null,
-          searchParams: searchParams ?? null,
         },
       },
     };
@@ -89,14 +119,16 @@ class RouterModel {
 
   public navigateTo(path: string): void {
     const currentPage = path.split(DEFAULT_SEGMENT)[PATH_SEGMENTS_TO_KEEP] + DEFAULT_SEGMENT || PAGE_ID.DEFAULT_PAGE;
-    this.checkPageAndParams(currentPage, path)
-      .then((check) => {
-        if (check) {
-          this.routes.get(currentPage)?.(check.params).catch(showErrorMessage);
-          history.pushState({ path }, '', `/${path}`);
-        }
-      })
-      .catch(showErrorMessage);
+    if (currentPage !== getStore().getState().currentPage) {
+      this.checkPageAndParams(currentPage, path)
+        .then((check) => {
+          if (check) {
+            this.routes.get(currentPage)?.(check.params).catch(showErrorMessage);
+          }
+        })
+        .catch(showErrorMessage);
+    }
+    history.pushState({ path }, '', `/${path}`);
   }
 }
 

diff --git a/src/app/styles/mixins.scss b/src/app/styles/mixins.scss
@@ -31,3 +31,55 @@
     pointer-events: none;
   }
 }
+
+@mixin round-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  justify-self: center;
+  border-radius: 50%;
+  padding: calc(var(--tiny-offset) * 1.5);
+  width: max-content;
+  background-color: var(--noble-white-100);
+  transition:
+    color 0.2s,
+    background-color 0.2s,
+    transform 0.2s;
+
+  @media (hover: hover) {
+    &:hover {
+      background-color: var(--white-tr);
+
+      svg {
+        fill: var(--steam-green-800);
+        stroke: var(--steam-green-800);
+      }
+    }
+    /* stylelint-disable-next-line order/order */
+    &:active {
+      transform: scale(1.1);
+    }
+
+    &:disabled {
+      background-color: var(--noble-gray-300);
+      pointer-events: none;
+    }
+  }
+}
+
+@mixin logo {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  justify-self: center;
+
+  svg {
+    width: var(--small-offset);
+    height: var(--small-offset);
+    fill: var(--noble-gray-900);
+    stroke: var(--noble-gray-900);
+    transition:
+      fill 0.2s,
+      stroke 0.2s;
+  }
+}
diff --git a/src/entities/ProductModalSlider/model/ProductModalSliderModel.ts b/src/entities/ProductModalSlider/model/ProductModalSliderModel.ts
@@ -13,6 +13,8 @@ const SLIDER_DELAY = 5000;
 const SLIDER_PER_VIEW = 1;
 
 class ProductModalSliderModel {
+  private modalSlider: Swiper | null = null;
+
   private view: ProductModalSliderView;
 
   constructor(params: ProductInfoParams) {
@@ -21,7 +23,7 @@ class ProductModalSliderModel {
   }
 
   private init(): void {
-    const modalSlider = new Swiper(this.view.getModalSlider(), {
+    this.modalSlider = new Swiper(this.view.getModalSlider(), {
       autoplay: {
         delay: SLIDER_DELAY,
       },
@@ -34,12 +36,15 @@ class ProductModalSliderModel {
       },
       slidesPerView: SLIDER_PER_VIEW,
     });
-    modalSlider.autoplay.start();
   }
 
   public getHTML(): HTMLDivElement {
     return this.view.getHTML();
   }
+
+  public getModalSlider(): Swiper | null {
+    return this.modalSlider;
+  }
 }
 
 export default ProductModalSliderModel;
diff --git a/src/entities/ProductModalSlider/view/ProductModalSliderView.ts b/src/entities/ProductModalSlider/view/ProductModalSliderView.ts
@@ -8,7 +8,6 @@ import createBaseElement from '@/shared/utils/createBaseElement.ts';
 
 import styles from './productModalSliderView.module.scss';
 
-const BIG_SLIDER_WIDTH = 40;
 const CLOSE_BUTTON_CONTENT = 'x';
 
 class ProductModalSliderView {
@@ -65,9 +64,6 @@ class ProductModalSliderView {
       tag: 'div',
     });
 
-    const maxWidth = BIG_SLIDER_WIDTH;
-    slider.style.maxWidth = `${maxWidth}rem`;
-
     slider.append(this.createModalSliderWrapper());
     return slider;
   }

diff --git a/src/entities/ProductModalSlider/view/productModalSliderView.module.scss b/src/entities/ProductModalSlider/view/productModalSliderView.module.scss
@@ -2,23 +2,43 @@
   margin: 0;
   width: 100%;
   min-height: 40rem;
+  max-width: 40rem;
+
+  @media (max-width: 768px) {
+    min-height: 24rem;
+    max-width: 24rem;
+  }
 }
 
 .modalSliderWrapper {
   height: auto;
   min-height: 40rem;
+
+  @media (max-width: 768px) {
+    min-height: 24rem;
+  }
 }
 
 .modalSliderImage {
   width: 100%;
   height: 100%;
   min-height: 40rem;
+
+  @media (max-width: 768px) {
+    min-height: 24rem;
+  }
 }
 
 .modalSliderSlide {
   /* stylelint-disable-next-line declaration-no-important */
   width: 40rem !important;
   min-height: 40rem;
+
+  @media (max-width: 768px) {
+    /* stylelint-disable-next-line declaration-no-important */
+    width: 24rem !important;
+    min-height: 24rem;
+  }
 }
 
 .modalCloseButton {