feat: add show full text comp

Barresi · Jul 18, 2024 · 02dd271 · 02dd271
1 parent 0e9929e
commit 02dd271
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 28 deletions.
diff --git a/src/entities/post-news/ui/post-news.tsx b/src/entities/post-news/ui/post-news.tsx
@@ -4,17 +4,17 @@ import { type IPost } from '@shared/lib/types/api'
 import { CarouselItem, CarouselWithPoints } from '@shared/ui/carousel'
 import { LinkName } from '@shared/ui/link-name'
 import { UserAvatar } from '@shared/ui/user-avatar'
-import { useState, type FC, type ReactNode } from 'react'
+import { type FC, type ReactNode } from 'react'
 
 import eye from '@assets/ui/Eye.svg'
+import { ShowFullText } from '@shared/ui/show-full-text'
 
 interface IPostNewsProps {
   post: IPost | undefined
   buttonLike: ReactNode
   buttonDelete: ReactNode
 }
 const PostNews: FC<IPostNewsProps> = ({ post, buttonLike, buttonDelete }) => {
-  const [isExpanded, setIsExpanded] = useState(false)
   const maxLength = useWindowSize(1024) ? 200 : 400
 
   const createDate = post?.createdAt
@@ -25,10 +25,6 @@ const PostNews: FC<IPostNewsProps> = ({ post, buttonLike, buttonDelete }) => {
     import.meta.env.VITE_BACKEND_DOMEN
   }/ftp/posts/${post?.createdById}/`
 
-  const toggleExpand = (): void => {
-    setIsExpanded(!isExpanded)
-  }
-
   return (
     <div className='w-full bg-white dark:bg-grayBlue rounded-[10px] p-[30px] grid gap-[20px]'>
       <div className='flex flex-row justify-between'>
@@ -49,28 +45,8 @@ const PostNews: FC<IPostNewsProps> = ({ post, buttonLike, buttonDelete }) => {
         </div>
         <div className='ml-2'>{buttonDelete}</div>
       </div>
-      <div>
-        {isExpanded ? (
-          <div>
-            {post?.text}
-            <button onClick={toggleExpand} className='text-twitter block'>
-              Скрыть
-            </button>
-          </div>
-        ) : (
-          <div>
-            {post?.text.slice(0, maxLength)}
-            {post?.text.length ? post?.text.length > maxLength && '...' : null}
-            {post?.text.length
-              ? post?.text.length > maxLength && (
-                  <button onClick={toggleExpand} className='text-twitter block'>
-                    Показать полностью
-                  </button>
-                )
-              : null}
-          </div>
-        )}
-      </div>
+
+      <ShowFullText text={post?.text} maxLength={maxLength} />
 
       {post?.pictures.length ? (
         post?.pictures.length === 1 ? (

diff --git a/src/shared/ui/show-full-text.tsx b/src/shared/ui/show-full-text.tsx
@@ -0,0 +1,38 @@
+import { useState, type FC } from 'react'
+
+interface IShowFullTextProps {
+  text: string | undefined | null
+  maxLength: number
+  className?: string
+}
+const ShowFullText: FC<IShowFullTextProps> = ({ className, maxLength = 200, text }) => {
+  const [isExpanded, setIsExpanded] = useState(false)
+  const toggleExpand = (): void => {
+    setIsExpanded(!isExpanded)
+  }
+  return (
+    <div className={className}>
+      {isExpanded ? (
+        <div>
+          {text}
+          <button onClick={toggleExpand} className='text-twitter block'>
+            Скрыть
+          </button>
+        </div>
+      ) : (
+        <div>
+          {text?.slice(0, maxLength)}
+          {text?.length ? text.length > maxLength && '...' : null}
+          {text?.length
+            ? text.length > maxLength && (
+                <button onClick={toggleExpand} className='text-twitter block'>
+                  Показать полностью
+                </button>
+              )
+            : null}
+        </div>
+      )}
+    </div>
+  )
+}
+export { ShowFullText }