#339-pagination

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",

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 {

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) {

src/components/Dropdown/Dropdown.tsx

@@ -8,15 +8,23 @@ interface DropdownProps extends React.HTMLProps<HTMLSelectElement> {
   items: TSortOptions[]
   defaultItem?: string
   onSelect: React.ChangeEventHandler<HTMLSelectElement>
+  changeValue?: string
 }
 
 /**
  * Компонент для инпута - выпадающего списка.
  * @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}

src/components/PageControls/PageControls.tsx

@@ -20,6 +20,8 @@ type TPageControls = {
   handleSortChange: ChangeEventHandler<HTMLSelectElement>
   itemPerPageOptions: TSortOptions[]
   sortOptions: TSortOptions[]
+  changeValueToFilterProducts?: string
+  changeValueToQuantityProducts?: string
 }
 
 /**
@@ -30,20 +32,28 @@ type TPageControls = {
  * @param {function} handleSortChange - функция управления порядком сортировки карточек;
  * @param {array} itemPerPageOptions - текущее кол-во отображаемых карточек на странице;
  * @param {array} sortOptions - текущий выбранный порядок сортировки карточек;
+ * @param {string} changeValueToFilterProducts - наименование выбранного фильтра товаров по Названию/Цене/Модели
+ * @param {string} changeValueToQuantityProducts - наименование выбранного фильтра товаров по количеству в листинге
  */
 export const PageControls: FC<TPageControls> = ({
   cardView,
   handleCardViewChange,
   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

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}

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

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

src/components/Pagination/types/types.ts

@@ -0,0 +1,3 @@
+export type TNumberOfPageSchema = {
+  numberOfPage: number
+}