From 545e9fc5d21751a5ea7fd581324af054cd3439f2 Mon Sep 17 00:00:00 2001
From: Margarita Shumilina <margar.maksim@ya.ru>
Date: Sun, 5 May 2024 20:22:13 +0300
Subject: [PATCH 1/3] #339-pagination

---
 package-lock.json                             | 89 ++++++++++++-------
 package.json                                  |  1 +
 .../StoreProvider/config/StateSchema.ts       |  2 +
 .../providers/StoreProvider/config/store.ts   |  4 +-
 src/components/Dropdown/Dropdown.tsx          | 16 +++-
 src/components/PageControls/PageControls.tsx  | 16 +++-
 src/components/Pagination/Pagination.tsx      |  4 +-
 .../Pagination/selectors/selectors.tsx        |  3 +
 .../Pagination/slice/paginationSlice.tsx      | 21 +++++
 src/components/Pagination/types/types.ts      |  3 +
 src/pages/ProductsPage/ProductsPage.tsx       | 86 ++++++++++++++----
 .../ProductsPage/services/getProducts.ts      | 19 ++--
 12 files changed, 198 insertions(+), 66 deletions(-)
 create mode 100644 src/components/Pagination/selectors/selectors.tsx
 create mode 100644 src/components/Pagination/slice/paginationSlice.tsx
 create mode 100644 src/components/Pagination/types/types.ts

diff --git a/package-lock.json b/package-lock.json
index f4f90c29..1ae9e472 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17,6 +17,7 @@
         "formik": "^2.4.5",
         "leaflet": "^1.9.4",
         "normalize-scss": "7.0.1",
+        "qs": "^6.12.1",
         "react": "18.2.0",
         "react-dom": "18.2.0",
         "react-input-mask": "^2.0.4",
@@ -9350,6 +9351,21 @@
       "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
       "dev": true
     },
+    "node_modules/body-parser/node_modules/qs": {
+      "version": "6.11.0",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.11.0.tgz",
+      "integrity": "sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q==",
+      "dev": true,
+      "dependencies": {
+        "side-channel": "^1.0.4"
+      },
+      "engines": {
+        "node": ">=0.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/bonjour-service": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/bonjour-service/-/bonjour-service-1.1.1.tgz",
@@ -11931,6 +11947,21 @@
       "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
       "dev": true
     },
+    "node_modules/express/node_modules/qs": {
+      "version": "6.11.0",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.11.0.tgz",
+      "integrity": "sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q==",
+      "dev": true,
+      "dependencies": {
+        "side-channel": "^1.0.4"
+      },
+      "engines": {
+        "node": ">=0.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/extend": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
@@ -17075,11 +17106,11 @@
       }
     },
     "node_modules/qs": {
-      "version": "6.11.0",
-      "resolved": "https://registry.npmjs.org/qs/-/qs-6.11.0.tgz",
-      "integrity": "sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q==",
+      "version": "6.12.1",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.12.1.tgz",
+      "integrity": "sha512-zWmv4RSuB9r2mYQw3zxQuHWeU+42aKi1wWig/j4ele4ygELZ7PEO6MM7rim9oAQH2A5MWfsAVf/jPvTPgCbvUQ==",
       "dependencies": {
-        "side-channel": "^1.0.4"
+        "side-channel": "^1.0.6"
       },
       "engines": {
         "node": ">=0.6"
@@ -20119,21 +20150,6 @@
       "integrity": "sha512-jmYNElW7yvO7TV33CjSmvSiE2yco3bV2czu/OzDKdMNVZQWfxCblURLhf+47syQRBntjfLdd/H0egrzIG+oaFQ==",
       "dev": true
     },
-    "node_modules/url/node_modules/qs": {
-      "version": "6.12.0",
-      "resolved": "https://registry.npmjs.org/qs/-/qs-6.12.0.tgz",
-      "integrity": "sha512-trVZiI6RMOkO476zLGaBIzszOdFPnCCXHPG9kn0yuS1uz6xdVxPfZdB3vUig9pxPFDM9BRAgz/YUIVQ1/vuiUg==",
-      "dev": true,
-      "dependencies": {
-        "side-channel": "^1.0.6"
-      },
-      "engines": {
-        "node": ">=0.6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
     "node_modules/use-callback-ref": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.3.1.tgz",
@@ -27464,6 +27480,15 @@
           "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
           "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
           "dev": true
+        },
+        "qs": {
+          "version": "6.11.0",
+          "resolved": "https://registry.npmjs.org/qs/-/qs-6.11.0.tgz",
+          "integrity": "sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q==",
+          "dev": true,
+          "requires": {
+            "side-channel": "^1.0.4"
+          }
         }
       }
     },
@@ -29416,6 +29441,15 @@
           "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
           "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
           "dev": true
+        },
+        "qs": {
+          "version": "6.11.0",
+          "resolved": "https://registry.npmjs.org/qs/-/qs-6.11.0.tgz",
+          "integrity": "sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q==",
+          "dev": true,
+          "requires": {
+            "side-channel": "^1.0.4"
+          }
         }
       }
     },
