Tweet comments

app/(content)/(home)/home/[postid]/page.tsx

+import CommentButton from "@/components/comment-button";
+import LikeButton from "@/components/like-button";
+import PostCommentForm from "@/components/post-comment";
+import PostItem from "@/components/post-item";
+import { db } from "@/lib/db";
+import { Prisma } from "@prisma/client";
+export const revalidate = 5;  // revalidate this page every 5 seconds
+
+type messageType = any // Prisma.PostUncheckedCreateInput
+type messageItemProps = {
+    msg: messageType;
+};
+
+export default async function PostDetail({ params }: { params: { postid: string } }) {
+    const postid = params.postid
+    let comments = null
+    let message = null
+
+    try {
+        comments = await db.comment.findMany({
+            where: {
+                postId: postid
+            },
+            orderBy: {
+                createdAt: "desc"
+            },
+            include: {
+                user: true,
+                Like: true
+            },
+        })
+
+        message = await db.post.findUnique({
+            where: {
+                id: postid
+            },
+            include: {
+                user: true,
+                Comment: true,
+                Like: true,
+            },
+        })
+
+    } catch (error) {
+        console.log("the database is not running, try: 'npx prisma migrate dev --name init' if you want to use the database")
+    }
+
+    return (
+        <div>
+            <h1>Post Section</h1>
+            <p>This will be where all comments show up.</p>
+            <p>Needs a reload after posting!!</p>
+            <PostItem msg={message} />
+
+            <PostCommentForm postid={postid} />
+
+            {comments ?
+                <>
+                    {comments.map((msg) => (
+                        <CommentItem msg={msg} key={msg.id} />
+                    ))}
+
+                </>
+                :
+                <p>no comments / no database</p>}
+        </div>
+    )
+}
+
+const CommentItem = ({ msg }: any) => {
+    if (!msg.id) {
+        return <div></div>;
+    }
+    return (
+        <div className="flex border-b border-gray-200 py-4">
+            <div className="flex-shrink-0">
+                <div className="h-10 w-10 rounded-full bg-gray-300"></div>
+            </div>
+            <div className="ml-4 flex flex-col flex-grow">
+                <div>
+                    <div className="flex items-center">
+                        <span className="font-bold mr-2">{msg.user.name}</span>
+                        <span className="text-gray-500 text-sm">
+                            {formatDate(new Date(msg.createdAt!))}
+                        </span>
+                    </div>
+                    <div className="text-gray-800">{msg.message}</div>
+                </div>
+                <div className="mt-4 flex">
+                    <div className="bg-gray-200 rounded-lg py-10 px-20 mr-2">
+
+                    </div>
+                </div>
+                <div className="flex justify-end" >
+                    <LikeButton data={msg} />
+                </div>
+            </div>
+        </div>
+    );
+};
+
+function formatDate(date: Date) {
+    return date.toLocaleDateString("en-US", {
+        day: "numeric",
+        month: "short",
+        year: "numeric"
+    });
+}
\ No newline at end of file