refactor(client): componentize tooltip for posts and comments

lareii · Sep 16, 2024 · 58004ae · 58004ae
1 parent 74fd8b7
commit 58004ae
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 94 deletions.
diff --git a/client/components/app/Comment/index.jsx b/client/components/app/Comment/index.jsx
@@ -9,6 +9,7 @@ import {
 import Dropdown from '@/components/app/Comment/Dropdown';
 import LikeButton from '@/components/app/Comment/LikeButton';
 import UserInfo from '@/components/app/User/Info';
+import DateTooltip from '@/components/app/Tooltip/Date';
 
 export default function Comment({ comment: initialComment, onDelete }) {
   const [comment, setComment] = useState(initialComment);
@@ -26,50 +27,7 @@ export default function Comment({ comment: initialComment, onDelete }) {
       <Markdown className='md'>{comment.content}</Markdown>
       <div className='mt-4 flex justify-between'>
         <LikeButton comment={comment} setComment={setComment} />
-        <TooltipProvider>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <div className='text-xs text-zinc-400'>
-                {new Date(comment.created_at.T * 1000).toLocaleDateString(
-                  'tr-TR',
-                  {
-                    year: 'numeric',
-                    month: 'long',
-                    day: 'numeric'
-                  }
-                )}
-              </div>
-            </TooltipTrigger>
-            <TooltipContent className='text-xs text-zinc-400'>
-              <div>
-                oluşturuldu:{' '}
-                {new Date(comment.created_at.T * 1000).toLocaleDateString(
-                  'tr-TR',
-                  {
-                    year: 'numeric',
-                    month: 'long',
-                    day: 'numeric',
-                    hour: 'numeric',
-                    minute: 'numeric'
-                  }
-                )}
-              </div>
-              <div>
-                güncellendi:{' '}
-                {new Date(comment.updated_at.T * 1000).toLocaleDateString(
-                  'tr-TR',
-                  {
-                    year: 'numeric',
-                    month: 'long',
-                    day: 'numeric',
-                    hour: 'numeric',
-                    minute: 'numeric'
-                  }
-                )}
-              </div>
-            </TooltipContent>
-          </Tooltip>
-        </TooltipProvider>
+        <DateTooltip created_at={comment.created_at} updated_at={comment.updated_at} />
       </div>
     </div>
   );

diff --git a/client/components/app/Post/index.jsx b/client/components/app/Post/index.jsx
@@ -3,16 +3,11 @@
 import { usePathname } from 'next/navigation';
 import { useState } from 'react';
 import Markdown from 'react-markdown';
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger
-} from '@/components/ui/tooltip';
 import Dropdown from '@/components/app/Post/Dropdown';
 import LikeButton from '@/components/app/Post/LikeButton';
 import CommentButton from '@/components/app/Post/CommentButton';
 import UserInfo from '@/components/app/User/Info';
+import DateTooltip from '@/components/app/Tooltip/Date';
 
 export default function Post({ post: initialPost, onDelete, onNewComment }) {
   const [post, setPost] = useState(initialPost);
@@ -43,50 +38,7 @@ export default function Post({ post: initialPost, onDelete, onNewComment }) {
             onNewComment={onNewComment}
           />
         </div>
-        <TooltipProvider>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <div className='text-xs text-zinc-400'>
-                {new Date(post.created_at.T * 1000).toLocaleDateString(
-                  'tr-TR',
-                  {
-                    year: 'numeric',
-                    month: 'long',
-                    day: 'numeric'
-                  }
-                )}
-              </div>
-            </TooltipTrigger>
-            <TooltipContent className='text-xs text-zinc-400'>
-              <div>
-                oluşturuldu:{' '}
-                {new Date(post.created_at.T * 1000).toLocaleDateString(
-                  'tr-TR',
-                  {
-                    year: 'numeric',
-                    month: 'long',
-                    day: 'numeric',
-                    hour: 'numeric',
-                    minute: 'numeric'
-                  }
-                )}
-              </div>
-              <div>
-                güncellendi:{' '}
-                {new Date(post.updated_at.T * 1000).toLocaleDateString(
-                  'tr-TR',
-                  {
-                    year: 'numeric',
-                    month: 'long',
-                    day: 'numeric',
-                    hour: 'numeric',
-                    minute: 'numeric'
-                  }
-                )}
-              </div>
-            </TooltipContent>
-          </Tooltip>
-        </TooltipProvider>
+        <DateTooltip created_at={post.created_at} updated_at={post.updated_at} />
       </div>
     </div>
   );

diff --git a/client/components/app/Tooltip/Date.jsx b/client/components/app/Tooltip/Date.jsx
@@ -0,0 +1,55 @@
+import { useState } from 'react';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger
+} from '@/components/ui/tooltip';
+
+export default function DateTooltip({ created_at, updated_at }) {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <TooltipProvider>
+      <Tooltip open={open}>
+        <TooltipTrigger asChild>
+          <div
+            onClick={() => setOpen(!open)}
+            onMouseEnter={() => setOpen(true)}
+            onMouseLeave={() => setOpen(false)}
+            onTouchStart={() => setOpen(!open)}
+            className='text-xs text-zinc-400'
+          >
+            {new Date(created_at.T * 1000).toLocaleDateString('tr-TR', {
+              year: 'numeric',
+              month: 'long',
+              day: 'numeric'
+            })}
+          </div>
+        </TooltipTrigger>
+        <TooltipContent className='text-xs text-zinc-400'>
+          <div>
+            oluşturuldu:{' '}
+            {new Date(created_at.T * 1000).toLocaleDateString('tr-TR', {
+              year: 'numeric',
+              month: 'long',
+              day: 'numeric',
+              hour: 'numeric',
+              minute: 'numeric'
+            })}
+          </div>
+          <div>
+            güncellendi:{' '}
+            {new Date(updated_at.T * 1000).toLocaleDateString('tr-TR', {
+              year: 'numeric',
+              month: 'long',
+              day: 'numeric',
+              hour: 'numeric',
+              minute: 'numeric'
+            })}
+          </div>
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+}