#210-api-inserted-to-StoriesBlock

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

@@ -7,6 +7,7 @@ import { ShopNewsSchema } from '@/widgets/NewsBlock/model/types/types'
 import { StoreReviewsSchema } from '@/widgets/ReviewsBlock/model/types/types'
 import { IBlogPostsSchema } from '@/widgets/BlogBlock/model/types/types'
 import { CoreBaseFooterSchema } from '@/widgets/Footer/model/types/types'
+import { IStoriesSchema } from '@/widgets/StoriesBlock/model/types/types'
 import { CoreBaseHeaderSchema } from '@/widgets/Header/model/types/types'
 import { TProductSchema } from '@/pages/ProductPage/model/types/productTypes'
 
@@ -19,6 +20,7 @@ export interface StateSchema {
   brand: BrandSchema
   searchResult: SearchResultSchema
   shopNews: ShopNewsSchema
+  stories: IStoriesSchema
   blogPosts: IBlogPostsSchema
   product: TProductSchema
 }

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

@@ -1,5 +1,4 @@
 import { configureStore, ReducersMapObject } from '@reduxjs/toolkit'
-
 import { loginReducer } from '@/features/login/model/slice/loginSlice'
 import { $api } from '@/shared/api/api'
 import categorySlice from '@/entities/Category/slice/categorySlice'
@@ -8,9 +7,9 @@ import searchProductSlice from '@/features/SearchProduct/slice/searchProductSlic
 import { storeReviewsReducer } from '@/widgets/ReviewsBlock/model/slice/reviewsSlice'
 import footerSlice from '@/widgets/Footer/model/slice/footerSlice'
 import { shopNewsReducer } from '@/widgets/NewsBlock/model/slice/shopNewsSlice'
+import { storiesReducer } from '@/widgets/StoriesBlock/model/slice/storiesSlice'
 import { blogPostsReducer } from '@/widgets/BlogBlock/model/slice/blogPostsSlice'
 import headerSlice from '@/widgets/Header/model/slice/headerSlice'
-
 import { StateSchema, ThunkExtraArg } from './StateSchema'
 import { productSliceReducer } from '@/pages/ProductPage/model/slice/productSlice'
 
