From 8710beb8b4f04aabf588fa6a556500bb277d7097 Mon Sep 17 00:00:00 2001
From: Kirill Kurentsov <immortalsteel@gmail.com>
Date: Sun, 14 Jan 2024 21:54:01 +0300
Subject: [PATCH 1/3] =?UTF-8?q?api:=20=D0=9F=D0=BE=D0=BB=D1=83=D1=87=D0=B5?=
 =?UTF-8?q?=D0=BD=D0=B8=D0=B5=20=D0=BA=D0=B0=D1=82=D0=B5=D0=B3=D0=BE=D1=80?=
 =?UTF-8?q?=D0=B8=D0=B9=20=D0=B4=D0=BB=D1=8F=20=D0=BA=D0=BE=D0=BC=D0=BF?=
 =?UTF-8?q?=D0=BE=D0=BD=D0=B5=D0=BD=D1=82=D0=B0=20Header?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/router/AppRouter/ui/AppRouter.tsx |  5 ++
 src/components/header/header.module.scss  |  2 +
 src/components/header/header.tsx          | 75 +++++++++++------------
 src/mockData/catalogListData.ts           |  8 +++
 src/shared/api/types.ts                   |  3 +-
 5 files changed, 53 insertions(+), 40 deletions(-)

diff --git a/src/app/router/AppRouter/ui/AppRouter.tsx b/src/app/router/AppRouter/ui/AppRouter.tsx
index 0566066e..416bf6a7 100644
--- a/src/app/router/AppRouter/ui/AppRouter.tsx
+++ b/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 />
diff --git a/src/components/header/header.module.scss b/src/components/header/header.module.scss
index 3de82d3a..d0ed339e 100644
--- a/src/components/header/header.module.scss
+++ b/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 {
diff --git a/src/components/header/header.tsx b/src/components/header/header.tsx
index e3cb12ee..0036a75a 100644
--- a/src/components/header/header.tsx
+++ b/src/components/header/header.tsx
@@ -1,5 +1,5 @@
 import { coreBaseData } from '@/mockData/coreBaseData'
-import { useMemo } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 import classNames from 'classnames'
 import Logo from '../../shared/ui/logo/Logo'
 import ArrowIcon from '@/assets/icons/arrow.svg'
@@ -8,16 +8,20 @@ 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 type { TCategory } from '@/models/CategoryModel'
+import { ApiRoutes } from '@/shared/api/types'
+import styles from './header.module.scss'
 
 function Header() {
+  const [categories, setCategories] = useState<TCategory[]>([])
+  const [displayedCategories, setDisplayedCategories] = useState<TCategory[]>([])
+
   const aboutUsNode = useMemo(
     () => (
       <ul className={styles['header__context-menu-list']}>
@@ -91,51 +95,47 @@ 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}
+        {categories.map(category => (
+          <li key={category.id} className={styles['header__context-menu-item']}>
+            <Link
+              to={`${Routes.CATEGORIES}/${category.slug}`}
+              className={styles['header__context-menu-link']}>
+              {category.name}
             </Link>
           </li>
         ))}
       </ul>
     ),
-    []
+    [categories]
   )
 
+  useEffect(() => {
+    fetch(`${__API__}api/${ApiRoutes.CATEGORIES}`)
+      .then(response => response.json())
+      .then(categories => {
+        setCategories(categories)
+        setDisplayedCategories(categories.filter((c: TCategory) => c.is_visible_on_main === true))
+      })
+  }, [])
+
   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, index) => (
+                <li key={index} className={styles.header__item}>
+                  <Link to={item.to} className={styles.header__link}>
+                    {item.label}
+                  </Link>
+                </li>
+              ))}
               <ContextMenuElement className={styles.header__item} content={supportNode}>
                 <LightningIcon className={classNames(styles.header__icon, styles.help_icon)} />
                 Помощь
