api: Получение категорий для компонента Header

src/app/providers/SroreProvider/config/StateSchema.ts

@@ -1,8 +1,10 @@
+import { CategorySchema } from '@/entities/Category/types/types'
 import { LoginSchema } from '@/features/login/model/types/types'
 import { ApiInstance } from '@/shared/api/api'
 
 export interface StateSchema {
   login: LoginSchema
+  category: CategorySchema
 }
 
 export interface ThunkExtraArg {

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

@@ -2,9 +2,13 @@ import { configureStore, ReducersMapObject } from '@reduxjs/toolkit'
 import { loginReducer } from '@/features/login/model/slice/loginSlice'
 import { StateSchema, ThunkExtraArg } from './StateSchema'
 import { $api } from '@/shared/api/api'
+import categorySlice from '@/entities/Category/slice/categorySlice'
+
+export type RootState = StateSchema
 
 const rootReducer: ReducersMapObject<StateSchema> = {
-  login: loginReducer
+  login: loginReducer,
+  category: categorySlice
 }
 
 export function createReduxStore(initialState: StateSchema) {

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

@@ -28,6 +28,11 @@ export const AppRouter = createBrowserRouter([
         path: Routes.PRODUCTS_ID,
         element: <ProductsPage />
       },
+      // Добавил как временную заглушку пока не будет страницы категории
+      {
+        path: Routes.CATEGORIES + '/:slug',
+        element: <ProductsPage />
+      },
       {
         path: Routes.LOGIN,
         element: <LoginPage />

src/components/ContextMenuElement/ContextMenuElement.tsx

@@ -1,7 +1,6 @@
-import { FC, ReactNode, useEffect, useRef, useState } from 'react'
-import styles from './contextMenuElement.module.scss'
-
+import { type FC, ReactNode, useEffect, useRef, useState } from 'react'
 import { LEFT_POSITION, RIGHT_POSITION } from '@/shared/constants/constants'
+import styles from './contextMenuElement.module.scss'
 
 type TContextMenuElement = {
   readonly children: ReactNode
@@ -14,8 +13,12 @@ type TContextMenuElement = {
  * @param {string} className - нужно для изменения некоторых css-параметров
  * @param {string} type - нужно для определения, к какому краю прилегает текст
  */
-
-const ContextMenuElement: FC<TContextMenuElement> = ({ children, content, className, type = LEFT_POSITION }) => {
+const ContextMenuElement: FC<TContextMenuElement> = ({
+  children,
+  content,
+  className,
+  type = LEFT_POSITION
+}) => {
   const ref = useRef<HTMLDivElement>(null)
   const [top, setTop] = useState(0)
 
@@ -43,11 +46,17 @@ const ContextMenuElement: FC<TContextMenuElement> = ({ children, content, classN
   }
 
   const contextMenu = (
-    <div className={`${styles['context-menu']} `} style={(type === RIGHT_POSITION && contextStyle) || { top: top }}>
+    <div
+      className={`${styles['context-menu']} `}
+      style={(type === RIGHT_POSITION && contextStyle) || { top: top }}>
       {content}
     </div>
   )
 
+  // @TODO: Добавить обработчик клика по элементу из ContextMenuElement
+  // От таких кликов меню должно скрываться
+  // https://github.com/Studio-Yandex-Practicum/maxboom_frontend/issues/188
+
   return (
     <div
       ref={ref}

src/components/header/header.module.scss

@@ -157,6 +157,8 @@
     list-style-type: none;
     padding: 20px 40px 20px 20px;
     row-gap: 15px;
+    max-height: 320px;
+    overflow-y: scroll;
   }
 
   &__context-menu-item {

src/components/header/header.tsx

@@ -1,5 +1,5 @@
 import { coreBaseData } from '@/mockData/coreBaseData'
-import { useMemo } from 'react'
+import { useEffect, useMemo } from 'react'
 import classNames from 'classnames'
 import Logo from '../../shared/ui/logo/Logo'
 import ArrowIcon from '@/assets/icons/arrow.svg'
@@ -8,16 +8,25 @@ import ContextMenuElement from '../ContextMenuElement/ContextMenuElement'
 import HeaderAccount from '../HeaderAccount/HeaderAccount'
 import { PHONE_NUMBER } from '@/shared/constants/constants'
 import { headerAccountData } from '@/mockData/headerAccountData'
-import { catalogListData } from '@/mockData/catalogListData'
 import CatalogLink from '../CatalogLink/CatalogLink'
 import { Routes } from '@/shared/config/routerConfig/routes'
-import { CatalogLinksId } from '@/shared/config/catalogLinks/catalogLinks'
 import Link from '@/shared/ui/Link/Link'
 import IconCategories from '@/assets/icons/IconCategories.svg'
-import styles from './header.module.scss'
 import SearchProduct from '@/features/SearchProduct'
+import { linkItems } from '@/mockData/catalogListData'
+import styles from './header.module.scss'
+import { useDispatch, useSelector } from 'react-redux'
+import { fetchCategories } from '@/entities/Category/slice/categorySlice'
+import { AppDispatch } from '@/app/providers/SroreProvider/config/store'
+import { selectCategories, selectDisplayedCategories } from '@/entities/Category/selectors/categorySelectors'
+import CatalogNodeItem from '@/widgets/CatalogNodeItem/CatalogNodeItem'
+import NavigationLink from '@/widgets/NavigationLink/NavigationLink'
 
 function Header() {
+  const dispatch = useDispatch<AppDispatch>()
+  const categories = useSelector(selectCategories)
+  const displayedCategories = useSelector(selectDisplayedCategories)
+
   const aboutUsNode = useMemo(
     () => (
       <ul className={styles['header__context-menu-list']}>
@@ -91,51 +100,32 @@ function Header() {
   const catalogNode = useMemo(
     () => (
       <ul className={styles['header__context-menu-list']}>
-        {catalogListData.map((item, index) => (
-          <li key={index} className={styles['header__context-menu-item']}>
-            <Link to={`${Routes}${item.slug}`} className={styles['header__context-menu-link']}>
-              {item.name}
-            </Link>
-          </li>
+        {categories.map(category => (
+          <CatalogNodeItem key={category.id} slug={category.slug} name={category.name} />
         ))}
       </ul>
     ),
-    []
+    [categories]
   )
 
+  useEffect(() => {
+    dispatch(fetchCategories())
+  }, [dispatch])
+
   return (
     <header className={styles.header}>
       <div className={styles.header__container}>
         <div className={styles['header__row-one']}>
           <nav className={styles.header__nav}>
             <ul className={styles.header__list}>
-              {/* TODO замапить список ссылок из конфига чтобы не засорять код
-              https://github.com/Studio-Yandex-Practicum/maxboom_frontend/issues/125 */}
               <li className={styles.header__item}>
                 <ContextMenuElement className={styles.header__item} content={aboutUsNode}>
                   О нас
                 </ContextMenuElement>
               </li>
-              <li className={styles.header__item}>
-                <Link to={Routes.BLOG} className={styles.header__link}>
-                  Блог
-                </Link>
-              </li>
-              <li className={styles.header__item}>
-                <Link to="" className={styles.header__link}>
-                  Новости
-                </Link>
-              </li>
-              <li className={styles.header__item}>
-                <Link to="" className={styles.header__link}>
-                  Отзывы о магазине
-                </Link>
-              </li>
-              <li className={styles.header__item}>
-                <Link to="" className={styles.header__link}>
-                  Контакты
-                </Link>
-              </li>
+              {linkItems.map(item => (
+                <NavigationLink key={item.index} label={item.label} to={item.to} />
+              ))}
               <ContextMenuElement className={styles.header__item} content={supportNode}>
                 <LightningIcon className={classNames(styles.header__icon, styles.help_icon)} />
                 Помощь
@@ -165,7 +155,6 @@ function Header() {
 
         <div className={styles['header__row-three']}>
           <ContextMenuElement content={catalogNode}>
-            {/* @TODO: вставить путь когда будет роут */}
             <CatalogLink to="" className={styles['header__catalog-link_main']}>
               <div className={styles['header__catalog-wrapper']}>
                 <IconCategories className={styles['header__svg']} />
@@ -175,13 +164,11 @@ function Header() {
           </ContextMenuElement>
 
           <div className={styles['header__tags']}>
-            <CatalogLink to={Routes.PRODUCTS + CatalogLinksId.TRANSMIT}>GPS-треккеры</CatalogLink>
-            <CatalogLink to={Routes.PRODUCTS + CatalogLinksId.GPS_TRACK}>SSD-накопители</CatalogLink>
-            <CatalogLink to={Routes.PRODUCTS + CatalogLinksId.SSD}>Автозапчасти</CatalogLink>
-            <CatalogLink to={Routes.PRODUCTS + CatalogLinksId.AUTO_PARTS}>
-              Автомобильные зарядные устройства
-            </CatalogLink>
-            <CatalogLink to={Routes.PRODUCTS + CatalogLinksId.CAR_CHARGES}>Автосканеры</CatalogLink>
+            {displayedCategories.map(category => (
+              <CatalogLink key={category.id} to={`${Routes.CATEGORIES}/${category.slug}`}>
+                {category.name}
+              </CatalogLink>
+            ))}
           </div>
         </div>
       </div>

src/entities/Category/selectors/categorySelectors.ts

@@ -0,0 +1,4 @@
+import { RootState } from '@/app/providers/SroreProvider/config/store'
+
+export const selectCategories = (state: RootState) => state.category.categories
+export const selectDisplayedCategories = (state: RootState) => state.category.displayedCategories

src/entities/Category/slice/categorySlice.ts

@@ -0,0 +1,47 @@
+import { createSlice, createAsyncThunk } from '@reduxjs/toolkit'
+import { ApiError, ApiErrorTypes, ApiRoutes } from '@/shared/api/types'
+import { ThunkConfig } from '@/app/providers/SroreProvider/config/StateSchema'
+import { Category, CategorySchema } from '../types/types'
+import { apiErrorIdentify } from '@/shared/api/apiErrorIdentify'
+import { rejectedPayloadHandle } from '@/shared/api/rejectedPayloadHandle'
+
+const initialState: CategorySchema = {
+  categories: [],
+  displayedCategories: [],
+  error: undefined
+}
+
+export const fetchCategories = createAsyncThunk<Category[], void, ThunkConfig<ApiError>>(
+  'category/fetchCategories',
+  async (_, thunkAPI) => {
+    const { rejectWithValue, extra } = thunkAPI
+
+    try {
+      const response = await extra.api.get(`api/${ApiRoutes.CATEGORIES}`)
+      return response.data as Category[]
+    } catch (error) {
+      return rejectWithValue(apiErrorIdentify(error, ApiErrorTypes.AUTH_ERROR))
+    }
+  }
+)
+
+const categorySlice = createSlice({
+  name: 'category',
+  initialState,
+  reducers: {},
+  extraReducers: builder => {
+    builder
+      .addCase(fetchCategories.pending, state => {
+        state.error = undefined
+      })
+      .addCase(fetchCategories.fulfilled, (state, action) => {
+        state.categories = action.payload
+        state.displayedCategories = action.payload.filter((c: Category) => c.is_visible_on_main === true)
+      })
+      .addCase(fetchCategories.rejected, (state, { payload }) => {
+        state.error = rejectedPayloadHandle(payload)
+      })
+  }
+})
+
+export default categorySlice.reducer

src/entities/Category/types/types.ts

@@ -0,0 +1,17 @@
+export interface CategorySchema {
+  categories: Category[]
+  displayedCategories: Category[]
+  error?: string | string[]
+}
+
+export interface Category {
+  id?: number
+  name: string
+  slug: string
+  branches?: Category[]
+  root?: Category
+  is_prohibited?: boolean
+  is_visible_on_main?: boolean
+  image?: string
+  type?: 'category'
+}

src/mockData/catalogListData.ts

@@ -1,4 +1,12 @@
 import { CatalogLinksId } from '@/shared/config/catalogLinks/catalogLinks'
+import { Routes } from '@/shared/config/routerConfig/routes'
+
+export const linkItems = [
+  { index: 0, label: 'Блог', to: Routes.BLOG },
+  { index: 1, label: 'Новости', to: '' },
+  { index: 2, label: 'Отзывы о магазине', to: '' },
+  { index: 3, label: 'Контакты', to: '' }
+]
 
 export const catalogListData = [
   {

src/shared/api/types.ts

@@ -1,6 +1,7 @@
 export enum ApiRoutes {
   LOGIN = 'token/login',
-  LOGOUT = 'token/logout'
+  LOGOUT = 'token/logout',
+  CATEGORIES = 'catalogue/category'
 }
 
 export enum ApiErrorTypes {

src/widgets/CatalogNodeItem/CatalogNodeItem.module.scss

@@ -0,0 +1,18 @@
+@use '../../shared/styles/utils/variables' as var;
+
+.link {
+  color: var.$body-color;
+  text-decoration: none;
+  white-space: nowrap;
+
+  &:hover {
+    color: var.$theme-secondary-color;
+  }
+}
+
+.li {
+  margin: 0;
+  padding: 0;
+  font-weight: 400;
+  font-size: 13px;
+}

src/widgets/CatalogNodeItem/CatalogNodeItem.stories.tsx

@@ -0,0 +1,29 @@
+// CatalogNodeItem.stories.tsx
+import { Meta, StoryObj } from '@storybook/react'
+import CatalogNodeItem from './CatalogNodeItem'
+
+const meta = {
+  title: 'widgets/CatalogNodeItem',
+  component: CatalogNodeItem,
+  parameters: {
+    layout: 'centered'
+  }
+} as Meta<typeof CatalogNodeItem>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    slug: 'category-slug',
+    name: 'Category Name'
+  }
+}
+
+export const CustomCategory: Story = {
+  args: {
+    slug: 'custom-slug',
+    name: 'Custom Category'
+  }
+}

src/widgets/CatalogNodeItem/CatalogNodeItem.tsx

@@ -0,0 +1,19 @@
+import { Category } from '@/entities/Category/types/types'
+import { Routes } from '@/shared/config/routerConfig/routes'
+import Link from '@/shared/ui/Link/Link'
+import styles from './CatalogNodeItem.module.scss'
+
+/**
+ * Компонент ссылки на раздел каталога для выпадающего списка меню "Все категории"
+ */
+const CatalogNodeItem = ({ slug, name }: Category) => {
+  return (
+    <li className={styles.li}>
+      <Link to={`${Routes.CATEGORIES}/${slug}`} className={styles.link}>
+        {name}
+      </Link>
+    </li>
+  )
+}
+
+export default CatalogNodeItem

src/widgets/NavigationLink/NavigationLink.module.scss

@@ -0,0 +1,16 @@
+@use '../../shared/styles/utils/variables' as var;
+
+.li {
+  margin: 0;
+  padding: 0;
+  font-weight: 600;
+  font-size: 13px;
+  color: var.$white;
+  display: flex;
+  align-items: center;
+}
+
+.link {
+  color: var.$white;
+  text-decoration: none;
+}