Merge pull request #394 from Studio-Yandex-Practicum/enhancement-309-…

…main-skeleton

skeletonNewsBlock

src/entities/NewsCard/NewsCard.module.scss

@@ -0,0 +1,51 @@
+@use '@/app/styles/index' as var;
+
+.card {
+  width: 340px;
+  position: relative;
+  transition: transform 0.3s ease-in-out;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  gap: 15px;
+
+  &:hover {
+    transform: scale(1.1, 1.05);
+    transition: transform 0.3s ease-in-out;
+  }
+
+  .heading {
+    font-size: #{'min(max(14px, 1.2vw), 16px)'};
+  }
+
+  &:hover .heading {
+    color: var.$link-color;
+  }
+
+  span {
+    color: var.$body-color-light-grey;
+  }
+
+  .promo {
+    display: inline-block;
+    position: absolute;
+    top: 15px;
+    left: 15px;
+    background: var.$promo-color;
+    border-radius: 5px;
+    padding: 5px 10px;
+    color: var.$white;
+    font-size: 15px;
+    line-height: 120%;
+    font-weight: 500;
+  }
+
+  .img {
+    height: 180px;
+    width: 100%;
+    border-radius: 6px;
+    transition: transform 0.3s ease-in-out;
+    scroll-snap-align: start;
+    object-fit: cover;
+  }
+}

src/entities/NewsCard/NewsCard.stories.tsx

@@ -0,0 +1,24 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import NewsCard from './NewsCard'
+
+const meta = {
+  title: 'entities/NewsCard',
+  component: NewsCard,
+  parameters: {
+    layout: 'centered'
+  },
+  tags: ['autodocs']
+} satisfies Meta<typeof NewsCard>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    id: 1,
+    image: 'http://gealit.ru/media/news/18.png',
+    title: 'Покупай и не жди. До -50% на весь электротранспорт!',
+    date: '2022-05-15'
+  }
+}

src/entities/NewsCard/ui/NewsCard.tsx → src/entities/NewsCard/NewsCard.tsx

@@ -1,10 +1,8 @@
 import { FC, useMemo } from 'react'
 
 import NoImage from '@/assets/icons/image-not-found-icon.svg'
-import { TEXT_PROMO } from '@/shared/constants/constants'
 import Heading, { HeadingType } from '@/shared/ui/Heading/Heading'
 import Link from '@/shared/ui/Link/Link'
-import Subheading from '@/shared/ui/Subheading/Subheading'
 
 import styles from './NewsCard.module.scss'
 
@@ -13,18 +11,14 @@ type Props = {
   image: string
   date: string
   title: string
-  link: string
 }
 
 /**
- * Компонент NewsCard - это карточка из блока группы новостей NewsBlock
- * @param {string} image - картинка
- * @param {string} date - дата
- * @param {string} title - заголовок
- * @param {string} link - ссылка
+ * Карточка из блока группы новостей
+ * @param {Props} card - параметры карточки из группы новостей
  */
 