@@ -25,8 +24,10 @@ const rootReducer: ReducersMapObject<RootState> = {
   searchResult: searchProductSlice,
   storeReviews: storeReviewsReducer,
   shopNews: shopNewsReducer,
+  stories: storiesReducer,
   blogPosts: blogPostsReducer,
   product: productSliceReducer
+
 }
 
 export function createReduxStore(initialState: RootState) {

src/entities/BlogCard/BlogCard.module.scss

@@ -1,8 +1,7 @@
 @use '@/app/styles/index' as var;
 
 .card {
-  max-width: 340px;
-  min-width: 340px;
+  width: 340px; 
   position: relative;
   transition: transform 0.3s ease-in-out;
   display: flex;

src/entities/NewsCard/NewsCard.module.scss

@@ -1,8 +1,7 @@
 @use '@/app/styles/index' as var;
 
 .card {
-  max-width: 340px;
-  min-width: 340px;
+  width: 340px;
   position: relative;
   transition: transform 0.3s ease-in-out;
   display: flex;

src/entities/StoryCard/StoryCard.module.scss

@@ -1,6 +1,8 @@
 @use '@/app/styles/index' as var;
 
-.card {
+
+.card {  
+  width: 160px; 
   position: relative;
   transition: transform 0.3s ease-in-out;
   display: flex;
@@ -13,9 +15,14 @@
     transition: transform 0.3s ease-in-out;
   }
 
-  img {
+
+  .img {
+    height: 240px;    
+    width: 100%; 
     border-radius: 6px;
     transition: transform 0.3s ease-in-out;
     scroll-snap-align: start;
+    object-fit: cover;    
   }
 }
+

src/entities/StoryCard/StoryCard.stories.tsx

@@ -18,10 +18,7 @@ type Story = StoryObj<typeof meta>
 
 export const Default: Story = {
   args: {
-    card: {
-      id: 1,
-      src: Img1,
-      alt: 'Stock image'
-    }
+    pictures: [Img1],
+    link: 'https://gealit.ru/api/catalogue/3w-clinic--krem-dlya-glaz-s-ekstraktom-chernogo-zhemchuga-black-pearl-eye-cream-whitening-40-ml-410158271/'
   }
 }

src/entities/StoryCard/StoryCard.tsx

@@ -1,23 +1,29 @@
 import { FC } from 'react'
 
-import { TCard } from '@/models/CardModel'
+import NoImage from '@/assets/icons/image-not-found-icon.svg'
 import Link from '@/shared/ui/Link/Link'
 
 import styles from './StoryCard.module.scss'
 
-export type Props = {
-  card: TCard
+type TProps = {
+  link: string
+  pictures: string[]
 }
 
 /**
  * Карточка из блока группы историй
- * @param {TCard} card - параметры карточки из группы историй
+ * @param {string} link - ссылка, которая будет, вероятно, вести на страницу истории
+ * @param {string[]} pictures - массив картинок, относящийся к одной story
  */
 
-const StoryCard: FC<Props> = ({ card }) => {
+const StoryCard: FC<TProps> = ({ link, pictures }) => {
   return (
-    <Link to={''} className={styles.card}>
-      <img src={card.src} alt={card.alt} draggable="false" />
+    <Link to={link} className={styles.card}>
+      {pictures[0] ? (
+        <img src={pictures[0]} alt={'новость'} draggable="false" className={styles.img} />
+      ) : (
+        <NoImage className={styles.img} />
+      )}
     </Link>
   )
 }

src/shared/api/types.ts

@@ -8,7 +8,9 @@ export enum ApiRoutes {
   SHOP_NEWS = 'shopnews',
   BLOG_POSTS = 'shopblog/posts',
   CORE_BASE = 'core/base',
+  STORIES = 'stories',
   PRODUCT = 'catalogue'
+
 }
 
 export enum ApiErrorTypes {

src/widgets/BlogBlock/ui/BlogBlock.module.scss

@@ -38,7 +38,7 @@
     width: 1.25rem;
     height: 0.5625rem;
     margin-left: 0.5rem;
-    vertical-align: middle;
+    vertical-align: middle;   
   }
 
   ul {

src/widgets/NewsBlock/model/slice/shopNewsSlice.ts

@@ -1,5 +1,6 @@
 import { createSlice } from '@reduxjs/toolkit'
 
+import { rejectedPayloadHandle } from '@/shared/api/rejectedPayloadHandle'
 import { REDUCER_SHOP_NEWS } from '@/shared/constants/constants'
 
 import { getShopNews } from '../services/getShopNews'
@@ -23,8 +24,9 @@ export const shopNewsSlice = createSlice({
         state.isLoading = false
         state.news = payload
       })
-      .addCase(getShopNews.rejected, state => {
+      .addCase(getShopNews.rejected, (state, { payload }) => {
         state.isLoading = false
+        state.error = rejectedPayloadHandle(payload)
       })
   }
 })

src/widgets/NewsBlock/model/types/types.ts

@@ -19,4 +19,5 @@ export interface ShopNewsData {
 export interface ShopNewsSchema {
   isLoading: boolean
   news: ShopNewsData[]
+  error?: string | string[]
 }

src/widgets/ReviewsBlock/model/slice/reviewsSlice.ts

@@ -1,5 +1,7 @@
 import { createSlice } from '@reduxjs/toolkit'
 
+import { rejectedPayloadHandle } from '@/shared/api/rejectedPayloadHandle'
+
 import { getStoreReviews } from '../services/getStoreReviews'
 import { StoreReviewsSchema } from '../types/types'
 
@@ -25,8 +27,9 @@ export const reviewsSlice = createSlice({
         state.reviews = payload
         //state.reviews = payload.test2 // StoreeviewsData с сервера переклыдвается в StoreReviewsSchema (наше Redux хранилище)
       })
-      .addCase(getStoreReviews.rejected, state => {
+      .addCase(getStoreReviews.rejected, (state, { payload }) => {
         state.isLoading = false
+        state.error = rejectedPayloadHandle(payload)
       })
   }
 })

src/widgets/ReviewsBlock/model/types/types.ts

@@ -26,4 +26,5 @@ export interface StoreReviewReplay {
 export interface StoreReviewsSchema {
   isLoading: boolean
   reviews: StoreReviewData[]
+  error?: string | string[]
 }

src/widgets/StoriesBlock/model/selectors/selectors.ts

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

src/widgets/StoriesBlock/model/services/getStories.ts

@@ -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 { IStoriesData } from '../types/types'
+
+export const getStories = createAsyncThunk<IStoriesData[], void, ThunkConfig<ApiError>>(
+  'stories',
+  async (_, thunkAPI) => {
+    const { rejectWithValue, extra } = thunkAPI
+    try {
+      const { data } = await extra.api.get(ApiRoutes.STORIES)
+      return data.results
+    } catch (error) {
+      return rejectWithValue(apiErrorIdentify(error, ApiErrorTypes.DATA_EMPTY_ERROR))
+    }
+  }
+)

src/widgets/StoriesBlock/model/slice/storiesSlice.ts

@@ -0,0 +1,33 @@
+import { createSlice } from '@reduxjs/toolkit'
+
+import { rejectedPayloadHandle } from '@/shared/api/rejectedPayloadHandle'
+
+import { getStories } from '../services/getStories'
+import { IStoriesSchema } from '../types/types'
+
+const initialState: IStoriesSchema = {
+  isLoading: false,
+  stories: []
+}
+
+export const storiesSlice = createSlice({
+  name: 'stories',
+  initialState,
+  reducers: {},
+  extraReducers: builder => {
+    builder
+      .addCase(getStories.pending, state => {
+        state.isLoading = true
+      })
+      .addCase(getStories.fulfilled, (state, { payload }) => {
+        state.isLoading = false
+        state.stories = payload
+      })
+      .addCase(getStories.rejected, (state, { payload }) => {
+        state.isLoading = false
+        state.error = rejectedPayloadHandle(payload)
+      })
+  }
+})
+
+export const { actions: storiesActions, reducer: storiesReducer } = storiesSlice

src/widgets/StoriesBlock/model/types/types.ts

@@ -0,0 +1,22 @@
+export interface IPaginatedResponse<T> {
+  count: number
+  previous: string
+  next: string
+  results: T[]
+}
+export interface IStoriesPicturesData {
+  image: string
+}
+
+export interface IStoriesData {
+  id: number
+  name: string
+  link: string
+  pictures: IStoriesPicturesData[]
+}
+
+export interface IStoriesSchema {
+  isLoading: boolean
+  stories: IStoriesData[]
+  error?: string | string[]
+}

src/widgets/StoriesBlock/ui/StoriesBlock.tsx

@@ -1,24 +1,35 @@
-import { FC } from 'react'
+import { FC, useEffect } from 'react'
+import { useSelector } from 'react-redux'
 
 import StoryCard from '@/entities/StoryCard/StoryCard'
-import { storiesData } from '@/mockData/storiesData'
+import { useAppDispatch } from '@/shared/libs/hooks/store'
 import Heading, { HeadingType } from '@/shared/ui/Heading/Heading'
 import Scroll from '@/shared/ui/Scroll/Scroll'
 
+import { getStoriesSelector } from '../model/selectors/selectors'
+import { getStories } from '../model/services/getStories'
+
 import styles from './StoriesBlock.module.scss'
 
 /**
  * Блок группы историй
  */
 const StoriesBlock: FC = () => {
+  const dispatch = useAppDispatch()
+  const stories = useSelector(getStoriesSelector)
+
+  useEffect(() => {
+    dispatch(getStories())
+  }, [])
+
   return (
     <section className={styles.wrapper}>
       <article>
         <Heading type={HeadingType.NORMAL}>Истории</Heading>
       </article>
       <Scroll>
-        {storiesData.map(item => (
-          <StoryCard key={item.id} card={item} />
+        {stories.map(item => (
+          <StoryCard key={item.id} link={item.link} pictures={item.pictures.map(item => item.image)} />
         ))}
       </Scroll>
     </section>