refactor(client): some rendering improvements

lareii · Sep 3, 2024 · 3578615 · 3578615
1 parent 2b2d42a
commit 3578615
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 41 deletions.
diff --git a/client/app/app/posts/[id]/page.jsx b/client/app/app/posts/[id]/page.jsx
@@ -16,7 +16,7 @@ export default function Page({ params }) {
   }
 
   useEffect(() => {
-    const fetchUser = async () => {
+    const fetchPost = async () => {
       const response = await getPost(params);
       if (!response) {
         toast({
@@ -29,7 +29,7 @@ export default function Page({ params }) {
 
       setPost(response.data.post);
     };
-    fetchUser();
+    fetchPost();
   }, []);
 
   return (

diff --git a/client/components/app/Comment/index.jsx b/client/components/app/Comment/index.jsx
@@ -1,7 +1,5 @@
 import { useState } from 'react';
 import UserHoverCard from '@/components/app/HoverCard';
-import { Skeleton } from '@/components/ui/skeleton';
-import { Button } from '@/components/ui/button';
 import Dropdown from '@/components/app/Comment/Dropdown';
 import LikeButton from '@/components/app/Comment/LikeButton';
 
@@ -14,26 +12,17 @@ export default function Comment({ comment: initialComment, onDelete }) {
         <div className='flex items-start'>
           <div className='mr-3 w-10 h-10 rounded-lg bg-zinc-800'></div>
           <div className='flex flex-col mr-2'>
-            {comment ? (
-              <>
-                <UserHoverCard user={comment.author} />
-                <div className='text-xs text-zinc-400'>@{comment.author.username}</div>
-              </>
-            ) : (
-              <>
-                <Skeleton className='w-20 h-4 mb-1' />
-                <Skeleton className='w-10 h-3' />
-              </>
-            )}
+            <UserHoverCard user={comment.author} />
+            <div className='text-xs text-zinc-400'>@{comment.author.username}</div>
           </div>
         </div>
         <Dropdown comment={comment} setComment={setComment} onDelete={onDelete} />
       </div>
       <div className='text-zinc-400 text-sm'>
-        {comment ? comment.content : <Skeleton className='w-full h-5' />}
+        {comment.content}
       </div>
       <div className='mt-4'>
-        {comment ? <LikeButton comment={comment} setComment={setComment} /> : <Skeleton className='w-7 h-5' />}
+        <LikeButton comment={comment} setComment={setComment} />
       </div>
     </div>
   );

diff --git a/client/components/app/Post/index.jsx b/client/components/app/Post/index.jsx
@@ -1,6 +1,5 @@
 import { useState } from 'react';
 import Dropdown from '@/components/app/Post/Dropdown';
-import { Skeleton } from '@/components/ui/skeleton';
 import UserHoverCard from '@/components/app/HoverCard';
 import LikeButton from '@/components/app/Post/LikeButton';
 import CommentButton from '@/components/app/Post/CommentButton';
@@ -14,17 +13,8 @@ export default function Post({ post: initialPost, onDelete, onNewComment }) {
         <div className='flex items-start'>
           <div className='mr-3 w-10 h-10 rounded-lg bg-zinc-800'></div>
           <div className='flex flex-col mr-2'>
-            {post ? (
-              <>
-                <UserHoverCard user={post.author} />
-                <div className='text-xs text-zinc-400'>@{post.author.username}</div>
-              </>
-            ) : (
-              <>
-                <Skeleton className='w-20 h-4 mb-1' />
-                <Skeleton className='w-10 h-3' />
-              </>
-            )}
+            <UserHoverCard user={post.author} />
+            <div className='text-xs text-zinc-400'>@{post.author.username}</div>
           </div>
           {/* <div className='flex items-center gap-1 py-1 px-2 w-fit rounded-md bg-zinc-800 text-xs text-zinc-400'>
             <Leaf className='w-3 h-3 mr-0.5' />
@@ -34,20 +24,11 @@ export default function Post({ post: initialPost, onDelete, onNewComment }) {
         <Dropdown post={post} setPost={setPost} onDelete={onDelete} />
       </div>
       <div className='text-zinc-400 text-sm'>
-        {post ? post.content : <Skeleton className='w-full h-5' />}
+        {post.content}
       </div>
       <div className='mt-4 flex gap-2'>
-        {post ? (
-          <>
-            <LikeButton post={post} setPost={setPost} />
-            <CommentButton post={post} setPost={setPost} onNewComment={onNewComment} />
-          </>
-        ) : (
-          <>
-            <Skeleton className='w-7 h-5' />
-            <Skeleton className='w-7 h-5' />
-          </>
-        )}
+        <LikeButton post={post} setPost={setPost} />
+        <CommentButton post={post} setPost={setPost} onNewComment={onNewComment} />
       </div>
     </div>
   );