Merge pull request #525 from CodebilityDev/feeds-post/create-system-post

Author: Jecomo-Alyssa-Lyn

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

@@ -4,6 +4,7 @@ import { useEffect, useMemo, useRef, useState } from "react";
 import { useFeedsStore } from "@/store/feeds-store";
 
 import { POSTS_PER_PAGE } from "../_constants";
+import { SYSTEM_POST } from "../_constants/system-post";
 import Post from "./PostCard";
 import PostCardSkeleton from "./PostCardSkeleton";
 
@@ -31,11 +32,20 @@ export default function Feed({
     fetchPosts();
   }, []);
 
+  // Always prepend system post to regular posts
+  const allPosts = useMemo(() => {
+    return [SYSTEM_POST, ...posts];
+  }, [posts]);
+
   // Filter posts
   const filteredPosts = useMemo(() => {
-    if (!searchQuery || searchQuery.trim() === "") return posts;
+    if (!searchQuery || searchQuery.trim() === "") return allPosts;
+    
     const query = searchQuery.toLowerCase();
-    return posts.filter((post) => {
+    return allPosts.filter((post) => {
+      // Always include system post
+      if (post.id === "00000000-0000-0000-0000-000000000001") return true;
+      
       const titleMatch = post.title?.toLowerCase().includes(query);
       const firstNameMatch = post.author_id?.first_name
         ?.toLowerCase()
@@ -45,12 +55,16 @@ export default function Feed({
         .includes(query);
       return titleMatch || firstNameMatch || lastNameMatch;
     });
-  }, [posts, searchQuery]);
+  }, [allPosts, searchQuery]);
 
   // Sort posts
   const sortedPosts = useMemo(() => {
     const sorted = [...filteredPosts];
     sorted.sort((a, b) => {
+      // Always keep system post at the top regardless of sorting
+      if (a.id === "00000000-0000-0000-0000-000000000001") return -1;
+      if (b.id === "00000000-0000-0000-0000-000000000001") return 1;
+
       let aVal: string | number = "";
       let bVal: string | number = "";
 
@@ -106,7 +120,11 @@ export default function Feed({
       if (currentLoader) observer.unobserve(currentLoader);
     };
   }, [sortedPosts.length]);
+
   const handleDeletePost = (deletedPostId: string | number) => {
+    // Prevent deletion of system post
+    if (deletedPostId === "00000000-0000-0000-0000-000000000001") return;
+    
     useFeedsStore.setState((state) => ({
       posts: state.posts.filter((post) => post.id !== deletedPostId),
     }));
@@ -149,4 +167,4 @@ export default function Feed({
       )}
     </>
   );
-}
+}

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

@@ -14,7 +14,7 @@ import { PostType } from "../_services/query";
 import { DeleteDialog } from "./DeleteDialog";
 import PostCommentCount from "./PostCommentCount";
 import PostTags from "./PostTags";
-import PostUpvote from "./PostUpvote";
+import PostUpvote from "./PostUpvote"; 
 
 interface PostProps {
   post: PostType;
@@ -42,7 +42,8 @@ export default function Post({ post, isAdmin, onDelete }: PostProps) {
     if (user) {
       checkIfAuthor();
     }
-  }, [user]);
+  }, [user, post.author_id?.id]);
+
   const openDeleteDialog = async (e: React.MouseEvent) => {
     e.stopPropagation();
     e.preventDefault();
@@ -68,14 +69,15 @@ export default function Post({ post, isAdmin, onDelete }: PostProps) {
 
   const openModal = () => setIsModalOpen(true);
   const closeModal = () => setIsModalOpen(false);
+
   return (
     <div>
       <Box
         className="group relative flex h-[440px] cursor-pointer flex-col justify-between rounded-xl p-3"
         onClick={openModal}
       >
         {/* Delete Button in top-right */}
-        {(isAdmin || isAuthor) && (
+        {(isAdmin || isAuthor) && post.id !== "00000000-0000-0000-0000-000000000001" && (
           <button
             className="invisible absolute right-2 top-2 rounded bg-red-500 px-2 py-1 text-white hover:bg-red-600 group-hover:visible"
             onClick={openDeleteDialog}
@@ -89,15 +91,18 @@ export default function Post({ post, isAdmin, onDelete }: PostProps) {
           <div className="flex items-center justify-between">
             <div className="mb-2 flex items-center">
               <Image
-                src={post.author_id?.image_url || defaultAvatar}
-                alt={`${post.author_id?.first_name}'s profile`}
+                src={
+                  post.author_id?.image_url || 
+                  (post.id === "00000000-0000-0000-0000-000000000001" ? "/favicon.ico" : defaultAvatar)
+                }
+                alt={`${post.author_id?.first_name || "Codebility"}'s profile`}
                 className="mr-4 h-12 w-12 rounded-full object-cover"
-                width={40}
-                height={40}
+                width={30}
+                height={30}
               />
               <div className="flex-1">
                 <h2 className="font-semibold text-gray-800 dark:text-gray-100">
-                  {post.author_id
+                  {post.author_id?.first_name
                     ? `${post.author_id?.first_name} ${post.author_id?.last_name}`
                     : "Codebility"}
                 </h2>
@@ -146,4 +151,4 @@ export default function Post({ post, isAdmin, onDelete }: PostProps) {
       />
     </div>
   );
-}
+}

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

@@ -14,6 +14,7 @@ import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 
 import type { PostType } from "../_services/query";
+import { SYSTEM_POST } from "../_constants/system-post";
 import PostUpvote from "../_components/PostUpvote";
 import { getUserRole } from "../_services/action";
 import PostCommentCount from "./PostCommentCount";
@@ -40,10 +41,14 @@ export default function PostView({ postId }: PostViewProps) {
     setRefreshComments((prev) => prev + 1);
   };
 
-  // Find the post in the store
+  // Find the post in the store or use system post
   useEffect(() => {
-    const foundPost = posts.find((p) => p.id === postId) || null;
-    setPost(foundPost);
+    if (postId === "00000000-0000-0000-0000-000000000001") {
+      setPost(SYSTEM_POST);
+    } else {
+      const foundPost = posts.find((p) => p.id === postId) || null;
+      setPost(foundPost);
+    }
   }, [posts, postId]);
 
   // Check roles
@@ -83,15 +88,18 @@ export default function PostView({ postId }: PostViewProps) {
       <h1 className="text-3xl font-bold">{post.title}</h1>
       <div className="flex items-center">
         <Image
-          src={post.author_id?.image_url || defaultAvatar}
-          alt={`${post.author_id?.first_name || "User"}'s profile`}
+          src={
+            post.author_id?.image_url || 
+            (post.id === "00000000-0000-0000-0000-000000000001" ? "/favicon.ico" : defaultAvatar)
+          }
+          alt={`${post.author_id?.first_name || "Codebility"}'s profile`}
           className="mr-4 h-10 w-10 rounded-full object-cover"
           width={40}
           height={40}
         />
         <div className="flex-1">
           <h2 className="font-semibold text-gray-800 dark:text-gray-100">
-            {post.author_id
+            {post.author_id?.first_name
               ? `${post.author_id.first_name} ${post.author_id.last_name}`
               : "Codebility"}
           </h2>
@@ -109,19 +117,19 @@ export default function PostView({ postId }: PostViewProps) {
       <PostTags post={post} />
 
       <div className="max-h-[90vh] overflow-y-auto">
-        <div className="prose prose-sm dark:prose-invert max-w-none text-sm">
+        <div className="prose prose-sm dark:prose-invert max-w-none text-sm pb-6">
           <ReactMarkdown remarkPlugins={[remarkGfm]}>
-            {`![Post image](${post.image_url || "/assets/images/bg-certificate.png"})\n\n${post.content}`}
+            {`![Post image](${post.image_url || "/assets/images/system-post-feed.png"})\n\n${post.content}`}
           </ReactMarkdown>
         </div>
 
-        {(isAdmin || isAuthor) && (
+        {(isAdmin || isAuthor) && post.id !== "00000000-0000-0000-0000-000000000001" && (
           <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" />
+        <div className="mb-1 mt-1 border-t border-gray-200 dark:border-gray-700 pt-3"/>
         <PostViewCommentList
           postId={postId}
           refresh={refreshComments}
@@ -141,4 +149,4 @@ export default function PostView({ postId }: PostViewProps) {
       />
     </>
   );
-}
+}

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

@@ -33,9 +33,10 @@ export default function PostViewCommentList({
     const fetchComments = async () => {
       try {
         const data = await getPostComments(postId);
-        setComments(data);
+        setComments(data || []); // Add fallback to empty array
       } catch (error) {
         console.error("Error fetching comments:", error);
+        setComments([]); // Set empty array on error
       } finally {
         setLoading(false);
       }
@@ -52,7 +53,7 @@ export default function PostViewCommentList({
     );
   }
 
-  if (comments.length === 0) {
+  if (!comments || comments.length === 0) {
     return (
       <p className="text-sm text-gray-500 dark:text-gray-400">
         No comments yet.
@@ -71,10 +72,10 @@ export default function PostViewCommentList({
           userName={`${c.commenter?.first_name} ${c.commenter?.last_name}`}
           content={c.content}
           userCanDelete={
-            user?.id == c.commenter?.id || hasDeleteCommentPrivilege
+            user?.id === c.commenter?.id || hasDeleteCommentPrivilege
           }
         />
       ))}
     </div>
   );
-}
+}

apps/codebility/app/home/feeds/_constants/system-post.ts

@@ -0,0 +1,65 @@
+import type { PostType } from "../_services/query";
+
+export const SYSTEM_POST: PostType = {
+  id: "00000000-0000-0000-0000-000000000001",
+  title: "Join the Codebility Feeds! 🚀",
+  content: `Welcome to the Codebility Community Feed — the central space where developers connect, share ideas, and stay informed.
+
+---
+
+## 🧠 What This Feed Is For
+
+This feed is built for two core purposes:
+
+📢 **Organization-wide announcements**  
+💬 **Community-driven posts from members**
+
+Whether you're sharing an update, a helpful tip, a question, a learning resource, or something cool you're building — this is your space.
+
+---
+
+## ⭐ Earn as You Contribute
+
+Your activity here is rewarded:
+
+📝 Earn points for every post you create  
+❤️ Gain more points when your posts receive likes and comments
+
+The more value you bring to the community, the more you grow within it.
+
+---
+
+## ⏱ Posting Guidelines
+
+To keep the feed high-quality and meaningful:
+
+✓ Each member can create **one post per day**  
+✓ Make it count — share something useful, inspiring, or thought-provoking
+
+---
+
+## 🚀 Build Together
+
+This feed isn't just a timeline — it's a shared space to learn, collaborate, and grow as developers.
+
+**Welcome to the community.**  
+We're excited to see what you'll share!
+
+**-Codebility Team**
+
+`,
+  image_url: "/assets/images/system-post-feed.png",
+  created_at: "2026-02-11T00:00:00.000Z",
+  author_id: {
+    id: "00000000-0000-0000-0000-000000000000",
+    first_name: "Codebility",
+    last_name: "",
+    image_url: "/favicon.ico",
+  },
+  upvote_count: 0,
+  comment_count: 0,
+  tags: [
+    { tag_id: "system-1", name: "New Release" },
+    { tag_id: "system-2", name: "Announcement" },
+  ],
+};