Merge pull request #299 from Studio-Yandex-Practicum/enhancement_221_…

…api_about_us

enhancement_221_api_about_us

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

@@ -16,9 +16,11 @@ import { IFeedbackSchema } from '@/pages/FeedbackPage/model/types/types'
 import { ICategorySchema, IMainCategorySchema } from '@/widgets/CategoryList/types/types'
 import { ICategoryFiltersSchema } from '@/components/Dropdown/types/types'
 import type { IFeedbackFormSchema } from '@/widgets/FeedbackForm/model/scheme/feedbackFormSliceSchema'
+import { IAboutUsSchema } from '@/pages/AboutUsPage/model/types/types'
 import { ICartSchema } from '@/pages/CartPage/model/types'
 
 export interface StateSchema {
+  aboutUs: IAboutUsSchema
   login: LoginSchema
   storeReviews: StoreReviewsSchema
   category: CategorySchema

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

@@ -21,11 +21,13 @@ import { getCategoriesReducer } from '@/widgets/CategoryList/slice/pageCategorie
 import { feedbackReducer } from '@/pages/FeedbackPage/model/slice/feedbackSlice'
 import { categoryFiltersSliceReducer } from '@/components/Dropdown/slice/filtersSlice'
 import { feedbackFormReducer } from '@/widgets/FeedbackForm/model/slice/feedbackFormSlice'
+import { aboutUsReducer } from '@/pages/AboutUsPage/model/slice/aboutUsSlice'
 import { cartReducer } from '@/pages/CartPage/model/slice'
 
 export type RootState = StateSchema
 
 const rootReducer: ReducersMapObject<RootState> = {
+  aboutUs: aboutUsReducer,
   login: loginReducer,
   category: categorySlice,
   coreBaseHeader: headerSlice,

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

@@ -1,5 +1,6 @@
 import { createBrowserRouter } from 'react-router-dom'
 
+import AboutUsPage from '@/pages/AboutUsPage/AboutUsPage'
 import BlogPage from '@/pages/BlogPage/BlogPage'
 import CartPage from '@/pages/CartPage/CartPage'
 import { CategoryPage } from '@/pages/CategoryPage/CategoryPage'
@@ -30,7 +31,7 @@ export const AppRouter = createBrowserRouter([
       },
       {
         path: Routes.ABOUT,
-        element: <ProductsPage /> // временная заглушка нужна страница about_us
+        element: <AboutUsPage />
       },
       {
         path: Routes.BLOG,

src/entities/AboutUs/model/types/types.ts

@@ -0,0 +1,3 @@
+export interface IAboutUs {
+  text?: string
+}

src/entities/AboutUs/ui/AboutUs.module.scss

@@ -6,5 +6,5 @@
   font-weight: 400;
   color: var.$body-color;
   margin: 0;
-  padding: 0;
+  padding: 30px 0 56px;
 }

src/entities/AboutUs/ui/AboutUs.tsx

@@ -2,11 +2,9 @@ import { FC } from 'react'
 
 import Paragraph from '@/shared/ui/Paragraph/Paragraph'
 
-import styles from './AboutUs.module.scss'
+import { IAboutUs } from '../model/types/types'
 
-interface IAboutUs {
-  text: string
-}
+import styles from './AboutUs.module.scss'
 
 /**
  * Карточка из блока "О нас"

src/pages/AboutUsPage/AboutUsPage.module.scss

@@ -0,0 +1,19 @@
+@use '@/shared/styles/utils/variables' as var;
+
+.title {
+  width: 100%;
+  margin: 0 0 10px;
+  padding: 0;
+}
+
+.link {
+  text-decoration: none;
+  color: var.$subtitle-color;
+  font-size: 13.5px;
+  font-weight: 400;
+  line-height: 16.2px;
+
+  &:hover {
+    color: var.$theme-primary-color;
+  }
+}

src/pages/AboutUsPage/AboutUsPage.tsx

@@ -0,0 +1,43 @@
+import { useEffect } from 'react'
+import { useDispatch, useSelector } from 'react-redux'
+import { Link } from 'react-router-dom'
+
+import { AppDispatch } from '@/app/providers/StoreProvider/config/store'
+import WrapperForMainContent from '@/components/WrapperForMainContent/WrapperForMainContent'
+import AboutUs from '@/entities/AboutUs'
+import Heading, { HeadingType } from '@/shared/ui/Heading/Heading'
+import Subheading from '@/shared/ui/Subheading/Subheading'
+
+import styles from './AboutUsPage.module.scss'
+import { getAboutUsSelector } from './model/selectors/selectors'
+import { getAboutUs } from './model/services/getAboutUs'
+
+const AboutUsPage = () => {
+  const dispatch = useDispatch<AppDispatch>()
+  const aboutUs = useSelector(getAboutUsSelector)
+
+  useEffect(() => {
+    dispatch(getAboutUs())
+  }, [dispatch])
+
+  return (
+    <WrapperForMainContent>
+      {aboutUs?.map((item, index) => (
+        <Heading key={index} type={HeadingType.MAIN} className={styles.title}>
+          {item.headline}
+        </Heading>
+      ))}
+
+      <Subheading>
+        <Link to={'/'} className={styles.link}>
+          Главная
+        </Link>{' '}
+        / О нас
+      </Subheading>
+
+      {aboutUs?.map((item, index) => <AboutUs key={index} text={item.text} />)}
+    </WrapperForMainContent>
+  )
+}
+
+export default AboutUsPage

src/pages/AboutUsPage/model/selectors/selectors.ts

@@ -0,0 +1,5 @@
+import { StateSchema } from '@/app/providers/StoreProvider'
+
+export const getAboutUsSelector = (state: StateSchema) => {
+  return state.aboutUs.result
+}

src/pages/AboutUsPage/model/services/getAboutUs.tsx

@@ -0,0 +1,20 @@
+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 { IData } from '../types/types'
+
+export const getAboutUs = createAsyncThunk<IData[], void, ThunkConfig<ApiError>>(
+  'aboutUs/getAboutUs',
+  async (_, thunkAPI) => {
+    const { rejectWithValue, extra } = thunkAPI
+    try {
+      const { data } = await extra.api.get(`api/${ApiRoutes.ABOUTUS}`)
+      return data
+    } catch (error) {
+      return rejectWithValue(apiErrorIdentify(error, ApiErrorTypes.DATA_EMPTY_ERROR))
+    }
+  }
+)

src/pages/AboutUsPage/model/slice/aboutUsSlice.tsx

@@ -0,0 +1,35 @@
+import { createSlice } from '@reduxjs/toolkit'
+
+import { rejectedPayloadHandle } from '@/shared/api/rejectedPayloadHandle'
+
+import { getAboutUs } from '../services/getAboutUs'
+import { IAboutUsSchema } from '../types/types'
+
+const initialState: IAboutUsSchema = {
+  isLoading: false,
+  result: [],
+  error: null
+}
+
+export const aboutUsSlice = createSlice({
+  name: 'aboutUs',
+  initialState,
+  reducers: {},
+  extraReducers: builder => {
+    builder
+      .addCase(getAboutUs.pending, state => {
+        state.isLoading = true
+        state.error = null
+      })
+      .addCase(getAboutUs.fulfilled, (state, { payload }) => {
+        state.isLoading = false
+        state.result = payload
+      })
+      .addCase(getAboutUs.rejected, (state, { payload }) => {
+        state.isLoading = false
+        state.error = rejectedPayloadHandle(payload)
+      })
+  }
+})
+
+export const { actions: aboutUsActions, reducer: aboutUsReducer } = aboutUsSlice

src/pages/AboutUsPage/model/types/types.ts

@@ -0,0 +1,10 @@
+export interface IData {
+  headline?: string
+  text?: string
+}
+
+export interface IAboutUsSchema {
+  isLoading: boolean
+  result?: IData[]
+  error?: string | string[] | null
+}

src/shared/api/types.ts

@@ -1,4 +1,5 @@
 export enum ApiRoutes {
+  ABOUTUS = 'core/about',
   LOGIN = 'token/login',
   LOGOUT = 'token/logout',
   BRANDS = 'catalogue/brand',