Add post comments list, add comment with revalidation, and delete with priviledge checking

Author: JM-Flores

apps/codebility/app/home/feeds/_components/PostView.tsx

@@ -17,6 +17,8 @@ import remarkGfm from "remark-gfm";
 import type { PostType } from "../_services/query";
 import PostUpvote from "../_components/PostUpvote";
 import { getUserRole } from "../_services/action";
+import PostViewCommentList from "./PostViewCommentList";
+import PostViewCreateComment from "./PostViewCreateComment";
 
 interface PostViewProps {
   postId: string;
@@ -36,6 +38,11 @@ export default function PostView({ postId }: PostViewProps) {
   const [isAdmin, setIsAdmin] = useState(true);
   const [isAuthor, setIsAuthor] = useState(false);
   const { user } = useUserStore();
+  const [refreshComments, setRefreshComments] = useState(0);
+
+  const triggerRefreshComments = () => {
+    setRefreshComments((prev) => prev + 1);
+  };
 
   useEffect(() => {
     const fetchRole = async () => {
@@ -136,17 +143,31 @@ export default function PostView({ postId }: PostViewProps) {
 
       <PostUpvote post={post} />
 
-      <div className="prose prose-sm dark:prose-invert max-h-[800px] min-h-[160px] max-w-none overflow-y-auto p-4 text-sm">
-        <ReactMarkdown remarkPlugins={[remarkGfm]}>
-          {`![Post image](${post.image_url || "/assets/images/bg-certificate.png"})\n\n${post.content}`}
-        </ReactMarkdown>
+      {/* Scrollable group */}
+      <div className="max-h-[90vh] overflow-y-auto">
+        <div className="prose prose-sm dark:prose-invert max-w-none text-sm">
+          <ReactMarkdown remarkPlugins={[remarkGfm]}>
+            {`![Post image](${post.image_url || "/assets/images/bg-certificate.png"})\n\n${post.content}`}
+          </ReactMarkdown>
+        </div>
+
+        {(isAdmin || isAuthor) && (
+          <Button className="mb-4 mt-4 w-auto" onClick={openModal}>
+            Edit Post
+          </Button>
+        )}
+        <div className="mb-1 mt-1 border-t border-gray-200 dark:border-gray-700" />
+        <PostViewCommentList
+          postId={postId}
+          refresh={refreshComments}
+          hasDeleteCommentPrivilege={isAdmin || isAuthor}
+        />
       </div>
+      <PostViewCreateComment
+        postId={postId}
+        onCommentCreated={triggerRefreshComments}
+      />
 
-      {(isAdmin || isAuthor) && (
-        <Button className="mb-4 mt-4 w-auto" onClick={openModal}>
-          Edit Post
-        </Button>
-      )}
       <EditPostModal
         post={post}
         isOpen={isModalOpen}

apps/codebility/app/home/feeds/_components/PostViewCommentItem.tsx

@@ -0,0 +1,69 @@
+"use client";
+
+import { useState } from "react";
+import Image from "next/image";
+import { X } from "lucide-react";
+
+import { deletePostComment } from "../_services/action";
+
+interface PostViewCommentItemProps {
+  commenntId: string;
+  userImage: string;
+  userName: string;
+  content: string;
+  userCanDelete: boolean;
+}
+
+export default function PostViewCommentItem({
+  commenntId,
+  userImage,
+  userName,
+  content,
+  userCanDelete,
+}: PostViewCommentItemProps) {
+  const [isVisible, setIsVisible] = useState(true);
+
+  const handleDelete = async () => {
+    setIsVisible(false);
+    await deletePostComment(commenntId);
+  };
+
+  if (!isVisible) return null;
+
+  return (
+    <div className="group relative flex items-start gap-3 rounded-md p-2 transition hover:bg-gray-50 dark:hover:bg-gray-800/40">
+      {/* Avatar */}
+      <Image
+        src={
+          userImage ||
+          "https://codebility-cdn.pages.dev/assets/images/default-avatar-200x200.jpg"
+        }
+        alt={`${userName}'s avatar`}
+        width={36}
+        height={36}
+        className="h-9 w-9 rounded-full object-cover"
+      />
+
+      {/* User content */}
+      <div className="flex flex-col">
+        <span className="text-sm font-semibold text-gray-800 dark:text-gray-100">
+          {userName}
+        </span>
+        <p className="break-words text-sm text-gray-700 dark:text-gray-300">
+          {content}
+        </p>
+      </div>
+
+      {/* X Icon (only visible on hover) */}
+      {userCanDelete && (
+        <button
+          onClick={handleDelete}
+          className="absolute right-2 top-2 rounded-full p-1 opacity-0 transition-opacity hover:bg-gray-200 group-hover:opacity-100 dark:hover:bg-gray-700"
+          aria-label="Delete comment"
+        >
+          <X size={16} className="text-gray-600 dark:text-gray-300" />
+        </button>
+      )}
+    </div>
+  );
+}

apps/codebility/app/home/feeds/_components/PostViewCommentList.tsx

@@ -0,0 +1,79 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { defaultAvatar } from "@/public/assets/images";
+import { useUserStore } from "@/store/codev-store";
+
+import { getPostComments } from "../_services/action";
+import PostViewCommentItem from "./PostViewCommentItem";
+
+interface PostViewCommentListProps {
+  postId: string;
+  refresh: number;
+  hasDeleteCommentPrivilege: boolean;
+}
+
+interface Comment {
+  id: string;
+  content: string;
+  created_at: string;
+  commenter: any;
+}
+
+export default function PostViewCommentList({
+  postId,
+  refresh,
+  hasDeleteCommentPrivilege,
+}: PostViewCommentListProps) {
+  const [comments, setComments] = useState<Comment[]>([]);
+  const [loading, setLoading] = useState(true);
+  const { user } = useUserStore();
+
+  useEffect(() => {
+    const fetchComments = async () => {
+      try {
+        const data = await getPostComments(postId);
+        setComments(data);
+      } catch (error) {
+        console.error("Error fetching comments:", error);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchComments();
+  }, [postId, refresh]);
+
+  if (loading) {
+    return (
+      <p className="text-sm text-gray-500 dark:text-gray-400">
+        Loading comments…
+      </p>
+    );
+  }
+
+  if (comments.length === 0) {
+    return (
+      <p className="text-sm text-gray-500 dark:text-gray-400">
+        No comments yet.
+      </p>
+    );
+  }
+
+  return (
+    <div className="flex flex-col gap-2">
+      {comments.map((c) => (
+        <PostViewCommentItem
+          key={c.id}
+          commenntId={c.id}
+          userImage={c.commenter?.image_url || defaultAvatar}
+          userName={`${c.commenter?.first_name} ${c.commenter?.last_name}`}
+          content={c.content}
+          userCanDelete={
+            user?.id == c.commenter?.id || hasDeleteCommentPrivilege
+          }
+        />
+      ))}
+    </div>
+  );
+}

apps/codebility/app/home/feeds/_components/PostViewCreateComment.tsx

@@ -0,0 +1,60 @@
+"use client";
+
+import { useState } from "react";
+import Image from "next/image";
+import { defaultAvatar } from "@/public/assets/images";
+import { useUserStore } from "@/store/codev-store";
+
+import { createComment } from "../_services/action";
+
+interface CreateCommentProps {
+  postId: string;
+  onCommentCreated?: () => void;
+}
+
+export default function PostViewCreateComment({
+  postId,
+  onCommentCreated,
+}: CreateCommentProps) {
+  const [comment, setComment] = useState("");
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const { user } = useUserStore();
+
+  const handleKeyDown = async (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Enter" && comment.trim() && !isSubmitting) {
+      try {
+        setIsSubmitting(true);
+        await createComment(postId, user?.id!, comment);
+        setComment("");
+        onCommentCreated?.();
+      } finally {
+        setIsSubmitting(false);
+      }
+    }
+  };
+
+  return (
+    <div className="flex items-center gap-3 p-2">
+      <Image
+        src={user?.image_url || defaultAvatar}
+        alt="User avatar"
+        width={36}
+        height={36}
+        className="h-9 w-9 rounded-full object-cover"
+      />
+      <input
+        type="text"
+        placeholder="Write a comment..."
+        value={comment}
+        onChange={(e) => setComment(e.target.value)}
+        onKeyDown={handleKeyDown}
+        disabled={isSubmitting}
+        className={`flex-1 rounded-full border border-gray-300 bg-white px-4 py-2 text-sm outline-none dark:border-gray-600 dark:bg-gray-800 dark:text-white ${
+          isSubmitting
+            ? "cursor-not-allowed opacity-50"
+            : "focus:border-gray-500"
+        }`}
+      />
+    </div>
+  );
+}

apps/codebility/app/home/feeds/_services/action.ts

@@ -409,3 +409,74 @@ export async function deletePostContentImages(
     throw error;
   }
 }
+
+
+export async function createComment(
+  post_id: string,
+  commenter_id: string,
+  content: string,
+) {
+  const supabase = await createClientServerComponent();
+
+try {
+    const { data, error } = await supabase
+      .from("post_comments")
+      .insert([{ post_id, commenter_id, content }])
+      .select()
+      .single();
+
+    if (error) throw error;
+
+    return data;
+  } catch (error) {
+    console.error("Comment creation failed:", error);
+    throw error;
+  }
+}
+
+export async function getPostComments(post_id: string) {
+  const supabase = await createClientServerComponent();
+
+  try {
+    const { data, error } = await supabase
+      .from("post_comments")
+      .select(`
+        id,
+        content,
+        created_at,
+        commenter: commenter_id!inner (
+          id,
+          first_name,
+          last_name,
+          image_url
+        )
+      `)
+      .eq("post_id", post_id)
+      .order("created_at", { ascending: true });
+
+    if (error) throw error;
+
+    return data;
+  } catch (error) {
+    console.error("Failed to fetch post comments:", error);
+    throw error;
+  }
+}
+
+export async function deletePostComment(comment_id: string) {
+  const supabase = await createClientServerComponent();
+
+  try {
+    const { error } = await supabase
+      .from("post_comments")
+      .delete()
+      .eq("id", comment_id);
+
+    if (error) throw error;
+
+    return { success: true };
+  } catch (error) {
+    console.error("Failed to delete post comment:", error);
+    throw error;
+  }
+}