From 4607ad0629f779a96217b52854e0751ca27a9162 Mon Sep 17 00:00:00 2001
From: Alexander Morugin <nobilis@bk.ru>
Date: Sat, 22 Jun 2024 16:49:42 +0300
Subject: [PATCH] enhancement_426_main_page_news

---
 src/entities/NewsCard/NewsCard.module.scss    | 51 --------------
 src/entities/NewsCard/NewsCard.stories.tsx    | 24 -------
 src/entities/NewsCard/index.tsx               |  2 +-
 src/entities/NewsCard/ui/NewsCard.module.scss | 58 +++++++++++++++
 src/entities/NewsCard/ui/NewsCard.stories.tsx | 35 ++++++++++
 src/entities/NewsCard/{ => ui}/NewsCard.tsx   | 23 +++---
 src/widgets/NewsBlock/ui/NewsBlock.tsx        | 70 ++++++++++++-------
 7 files changed, 152 insertions(+), 111 deletions(-)
 delete mode 100644 src/entities/NewsCard/NewsCard.module.scss
 delete mode 100644 src/entities/NewsCard/NewsCard.stories.tsx
 create mode 100644 src/entities/NewsCard/ui/NewsCard.module.scss
 create mode 100644 src/entities/NewsCard/ui/NewsCard.stories.tsx
 rename src/entities/NewsCard/{ => ui}/NewsCard.tsx (52%)

diff --git a/src/entities/NewsCard/NewsCard.module.scss b/src/entities/NewsCard/NewsCard.module.scss
deleted file mode 100644
index aafa7f3a..00000000
--- a/src/entities/NewsCard/NewsCard.module.scss
+++ /dev/null
@@ -1,51 +0,0 @@
-@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;
-  }
-}
\ No newline at end of file
diff --git a/src/entities/NewsCard/NewsCard.stories.tsx b/src/entities/NewsCard/NewsCard.stories.tsx
deleted file mode 100644
index 11fd6025..00000000
--- a/src/entities/NewsCard/NewsCard.stories.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-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'
-  }
-}
diff --git a/src/entities/NewsCard/index.tsx b/src/entities/NewsCard/index.tsx
index 06a6bda9..335594fb 100644
--- a/src/entities/NewsCard/index.tsx
+++ b/src/entities/NewsCard/index.tsx
@@ -1,2 +1,2 @@
-import NewsCard from './NewsCard'
+import NewsCard from './ui/NewsCard'
 export default NewsCard
diff --git a/src/entities/NewsCard/ui/NewsCard.module.scss b/src/entities/NewsCard/ui/NewsCard.module.scss
new file mode 100644
index 00000000..f128379b
--- /dev/null
+++ b/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);
+}
diff --git a/src/entities/NewsCard/ui/NewsCard.stories.tsx b/src/entities/NewsCard/ui/NewsCard.stories.tsx
new file mode 100644
index 00000000..7e22ea8c
--- /dev/null
+++ b/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: '#'
+}
diff --git a/src/entities/NewsCard/NewsCard.tsx b/src/entities/NewsCard/ui/NewsCard.tsx
similarity index 52%
rename from src/entities/NewsCard/NewsCard.tsx
rename to src/entities/NewsCard/ui/NewsCard.tsx
index bc5385cb..12791d3c 100644
--- a/src/entities/NewsCard/NewsCard.tsx
+++ b/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>
   )
 }
diff --git a/src/widgets/NewsBlock/ui/NewsBlock.tsx b/src/widgets/NewsBlock/ui/NewsBlock.tsx
index 6667b5ae..c6d654b8 100644
--- a/src/widgets/NewsBlock/ui/NewsBlock.tsx
+++ b/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>
     )
   )