Merge branch 'master' into enhancement_381_favorite_page

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

@@ -19,6 +19,7 @@ import { IAboutUsSchema } from '@/pages/AboutUsPage/model/types/types'
 import { ICartSchema } from '@/pages/CartPage/model/types'
 import { IProductAmountStateSchema } from '@/features/CartEdit/model/types'
 import { IFeedbackSchema } from '@/features/Reviews/model/types/types'
+import { TNumberOfPageSchema } from '@/components/Pagination/types/types'
 
 export interface StateSchema {
   aboutUs: IAboutUsSchema
@@ -44,6 +45,7 @@ export interface StateSchema {
   categoryFilters: ICategoryFiltersSchema
   productAmount: IProductAmountStateSchema
   feedbacks: IFeedbackSchema
+  pagination: TNumberOfPageSchema
 }
 
 export interface ThunkExtraArg {

src/app/providers/StoreProvider/config/store.ts

@@ -24,6 +24,7 @@ import { cartReducer } from '@/pages/CartPage/model/slice'
 import { cartEntityReducer } from '@/entities/CartEntity/model/slice/cartEntitySlice'
 import { productAmountReducer } from '@/features/CartEdit/model/slice/productAmountSlice'
 import { feedbacksReducer } from '@/features/Reviews/model/slice/feedbacksSlice'
+import { paginationSliceReducer } from '@/components/Pagination/slice/paginationSlice'
 
 export type RootState = StateSchema
 
@@ -50,7 +51,8 @@ const rootReducer: ReducersMapObject<RootState> = {
   cartEntity: cartEntityReducer,
   cart: cartReducer,
   categoryFilters: categoryFiltersSliceReducer,
-  productAmount: productAmountReducer
+  productAmount: productAmountReducer,
+  pagination: paginationSliceReducer
 }
 
 export function createReduxStore(initialState: RootState) {

src/app/router/AppRouter/ui/AppRouter.tsx

@@ -44,7 +44,7 @@ export const AppRouter = createBrowserRouter([
         element: <ProductsPage /> // временная заглушка нужна страница со всеми брендами
       },
       {
-        path: Routes.CATEGORIES + '/all',
+        path: Routes.CATEGORIES,
         element: <CategoryPage />
       },
       {

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'
 

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
+}

src/entities/HeaderAccount/HeaderAccount.tsx

@@ -26,6 +26,7 @@ import styles from './headerAccount.module.scss'
 
 export type HeaderAccountProps = {
   isMenuModalOpen?: boolean
+  changeSearchModalState?: () => void
   handleClose?: () => void
   counter: number
   total: string
@@ -35,12 +36,19 @@ const LazyLoginForm = lazy(() => import('@/features/login/index'))
 
 /**
  * Компонент хедера, показывающий блок аккаунта
- * @param {boolean} isMenuModalOpen - состояние открытия модального окна;
+ * @param {boolean} isMenuModalOpen - состояние открытия модального окна меню;
+ * @param {boolean} changeSearchModalState - состояние открытия модального окна поиска;
  * @param {function} handleClose - функция закрытия модального окна;
  * @param {string} counter - счетчик количества товаров в корзине;
  * @param {string} total - полная стоимость;
  */
-const HeaderAccount: FC<HeaderAccountProps> = ({ isMenuModalOpen, handleClose, counter, total }) => {
+const HeaderAccount: FC<HeaderAccountProps> = ({
+  isMenuModalOpen,
+  changeSearchModalState,
+  handleClose,
+  counter,
+  total
+}) => {
   const [isModalOpen, setIsModalOpen] = useState(false)
   const [isModalClosing, setIsModalClosing] = useState(false)
 
@@ -91,7 +99,11 @@ const HeaderAccount: FC<HeaderAccountProps> = ({ isMenuModalOpen, handleClose, c
         className={
           isScreenLg || isMenuModalOpen ? `${styles.headerAccount}` : `${styles.headerAccount__mobile}`
         }>
-        {isScreenLg || isMenuModalOpen ? null : <SearchIcon className={styles.headerAccount__icon} />}
+        {isScreenLg || isMenuModalOpen ? null : (
+          <Button onClick={changeSearchModalState} className={styles.headerAccount__search}>
+            <SearchIcon className={styles.headerAccount__icon} />
+          </Button>
+        )}
         <li>
           {/* Временная реализация
           TODO заменить на дропдаун на ховер в контекстном меню добавить пункт-кнопку для разлогина пока висит на иконке */}

src/entities/HeaderAccount/headerAccount.module.scss

@@ -128,4 +128,9 @@
     margin-left: 10px;
     margin-right: 10px;
   }
+
+  &__search {
+    margin: 0;
+    padding: 0;
+  }
 }

src/entities/ModalHeading/index.tsx

@@ -0,0 +1,2 @@
+import ModalHeading from './ui/ModalHeading'
+export default ModalHeading