Merge pull request #419 from Studio-Yandex-Practicum/enhancement-411-…

…create-ShopNewsPage

#411-enhancement-create-ShopNewsPage

src/app/router/AppRouter/ui/AppRouter.tsx

@@ -23,6 +23,7 @@ import { ProductsPage } from '@/pages/ProductsPage/ProductsPage'
 import { ReviewsPage } from '@/pages/ReviewsPage/ReviewsPage'
 import RootPage from '@/pages/RootPage/RootPage'
 import SearchResultsPage from '@/pages/SearchResultsPage/SearchResultsPage'
+import ShopNewsPage from '@/pages/ShopNewsPage/ShopNewsPage'
 import { TermsPage } from '@/pages/TermsPage/TermsPage'
 import VouchersPage from '@/pages/VouchersPage/VouchersPage'
 import { Routes } from '@/shared/config/routerConfig/routes'
@@ -150,6 +151,10 @@ export const AppRouter = createBrowserRouter([
       {
         path: Routes.ERROR,
         element: <ErrorPage />
+      },
+      {
+        path: Routes.SHOP_NEWS,
+        element: <ShopNewsPage />
       }
 
       /*       {

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

@@ -7,10 +7,11 @@
   flex-direction: column;
   gap: 15px;
   width: 100%;
+  max-width: 340px;
   overflow: hidden;
 
   @include media.respond-to('middle') {
-    width: 260px;
+    max-width: none;    
   }
 }
 
@@ -24,7 +25,7 @@
 
 .noImage {
   width: 100%;
-  max-width: 340px;
+  max-width: 260px;
   height: 180px;
   object-fit: cover;
   padding: 20px;

src/pages/ShopNewsPage/ShopNewsPage.module.scss

@@ -0,0 +1,9 @@
+.container {
+    display: flex;
+    flex-direction: column;
+    width: 100%
+}
+
+.title {
+    margin-bottom: 10px;
+}

src/pages/ShopNewsPage/ShopNewsPage.tsx

@@ -0,0 +1,27 @@
+import WrapperForMainContent from '@/components/WrapperForMainContent/WrapperForMainContent'
+import Breadcrumbs from '@/shared/ui/Breadcrumbs/Breadcrumbs'
+import Heading, { HeadingType } from '@/shared/ui/Heading/Heading'
+import ShopNewsWidget from '@/widgets/NewsBlock/ui/ShopNewsWidget/ShopNewsWidget'
+
+import styles from './ShopNewsPage.module.scss'
+
+const links = [
+  { heading: 'Главная', href: '/' },
+  { heading: 'Новости', href: '' }
+]
+
+const ShopNewsPage = () => {
+  return (
+    <WrapperForMainContent>
+      <section className={styles.container}>
+        <Heading type={HeadingType.MAIN} className={styles.title}>
+          Новости
+        </Heading>
+        <Breadcrumbs links={links} />
+        <ShopNewsWidget />
+      </section>
+    </WrapperForMainContent>
+  )
+}
+
+export default ShopNewsPage

src/shared/config/routerConfig/routes.ts

@@ -30,5 +30,6 @@ export enum Routes {
   FORGOT_PASSWORD = '/forgot-password',
   REGISTRATION = '/registration',
   SUBSCRIBE = '/subscribe',
-  ERROR = '*'
+  ERROR = '*',
+  SHOP_NEWS = '/shopnews'
 }

src/widgets/NewsBlock/ui/ShopNewsWidget/ShopNewsWidget.module.scss

@@ -0,0 +1,23 @@
+@use '@/shared/styles/utils/mixins' as media;
+
+.storybook {
+    width: 1080px;
+  }
+
+.container {
+    display: flex;
+    margin-top: 40px;    
+}
+
+.list {
+    display: flex;
+    flex-wrap: wrap;
+    column-gap: 20px;
+    row-gap: 30px;    
+}
+
+.item {
+    @include media.respond-to('middle') {
+        width: 100%    
+      }
+}

src/widgets/NewsBlock/ui/ShopNewsWidget/ShopNewsWidget.stories.tsx

@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { FC } from 'react'
+
+import ShopNewsWidget from './ShopNewsWidget'
+import styles from './ShopNewsWidget.module.scss'
+
+const StorybookWrapper: FC = () => {
+  return (
+    <div className={styles.storybook}>
+      <ShopNewsWidget />
+    </div>
+  )
+}
+
+const meta = {
+  title: 'widgets/ShopNewsWidget',
+  component: StorybookWrapper,
+  parameters: {
+    layout: 'centered'
+  },
+  tags: ['autodocs']
+} satisfies Meta<typeof StorybookWrapper>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {}

src/widgets/NewsBlock/ui/ShopNewsWidget/ShopNewsWidget.tsx

@@ -0,0 +1,42 @@
+import { FC, useEffect } from 'react'
+
+import NewsCard from '@/entities/NewsCard'
+import { useAppDispatch } from '@/shared/libs/hooks/store'
+
+import useNewsArray from '../../model/hooks/useNewsArray'
+import { getShopNews } from '../../model/services/getShopNews'
+
+import styles from './ShopNewsWidget.module.scss'
+
+/**
+ * Компонент ShopNewsWidget - это блок группы новостей. Отрисовывается на главной странице ShopNewsPage
+ */
+
+const ShopNewsWidget: FC = () => {
+  const dispatch = useAppDispatch()
+  const { allNewsArray } = useNewsArray()
+
+  useEffect(() => {
+    dispatch(getShopNews())
+  }, [])
+
+  return (
+    <section className={styles.container}>
+      <ul className={styles.list}>
+        {allNewsArray.map(item => (
+          <li key={item.id} className={styles.item}>
+            <NewsCard
+              id={item.id}
+              image={item.image}
+              date={item.pub_date}
+              title={item.title}
+              link={item.slug}
+            />
+          </li>
+        ))}
+      </ul>
+    </section>
+  )
+}
+
+export default ShopNewsWidget