@@ -33155,11 +33189,11 @@
       }
     },
     "qs": {
-      "version": "6.11.0",
-      "resolved": "https://registry.npmjs.org/qs/-/qs-6.11.0.tgz",
-      "integrity": "sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q==",
+      "version": "6.12.1",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.12.1.tgz",
+      "integrity": "sha512-zWmv4RSuB9r2mYQw3zxQuHWeU+42aKi1wWig/j4ele4ygELZ7PEO6MM7rim9oAQH2A5MWfsAVf/jPvTPgCbvUQ==",
       "requires": {
-        "side-channel": "^1.0.4"
+        "side-channel": "^1.0.6"
       }
     },
     "queue-microtask": {
@@ -35400,15 +35434,6 @@
           "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.4.1.tgz",
           "integrity": "sha512-jmYNElW7yvO7TV33CjSmvSiE2yco3bV2czu/OzDKdMNVZQWfxCblURLhf+47syQRBntjfLdd/H0egrzIG+oaFQ==",
           "dev": true
-        },
-        "qs": {
-          "version": "6.12.0",
-          "resolved": "https://registry.npmjs.org/qs/-/qs-6.12.0.tgz",
-          "integrity": "sha512-trVZiI6RMOkO476zLGaBIzszOdFPnCCXHPG9kn0yuS1uz6xdVxPfZdB3vUig9pxPFDM9BRAgz/YUIVQ1/vuiUg==",
-          "dev": true,
-          "requires": {
-            "side-channel": "^1.0.6"
-          }
         }
       }
     },
diff --git a/package.json b/package.json
index 25fa73a9..33bad374 100644
--- a/package.json
+++ b/package.json
@@ -39,6 +39,7 @@
     "formik": "^2.4.5",
     "leaflet": "^1.9.4",
     "normalize-scss": "7.0.1",
+    "qs": "^6.12.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-input-mask": "^2.0.4",
diff --git a/src/app/providers/StoreProvider/config/StateSchema.ts b/src/app/providers/StoreProvider/config/StateSchema.ts
index b9a47753..2900dae7 100644
--- a/src/app/providers/StoreProvider/config/StateSchema.ts
+++ b/src/app/providers/StoreProvider/config/StateSchema.ts
@@ -20,6 +20,7 @@ import { ICartEntitySchema } from '@/entities/CartEntity/model/types/types'
 import { IAboutUsSchema } from '@/pages/AboutUsPage/model/types/types'
 import { ICartSchema } from '@/pages/CartPage/model/types'
 import { IProductAmountStateSchema } from '@/features/CartEdit/model/types'
