Pagination fix

src/modules/PhonesPage/PhonesPage.tsx

@@ -61,7 +61,7 @@ export const ProductsPage: React.FC<Props> = ({
       page: page || '1',
       perPage: perPage || '16',
       sort: sort || 'price',
-      order: 'asc',
+      order: order || 'asc',
     };
 
     getProductsWithSearchParams(endpoint, params)

src/modules/shared/Filtration/Filtration.tsx

@@ -11,10 +11,10 @@ import {
 const PER_PAGE = ['All', '4', '8', '16'];
 
 const SORT_OPTIONS = [
-  { label: 'Newest', value: 'date', order: 'desc' },
-  { label: 'Oldest', value: 'date', order: 'asc' },
-  { label: 'Alphabetically Asc', value: 'title', order: 'asc' },
-  { label: 'Alphabetically Desc', value: 'title', order: 'desc' },
+  { label: 'Newest', value: 'year', order: 'desc' },
+  { label: 'Oldest', value: 'year', order: 'asc' },
+  { label: 'Alphabetically Asc', value: 'name', order: 'asc' },
+  { label: 'Alphabetically Desc', value: 'name', order: 'desc' },
   { label: 'Cheapest', value: 'price', order: 'asc' },
   { label: 'Most Expensive', value: 'price', order: 'desc' },
 ];
@@ -40,13 +40,17 @@ export const Filtration: React.FC<Props> = ({
   const getPerPageParams = (newPerPage: string) => {
     if (newPerPage === 'All') {
       const search = getSearchWith(
-        searchParams, { perPage: totalPhones.toString() },
+        searchParams,
+        { perPage: totalPhones.toString(), page: '1' },
       );
 
       return search;
     }
 
-    const search = getSearchWith(searchParams, { perPage: newPerPage });
+    const search = getSearchWith(
+      searchParams,
+      { perPage: newPerPage, page: '1' },
+    );
 
     return search;
   };
@@ -107,6 +111,7 @@ export const Filtration: React.FC<Props> = ({
                     search: getSearchWith(searchParams, {
                       sort: option.value,
                       order: option.order,
+                      page: '1',
                     }),
                   }}
                   key={option.label}

src/modules/shared/Pagination/Pagination.module.scss

@@ -16,14 +16,6 @@
   &__item {
     margin-right: 8px;
     box-sizing: border-box;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 32px;
-    height: 32px;
-    border-radius: 48px;
-    border: 1px solid $color__elements;
-    transition: border 0.3s ease, background-color 0.3s ease;
 
     &__first {
       margin: 0px;
@@ -33,63 +25,64 @@
       margin: 0px;
     }
 
-    &:hover {
-      border: 1px solid $color__primary;
-    }
-
-    &__active {
-      background-color: $color__primary;
-    }
-
     &__DARK {
       border-radius: 0px;
-      border: none;
-      background-color: $color__dark-theme__surface-1;
-
-      &:hover {
-        background-color: $color__dark-theme__elements;
-      }
-
-      &__active {
-        background-color: $color__dark-theme__accent;
-      }
     }
   }
 
   &__number {
+    box-sizing: border-box;
     display: flex;
     align-items: center;
     justify-content: center;
     width: 32px;
     height: 32px;
     border-radius: 48px;
     color: #000;
+    border: 1px solid $color__elements;
 
     &:hover {
       border: 1px solid $color__primary;
+      transition: border 0.3s ease;
     }
 
     &__SELECTED {
       border: none;
       background-color: $color__dark-theme__surface-1;
       color: $color__white;
+      transition: border 0.3s ease-in, background-color 0.3s ease-out;
+    }
+
+    &__DISABLED {
+      pointer-events: none;
     }
 
     &__DARK {
+      border-radius: 0px;
+      border: none;
       color: $color__dark-theme__white;
+      background-color: $color__dark-theme__surface-1;
 
       &:hover {
         background-color: $color__dark-theme__elements;
+        border: none;
+        transition: border 0.3s ease, background-color 0.3s ease;
       }
 
       &__SELECTED {
         color: $color__dark-theme__white;
         background-color: $color__dark-theme__accent;
+        transition: border 0.3s ease-in, background-color 0.3s ease-out;
+      }
+
+      &__DISABLED {
+        pointer-events: none;
       }
     }
   }
 
   &__arrow {
+    box-sizing: border-box;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -100,13 +93,15 @@
     transition: border 0.3s ease, background-color 0.3s ease;
     border: 1px solid $color__icons;
     background-repeat: no-repeat;
+    color: none;
 
     &:hover {
       border: 1px solid $color__primary;
     }
 
     &__DISABLED {
       border: 1px solid $color__elements;
+      pointer-events: none;
     }
 
     &__DARK {
@@ -121,7 +116,8 @@
       &__DISABLED {
         border: 1px solid $color__dark-theme__elements;
         background-color: none;
+        pointer-events: none;
       }
     }
   }
-}
+}

src/modules/shared/Pagination/Pagination.tsx

@@ -55,17 +55,17 @@ export const Pagination: React.FC<Props> = ({
           styles.pagination__item__first, {
             [styles.pagination__item__DARK]: isDarkTheme,
           })}
-        key="arrow"
+        key="arrowLeft"
       >
         <Link
           to={{
             search: getSearchWith(searchParams, { page: prevPage }),
           }}
           className={cn(styles.pagination__arrow, {
             [styles.pagination__arrow__DARK]: isDarkTheme,
-            [styles.pagination__arrow__DISABLED]: isLastPage,
+            [styles.pagination__arrow__DISABLED]: isFirstPage,
             [styles.apagination__arrow__DARK__DISABLED]:
-            isLastPage && isDarkTheme,
+            isFirstPage && isDarkTheme,
           })}
           aria-disabled={isFirstPage}
         >
@@ -80,25 +80,27 @@ export const Pagination: React.FC<Props> = ({
           <li
             className={cn(styles.pagination__item, {
               [styles.pagination__item__DARK]: isDarkTheme,
-              [styles.pagination__item__active]: currentPage === pageNumber,
-              [styles.pagination__item__DARK__active]:
-                currentPage === pageNumber && isDarkTheme,
             })}
-            key={pageNumber}
+            key={pageNumber.key}
           >
             <Link
               to={{
-                search: getSearchWith(searchParams, { page: pageNumber }),
+                search: getSearchWith(searchParams, { page: pageNumber.value }),
               }}
               className={cn(styles.pagination__number, {
                 [styles.pagination__number__DARK]: isDarkTheme,
                 [styles.pagination__number__SELECTED]:
-                  currentPage === pageNumber,
+                  currentPage === pageNumber.value,
+                [styles.pagination__number__DISABLED]:
+                  pageNumber.value === '..',
                 [styles.pagination__number__DARK__SELECTED]:
-                  currentPage === pageNumber && isDarkTheme,
+                  currentPage === pageNumber.value && isDarkTheme,
+                [styles.pagination__number__DARK__DISABLED]:
+                  pageNumber.value === '..' && isDarkTheme,
               })}
+              aria-disabled={currentPage === '..'}
             >
-              {pageNumber}
+              {pageNumber.value}
             </Link>
           </li>
         ))}
@@ -108,6 +110,7 @@ export const Pagination: React.FC<Props> = ({
         className={cn(styles.pagination__item, {
           [styles.pagination__item__DARK]: isDarkTheme,
         })}
+        key="arrowRight"
       >
         <Link
           to={{

src/utils/getPages.ts

@@ -1,17 +1,32 @@
 export const getPages = (totalPages: number, currentPage: number) => {
-  const maxPagesToShow = 5;
   const pages = [];
 
-  let startPage = currentPage;
-  let endPage = currentPage + (maxPagesToShow - 1);
+  const startPage = currentPage > 3
+    ? currentPage - 2
+    : 1;
 
-  if (endPage > totalPages) {
-    endPage = totalPages;
-    startPage = Math.max(totalPages - (maxPagesToShow - 1), 1);
-  }
+  const endPage = currentPage + 2 < totalPages
+    ? currentPage + 2
+    : totalPages;
 
   for (let i = startPage; i <= endPage; i += 1) {
-    pages.push(i.toString());
+    pages.push({ key: i.toString(), value: i.toString() });
+  }
+
+  if (startPage > 2) {
+    pages.unshift(
+      { key: '1', value: '1' },
+      { key: 'firstDots', value: '..' },
+    );
+  } else if (startPage === 2) {
+    pages.unshift({ key: '1', value: '1' });
+  }
+
+  if (endPage < totalPages - 1) {
+    pages.push(
+      { key: 'secondDots', value: '..' },
+      { key: totalPages.toString(), value: totalPages.toString() },
+    );
   }
 
   return pages;