Merge pull request #304 from Studio-Yandex-Practicum/development-195-…

…category-list-api

development-195-category-list-api

src/entities/Category/types/types.ts

@@ -10,7 +10,7 @@ export interface Category {
   name: string
   slug: string
   branches?: Category[]
-  root?: Category
+  root?: string
   is_prohibited?: boolean
   is_visible_on_main?: boolean
   image?: string

src/entities/CategoryCard/CategoryCard.module.scss

@@ -24,4 +24,5 @@
   margin-bottom: 17px;
   margin-left: auto;
   margin-right: auto;
+  text-align: center;
 }

src/entities/CategoryCard/CategoryCard.stories.tsx

@@ -1,20 +1,29 @@
 import type { Meta, StoryObj } from '@storybook/react'
 
+import { TCategory } from '@/shared/model/types/CategoryModel'
+
 import card1 from '../../assets/images/categoryCards/img-categories-01-210x263.webp'
 
 import { CategoryCard } from './CategoryCard'
 
 const meta = {
   title: 'entities/CategoryCard',
   component: CategoryCard
-} satisfies Meta<typeof CategoryCard>
+} as Meta<typeof CategoryCard>
 
 export default meta
 type Story = StoryObj<typeof meta>
 
-export const Default: Story = {
-  args: {
-    src: card1,
-    name: 'FM-трансмиттеры'
+interface CategoryCardArgs {
+  category: TCategory
+}
+
+export const Default: Story = (args: CategoryCardArgs) => <CategoryCard category={args.category} />
+
+Default.args = {
+  category: {
+    image: card1,
+    name: 'FM-трансмиттеры',
+    slug: 'fm-transmitters'
   }
 }

src/entities/CategoryCard/CategoryCard.tsx

@@ -1,19 +1,25 @@
-import { type FC } from 'react'
+import { FC } from 'react'
 
-import FM from '@/assets/images/categoryPage/FM.webp'
+import { TCategory } from '@/shared/model/types/CategoryModel'
 import Paragraph from '@/shared/ui/Paragraph/Paragraph'
 
+import card1 from '../../assets/images/categoryCards/placeholder-1200x800.png'
+
 import styles from './CategoryCard.module.scss'
 
-/**
- * Карточка категории
- */
+interface CategoryCardProps {
+  category: TCategory
+}
 
-export const CategoryCard: FC = () => {
+export const CategoryCard: FC<CategoryCardProps> = ({ category }) => {
   return (
     <div className={styles['category-card']}>
-      <img src={FM} alt="FM-трансмиттеры" className={styles['category-card__img']} />
-      <Paragraph className={styles['category-card__text']}>FM-трансмиттеры</Paragraph>
+      {category && (
+        <>
+          <img src={category.image || card1} alt={category.name} className={styles['category-card__img']} />
+          <Paragraph className={styles['category-card__text']}>{category.name}</Paragraph>
+        </>
+      )}
     </div>
   )
 }

src/entities/CategoryCard/getCategoryCard.tsx

@@ -0,0 +1,21 @@
+import { createAsyncThunk } from '@reduxjs/toolkit'
+
+import { ThunkConfig } from '@/app/providers/StoreProvider/config/StateSchema'
+import { apiErrorIdentify } from '@/shared/api/apiErrorIdentify'
+import { ApiError, ApiErrorTypes, ApiRoutes } from '@/shared/api/types'
+import { ACTION_GET_СATEGORY } from '@/shared/constants/constants'
+
+import { CategoryInfo } from './types'
+
+export const getCategoryCard = createAsyncThunk<CategoryInfo, number, ThunkConfig<ApiError>>(
+  ACTION_GET_СATEGORY,
+  async (id: number, thunkAPI) => {
+    const { rejectWithValue, extra } = thunkAPI
+    try {
+      const { data } = await extra.api.get(`api/${ApiRoutes.CATEGORIES}`)
+      return data
+    } catch (error) {
+      return rejectWithValue(apiErrorIdentify(error, ApiErrorTypes.DATA_EMPTY_ERROR))
+    }
+  }
+)

src/entities/CategoryCard/types.tsx

@@ -0,0 +1,14 @@
+// Тип данных для категории
+export interface Category {
+  id: string
+  name: string
+  image: string
+}
+
+export interface CategoryInfo {
+  name: string
+  count: number
+  next: string
+  previous: string
+  results: Category[]
+}

src/pages/CategoryPage/CategoryPage.tsx

@@ -1,6 +1,6 @@
 import Heading from '@/shared/ui/Heading/Heading'
 import Paragraph from '@/shared/ui/Paragraph/Paragraph'
-import { CategoryCardList } from '@/widgets/CategoryCardList/CategoryCardList'
+import CategoryCardList from '@/widgets/CategoryCardList/CategoryCardList'
 import NavigationLink from '@/widgets/NavigationLink/NavigationLink'
 
 import styles from './CategoryPage.module.scss'

src/shared/constants/constants.ts

@@ -35,6 +35,7 @@ export const BRANDS_FOR_MAIN_NUMBER: number = 6
 // Actions
 export const ACTION_GET_SHOP_NEWS = 'get-shop-news'
 export const ACTION_GET_BLOG_POSTS = 'get-blog-posts'
+export const ACTION_GET_СATEGORY = 'get-all-category'
 
 export const ACTION_GET_PRODUCTS_OF_CATEGORY = 'get-products-of-category'
 export const ACTION_GET_CATEGORY_BRANCHES = 'get-category-branches'
@@ -44,6 +45,8 @@ export const ACTION_GET_CATEGORIES = 'get-categories'
 export const REDUCER_SHOP_NEWS = 'shopNews'
 export const REDUCER_BLOG_POSTS = 'shopBlogPosts'
 
+export const REDUCER_CATEGORY = 'allcategory'
+
 export const REDUCER_CATEGORY_BRANCHES = 'getCategoryBranches'
 export const REDUCER_CATEGORIES = 'getCategories'
 export const REDUCER_CATEGORIES_PRODUCTS = 'shopCategoriesProducts'

src/shared/model/types/CategoryModel.ts

@@ -1,9 +1,9 @@
 export type TCategory = {
-  id: number
+  id?: number
   name: string
   slug: string
   branches?: TCategory[]
-  root?: string
+  root?: string | undefined
   is_prohibited?: boolean
   is_visible_on_main?: boolean
   image?: string | null

src/widgets/CategoryCardList/CategoryCardList.tsx

@@ -1,5 +1,7 @@
-import type { FC } from 'react'
+import { FC } from 'react'
+import { useSelector } from 'react-redux'
 
+import { selectCategories } from '@/entities/Category/selectors/categorySelectors'
 import { CategoryCard } from '@/entities/CategoryCard/CategoryCard'
 
 import styles from './CategoryCardList.module.scss'
@@ -8,19 +10,16 @@ import styles from './CategoryCardList.module.scss'
  * Список категорий
  */
 
-export const CategoryCardList: FC = () => {
+const CategoryCardList: FC = () => {
+  const categories = useSelector(selectCategories)
+
   return (
-    <div className={styles['categoryCardList']}>
-      <CategoryCard />
-      <CategoryCard />
-      <CategoryCard />
-      <CategoryCard />
-      <CategoryCard />
-      <CategoryCard />
-      <CategoryCard />
-      <CategoryCard />
-      <CategoryCard />
-      <CategoryCard />
+    <div className={styles.categoryCardList}>
+      {categories.map(category => (
+        <CategoryCard key={category.id} category={category} />
+      ))}
     </div>
   )
 }
+
+export default CategoryCardList