+import { TNumberOfPageSchema } from '@/components/Pagination/types/types'
 
 export interface StateSchema {
   aboutUs: IAboutUsSchema
@@ -46,6 +47,7 @@ export interface StateSchema {
   cartEntity: ICartEntitySchema
   categoryFilters: ICategoryFiltersSchema
   productAmount: IProductAmountStateSchema
+  pagination: TNumberOfPageSchema
 }
 
 export interface ThunkExtraArg {
diff --git a/src/app/providers/StoreProvider/config/store.ts b/src/app/providers/StoreProvider/config/store.ts
index f77005b7..10d31603 100644
--- a/src/app/providers/StoreProvider/config/store.ts
+++ b/src/app/providers/StoreProvider/config/store.ts
@@ -25,6 +25,7 @@ import { aboutUsReducer } from '@/pages/AboutUsPage/model/slice/aboutUsSlice'
 import { cartReducer } from '@/pages/CartPage/model/slice'
 import { cartEntityReducer } from '@/entities/CartEntity/model/slice/cartEntitySlice'
 import { productAmountReducer } from '@/features/CartEdit/model/slice/productAmountSlice'
+import { paginationSliceReducer } from '@/components/Pagination/slice/paginationSlice'
 
 export type RootState = StateSchema
 
@@ -52,7 +53,8 @@ const rootReducer: ReducersMapObject<RootState> = {
   cartEntity: cartEntityReducer,
   cart: cartReducer,
   categoryFilters: categoryFiltersSliceReducer,
-  productAmount: productAmountReducer
+  productAmount: productAmountReducer,
+  pagination: paginationSliceReducer
 }
 
 export function createReduxStore(initialState: RootState) {
diff --git a/src/components/Dropdown/Dropdown.tsx b/src/components/Dropdown/Dropdown.tsx
index 1101be7b..b55b2937 100644
--- a/src/components/Dropdown/Dropdown.tsx
+++ b/src/components/Dropdown/Dropdown.tsx
@@ -8,6 +8,7 @@ interface DropdownProps extends React.HTMLProps<HTMLSelectElement> {
   items: TSortOptions[]
   defaultItem?: string
   onSelect: React.ChangeEventHandler<HTMLSelectElement>
+  changeValue?: string
 }
 
 /**
@@ -15,8 +16,15 @@ interface DropdownProps extends React.HTMLProps<HTMLSelectElement> {
  * @param {array} items - список элементов выпадающего списка для выбора;
  * @param {string} defaultItem - выбранный по умолчанию элемент списка;
  * @param {function} onSelect - функция, применяющая выбранное из списка значение;
+ * @param {string} changeValue - выбранное название фильтра;
  */
-export const Dropdown: React.FC<DropdownProps> = ({ items, defaultItem, onSelect, ...props }) => {
+export const Dropdown: React.FC<DropdownProps> = ({
+  items,
+  defaultItem,
+  onSelect,
+  changeValue,
+  ...props
+}) => {
   const [selectedItem, setSelectedItem] = useState<string>(defaultItem || '')
 
   const handleSelect = (e: ChangeEvent<HTMLSelectElement>) => {
@@ -26,7 +34,11 @@ export const Dropdown: React.FC<DropdownProps> = ({ items, defaultItem, onSelect
   }
 
   return (
-    <select className={styles.select} value={selectedItem} onChange={handleSelect} {...props}>
+    <select
+      className={styles.select}
+      value={changeValue ? changeValue : selectedItem}
+      onChange={handleSelect}
+      {...props}>
       {items.map(item => (
         <option value={item.name} key={item.name}>
           {item.name}
diff --git a/src/components/PageControls/PageControls.tsx b/src/components/PageControls/PageControls.tsx
index df371bd6..54d1d688 100644
--- a/src/components/PageControls/PageControls.tsx
+++ b/src/components/PageControls/PageControls.tsx
@@ -20,6 +20,8 @@ type TPageControls = {
   handleSortChange: ChangeEventHandler<HTMLSelectElement>
   itemPerPageOptions: TSortOptions[]
   sortOptions: TSortOptions[]
+  changeValueToFilterProducts?: string
+  changeValueToQuantityProducts?: string
 }
 
 /**
@@ -30,6 +32,8 @@ type TPageControls = {
  * @param {function} handleSortChange - функция управления порядком сортировки карточек;
  * @param {array} itemPerPageOptions - текущее кол-во отображаемых карточек на странице;
  * @param {array} sortOptions - текущий выбранный порядок сортировки карточек;
+ * @param {string} changeValueToFilterProducts - наименование выбранного фильтра товаров по Названию/Цене/Модели
+ * @param {string} changeValueToQuantityProducts - наименование выбранного фильтра товаров по количеству в листинге
  */
 export const PageControls: FC<TPageControls> = ({
   cardView,
@@ -37,13 +41,19 @@ export const PageControls: FC<TPageControls> = ({
   handleItemsPerPageChange,
   handleSortChange,
   itemPerPageOptions,
-  sortOptions
+  sortOptions,
+  changeValueToFilterProducts,
+  changeValueToQuantityProducts
 }) => {
   return (
     <div className={styles['page-controls']}>
       <div className={styles.dropdowns}>
-        <Dropdown items={sortOptions} onSelect={handleSortChange} />
-        <Dropdown items={itemPerPageOptions} onSelect={handleItemsPerPageChange} />
+        <Dropdown items={sortOptions} onSelect={handleSortChange} changeValue={changeValueToFilterProducts} />
+        <Dropdown
+          items={itemPerPageOptions}
+          onSelect={handleItemsPerPageChange}
+          changeValue={changeValueToQuantityProducts}
+        />
       </div>
       <ul className={styles['cards-controls']}>
         <li
diff --git a/src/components/Pagination/Pagination.tsx b/src/components/Pagination/Pagination.tsx
index 41366253..9baea504 100644
--- a/src/components/Pagination/Pagination.tsx
+++ b/src/components/Pagination/Pagination.tsx
@@ -1,4 +1,4 @@
-import { FC } from 'react'
+import { type FC } from 'react'
 
 import styles from './Pagination.module.scss'
 
@@ -35,7 +35,7 @@ export const Pagination: FC<TPaginationProps> = ({
           {`<`}
         </button>
         <span className={styles['current-page']}>
-          Страница {currentPage} из {totalPages}
+          Страница {currentPage === 0 ? 1 : currentPage} из {totalPages}
         </span>
         <button
           className={styles.button}
diff --git a/src/components/Pagination/selectors/selectors.tsx b/src/components/Pagination/selectors/selectors.tsx
new file mode 100644
index 00000000..d6979b47
--- /dev/null
+++ b/src/components/Pagination/selectors/selectors.tsx
@@ -0,0 +1,3 @@
+import { RootState } from '@/app/providers/StoreProvider/config/store'
+
+export const selectNumberOfPage = (state: RootState) => state.pagination.numberOfPage
diff --git a/src/components/Pagination/slice/paginationSlice.tsx b/src/components/Pagination/slice/paginationSlice.tsx
new file mode 100644
index 00000000..7461998e
--- /dev/null
+++ b/src/components/Pagination/slice/paginationSlice.tsx
@@ -0,0 +1,21 @@
+import { createSlice } from '@reduxjs/toolkit'
+
+import type { TNumberOfPageSchema } from '@/components/Pagination/types/types'
+
+const initialState: TNumberOfPageSchema = {
+  numberOfPage: 1
+}
+
+const paginationSlice = createSlice({
+  name: 'pagination',
+  initialState,
+  reducers: {
+    setNumberOfPage(state, action) {
+      state.numberOfPage = action.payload
+    }
+  }
+})
+
+export const { reducer: paginationSliceReducer } = paginationSlice
+
+export const { setNumberOfPage } = paginationSlice.actions
diff --git a/src/components/Pagination/types/types.ts b/src/components/Pagination/types/types.ts
new file mode 100644
index 00000000..3f132478
--- /dev/null
+++ b/src/components/Pagination/types/types.ts
@@ -0,0 +1,3 @@
+export type TNumberOfPageSchema = {
+  numberOfPage: number
+}
diff --git a/src/pages/ProductsPage/ProductsPage.tsx b/src/pages/ProductsPage/ProductsPage.tsx
index a6778b27..47b4ed7a 100644
--- a/src/pages/ProductsPage/ProductsPage.tsx
+++ b/src/pages/ProductsPage/ProductsPage.tsx
@@ -1,6 +1,8 @@
+import qs from 'qs'
 import { useEffect, useState } from 'react'
 import { useSelector } from 'react-redux'
 import { useLocation } from 'react-router'
+import { useNavigate } from 'react-router-dom'
 
 import { selectFilterProducts, selectFilterQuantity } from '@/components/Dropdown/selectors/selectors'
 import { setFilterProducts, setProductQuantityFilter } from '@/components/Dropdown/slice/filtersSlice'
@@ -9,9 +11,11 @@ import { PageControlsSkeletons } from '@/components/PageControls/PageControlsSke
 import { PageDescription } from '@/components/PageDescription/PageDescription'
 import { PageDescriptionSkeleton } from '@/components/PageDescription/PageDescriptionSkeleton/PageDescriptionSkeleton'
 import { Pagination } from '@/components/Pagination/Pagination'
+import { selectNumberOfPage } from '@/components/Pagination/selectors/selectors'
+import { setNumberOfPage } from '@/components/Pagination/slice/paginationSlice'
 import WrapperForMainContent from '@/components/WrapperForMainContent/WrapperForMainContent'
-import { selectCategorySlug } from '@/entities/Category/selectors/categorySelectors'
-import { TOTAL_PAGES } from '@/mockData/productsPageOptions'
+import { selectCategoryId, selectCategorySlug } from '@/entities/Category/selectors/categorySelectors'
+import { setCategoryId } from '@/entities/Category/slice/categoryIdSlice'
 import { getLoading, getProductsOfCategorySelector } from '@/pages/ProductsPage/selectors/selectors'
 import { getProducts } from '@/pages/ProductsPage/services/getProducts'
 import { ITEMS_PER_PAGE_OPTION, NUMBER_OF_PRODUCTS, SORT_OPTION } from '@/shared/constants/constants'
@@ -31,26 +35,44 @@ import styles from './ProductsPage.module.scss'
  * Реализована пагинация.
  */
 export const ProductsPage = () => {
+  let numberOfPage = useSelector(selectNumberOfPage)
+  let categId = useSelector(selectCategoryId)
+  const location = useLocation()
+  const page = Number(location.search.replace(`?categId=${categId}`, '').replace(`&page=`, ''))
+
   const [cardView, setCardView] = useState<ECardView>(ECardView.GRID)
-  const [currentPage, setCurrentPage] = useState(1)
+  const [currentPage, setCurrentPage] = useState(numberOfPage)
 
   const dispatch = useAppDispatch()
 
   const categoriesProducts = useSelector(getProductsOfCategorySelector)
+
   const categorySlug = useSelector(selectCategorySlug)
 
-  const location = useLocation()
+  // let categId = useSelector(selectCategoryId)
 
-  const categoryId = Number(location.search.replace('?id=', ''))
+  //For GET products in dispatch
+  // const location = useLocation()
+  const id = Number(location.search.replace('?categId=', '').replace(`&page=${page}`, ''))
+  const categoryId = categId ? `?category=${categId}` : `?category=${id}`
 
+  //For filter products on page (to GET in dispatch)
   const selectProductsFilter = useSelector(selectFilterProducts)
   const filterProducts = selectProductsFilter ? `&ordering=${selectProductsFilter.value}` : ''
-
   const selectQuantityFilter = useSelector(selectFilterQuantity)
   const filterQuantity = selectQuantityFilter ? `&limit=${selectQuantityFilter.value}` : ''
 
+  //Skeletons
   const isLoading = useSelector(getLoading)
 
+  //Pagination
+  const totalPages = Math.ceil(categoriesProducts.count / Number(selectQuantityFilter.value))
+  // const page = Number(location.search.replace(`?categId=${categId}`, '').replace(`&page=`, ''))
+  const productsQuantityPerPage =
+    numberOfPage > 1
+      ? `&offset=${(numberOfPage - 1) * Number(selectQuantityFilter.value)}`
+      : `&offset=${(page - 1) * Number(selectQuantityFilter.value)}`
+
   const handleSortChange: React.ChangeEventHandler<HTMLSelectElement> = event => {
     const selectedOption = event.target.value
     const setCategoryFilters = SORT_OPTION.find(item => item.name === selectedOption)
@@ -64,26 +86,56 @@ export const ProductsPage = () => {
   }
 
   const handleCardViewChange = (view: ECardView) => {
-    // Handle card view change logic here
     setCardView(view)
   }
 
   const handlePageChange = (pageNumber: number) => {
-    // Handle page change logic here
     setCurrentPage(pageNumber)
+    dispatch(setNumberOfPage(pageNumber))
   }
 
-  // Calculate total number of pages based on total number of items and items per page
-  // const totalPages = Math.ceil(totalItems / itemsPerPage)
-
   const handleShowMore = () => {
-    // ...
-    if (currentPage < TOTAL_PAGES) setCurrentPage(currentPage + 1)
+    if (currentPage < totalPages) setCurrentPage(currentPage + 1)
+    dispatch(setNumberOfPage(currentPage + 1))
   }
 
+  const navigate = useNavigate()
+
+  useEffect(() => {
+    dispatch(getProducts({ categoryId, filterProducts, filterQuantity, productsQuantityPerPage }))
+  }, [filterProducts, filterQuantity])
+
+  useEffect(() => {
+    if (window.location.search) {
+      const params = qs.parse(window.location.search.substring(1))
+      dispatch(setCategoryId(params.categId))
+      dispatch(setNumberOfPage(params.page))
+
+      categId = Number(params.categId)
+      numberOfPage = Number(params.page)
+    }
+  }, [])
+
+  useEffect(() => {
+    let page
+    // let category
+    if (numberOfPage > 1) {
+      page = numberOfPage
+    } else {
+      page = undefined
+    }
+    const queryString = qs.stringify({
+      categId,
+      page
+    })
+    navigate(`${location.pathname}?${queryString}`)
+    dispatch(getProducts({ categoryId, filterProducts, filterQuantity, productsQuantityPerPage }))
+  }, [categorySlug, categId, numberOfPage])
+
   useEffect(() => {
-    dispatch(getProducts({ categoryId, filterProducts, filterQuantity }))
-  }, [categoryId, categorySlug, filterProducts, filterQuantity])
+    dispatch(setNumberOfPage(1))
+    setCurrentPage(1)
+  }, [categorySlug, filterProducts, filterQuantity])
 
   return (
     <>
@@ -115,6 +167,8 @@ export const ProductsPage = () => {
                     handleSortChange={handleSortChange}
                     itemPerPageOptions={ITEMS_PER_PAGE_OPTION}
                     sortOptions={SORT_OPTION}
+                    changeValueToFilterProducts={selectProductsFilter.name}
+                    changeValueToQuantityProducts={selectQuantityFilter.name}
                   />
                   <ProductsList items={categoriesProducts} cardView={cardView} />
                 </>
@@ -124,7 +178,7 @@ export const ProductsPage = () => {
             </section>
             <Pagination
               currentPage={currentPage}
-              totalPages={TOTAL_PAGES}
+              totalPages={totalPages}
               handlePageChange={handlePageChange}
               handleShowMore={handleShowMore}
             />
diff --git a/src/pages/ProductsPage/services/getProducts.ts b/src/pages/ProductsPage/services/getProducts.ts
index ec9ec5d7..abc1e3fa 100644
--- a/src/pages/ProductsPage/services/getProducts.ts
+++ b/src/pages/ProductsPage/services/getProducts.ts
@@ -7,21 +7,20 @@ import { ACTION_GET_PRODUCTS_OF_CATEGORY } from '@/shared/constants/constants'
 
 import { ProductsInfo } from '../types/types'
 
-type Params = {
-  categoryId: number
-  filterProducts: string
-  filterQuantity: string
-}
-export const getProducts = createAsyncThunk<ProductsInfo, Params, ThunkConfig<ApiError>>(
+// type Params = {
+//   categoryId: string
+//   filterProducts: string
+//   filterQuantity: string
+//   productsQuantityPerPage: string
+// }
+export const getProducts = createAsyncThunk<ProductsInfo, Record<string, string>, ThunkConfig<ApiError>>(
   ACTION_GET_PRODUCTS_OF_CATEGORY,
   async (params, thunkAPI) => {
-    const { categoryId, filterProducts, filterQuantity } = params
+    const { categoryId, filterProducts, filterQuantity, productsQuantityPerPage } = params
     const { rejectWithValue, extra } = thunkAPI
     try {
       const { data } = await extra.api.get(
-        `api/${ApiRoutes.PRODUCT}${
-          categoryId > 0 ? `?category=${categoryId}` : ''
-        }${filterProducts}${filterQuantity}`
+        `api/${ApiRoutes.PRODUCT}${categoryId}${filterProducts}${filterQuantity}${productsQuantityPerPage}`
       )
       return data
     } catch (error) {

From bd46a09e91ce834ef13c15943f621d396157e6ad Mon Sep 17 00:00:00 2001
From: Margarita Shumilina <margar.maksim@ya.ru>
Date: Wed, 15 May 2024 12:31:28 +0300
Subject: [PATCH 2/3] #339-pagination(another ver)

---
 src/components/Pagination/Pagination.tsx |  2 +-
 src/pages/ProductsPage/ProductsPage.tsx  | 67 ++++++++++++------------
 2 files changed, 35 insertions(+), 34 deletions(-)

diff --git a/src/components/Pagination/Pagination.tsx b/src/components/Pagination/Pagination.tsx
index 9baea504..2d9d8d3f 100644
--- a/src/components/Pagination/Pagination.tsx
+++ b/src/components/Pagination/Pagination.tsx
@@ -35,7 +35,7 @@ export const Pagination: FC<TPaginationProps> = ({
           {`<`}
         </button>
         <span className={styles['current-page']}>
-          Страница {currentPage === 0 ? 1 : currentPage} из {totalPages}
+          Страница {currentPage} из {totalPages}
         </span>
         <button
           className={styles.button}
diff --git a/src/pages/ProductsPage/ProductsPage.tsx b/src/pages/ProductsPage/ProductsPage.tsx
index 47b4ed7a..1fad73a8 100644
--- a/src/pages/ProductsPage/ProductsPage.tsx
+++ b/src/pages/ProductsPage/ProductsPage.tsx
@@ -1,5 +1,5 @@
 import qs from 'qs'
-import { useEffect, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import { useSelector } from 'react-redux'
 import { useLocation } from 'react-router'
 import { useNavigate } from 'react-router-dom'
@@ -35,26 +35,24 @@ import styles from './ProductsPage.module.scss'
  * Реализована пагинация.
  */
 export const ProductsPage = () => {
-  let numberOfPage = useSelector(selectNumberOfPage)
-  let categId = useSelector(selectCategoryId)
-  const location = useLocation()
-  const page = Number(location.search.replace(`?categId=${categId}`, '').replace(`&page=`, ''))
-
   const [cardView, setCardView] = useState<ECardView>(ECardView.GRID)
-  const [currentPage, setCurrentPage] = useState(numberOfPage)
+  const [currentPage, setCurrentPage] = useState(1)
 
+  const location = useLocation()
+  const navigate = useNavigate()
   const dispatch = useAppDispatch()
 
-  const categoriesProducts = useSelector(getProductsOfCategorySelector)
+  const isMount = useRef(false)
+  const isRender = useRef(false)
 
+  const numberOfPage = useSelector(selectNumberOfPage)
+  const idOfCategory = useSelector(selectCategoryId)
+  const categoriesProducts = useSelector(getProductsOfCategorySelector)
   const categorySlug = useSelector(selectCategorySlug)
 
-  // let categId = useSelector(selectCategoryId)
-
   //For GET products in dispatch
-  // const location = useLocation()
-  const id = Number(location.search.replace('?categId=', '').replace(`&page=${page}`, ''))
-  const categoryId = categId ? `?category=${categId}` : `?category=${id}`
+  const id = Number(location.search.replace('?id=', '').replace(`&page=${numberOfPage}`, ''))
+  const categoryId = idOfCategory ? `?category=${idOfCategory}` : `?category=${id}`
 
   //For filter products on page (to GET in dispatch)
   const selectProductsFilter = useSelector(selectFilterProducts)
@@ -67,11 +65,12 @@ export const ProductsPage = () => {
 
   //Pagination
   const totalPages = Math.ceil(categoriesProducts.count / Number(selectQuantityFilter.value))
-  // const page = Number(location.search.replace(`?categId=${categId}`, '').replace(`&page=`, ''))
+  const page = Number(location.search.replace(`?id=${idOfCategory}`, '').replace(`&page=`, ''))
   const productsQuantityPerPage =
     numberOfPage > 1
       ? `&offset=${(numberOfPage - 1) * Number(selectQuantityFilter.value)}`
-      : `&offset=${(page - 1) * Number(selectQuantityFilter.value)}`
+      : // : ''
+        `&offset=${(page - 1) * Number(selectQuantityFilter.value)}`
 
   const handleSortChange: React.ChangeEventHandler<HTMLSelectElement> = event => {
     const selectedOption = event.target.value
@@ -99,42 +98,44 @@ export const ProductsPage = () => {
     dispatch(setNumberOfPage(currentPage + 1))
   }
 
-  const navigate = useNavigate()
-
   useEffect(() => {
     dispatch(getProducts({ categoryId, filterProducts, filterQuantity, productsQuantityPerPage }))
-  }, [filterProducts, filterQuantity])
+  }, [numberOfPage, categorySlug, filterProducts, filterQuantity])
 
   useEffect(() => {
     if (window.location.search) {
       const params = qs.parse(window.location.search.substring(1))
-      dispatch(setCategoryId(params.categId))
-      dispatch(setNumberOfPage(params.page))
-
-      categId = Number(params.categId)
-      numberOfPage = Number(params.page)
+      dispatch(setCategoryId(params.id))
+      dispatch(setNumberOfPage(params.page === undefined ? 1 : Number(params.page)))
+      setCurrentPage(params.page === undefined ? 1 : Number(params.page))
     }
+    isMount.current = true
   }, [])
 
   useEffect(() => {
     let page
-    // let category
     if (numberOfPage > 1) {
       page = numberOfPage
     } else {
       page = undefined
     }
-    const queryString = qs.stringify({
-      categId,
-      page
-    })
-    navigate(`${location.pathname}?${queryString}`)
-    dispatch(getProducts({ categoryId, filterProducts, filterQuantity, productsQuantityPerPage }))
-  }, [categorySlug, categId, numberOfPage])
+    const id = idOfCategory
+    if (isRender.current) {
+      const queryString = qs.stringify({
+        id,
+        page
+      })
+      navigate(`${location.pathname}?${queryString}`)
+    }
+    isRender.current = true
+  }, [numberOfPage, categorySlug])
 
   useEffect(() => {
-    dispatch(setNumberOfPage(1))
-    setCurrentPage(1)
+    if (!isMount.current) {
+      dispatch(setNumberOfPage(1))
+      setCurrentPage(1)
+    }
+    isMount.current = false
   }, [categorySlug, filterProducts, filterQuantity])
 
   return (

From 9229fb553f8f21a6ca11a35b887c775730eba6d6 Mon Sep 17 00:00:00 2001
From: Margarita Shumilina <margar.maksim@ya.ru>
Date: Fri, 17 May 2024 11:50:36 +0300
Subject: [PATCH 3/3] #339-pagination(hooks, category on main page)

---
 src/features/CategoryItem/CategoryItem.tsx           |  2 +-
 src/pages/ProductsPage/ProductsPage.tsx              | 11 ++++++-----
 src/pages/ProductsPage/services/getProducts.ts       |  6 ------
 src/shared/libs/helpers/totalPagesHandler.ts         |  8 ++++++++
 src/shared/libs/hooks/useReplaceValueFromLocation.ts | 11 +++++++++++
 src/shared/ui/CategoryCard/ui/CategoryCard.tsx       | 11 ++++++++++-
 src/widgets/CatalogNodeItem/CatalogNodeItem.tsx      |  2 +-
 src/widgets/Header/Header.tsx                        |  2 +-
 8 files changed, 38 insertions(+), 15 deletions(-)
 create mode 100644 src/shared/libs/helpers/totalPagesHandler.ts
 create mode 100644 src/shared/libs/hooks/useReplaceValueFromLocation.ts

diff --git a/src/features/CategoryItem/CategoryItem.tsx b/src/features/CategoryItem/CategoryItem.tsx
index b853861c..b7bcfe64 100644
--- a/src/features/CategoryItem/CategoryItem.tsx
+++ b/src/features/CategoryItem/CategoryItem.tsx
@@ -26,7 +26,7 @@ export const CategoryItem: FC<Props> = ({ name, slug, count, id }) => {
   return (
     <li className={styles['category-list__item']}>
       <Link
-        to={`${Routes.CATEGORIES}/${slug}?id=${id}`}
+        to={`${Routes.CATEGORIES}/${slug}`}
         className={styles['category-list__link']}
         onClick={() => {
           dispatch(setCategoryId(id))
diff --git a/src/pages/ProductsPage/ProductsPage.tsx b/src/pages/ProductsPage/ProductsPage.tsx
index 1fad73a8..b134f9aa 100644
--- a/src/pages/ProductsPage/ProductsPage.tsx
+++ b/src/pages/ProductsPage/ProductsPage.tsx
@@ -19,7 +19,9 @@ import { setCategoryId } from '@/entities/Category/slice/categoryIdSlice'
 import { getLoading, getProductsOfCategorySelector } from '@/pages/ProductsPage/selectors/selectors'
 import { getProducts } from '@/pages/ProductsPage/services/getProducts'
 import { ITEMS_PER_PAGE_OPTION, NUMBER_OF_PRODUCTS, SORT_OPTION } from '@/shared/constants/constants'
+import { totalPagesHandler } from '@/shared/libs/helpers/totalPagesHandler'
 import { useAppDispatch } from '@/shared/libs/hooks/store'
+import { useReplaceValueFromLocation } from '@/shared/libs/hooks/useReplaceValueFromLocation'
 import { ECardView } from '@/shared/model/types/common'
 import { CategoryList } from '@/widgets/CategoryList/CategoryList'
 import { ProductSkeleton } from '@/widgets/ProductItem/ProductSkeleton/ProductSkeleton'
@@ -51,7 +53,7 @@ export const ProductsPage = () => {
   const categorySlug = useSelector(selectCategorySlug)
 
   //For GET products in dispatch
-  const id = Number(location.search.replace('?id=', '').replace(`&page=${numberOfPage}`, ''))
+  const id = Number(useReplaceValueFromLocation('?id=', '', `&page=${numberOfPage}`, ''))
   const categoryId = idOfCategory ? `?category=${idOfCategory}` : `?category=${id}`
 
   //For filter products on page (to GET in dispatch)
@@ -64,13 +66,12 @@ export const ProductsPage = () => {
   const isLoading = useSelector(getLoading)
 
   //Pagination
-  const totalPages = Math.ceil(categoriesProducts.count / Number(selectQuantityFilter.value))
-  const page = Number(location.search.replace(`?id=${idOfCategory}`, '').replace(`&page=`, ''))
+  const totalPages = totalPagesHandler(categoriesProducts.count, Number(selectQuantityFilter.value))
+  const page = Number(useReplaceValueFromLocation(`?id=${idOfCategory}`, '', '&page=', ''))
   const productsQuantityPerPage =
     numberOfPage > 1
       ? `&offset=${(numberOfPage - 1) * Number(selectQuantityFilter.value)}`
-      : // : ''
-        `&offset=${(page - 1) * Number(selectQuantityFilter.value)}`
+      : `&offset=${(page - 1) * Number(selectQuantityFilter.value)}`
 
   const handleSortChange: React.ChangeEventHandler<HTMLSelectElement> = event => {
     const selectedOption = event.target.value
diff --git a/src/pages/ProductsPage/services/getProducts.ts b/src/pages/ProductsPage/services/getProducts.ts
index abc1e3fa..f575bfe2 100644
--- a/src/pages/ProductsPage/services/getProducts.ts
+++ b/src/pages/ProductsPage/services/getProducts.ts
@@ -7,12 +7,6 @@ import { ACTION_GET_PRODUCTS_OF_CATEGORY } from '@/shared/constants/constants'
 
 import { ProductsInfo } from '../types/types'
 
-// type Params = {
-//   categoryId: string
-//   filterProducts: string
-//   filterQuantity: string
-//   productsQuantityPerPage: string
-// }
 export const getProducts = createAsyncThunk<ProductsInfo, Record<string, string>, ThunkConfig<ApiError>>(
   ACTION_GET_PRODUCTS_OF_CATEGORY,
   async (params, thunkAPI) => {
diff --git a/src/shared/libs/helpers/totalPagesHandler.ts b/src/shared/libs/helpers/totalPagesHandler.ts
new file mode 100644
index 00000000..eb52e315
--- /dev/null
+++ b/src/shared/libs/helpers/totalPagesHandler.ts
@@ -0,0 +1,8 @@
+/**
+ * Функция вычисления количества страниц, исходя из общего количества юнитов и количества, которое нужно вывести на одной странице
+ * @param {number} totalAmount - общее количество юнитов;
+ * @param {number} quantitPerPage - количество, которое нужно вывести на одной странице;
+ */
+export const totalPagesHandler = (totalAmount: number, quantitPerPage: number) => {
+  return Math.ceil(totalAmount / quantitPerPage)
+}
diff --git a/src/shared/libs/hooks/useReplaceValueFromLocation.ts b/src/shared/libs/hooks/useReplaceValueFromLocation.ts
new file mode 100644
index 00000000..48e19ae6
--- /dev/null
+++ b/src/shared/libs/hooks/useReplaceValueFromLocation.ts
@@ -0,0 +1,11 @@
+import { useLocation } from 'react-router'
+
+/**
+ * Функция извлечения нужных параметров из URL с помощью useLocation
+ * @param {string} varN - значение, которое нужно заменить;
+ * @param {string} changeN - на чт нужно заменить;
+ */
+export const useReplaceValueFromLocation = (var1: string, change1: string, var2: string, change2: string) => {
+  const location = useLocation()
+  return location.search.replace(var1, change1)?.replace(var2, change2)
+}
diff --git a/src/shared/ui/CategoryCard/ui/CategoryCard.tsx b/src/shared/ui/CategoryCard/ui/CategoryCard.tsx
index 0c23c183..7e177b5d 100644
--- a/src/shared/ui/CategoryCard/ui/CategoryCard.tsx
+++ b/src/shared/ui/CategoryCard/ui/CategoryCard.tsx
@@ -1,5 +1,9 @@
 import { type FC } from 'react'
+import { useDispatch } from 'react-redux'
 
+import { AppDispatch } from '@/app/providers/StoreProvider/config/store'
+import { setCategoryId } from '@/entities/Category/slice/categoryIdSlice'
+import { setCategorySlug } from '@/entities/Category/slice/categorySlugSlice'
 import { Routes } from '@/shared/config/routerConfig/routes'
 import { TCategory } from '@/shared/model/types/CategoryModel'
 import Link from '@/shared/ui/Link/Link'
@@ -20,10 +24,15 @@ interface CategoryCardProps {
  * @param {number} index - индекс элемента массива категорий для выбора цвета;
  */
 const CategoryCard: FC<CategoryCardProps> = ({ card, index }) => {
+  const dispatch = useDispatch<AppDispatch>()
   return (
     <li>
       <Link
-        to={`${Routes.PRODUCTS}${card.slug}`}
+        to={`${Routes.CATEGORIES}/${card.slug}`}
+        onClick={() => {
+          dispatch(setCategoryId(card.id))
+          dispatch(setCategorySlug(card.slug))
+        }}
         className={styles.div}
         style={{ backgroundColor: COLORS[index], backgroundImage: `url(${card.image})` }}>
         <Subheading className={styles.subheading}>{card.name}</Subheading>
diff --git a/src/widgets/CatalogNodeItem/CatalogNodeItem.tsx b/src/widgets/CatalogNodeItem/CatalogNodeItem.tsx
index cf4cae0d..5f3dc71f 100644
--- a/src/widgets/CatalogNodeItem/CatalogNodeItem.tsx
+++ b/src/widgets/CatalogNodeItem/CatalogNodeItem.tsx
@@ -32,7 +32,7 @@ const CatalogNodeItem: FC<Props> = ({ slug, name, id }: Category) => {
         dispatch(setCategoryId(id))
         dispatch(setCategorySlug(slug))
       }}>
-      <Link to={`${Routes.CATEGORIES}/${slug}?id=${id}`} className={styles.link}>
+      <Link to={`${Routes.CATEGORIES}/${slug}`} className={styles.link}>
         {name}
       </Link>
     </li>
diff --git a/src/widgets/Header/Header.tsx b/src/widgets/Header/Header.tsx
index 93e316af..76dae0a3 100644
--- a/src/widgets/Header/Header.tsx
+++ b/src/widgets/Header/Header.tsx
@@ -167,7 +167,7 @@ function Header() {
                 <CatalogLink
                   key={category.id}
                   categorySlug={category.slug}
-                  to={`${Routes.CATEGORIES}/${category.slug}?id=${category.id}`}
+                  to={`${Routes.CATEGORIES}/${category.slug}`}
                   categoryId={category.id}>
                   {category.name}
                 </CatalogLink>