Merge pull request #429 from CodebilityDev/dev

fix critical bug

Author: yyyort

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

@@ -4,7 +4,7 @@ import { useEffect, useState } from "react";
 import DefaultPagination from "@/components/ui/pagination";
 import { useFeedsStore } from "@/store/feeds-store"; // Adjust path as needed
 
-import Post from "./Post";
+import Post from "./PostCard";
 
 interface FeedProp {
   isAdmin: boolean;

…lity/app/home/feeds/_components/Post.tsx …/app/home/feeds/_components/PostCard.tsxapps/codebility/app/home/feeds/_components/Post.tsx renamed to apps/codebility/app/home/feeds/_components/PostCard.tsx apps/codebility/app/home/feeds/_components/Post.tsx renamed to apps/codebility/app/home/feeds/_components/PostCard.tsx

@@ -2,10 +2,12 @@
 
 import { useEffect, useState } from "react";
 import { useUserStore } from "@/store/codev-store";
+import { useFeedsStore } from "@/store/feeds-store";
 import { ArrowBigUp } from "lucide-react";
 
 import {
   AddPostUpvote,
+  countUpvotes,
   hasUserUpvoted,
   removePostUpvote,
 } from "../_services/action";
@@ -19,7 +21,11 @@ export default function PostUpvote({ post }: PostUpvoteProps) {
   const { user } = useUserStore();
 
   const [isUpvoted, setIsUpvoted] = useState(false);
-  const [upvotes, setUpvotes] = useState(post.upvoters_id?.length || 0);
+  const [upvotes, setUpvotes] = useState(0);
+  const { posts, fetchPosts } = useFeedsStore((state) => ({
+    posts: state.posts,
+    fetchPosts: state.fetchPosts,
+  }));
 
   useEffect(() => {
     const checkUpvote = async () => {
@@ -34,33 +40,43 @@ export default function PostUpvote({ post }: PostUpvoteProps) {
       } else {
         setIsUpvoted(false);
       }
-    };
 
+      if (post?.id) {
+        try {
+          const upvotesCount = await countUpvotes(post.id);
+          setUpvotes(upvotesCount);
+        } catch (error) {
+          console.error("Error counting upvotes:", error);
+        }
+      }
+    };
     checkUpvote();
-  }, [user?.id, post?.id]);
+  }, [user?.id, post?.id, posts]);
 
-  const handleUpvote = (e: React.MouseEvent) => {
+  const handleUpvote = async (e: React.MouseEvent) => {
     if (user) {
       e.stopPropagation();
       e.preventDefault();
 
+      setIsUpvoted((prev) => !prev);
+      setUpvotes((prev) => prev + (isUpvoted ? -1 : 1));
+
       if (!isUpvoted) {
-        AddPostUpvote(post.id, user.id);
+        const postUpvote = await AddPostUpvote(post.id, user.id);
       } else {
-        removePostUpvote(post.id, user.id);
+        await removePostUpvote(post.id, user.id);
       }
 
-      setIsUpvoted((prev) => !prev);
-      setUpvotes((prev) => prev + (isUpvoted ? -1 : 1));
+      await fetchPosts();
     }
   };
 
   return (
     <button
       className={`flex items-center space-x-1 ${
         isUpvoted
-          ? "text-customBlue-500 dark:text-customBlue-400"
-          : "hover:text-customBlue-500 dark:hover:text-customBlue-400"
+          ? "text-customBlue-300 dark:text-customBlue-200"
+          : "hover:text-customBlue-300 dark:hover:text-customBlue-200"
       }`}
       onClick={handleUpvote}
     >

apps/codebility/app/home/feeds/_components/PostUpvote.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/PostView.tsx

@@ -0,0 +1,74 @@
+"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);
+    try {
+      await deletePostComment(commenntId);
+    } catch (error) {
+      setIsVisible(true);
+      // Optionally, you could log the error or show a message to the user
+    }
+  };
+
+  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/PostViewCommentItem.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/PostViewCommentList.tsx

@@ -0,0 +1,61 @@
+"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) {
+      if (!user || !user.id) return;
+      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>
+  );
+}