-const NewsCard: FC<Props> = ({ image, date, title, link }) => {
+const NewsCard: FC<Props> = ({ image, date, title }) => {
   const newDate = useMemo(() => {
     const _parsedDate = new Date(date)
     const year = _parsedDate.getFullYear()
@@ -34,17 +28,18 @@ const NewsCard: FC<Props> = ({ image, date, title, link }) => {
   }, [date])
 
   return (
-    <Link to={link} className={styles.newsCard}>
+    <Link to={''} className={styles.card}>
       {image ? (
-        <img src={image} alt={'новость'} className={styles.image} />
+        <img src={image} alt={'новость'} draggable="false" className={styles.img} />
       ) : (
-        <NoImage className={styles.noImage} />
+        <NoImage className={styles.img} />
       )}
       <Heading type={HeadingType.NORMAL} className={styles.heading}>
         {title}
       </Heading>
-      <Subheading>{newDate}</Subheading>
-      <div className={styles.promo}>{TEXT_PROMO}</div>
+      <span>{newDate}</span>
+      {/* TODO */}
+      {/* {promo ? <span className={styles.promo}>{TEXT_PROMO}</span> : null} */}
     </Link>
   )
 }

src/entities/NewsCard/index.tsx

@@ -1,2 +1,2 @@
-import NewsCard from './ui/NewsCard'
+import NewsCard from './NewsCard'
 export default NewsCard

src/widgets/NewsBlock/NewsBlockSkeleton/NewsBlockSkeleton.module.scss

@@ -0,0 +1,19 @@
+.skeletonNewsCard {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+    background-color: #f0f0f0;
+    border-radius: 8px;
+    overflow: hidden;
+    margin-bottom: 16px;
+  }
+
+  .content {
+    padding: 16px;
+  }
+
+  .content > div {
+    margin-bottom: 8px;
+  }
+

src/widgets/NewsBlock/NewsBlockSkeleton/NewsBlockSkeleton.tsx

@@ -0,0 +1,19 @@
+import { FC } from 'react'
+import Skeleton from 'react-loading-skeleton'
+import 'react-loading-skeleton/dist/skeleton.css'
+
+import styles from './NewsBlockSkeleton.module.scss'
+
+const NewsBlockSkeleton: FC = () => {
+  return (
+    <div className={styles.skeletonNewsCard}>
+      <Skeleton height={180} />
+      <div className={styles.content}>
+        <Skeleton width={`60%`} />
+        <Skeleton width={`80%`} />
+      </div>
+    </div>
+  )
+}
+
+export default NewsBlockSkeleton

src/widgets/NewsBlock/ui/NewsBlock.tsx

@@ -1,69 +1,54 @@
 import { FC, useEffect } from 'react'
+import { useSelector } from 'react-redux'
 
-import HeadingBlock from '@/entities/HeadingBlock'
-import LinkButton from '@/entities/LinkButton'
-import NewsCard from '@/entities/NewsCard'
-import { Routes } from '@/shared/config/routerConfig/routes'
-import { LINK_NEWS_ALL, TEXT_NEWS } from '@/shared/constants/constants'
+import IconLink from '@/assets/icons/IconLink'
+import NewsCard from '@/entities/NewsCard/NewsCard'
 import { useAppDispatch } from '@/shared/libs/hooks/store'
-import { useResize } from '@/shared/libs/hooks/useResize'
+import Heading, { HeadingType } from '@/shared/ui/Heading/Heading'
+import Link from '@/shared/ui/Link/Link'
 import Scroll from '@/shared/ui/Scroll/Scroll'
 
-import useNewsArray from '../model/hooks/useNewsArray'
+import { getShopNewsSelector } from '../model/selectors/selectors'
 import { getShopNews } from '../model/services/getShopNews'
+import { ShopNewsData } from '../model/types/types'
+import NewsBlockSkeleton from '../NewsBlockSkeleton/NewsBlockSkeleton'
 
 import styles from './NewsBlock.module.scss'
 
 /**
- * Компонент NewsBlock - это блок группы новостей. Отрисовывается на главной странице MainPage
+ * Блок группы новостей
  */
-
 const NewsBlock: FC = () => {
   const dispatch = useAppDispatch()
-
-  const { isScreenLg, isScreenMd } = useResize()
-  const { threeNewsArray, fourNewsArray, mobileNewsArray, allNewsArray } = useNewsArray()
-
-  const desktopNewsArray = isScreenLg ? fourNewsArray : threeNewsArray
+  const news: ShopNewsData[] = useSelector(getShopNewsSelector)
 
   useEffect(() => {
     dispatch(getShopNews())
   }, [])
 
   return (
-    allNewsArray?.length !== 0 && (
-      <section className={styles.newsBlock}>
-        <HeadingBlock title={TEXT_NEWS} isLink={true} subtitle={LINK_NEWS_ALL} link={Routes.NEWS} />
-        {isScreenMd ? (
-          <ul className={styles.grid}>
-            {desktopNewsArray.map(item => (
-              <li key={item.id}>
-                <NewsCard
-                  id={item.id}
-                  image={item.image}
-                  date={item.pub_date}
-                  title={item.title}
-                  link={item.slug}
-                />
-              </li>
-            ))}
-          </ul>
-        ) : (
-          <Scroll withManualGrip={true}>
-            {mobileNewsArray.map(item => (
-              <li key={item.id}>
+    news.length != 0 && (
+      <section className={styles.wrapper}>
+        <article>
+          <Heading type={HeadingType.NORMAL}>Новости</Heading>
+          <Link to={'#'} className={styles.link}>
+            Все новости
+            <IconLink styles={styles.svg}></IconLink>
+          </Link>
+        </article>
+        <Scroll>
+          {news.length === 0
+            ? Array.from({ length: 5 }).map((_, index) => <NewsBlockSkeleton key={index} />)
+            : news.map(item => (
                 <NewsCard
+                  key={item.id}
                   id={item.id}
                   image={item.image}
                   date={item.pub_date}
                   title={item.title}
-                  link={item.slug}
                 />
-              </li>
-            ))}
-            <LinkButton link={Routes.NEWS} text={LINK_NEWS_ALL} />
-          </Scroll>
-        )}
+              ))}
+        </Scroll>
       </section>
     )
   )

src/widgets/StoriesBlock/StoriesBlockSkeleton/StoriesBlockSkeleton.module.scss

@@ -0,0 +1,13 @@
+.skeletonNewsCard {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    width: 160px;
+    height: 100%;
+    background-color: #f0f0f0;
+    border-radius: 8px;
+    overflow: hidden;
+    margin:0;
+  }
+
+