Merge pull request #432 from Studio-Yandex-Practicum/enhancement_426_…

…main_page_news

enhancement_426_main_page_news

src/entities/NewsCard/index.tsx

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

src/entities/NewsCard/ui/NewsCard.module.scss

@@ -0,0 +1,58 @@
+@use '@/shared/styles/utils/variables' as var;
+@use '@/shared/styles/utils/mixins' as media;
+
+.newsCard {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+  width: 100%;
+  overflow: hidden;
+
+  @include media.respond-to('middle') {
+    width: 260px;
+  }
+}
+
+.image {
+  width: 100%;
+  height: 180px;
+  border-radius: 10px;
+  object-fit: cover;
+  transition: 0.5s;
+}
+
+.noImage {
+  width: 100%;
+  max-width: 340px;
+  height: 180px;
+  object-fit: cover;
+  padding: 20px;
+}
+
+.heading {
+  line-height: 22px;
+  font-size: 16px;
+  font-weight: 500;
+  transition: 0.5s;
+}
+
+.promo {
+  position: absolute;
+  top: 15px;
+  left: 15px;
+  background: var.$promo-color;
+  border-radius: 5px;
+  padding: 5px 10px;
+  color: var.$white;
+  font-size: 15px;
+  font-weight: 700;
+}
+
+.newsCard:hover .heading {
+  color: var.$link-color;
+}
+
+.newsCard:hover .image {
+  transform: scale(1, 1.1);
+}

src/entities/NewsCard/ui/NewsCard.stories.tsx

@@ -0,0 +1,35 @@
+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 = () => {
+  const image = 'https://gealit.ru/media/news/img-gallery-04-750x500.webp'
+  const date = '2022-05-15'
+  const title = 'Покупай и не жди. До -50% на весь электротранспорт!'
+
+  return (
+    <div style={{ width: '340px' }}>
+      <NewsCard id={1} image={image} date={date} title={title} link="#" />
+    </div>
+  )
+}
+
+Default.args = {
+  id: 1,
+  image: 'http://gealit.ru/media/news/18.png',
+  date: '2022-05-15',
+  title: 'Покупай и не жди. До -50% на весь электротранспорт!',
+  link: '#'
+}

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

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

src/widgets/NewsBlock/ui/NewsBlock.tsx

@@ -1,54 +1,72 @@
 import { FC, useEffect } from 'react'
-import { useSelector } from 'react-redux'
 
-import IconLink from '@/assets/icons/IconLink'
-import NewsCard from '@/entities/NewsCard/NewsCard'
+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 { useAppDispatch } from '@/shared/libs/hooks/store'
-import Heading, { HeadingType } from '@/shared/ui/Heading/Heading'
-import Link from '@/shared/ui/Link/Link'
+import { useResize } from '@/shared/libs/hooks/useResize'
 import Scroll from '@/shared/ui/Scroll/Scroll'
 
-import { getShopNewsSelector } from '../model/selectors/selectors'
+import useNewsArray from '../model/hooks/useNewsArray'
 import { getShopNews } from '../model/services/getShopNews'
-import { ShopNewsData } from '../model/types/types'
-import NewsBlockSkeleton from '../NewsBlockSkeleton/NewsBlockSkeleton'
+// import NewsBlockSkeleton from '../NewsBlockSkeleton/NewsBlockSkeleton'
 
 import styles from './NewsBlock.module.scss'
 
 /**
- * Блок группы новостей
+ * Компонент NewsBlock - это блок группы новостей. Отрисовывается на главной странице MainPage
  */
+
 const NewsBlock: FC = () => {
   const dispatch = useAppDispatch()
-  const news: ShopNewsData[] = useSelector(getShopNewsSelector)
+
+  const { isScreenLg, isScreenMd } = useResize()
+  const { threeNewsArray, fourNewsArray, mobileNewsArray, allNewsArray } = useNewsArray()
+
+  const desktopNewsArray = isScreenLg ? fourNewsArray : threeNewsArray
 
   useEffect(() => {
     dispatch(getShopNews())
   }, [])
 
   return (
-    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 => (
+    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}>
+            {/* TODO Переделать скелетон правильно, на основе стейта редакса isLoading */}
+            {/* Array.from({ length: 4 }).map((_, index) => <NewsBlockSkeleton key={index} />) */}
+            {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}>
                 <NewsCard
-                  key={item.id}
                   id={item.id}
                   image={item.image}
                   date={item.pub_date}
                   title={item.title}
+                  link={item.slug}
                 />
-              ))}
-        </Scroll>
+              </li>
+            ))}
+            <LinkButton link={Routes.NEWS} text={LINK_NEWS_ALL} />
+          </Scroll>
+        )}
       </section>
     )
   )