Enhancement 139 blog fsd

src/components/BlogMain/BlogMain.tsx

@@ -1,37 +1,23 @@
 import { FC, useState } from 'react'
-import BlogItemForContainer from '../BlogItemForContainer/BlogItemForContainer'
+import BlogItemForContainer from '@/entities/BlogItemForContainer/BlogItemForContainer'
 import type { PropsBlog } from '@/models/PropsBlog'
-import BlogTags from '../BlogTags/BlogTags'
-import BlogCategories from '../BlogCategories/BlogCategories'
+import BlogTags from '@/entities/BlogTags/BlogTags'
+import BlogCategories from '@/entities/BlogCategories/BlogCategories'
 import WrapperForMainContent from '../WrapperForMainContent/WrapperForMainContent'
-import BlogMainItem from '../BlogMainItem/BlogMainItem'
+import BlogMainItem from '@/entities/BlogMainItem/BlogMainItem'
 import { Pagination } from '../Pagination/Pagination'
 import Heading from '@/shared/ui/Heading/Heading'
 import Subheading from '@/shared/ui/Subheading/Subheading'
 import styles from './blog-main.module.scss'
+/*import { TBlogItem } from '@/models/BlogItemModel'*/
 
 const BlogMain: FC<PropsBlog> = props => {
   const { cards } = props
   const [items, setItems] = useState(cards)
   const [itemNumber, setItemNumber] = useState(9)
   const [currentPage, setCurrentPage] = useState(1)
-  const TOTAL_PAGES: number = Math.ceil(items.length / itemNumber)
-  const filterCategories = (curcat?: string) => {
-    const newItems = cards.filter(newVal => {
-      return newVal.category === curcat
-      // comparing category for displaying data
-    })
-    setItems(newItems)
-  }
-
-  const filterTags = (curcat: string) => {
-    const newItems = cards.filter(newVal => {
-      return newVal.tags.includes(curcat)
-      // comparing category for displaying data
-    })
-    setItems(newItems)
-  }
-
+  const TOTAL_PAGES: number = Math.ceil(cards.length / itemNumber)
+  console.log(setItems)
   const handlePageChange = (pageNumber: number) => {
     // Handle page change logic here
     setCurrentPage(pageNumber)
@@ -51,15 +37,17 @@ const BlogMain: FC<PropsBlog> = props => {
       </div>
       <div className={styles.blog__wrapper}>
         <div className={styles.blog__filters}>
-          <BlogCategories cards={cards} filterItems={filterCategories} />
-          <BlogTags cards={cards} filterItems={filterTags} />
+          <BlogCategories cards={cards} />
+          <BlogTags cards={cards} />
         </div>
         <section className={styles.wrapper}>
           <BlogMainItem />
           <ul>
-            {items.slice(currentPage == 1 ? 0 : itemNumber * (currentPage - 1), itemNumber * currentPage).map(item => (
-              <BlogItemForContainer key={item.id} card={item} />
-            ))}
+            {items
+              .slice(currentPage == 1 ? 0 : itemNumber * (currentPage - 1), itemNumber * currentPage)
+              .map(item => (
+                <BlogItemForContainer key={item.id} card={item} />
+              ))}
           </ul>
         </section>
       </div>

src/components/BlogCategories/BlogCategories.tsx → src/entities/BlogCategories/BlogCategories.tsx

@@ -2,9 +2,11 @@ import styles from './blog-categories.module.scss'
 import { FC, useMemo } from 'react'
 import type { PropsCategories } from '@/models/PropsBlog'
 import Heading, { HeadingType } from '@/shared/ui/Heading/Heading'
+import Paragraph from '@/shared/ui/Paragraph/Paragraph'
+import { TBlogItem } from '@/models/BlogItemModel'
 
 const BlogCategories: FC<PropsCategories> = props => {
-  const { cards, filterItems } = props
+  const { cards } = props
 
   const cat = useMemo(
     () =>
@@ -15,7 +17,7 @@ const BlogCategories: FC<PropsCategories> = props => {
   )
 
   const result: {
-    key?: string
+    key: string
     count: number
   }[] = []
   // Create a unique list of items to loop over
@@ -40,16 +42,24 @@ const BlogCategories: FC<PropsCategories> = props => {
             key={item.key}
             className={styles.cats__item}
             onClick={() => {
-              filterItems(item.key)
+              filterCategories(item.key, cards)
             }}>
             {item.key}
-            <p className={styles.cats__count}>{item.count}</p>
+            <Paragraph className={styles.cats__count}>{item.count}</Paragraph>
           </button>
         )
       }),
     [[...new Set(cat)]]
   )
 
+  const filterCategories = (curcat: string, cards: TBlogItem[]) => {
+    const newItems = cards.filter(newVal => {
+      return newVal.category === curcat
+      // comparing category for displaying data
+    })
+    return newItems
+  }
+
   return (
     <div className={styles.cats}>
       <section className={styles.cats__container}>

src/components/BlogItemForContainer/BlogItemForContainer.tsx → src/entities/BlogItemForContainer/BlogItemForContainer.tsx

@@ -6,6 +6,8 @@ import ViewIcon from '@/assets/images/blogMainItem/icon-views.svg'
 import CommentIcon from '@/assets/images/blogMainItem/icon-comments.svg'
 import { fromSS } from '@/shared/constants/constants'
 import Link from '@/shared/ui/Link/Link'
+import Paragraph from '@/shared/ui/Paragraph/Paragraph'
+import Heading, { HeadingType } from '@/shared/ui/Heading/Heading'
 
 export type Props = {
   card: TBlogItem
@@ -17,9 +19,9 @@ const BlogItemForContainer: FC<Props> = props => {
     () =>
       card.tags.map(item => {
         return (
-          <p className={styles.card__tag} key={item}>
+          <Paragraph className={styles.card__tag} key={item}>
             {item}
-          </p>
+          </Paragraph>
         )
       }),
     []
@@ -29,14 +31,14 @@ const BlogItemForContainer: FC<Props> = props => {
     <Link to={''} className={styles.card}>
       <img src={card.src} alt={card.alt} draggable="false" className={styles.card__im} />
       <div className={styles.card__tags}>{tags}</div>
-      <h3>{card.title || ''}</h3>
+      <Heading type={HeadingType.NORMAL}>{card.title || ''}</Heading>
       <div className={styles.card__info}>
-        <p className={styles.card__icons}>
+        <Paragraph className={styles.card__icons}>
           <ViewIcon className={styles['card__icon']} /> {fromSS}
-        </p>
-        <p className={styles.card__icons}>
+        </Paragraph>
+        <Paragraph className={styles.card__icons}>
           <CommentIcon className={styles['card__icon']} /> {card.comments.length}
-        </p>
+        </Paragraph>
       </div>
       <span>{card.date || ''}</span>
       {card.promo ? <span className={styles.promo}>{TEXT_PROMO}</span> : null}