@@ -165,7 +165,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 +174,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>
diff --git a/src/mockData/catalogListData.ts b/src/mockData/catalogListData.ts
index 8c59a701..10bfe30d 100644
--- a/src/mockData/catalogListData.ts
+++ b/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 = [
+  { label: 'Блог', to: Routes.BLOG },
+  { label: 'Новости', to: '' },
+  { label: 'Отзывы о магазине', to: '' },
+  { label: 'Контакты', to: '' }
+]
 
 export const catalogListData = [
   {
diff --git a/src/shared/api/types.ts b/src/shared/api/types.ts
index 7fb56991..4b2e39d1 100644
--- a/src/shared/api/types.ts
+++ b/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 {

From a463246d4bfc4c59640aba541b9be97fee2ecc61 Mon Sep 17 00:00:00 2001
From: Kirill Kurentsov <immortalsteel@gmail.com>
Date: Wed, 17 Jan 2024 13:54:17 +0300
Subject: [PATCH 2/3] refactor: fix code review issues - AsyncThunk, widgets,
 stories

---
 .../SroreProvider/config/StateSchema.ts       |  2 +
 .../providers/SroreProvider/config/store.ts   |  6 ++-
 src/components/header/header.tsx              | 40 +++++++------------
 .../Category/selectors/categorySelectors.ts   |  4 ++
 src/entities/Category/slice/categorySlice.ts  | 32 +++++++++++++++
 src/entities/Category/types/types.ts          | 16 ++++++++
 src/mockData/catalogListData.ts               |  8 ++--
 .../CatalogNodeItem.module.scss               | 18 +++++++++
 .../CatalogNodeItem.stories.tsx               | 29 ++++++++++++++
 .../CatalogNodeItem/CatalogNodeItem.tsx       | 19 +++++++++
 .../NavigationLink/NavigationLink.module.scss | 16 ++++++++
 .../NavigationLink/NavigationLink.stories.tsx | 27 +++++++++++++
 src/widgets/NavigationLink/NavigationLink.tsx | 24 +++++++++++
 13 files changed, 211 insertions(+), 30 deletions(-)
 create mode 100644 src/entities/Category/selectors/categorySelectors.ts
 create mode 100644 src/entities/Category/slice/categorySlice.ts
 create mode 100644 src/entities/Category/types/types.ts
 create mode 100644 src/widgets/CatalogNodeItem/CatalogNodeItem.module.scss
 create mode 100644 src/widgets/CatalogNodeItem/CatalogNodeItem.stories.tsx
 create mode 100644 src/widgets/CatalogNodeItem/CatalogNodeItem.tsx
 create mode 100644 src/widgets/NavigationLink/NavigationLink.module.scss
 create mode 100644 src/widgets/NavigationLink/NavigationLink.stories.tsx
 create mode 100644 src/widgets/NavigationLink/NavigationLink.tsx

diff --git a/src/app/providers/SroreProvider/config/StateSchema.ts b/src/app/providers/SroreProvider/config/StateSchema.ts
index 2adc174a..4d6796e5 100644
--- a/src/app/providers/SroreProvider/config/StateSchema.ts
+++ b/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 {
diff --git a/src/app/providers/SroreProvider/config/store.ts b/src/app/providers/SroreProvider/config/store.ts
index eb73b868..afa56ba1 100644
--- a/src/app/providers/SroreProvider/config/store.ts
+++ b/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) {
diff --git a/src/components/header/header.tsx b/src/components/header/header.tsx
index 0036a75a..5518edd5 100644
--- a/src/components/header/header.tsx
+++ b/src/components/header/header.tsx
@@ -1,5 +1,5 @@
 import { coreBaseData } from '@/mockData/coreBaseData'
-import { useEffect, useMemo, useState } 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'
@@ -14,13 +14,18 @@ import Link from '@/shared/ui/Link/Link'
 import IconCategories from '@/assets/icons/IconCategories.svg'
 import SearchProduct from '@/features/SearchProduct'
 import { linkItems } from '@/mockData/catalogListData'
-import type { TCategory } from '@/models/CategoryModel'
-import { ApiRoutes } from '@/shared/api/types'
 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 [categories, setCategories] = useState<TCategory[]>([])
-  const [displayedCategories, setDisplayedCategories] = useState<TCategory[]>([])
+  const dispatch = useDispatch<AppDispatch>()
+  const categories = useSelector(selectCategories)
+  const displayedCategories = useSelector(selectDisplayedCategories)
 
   const aboutUsNode = useMemo(
     () => (
@@ -96,13 +101,7 @@ function Header() {
     () => (
       <ul className={styles['header__context-menu-list']}>
         {categories.map(category => (
-          <li key={category.id} className={styles['header__context-menu-item']}>
-            <Link
-              to={`${Routes.CATEGORIES}/${category.slug}`}
-              className={styles['header__context-menu-link']}>
-              {category.name}
-            </Link>
-          </li>
+          <CatalogNodeItem key={category.id} slug={category.slug} name={category.name} />
         ))}
       </ul>
     ),
@@ -110,13 +109,8 @@ function Header() {
   )
 
   useEffect(() => {
-    fetch(`${__API__}api/${ApiRoutes.CATEGORIES}`)
-      .then(response => response.json())
-      .then(categories => {
-        setCategories(categories)
-        setDisplayedCategories(categories.filter((c: TCategory) => c.is_visible_on_main === true))
-      })
-  }, [])
+    dispatch(fetchCategories())
+  }, [dispatch])
 
   return (
     <header className={styles.header}>
@@ -129,12 +123,8 @@ function Header() {
                   О нас
                 </ContextMenuElement>
               </li>
-              {linkItems.map((item, index) => (
-                <li key={index} className={styles.header__item}>
-                  <Link to={item.to} className={styles.header__link}>
-                    {item.label}
-                  </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)} />
diff --git a/src/entities/Category/selectors/categorySelectors.ts b/src/entities/Category/selectors/categorySelectors.ts
new file mode 100644
index 00000000..5f33d316
--- /dev/null
+++ b/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
diff --git a/src/entities/Category/slice/categorySlice.ts b/src/entities/Category/slice/categorySlice.ts
new file mode 100644
index 00000000..74b5bb50
--- /dev/null
+++ b/src/entities/Category/slice/categorySlice.ts
@@ -0,0 +1,32 @@
+import { createSlice, createAsyncThunk } from '@reduxjs/toolkit'
+import { ApiError, ApiRoutes } from '@/shared/api/types'
+import { ThunkConfig } from '@/app/providers/SroreProvider/config/StateSchema'
+import { Category, CategorySchema } from '../types/types'
+
+const initialState: CategorySchema = {
+  categories: [],
+  displayedCategories: []
+}
+
+export const fetchCategories = createAsyncThunk<Category[], void, ThunkConfig<ApiError>>(
+  'category/fetchCategories',
+  async () => {
+    const response = await fetch(`${__API__}api/${ApiRoutes.CATEGORIES}`)
+    const categories = await response.json()
+    return categories as Category[]
+  }
+)
+
+const categorySlice = createSlice({
+  name: 'category',
+  initialState,
+  reducers: {},
+  extraReducers: builder => {
+    builder.addCase(fetchCategories.fulfilled, (state, action) => {
+      state.categories = action.payload
+      state.displayedCategories = action.payload.filter((c: Category) => c.is_visible_on_main === true)
+    })
+  }
+})
+
+export default categorySlice.reducer
diff --git a/src/entities/Category/types/types.ts b/src/entities/Category/types/types.ts
new file mode 100644
index 00000000..214a01ee
--- /dev/null
+++ b/src/entities/Category/types/types.ts
@@ -0,0 +1,16 @@
+export interface CategorySchema {
+  categories: Category[]
+  displayedCategories: Category[]
+}
+
+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'
+}
diff --git a/src/mockData/catalogListData.ts b/src/mockData/catalogListData.ts
index 10bfe30d..59ce5a6c 100644
--- a/src/mockData/catalogListData.ts
+++ b/src/mockData/catalogListData.ts
@@ -2,10 +2,10 @@ import { CatalogLinksId } from '@/shared/config/catalogLinks/catalogLinks'
 import { Routes } from '@/shared/config/routerConfig/routes'
 
 export const linkItems = [
-  { label: 'Блог', to: Routes.BLOG },
-  { label: 'Новости', to: '' },
-  { label: 'Отзывы о магазине', to: '' },
-  { label: 'Контакты', to: '' }
+  { index: 0, label: 'Блог', to: Routes.BLOG },
+  { index: 1, label: 'Новости', to: '' },
+  { index: 2, label: 'Отзывы о магазине', to: '' },
+  { index: 3, label: 'Контакты', to: '' }
 ]
 
 export const catalogListData = [
diff --git a/src/widgets/CatalogNodeItem/CatalogNodeItem.module.scss b/src/widgets/CatalogNodeItem/CatalogNodeItem.module.scss
new file mode 100644
index 00000000..5185f5e3
--- /dev/null
+++ b/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;
+}
diff --git a/src/widgets/CatalogNodeItem/CatalogNodeItem.stories.tsx b/src/widgets/CatalogNodeItem/CatalogNodeItem.stories.tsx
new file mode 100644
index 00000000..9d38b924
--- /dev/null
+++ b/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'
+  }
+}
diff --git a/src/widgets/CatalogNodeItem/CatalogNodeItem.tsx b/src/widgets/CatalogNodeItem/CatalogNodeItem.tsx
new file mode 100644
index 00000000..e87f7b5c
--- /dev/null
+++ b/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
diff --git a/src/widgets/NavigationLink/NavigationLink.module.scss b/src/widgets/NavigationLink/NavigationLink.module.scss
new file mode 100644
index 00000000..db7892a5
--- /dev/null
+++ b/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;
+}
diff --git a/src/widgets/NavigationLink/NavigationLink.stories.tsx b/src/widgets/NavigationLink/NavigationLink.stories.tsx
new file mode 100644
index 00000000..64d2c0e8
--- /dev/null
+++ b/src/widgets/NavigationLink/NavigationLink.stories.tsx
@@ -0,0 +1,27 @@
+import { Meta, Story } from '@storybook/react'
+import NavigationLink, { NavigationLinkProps } from './NavigationLink'
+
+export default {
+  title: 'widgets/NavigationLink',
+  component: NavigationLink
+} as Meta
+
+const Template: Story<NavigationLinkProps> = args => <NavigationLink {...args} />
+
+export const Default = Template.bind({})
+Default.args = {
+  label: 'Home',
+  to: '/'
+}
+
+export const About = Template.bind({})
+About.args = {
+  label: 'About',
+  to: '/about'
+}
+
+export const Contact = Template.bind({})
+Contact.args = {
+  label: 'Contact',
+  to: '/contact'
+}
diff --git a/src/widgets/NavigationLink/NavigationLink.tsx b/src/widgets/NavigationLink/NavigationLink.tsx
new file mode 100644
index 00000000..e523444e
--- /dev/null
+++ b/src/widgets/NavigationLink/NavigationLink.tsx
@@ -0,0 +1,24 @@
+import Link from '@/shared/ui/Link/Link'
+import styles from './NavigationLink.module.scss'
+
+export type NavigationLinkProps = {
+  label: string
+  to: string
+}
+
+/**
+ * Компонент ссылки-навигатора по страницам сайта для хедера страницы
+ * @param {string} label - текст ссылки
+ * @param {string} to - адрес для перехода
+ */
+const NavigationLink = ({ label, to }: NavigationLinkProps) => {
+  return (
+    <li className={styles.li}>
+      <Link to={to} className={styles.link}>
+        {label}
+      </Link>
+    </li>
+  )
+}
+
+export default NavigationLink

From 4cb4bd5866fe8ad4d5a68ffed588d26161cd1221 Mon Sep 17 00:00:00 2001
From: Kirill Kurentsov <immortalsteel@gmail.com>
Date: Fri, 19 Jan 2024 05:59:41 +0300
Subject: [PATCH 3/3] refactor: fix code review issues - add API instance
 usage, error handlers

---
 .../ContextMenuElement/ContextMenuElement.tsx | 21 +++++++----
 src/entities/Category/slice/categorySlice.ts  | 35 +++++++++++++------
 src/entities/Category/types/types.ts          |  1 +
 3 files changed, 41 insertions(+), 16 deletions(-)

diff --git a/src/components/ContextMenuElement/ContextMenuElement.tsx b/src/components/ContextMenuElement/ContextMenuElement.tsx
index 5067621b..fd2df7f3 100644
--- a/src/components/ContextMenuElement/ContextMenuElement.tsx
+++ b/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}
diff --git a/src/entities/Category/slice/categorySlice.ts b/src/entities/Category/slice/categorySlice.ts
index 74b5bb50..d25d5dc3 100644
--- a/src/entities/Category/slice/categorySlice.ts
+++ b/src/entities/Category/slice/categorySlice.ts
@@ -1,19 +1,27 @@
 import { createSlice, createAsyncThunk } from '@reduxjs/toolkit'
-import { ApiError, ApiRoutes } from '@/shared/api/types'
+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: []
+  displayedCategories: [],
+  error: undefined
 }
 
 export const fetchCategories = createAsyncThunk<Category[], void, ThunkConfig<ApiError>>(
   'category/fetchCategories',
-  async () => {
-    const response = await fetch(`${__API__}api/${ApiRoutes.CATEGORIES}`)
-    const categories = await response.json()
-    return categories as Category[]
+  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))
+    }
   }
 )
 
@@ -22,10 +30,17 @@ const categorySlice = createSlice({
   initialState,
   reducers: {},
   extraReducers: builder => {
-    builder.addCase(fetchCategories.fulfilled, (state, action) => {
-      state.categories = action.payload
-      state.displayedCategories = action.payload.filter((c: Category) => c.is_visible_on_main === true)
-    })
+    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)
+      })
   }
 })
 
diff --git a/src/entities/Category/types/types.ts b/src/entities/Category/types/types.ts
index 214a01ee..b46dc406 100644
--- a/src/entities/Category/types/types.ts
+++ b/src/entities/Category/types/types.ts
@@ -1,6 +1,7 @@
 export interface CategorySchema {
   categories: Category[]
   displayedCategories: Category[]
+  error?: string | string[]
 }
 
 export interface Category {