diff --git a/src/app/providers/StoreProvider/config/StateSchema.ts b/src/app/providers/StoreProvider/config/StateSchema.ts index d945b59f..e06ea1da 100644 --- a/src/app/providers/StoreProvider/config/StateSchema.ts +++ b/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 diff --git a/src/app/providers/StoreProvider/config/store.ts b/src/app/providers/StoreProvider/config/store.ts index ef6f630a..3ff1fbe2 100644 --- a/src/app/providers/StoreProvider/config/store.ts +++ b/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 = { + aboutUs: aboutUsReducer, login: loginReducer, category: categorySlice, coreBaseHeader: headerSlice, diff --git a/src/app/router/AppRouter/ui/AppRouter.tsx b/src/app/router/AppRouter/ui/AppRouter.tsx index 884fb898..5de57156 100644 --- a/src/app/router/AppRouter/ui/AppRouter.tsx +++ b/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: // временная заглушка нужна страница about_us + element: }, { path: Routes.BLOG, diff --git a/src/entities/AboutUs/model/types/types.ts b/src/entities/AboutUs/model/types/types.ts new file mode 100644 index 00000000..e651eeae --- /dev/null +++ b/src/entities/AboutUs/model/types/types.ts @@ -0,0 +1,3 @@ +export interface IAboutUs { + text?: string +} diff --git a/src/entities/AboutUs/ui/AboutUs.module.scss b/src/entities/AboutUs/ui/AboutUs.module.scss index fea1098f..6ffa0ae5 100644 --- a/src/entities/AboutUs/ui/AboutUs.module.scss +++ b/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; } diff --git a/src/entities/AboutUs/ui/AboutUs.tsx b/src/entities/AboutUs/ui/AboutUs.tsx index 2c2fb09a..4e29673b 100644 --- a/src/entities/AboutUs/ui/AboutUs.tsx +++ b/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' /** * Карточка из блока "О нас" diff --git a/src/pages/AboutUsPage/AboutUsPage.module.scss b/src/pages/AboutUsPage/AboutUsPage.module.scss new file mode 100644 index 00000000..eda7fbae --- /dev/null +++ b/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; + } +} diff --git a/src/pages/AboutUsPage/AboutUsPage.tsx b/src/pages/AboutUsPage/AboutUsPage.tsx new file mode 100644 index 00000000..2d705e10 --- /dev/null +++ b/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() + const aboutUs = useSelector(getAboutUsSelector) + + useEffect(() => { + dispatch(getAboutUs()) + }, [dispatch]) + + return ( + + {aboutUs?.map((item, index) => ( + + {item.headline} + + ))} + + + + Главная + {' '} + / О нас + + + {aboutUs?.map((item, index) => )} + + ) +} + +export default AboutUsPage diff --git a/src/pages/AboutUsPage/model/selectors/selectors.ts b/src/pages/AboutUsPage/model/selectors/selectors.ts new file mode 100644 index 00000000..44475771 --- /dev/null +++ b/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 +} diff --git a/src/pages/AboutUsPage/model/services/getAboutUs.tsx b/src/pages/AboutUsPage/model/services/getAboutUs.tsx new file mode 100644 index 00000000..c9a30ece --- /dev/null +++ b/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>( + '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)) + } + } +) diff --git a/src/pages/AboutUsPage/model/slice/aboutUsSlice.tsx b/src/pages/AboutUsPage/model/slice/aboutUsSlice.tsx new file mode 100644 index 00000000..a053b143 --- /dev/null +++ b/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 diff --git a/src/pages/AboutUsPage/model/types/types.ts b/src/pages/AboutUsPage/model/types/types.ts new file mode 100644 index 00000000..a321c4c9 --- /dev/null +++ b/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 +} diff --git a/src/shared/api/types.ts b/src/shared/api/types.ts index 278b957f..33984230 100644 --- a/src/shared/api/types.ts +++ b/src/shared/api/types.ts @@ -1,4 +1,5 @@ export enum ApiRoutes { + ABOUTUS = 'core/about', LOGIN = 'token/login', LOGOUT = 'token/logout', BRANDS = 'catalogue/brand',