fix: batch server requests from posts list

components/comments/comment-actions.tsx

@@ -10,7 +10,7 @@ import {
   DropdownMenuTrigger,
   DropdownMenuItem,
 } from "@/components/ui/dropdown-menu";
-import Form from "./comment-form";
+import { CommentForm } from "./comment-form";
 import { useSession } from "@/lib/auth-client";
 import { deleteComment, type CommentWithUser } from "@/lib/server/comments";
 
@@ -42,7 +42,7 @@ const CommentActions = ({ comment }: { comment: CommentWithUser }) => {
   return (
     <div className="mt-4">
       {isEditing ? (
-        <Form
+        <CommentForm
           slug={comment.pageSlug}
           initialContent={comment.content}
           commentId={comment.id}
@@ -81,7 +81,7 @@ const CommentActions = ({ comment }: { comment: CommentWithUser }) => {
 
       {isReplying && (
         <div className="mt-4">
-          <Form
+          <CommentForm
             slug={comment.pageSlug}
             parentId={comment.id}
             onCancel={() => setIsReplying(false)}
@@ -93,4 +93,4 @@ const CommentActions = ({ comment }: { comment: CommentWithUser }) => {
   );
 };
 
-export default CommentActions;
+export { CommentActions };

components/comments/comment-form.tsx

@@ -193,4 +193,4 @@ const CommentForm = ({
   );
 };
 
-export default CommentForm;
+export { CommentForm };

components/comments/comment-single.tsx

@@ -2,8 +2,8 @@ import { getImageProps } from "next/image";
 import Link from "next/link";
 import Markdown from "react-markdown";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
-import RelativeTime from "@/components/relative-time";
-import Actions from "./comment-actions";
+import { RelativeTime } from "@/components/relative-time";
+import { CommentActions } from "./comment-actions";
 import { remarkGfm, remarkSmartypants } from "@/lib/remark";
 import { rehypeExternalLinks } from "@/lib/rehype";
 import { cn } from "@/lib/utils";
@@ -66,11 +66,11 @@ const CommentSingle = ({ comment }: { comment: CommentWithUser }) => {
             </Markdown>
           </div>
 
-          <Actions comment={comment} />
+          <CommentActions comment={comment} />
         </div>
       </div>
     </div>
   );
 };
 
-export default CommentSingle;
+export { CommentSingle };

components/comments/comment-thread.tsx

@@ -1,4 +1,4 @@
-import Single from "./comment-single";
+import { CommentSingle } from "./comment-single";
 import { cn } from "@/lib/utils";
 import type { CommentWithUser } from "@/lib/server/comments";
 
@@ -18,7 +18,7 @@ const CommentThread = ({
 
   return (
     <>
-      <Single comment={comment} />
+      <CommentSingle comment={comment} />
 
       {replies.length > 0 && (
         <div className={cn("mt-6 space-y-6", level < maxLevel && "ml-6 border-l-2 pl-6")}>
@@ -37,4 +37,4 @@ const CommentThread = ({
   );
 };
 
-export default CommentThread;
+export { CommentThread };

components/comments/comments-skeleton.tsx

@@ -23,4 +23,4 @@ const CommentsSkeleton = () => {
   );
 };
 
-export default CommentsSkeleton;
+export { CommentsSkeleton };

components/comments/comments.tsx

@@ -1,7 +1,7 @@
 import { headers } from "next/headers";
-import Form from "./comment-form";
-import Thread from "./comment-thread";
-import SignIn from "./sign-in";
+import { CommentForm } from "./comment-form";
+import { CommentThread } from "./comment-thread";
+import { SignIn } from "./sign-in";
 import { auth } from "@/lib/auth";
 import { getComments, type CommentWithUser } from "@/lib/server/comments";
 
@@ -29,7 +29,7 @@ const Comments = async ({ slug }: { slug: string }) => {
   return (
     <>
       {session ? (
-        <Form slug={slug} />
+        <CommentForm slug={slug} />
       ) : (
         <div className="bg-muted/40 flex flex-col items-center justify-center gap-y-4 rounded-lg p-6">
           <p className="text-center font-medium">Join the discussion by signing in:</p>
@@ -40,7 +40,7 @@ const Comments = async ({ slug }: { slug: string }) => {
       {rootComments.length > 0 ? (
         <div className="space-y-6">
           {rootComments.map((comment: CommentWithUser) => (
-            <Thread
+            <CommentThread
               key={comment.id}
               comment={comment}
               replies={commentsByParentId[comment.id] || []}
@@ -57,4 +57,4 @@ const Comments = async ({ slug }: { slug: string }) => {
   );
 };
 
-export default Comments;
+export { Comments };

components/comments/sign-in.tsx

@@ -34,4 +34,4 @@ const SignIn = ({ callbackPath }: { callbackPath?: string }) => {
   );
 };
 
-export default SignIn;
+export { SignIn };