refactor(client): move content check to markdown component

lareii · Sep 21, 2024 · 5548fd6 · 5548fd6
1 parent e1d180a
commit 5548fd6
Show file tree

Hide file tree

Showing 4 changed files with 88 additions and 86 deletions.
diff --git a/client/components/app/Markdown/index.jsx b/client/components/app/Markdown/index.jsx
@@ -1,22 +1,40 @@
+import { usePathname } from 'next/navigation';
+import { useState } from 'react';
 import Link from 'next/link';
 import Markdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 import { SquareArrowOutUpRight } from 'lucide-react';
 
 export default function MarkdownContent({ content }) {
+  const isPostPage = usePathname().includes('/app/posts/');
+
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  const contentLines = content.split('\n');
+  const contentLength = content.length;
+  const lineCount = contentLines.length;
+
+  const isLong = lineCount > 5 || contentLength > 500;
+
+  const truncatedContent =
+    lineCount > 5
+      ? contentLines.slice(0, 5).join('\n') + '...'
+      : contentLength > 500
+      ? content.substring(0, 500) + '...'
+      : content;
+
+  const contentToShow = isExpanded || isPostPage ? content : truncatedContent;
+
   const customRenderers = {
     img: ({ src, alt }) => (
       <Link href={src} target='_blank'>
         {alt || src}
         <SquareArrowOutUpRight className='w-3 h-3 ml-1 inline-block' />
       </Link>
     ),
-    a: ({ node, children }) => (
-      <Link
-        href={node.properties.href}
-        target='_blank'
-      >
-        {children || node.properties.href}
+    a: ({ href, children }) => (
+      <Link href={href} target='_blank'>
+        {children || href}
         <SquareArrowOutUpRight className='w-3 h-3 ml-1 inline-block' />
       </Link>
     ),
@@ -29,12 +47,23 @@ export default function MarkdownContent({ content }) {
   };
 
   return (
-    <Markdown
-      components={customRenderers}
-      remarkPlugins={[remarkGfm]}
-      className='md'
-    >
-      {content}
-    </Markdown>
+    <div>
+      <Markdown
+        components={customRenderers}
+        remarkPlugins={[remarkGfm]}
+        className='md'
+      >
+        {contentToShow}
+      </Markdown>
+
+      {!isPostPage && isLong && (
+        <div
+          onClick={() => setIsExpanded(!isExpanded)}
+          className='text-xs cursor-pointer w-fit'
+        >
+          {isExpanded ? 'gizle' : 'devamını oku'}
+        </div>
+      )}
+    </div>
   );
 }
diff --git a/client/components/app/Post/index.jsx b/client/components/app/Post/index.jsx
@@ -1,6 +1,5 @@
 'use client';
 
-import { usePathname } from 'next/navigation';
 import { useState } from 'react';
 import Dropdown from '@/components/app/Post/Dropdown';
 import LikeButton from '@/components/app/Post/LikeButton';
@@ -11,24 +10,6 @@ import MarkdownContent from '@/components/app/Markdown';
 
 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 contentLines = post.content.split('\n');
-  const contentLength = post.content.length;
-  const lineCount = contentLines.length;
-
-  const isLong = lineCount > 5 || contentLength > 500;
-
-  const truncatedContent =
-    lineCount > 5
-      ? contentLines.slice(0, 5).join('\n') + '...'
-      : contentLength > 500
-      ? post.content.substring(0, 500) + '...'
-      : post.content;
-
-  const contentToShow =
-    isExpanded || isPostPage ? post.content : truncatedContent;
 
   return (
     <div className='p-5 bg-zinc-900 rounded-lg'>
@@ -37,15 +18,7 @@ export default function Post({ post: initialPost, onDelete, onNewComment }) {
         <Dropdown post={post} setPost={setPost} onDelete={onDelete} />
       </div>
       <div className='relative'>
-        <MarkdownContent content={contentToShow} />
-        {!isPostPage && isLong && (
-          <div
-            onClick={() => setIsExpanded(!isExpanded)}
-            className='text-xs cursor-pointer w-fit'
-          >
-            {isExpanded ? 'gizle' : 'devamını oku'}
-          </div>
-        )}
+        <MarkdownContent content={post.content} />
       </div>
       <div className='mt-4 flex items-center justify-between'>
         <div className='flex gap-2'>

diff --git a/client/package-lock.json b/client/package-lock.json
diff --git a/client/package.json b/client/package.json
@@ -26,7 +26,7 @@
     "framer-motion": "^11.3.28",
     "jose": "^5.6.3",
     "lucide-react": "^0.428.0",
-    "next": "14.2.5",
+    "next": "^14.2.13",
     "react": "^18",
     "react-dom": "^18",
     "react-hook-form": "^7.52.2",