Feature/os 50 fe create pagination category page mob

src/assets/svgs/ArrowLeft.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+
+const ArrowLeft = (): JSX.Element => {
+  return (
+    <svg
+      width="32"
+      height="32"
+      viewBox="0 0 32 32"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M19 22L13 16L19 10"
+        stroke="#212121"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default ArrowLeft;

src/assets/svgs/ArrowLeftGrey.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+
+const ArrowLeftGrey = (): JSX.Element => {
+  return (
+    <svg
+      width="32"
+      height="32"
+      viewBox="0 0 32 32"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M19 22L13 16L19 10"
+        stroke="#959595"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default ArrowLeftGrey;

src/assets/svgs/ArrowRight.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+
+const ArrowRight = () => {
+  return (
+    <svg
+      width="32"
+      height="32"
+      viewBox="0 0 32 32"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M13 10L19 16L13 22"
+        stroke="#212121"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default ArrowRight;

src/assets/svgs/ArrowRightGrey.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+
+const ArrowRightGrey = () => {
+  return (
+    <svg
+      width="32"
+      height="32"
+      viewBox="0 0 32 32"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M13 10L19 16L13 22"
+        stroke="#959595"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default ArrowRightGrey;

src/components/SameStyleAndVisitedProducts/index.tsx

@@ -5,7 +5,7 @@ import {
   useGetProductsByIdWithImagesQuery,
 } from 'redux/productsApi';
 import { BodySearchProducts } from 'redux/types';
-import { FIRST_PAGE, SIMILAR_PRODUCTS_SIZE } from 'utils/constants';
+import { PageNumbers, SIMILAR_PRODUCTS_SIZE } from 'utils/constants';
 import ProductsGridShort from 'modules/product/components/ProductsGridShort';
 import styles from './index.module.scss';
 import { useParams } from 'react-router-dom';
@@ -37,7 +37,7 @@ const CustomizedProductsDisplay: FC<BodySearchProducts> = ({ subcategory }) => {
 
   useEffect(() => {
     searchProducts({
-      page: FIRST_PAGE,
+      page: Number(PageNumbers.FIRST_PAGE),
       size: SIMILAR_PRODUCTS_SIZE,
       body: {
         subcategory,

src/helpers/create-pages-list.helper.ts

@@ -0,0 +1,11 @@
+import { PageNumbers } from 'utils/constants';
+
+const createPagesList = (pagesAmount: PageNumbers) => {
+  const pagesArray: number[] = [];
+  for (let i = 1; i <= Number(pagesAmount); i++) {
+    pagesArray.push(i);
+  }
+  return pagesArray;
+};
+
+export { createPagesList };

src/helpers/index.ts

@@ -3,3 +3,4 @@ export { getTotalPrice } from './get-total-price.helper';
 export { isMatchingItem } from './is-matching-item.helper';
 export { generateKey } from './generate-key.helper';
 export { getSelectStyle } from './get-select-styles.helper';
+export { createPagesList } from './create-pages-list.helper';

src/hooks/use-get-viewport-width.hook.ts

@@ -2,7 +2,9 @@ import { useState, useEffect, useCallback } from 'react';
 import { ViewportWidth } from 'utils/constants';
 
 export const useGetViewportWidth = () => {
-  const [isMobile, setIsMobile] = useState(false);
+  const [isMobile, setIsMobile] = useState(
+    window.innerWidth <= ViewportWidth.MOBILE,
+  );
 
   const handleResize = useCallback(() => {
     const isMobileWidth = window.innerWidth <= ViewportWidth.MOBILE;

src/modules/core/components/CoreSwiper/index.tsx

@@ -31,7 +31,6 @@ const CoreSwiper: FC<CoreSwiperProps> = ({
     effect="fade"
     fadeEffect={{ crossFade: true }}
     rewind
-    loop
   >
     {children}
   </Swiper>

src/modules/core/components/Ellipsis/index.module.scss

@@ -0,0 +1,3 @@
+.ellipsis {
+  cursor: default;
+}

src/modules/core/components/Ellipsis/index.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { ELLIPSIS, PageNumbers } from 'utils/constants';
+
+import styles from './index.module.scss';
+
+const Ellipsis = (): React.JSX.Element => (
+  <li key={ELLIPSIS} className={styles.ellipsis}>
+    {PageNumbers.ELLIPSIS}
+  </li>
+);
+
+export default Ellipsis;

src/modules/core/components/MainLayout/index.module.scss

@@ -6,7 +6,6 @@
   align-items: center;
   max-width: $max-content-width;
   width: calc(100% - 160px);
-  height: 100%;
   @include media(laptop) {
     width: calc(100% - 120px);
   }
@@ -17,3 +16,7 @@
     width: calc(100% - 64px);
   }
 }
+
+.mainMaxHeight {
+  height: 100%;
+}

src/modules/core/components/MainLayout/index.tsx

@@ -6,12 +6,19 @@ import styles from './index.module.scss';
 interface MainLayoutProps {
   children: ReactNode;
   showFooter?: boolean;
+  isLoading?: boolean;
 }
 
-const MainLayout: FC<MainLayoutProps> = ({ children, showFooter = true }) => (
+const MainLayout: FC<MainLayoutProps> = ({
+  children,
+  showFooter = true,
+  isLoading,
+}) => (
   <>
     <Header />
-    <div className={styles.main}>{children}</div>
+    <div className={`${styles.main} ${isLoading ? styles.mainMaxHeight : ''}`}>
+      {children}
+    </div>
     {showFooter ? <Footer /> : null}
   </>
 );

src/modules/core/components/PaginationButton/index.module.scss

@@ -0,0 +1,14 @@
+@import 'styles/constants';
+
+.paginationButton:hover {
+  cursor: pointer;
+}
+
+.paginationDisabled {
+  pointer-events: none;
+}
+
+.pagination__icon {
+  width: 32px;
+  height: 32px;
+}

src/modules/core/components/PaginationButton/index.tsx

@@ -0,0 +1,44 @@
+import React, { FC } from 'react';
+import ArrowLeft from 'assets/svgs/ArrowLeft';
+import ArrowRight from 'assets/svgs/ArrowRight';
+import ArrowLeftGrey from 'assets/svgs/ArrowLeftGrey';
+import ArrowRightGrey from 'assets/svgs/ArrowRightGrey';
+
+import styles from './index.module.scss';
+
+interface PaginationButtonProps {
+  isPrevious?: boolean;
+  isDisabled?: boolean;
+  handleClick: () => void;
+}
+
+const PaginationButton: FC<PaginationButtonProps> = ({
+  isPrevious,
+  isDisabled,
+  handleClick,
+}) => {
+  return (
+    <button
+      className={`${styles.paginationButton} ${
+        isDisabled ? styles.paginationDisabled : ''
+      }`}
+      onClick={handleClick}
+    >
+      <div className={styles.pagination__icon}>
+        {isDisabled ? (
+          isPrevious ? (
+            <ArrowLeftGrey />
+          ) : (
+            <ArrowRightGrey />
+          )
+        ) : isPrevious ? (
+          <ArrowLeft />
+        ) : (
+          <ArrowRight />
+        )}
+      </div>
+    </button>
+  );
+};
+
+export default PaginationButton;

src/modules/product/components/FilterTabButtons/index.tsx

@@ -1,24 +1,34 @@
-import React, { FC, useCallback, useState } from 'react';
+import React, { FC, useCallback } from 'react';
 import { BodySearchProducts } from 'redux/types';
 import { getButtons } from './data';
 import { useTranslation } from 'react-i18next';
 import { Category, Subcategory } from 'types/types';
+import { PageNumbers } from 'utils/constants';
+
 import styles from './index.module.scss';
 
 interface FilterTabButtons {
+  activeButton: string;
+  setActiveButton: (value: string) => void;
+  setActivePage: (page: PageNumbers) => void;
   handleClick: (body: BodySearchProducts) => void;
 }
 
-const FilterTabButtons: FC<FilterTabButtons> = ({ handleClick }) => {
+const FilterTabButtons: FC<FilterTabButtons> = ({
+  activeButton,
+  setActiveButton,
+  handleClick,
+  setActivePage,
+}) => {
   const { t } = useTranslation();
 
   const buttons = getButtons(t);
-  const [active, setActive] = useState<string>(buttons[0].value);
 
   const onClick = useCallback(
     (value: string, body: BodySearchProducts) => () => {
       handleClick(body);
-      setActive(value);
+      setActiveButton(value);
+      setActivePage(PageNumbers.FIRST_PAGE);
     },
     [],
   );
@@ -38,7 +48,7 @@ const FilterTabButtons: FC<FilterTabButtons> = ({ handleClick }) => {
           <button
             key={value}
             value={value}
-            className={value === active ? styles.active : styles.button}
+            className={value === activeButton ? styles.active : styles.button}
             onClick={onClick(value, body)}
           >
             {name}

src/modules/product/components/ProductCard/index.module.scss

@@ -4,6 +4,5 @@
   width: calc((100% - 16px) / 3);
   @include media(mobile) {
     width: calc((100% - 8px) / 2);
-    margin-bottom: 8px;
   }
 }

src/modules/product/components/ProductImageSwiper/index.module.scss

@@ -4,6 +4,9 @@
   width: 100%;
   height: 100%;
   margin-bottom: 16px;
+  @include media(mobile) {
+    margin-bottom: 12px;
+  }
 }
 
 .wrapperArrows {

src/modules/product/components/ProductInfo/index.module.scss

@@ -8,7 +8,7 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  margin-bottom: 7px;
+  margin-bottom: 10px;
 }
 
 .productName {
@@ -18,9 +18,6 @@
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
-  @include media(tablet) {
-    margin-bottom: 5px;
-  }
 }
 
 .shoppingCart {

src/modules/product/components/ProductsGrid/index.module.scss

@@ -4,11 +4,11 @@
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
-  margin-bottom: 68px;
   width: 100%;
   row-gap: 32px;
+  margin-bottom: 64px;
   @include media(mobile) {
-    margin-bottom: 32px;
     row-gap: 16px;
+    margin-bottom: 32px;
   }
 }