From a6b4f5820ec9477094889f9176bc6273db2120a5 Mon Sep 17 00:00:00 2001
From: lareii <lareii@proton.me>
Date: Wed, 18 Sep 2024 02:53:48 +0300
Subject: [PATCH] feat(client): add read more button for posts in post lists

---
 client/components/app/Markdown/index.jsx |  4 +---
 client/components/app/Post/index.jsx     | 22 +++++++++++++++++++---
 2 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/client/components/app/Markdown/index.jsx b/client/components/app/Markdown/index.jsx
index 89728f3..5f2cadf 100644
--- a/client/components/app/Markdown/index.jsx
+++ b/client/components/app/Markdown/index.jsx
@@ -35,9 +35,7 @@ export default function MarkdownContent({ isPostPage, content }) {
       remarkPlugins={[remarkGfm]}
       className='md'
     >
-      {isPostPage || content.length <= 200
-        ? content
-        : content.slice(0, 200) + '...'}
+      {content}
     </Markdown>
   );
 }
diff --git a/client/components/app/Post/index.jsx b/client/components/app/Post/index.jsx
index 4b6ec51..d8272a1 100644
--- a/client/components/app/Post/index.jsx
+++ b/client/components/app/Post/index.jsx
@@ -13,6 +13,17 @@ export default function Post({ post: initialPost, onDelete, onNewComment }) {
   const [post, setPost] = useState(initialPost);
   const isPostPage = usePathname().includes('/app/posts/');
 
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  const lines = post.content.split('\n');
+  const isLong = lines.length > 5 || post.content.length > 200;
+  const content =
+    isLong && !isPostPage
+      ? isExpanded
+        ? post.content
+        : lines.slice(0, 5).join('\n')
+      : post.content;
+
   return (
     <div className='p-5 bg-zinc-900 rounded-lg'>
       <div className='flex items-center justify-between mb-3'>
@@ -20,9 +31,14 @@ export default function Post({ post: initialPost, onDelete, onNewComment }) {
         <Dropdown post={post} setPost={setPost} onDelete={onDelete} />
       </div>
       <div className='relative'>
-        <MarkdownContent isPostPage={isPostPage} content={post.content} />
-        {!isPostPage && post.content.length > 200 && (
-          <div className='absolute bottom-0 right-0 bg-gradient-to-b from-transparent to-zinc-900 w-full h-full'></div>
+        <MarkdownContent isPostPage={isPostPage} content={content} />
+        {!isPostPage && isLong && (
+          <div
+            onClick={() => setIsExpanded(!isExpanded)}
+            className='text-xs cursor-pointer w-fit'
+          >
+            {isExpanded ? 'gizle' : 'devamını oku'}
+          </div>
         )}
       </div>
       <div className='mt-4 flex items-center justify-between'>