Merge pull request #460 from CodebilityDev/miguel/feed-improvement-2

Miguel/feed improvement 2

Author: yyyort

apps/codebility/app/home/feeds/IMPROVEMENTS.md

@@ -4,10 +4,10 @@ This document outlines potential improvements for the feeds feature based on cod
 
 ## Performance & Optimization
 
-1. **Implement infinite scroll** instead of traditional pagination
+<!-- 1. **Implement infinite scroll** instead of traditional pagination
    - Better UX for feed browsing
    - Reduces cognitive load on users
-   - More engaging scrolling experience
+   - More engaging scrolling experience -->
 
 2. **Add optimistic updates** for upvotes/comments
    - Instant UI feedback before server response
@@ -19,17 +19,12 @@ This document outlines potential improvements for the feeds feature based on cod
    - Automatic background refetching
    - Built-in stale-while-revalidate pattern
 
-4. **Add real-time updates** using Supabase subscriptions
-   - New posts appear automatically without manual refresh
-   - Live upvote/comment count updates
-   - Better collaboration experience
-
-5. **Optimize image loading**
+4. **Optimize image loading**
    - Add blur placeholders (Next.js Image component supports this)
    - Lazy loading for images below the fold
    - Progressive image loading
 
-6. **Memoize filtered posts computation**
+5. **Memoize filtered posts computation**
    - Already using `useMemo` in Feed.tsx:25-41
    - Could optimize further with better dependency keys
    - Consider moving heavy filtering to server-side
@@ -41,11 +36,11 @@ This document outlines potential improvements for the feeds feature based on cod
    - Multiple categories per post
    - Visual category badges
 
-8. **Sort options**
+<!-- 8. **Sort options**
    - Newest first (current default)
    - Most upvoted
    - Trending (combination of recent + upvotes)
-   - Most commented
+   - Most commented -->
 
 9. **Bookmark/save posts**
    - Let users save posts for later reading
@@ -57,10 +52,10 @@ This document outlines potential improvements for the feeds feature based on cod
     - Show content excerpt with "Read more..."
     - Better preview of post content
 
-11. **Comment count display** on PostCard
+<!-- 11. **Comment count display** on PostCard
     - Show engagement metrics at a glance
     - Currently only shows upvote count
-    - Display next to upvote button
+    - Display next to upvote button -->
 
 12. **Share functionality**
     - Copy link to clipboard
@@ -72,22 +67,17 @@ This document outlines potential improvements for the feeds feature based on cod
     - Notify mentioned users
     - Highlight mentions in text
 
-14. **Image gallery view** for posts with multiple images
-    - Currently supports single thumbnail
-    - Carousel/gallery for multiple images
-    - Lightbox for full-size viewing
-
-15. **Draft posts**
+14. **Draft posts**
     - Save work in progress before publishing
     - Auto-save functionality
     - Resume editing later
 
 ## Code Quality & Architecture
 
-16. **Fix hardcoded admin check** (page.tsx:13)
+<!-- 16. **Fix hardcoded admin check** (page.tsx:13)
     - Currently: `const [isAdmin, setIsAdmin] = useState(true);`
     - Should initialize as `false`
-    - Security risk if not properly validated
+    - Security risk if not properly validated -->
 
 17. **Consolidate duplicate user role fetching**
     - Used in page.tsx:20-27 and PostView.tsx:48-52
@@ -110,15 +100,15 @@ This document outlines potential improvements for the feeds feature based on cod
     - Graceful degradation
     - User-friendly error messages
 
-21. **Loading skeletons** for individual post cards
+<!-- 21. **Loading skeletons** for individual post cards
     - Currently only in PostView.tsx:110-115
     - Add to Feed.tsx while posts are loading
-    - Better loading states
+    - Better loading states -->
 
-22. **Extract magic numbers** to constants
+<!-- 22. **Extract magic numbers** to constants
     - `postsPerPage: 6` (Feed.tsx:43)
     - Debounce delay `500ms` (page.tsx:32)
-    - Create `constants.ts` file
+    - Create `constants.ts` file -->
 
 23. **Consistent async/await error handling**
     - Some functions use try/catch, others don't
@@ -234,29 +224,29 @@ This document outlines potential improvements for the feeds feature based on cod
 
 These improvements can be implemented quickly and provide immediate value:
 
-- ✅ **Fix the `isAdmin` initialization bug** (page.tsx:13)
+<!-- - ✅ **Fix the `isAdmin` initialization bug** (page.tsx:13)
   - Change `useState(true)` to `useState(false)`
   - 1-line fix, important security improvement
 
 - ✅ **Add comment count to PostCard component**
   - Query comment count in getPosts
   - Display next to upvote count
-  - ~20 lines of code
+  - ~20 lines of code -->
 
-- ✅ **Extract constants**
+<!-- - ✅ **Extract constants**
   - Create `_constants/index.ts`
   - Move magic numbers: `POSTS_PER_PAGE = 6`, `SEARCH_DEBOUNCE_MS = 500`
-  - Better maintainability
+  - Better maintainability -->
 
-- ✅ **Add loading skeleton for post cards**
+<!-- - ✅ **Add loading skeleton for post cards**
   - Reuse existing Skeleton component
   - Show while `fetchPosts()` is loading
-  - ~15 lines of code
+  - ~15 lines of code -->
 
-- ✅ **Add empty state when no posts match search**
+<!-- - ✅ **Add empty state when no posts match search**
   - Simple conditional in Feed.tsx
   - Better UX than empty grid
-  - ~10 lines of code
+  - ~10 lines of code -->
 
 ## File References
 

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

@@ -3,12 +3,14 @@
 import { useEffect, useMemo, useRef, useState } from "react";
 import { useFeedsStore } from "@/store/feeds-store";
 
+import { POSTS_PER_PAGE } from "../_constants";
 import Post from "./PostCard";
+import PostCardSkeleton from "./PostCardSkeleton";
 
 interface FeedProp {
   isAdmin: boolean;
   searchQuery?: string;
-  sortField: "title" | "date" | "upvotes";
+  sortField: "title" | "date" | "upvotes" | "comments";
   sortOrder: "asc" | "desc";
 }
 
@@ -20,13 +22,14 @@ export default function Feed({
 }: FeedProp) {
   const posts = useFeedsStore((state) => state.posts);
   const fetchPosts = useFeedsStore((state) => state.fetchPosts);
+  const isFetchingPosts = useFeedsStore((state) => state.isFetchingPosts);
 
-  const [visibleCount, setVisibleCount] = useState(6);
+  const [visibleCount, setVisibleCount] = useState(POSTS_PER_PAGE);
   const loaderRef = useRef<HTMLDivElement | null>(null);
 
   useEffect(() => {
     fetchPosts();
-  }, [fetchPosts]);
+  }, []);
 
   // Filter posts
   const filteredPosts = useMemo(() => {
@@ -64,6 +67,10 @@ export default function Feed({
           aVal = a.upvote_count ?? 0;
           bVal = b.upvote_count ?? 0;
           break;
+        case "comments":
+          aVal = a.comment_count ?? 0;
+          bVal = b.comment_count ?? 0;
+          break;
       }
 
       if (aVal < bVal) return sortOrder === "asc" ? -1 : 1;
@@ -76,7 +83,7 @@ export default function Feed({
   const visiblePosts = sortedPosts.slice(0, visibleCount);
 
   useEffect(() => {
-    setVisibleCount(6);
+    setVisibleCount(POSTS_PER_PAGE);
   }, [searchQuery]);
 
   // Infinite scroll
@@ -85,7 +92,9 @@ export default function Feed({
       (entries) => {
         const entry = entries[0];
         if (entry?.isIntersecting) {
-          setVisibleCount((prev) => Math.min(prev + 6, sortedPosts.length));
+          setVisibleCount((prev) =>
+            Math.min(prev + POSTS_PER_PAGE, sortedPosts.length),
+          );
         }
       },
       { threshold: 1 },
@@ -107,18 +116,22 @@ export default function Feed({
     <>
       {/* Posts grid */}
       <div className="grid grid-cols-1 gap-4 md:grid-cols-3">
-        {visiblePosts.map((post) => (
-          <Post
-            key={post.id}
-            post={post}
-            isAdmin={isAdmin}
-            onDelete={handleDeletePost}
-          />
-        ))}
+        {isFetchingPosts
+          ? Array.from({ length: 6 }).map((_, i) => (
+              <PostCardSkeleton key={i} />
+            ))
+          : visiblePosts.map((post) => (
+              <Post
+                key={post.id}
+                post={post}
+                isAdmin={isAdmin}
+                onDelete={handleDeletePost}
+              />
+            ))}
       </div>
 
       {/* Loader */}
-      {visibleCount < sortedPosts.length && (
+      {!isFetchingPosts && visibleCount < sortedPosts.length && (
         <div
           ref={loaderRef}
           className="mt-6 flex justify-center text-sm text-gray-500"
@@ -131,7 +144,7 @@ export default function Feed({
       )}
 
       {/* Empty state */}
-      {sortedPosts.length === 0 && (
+      {!isFetchingPosts && sortedPosts.length === 0 && (
         <div className="mt-8 text-center text-gray-500">No posts found.</div>
       )}
     </>

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

@@ -6,12 +6,13 @@ import { Box } from "@/components/shared/dashboard";
 import { defaultAvatar } from "@/public/assets/images";
 import { useUserStore } from "@/store/codev-store";
 import { format } from "date-fns";
-import { ArrowBigUp } from "lucide-react";
+import { ArrowBigUp, MessageSquare } from "lucide-react";
 import toast from "react-hot-toast";
 
 import { deletePost } from "../_services/action";
 import { PostType } from "../_services/query";
 import { DeleteDialog } from "./DeleteDialog";
+import PostCommentCount from "./PostCommentCount";
 import PostUpvote from "./PostUpvote";
 
 interface PostProps {
@@ -124,6 +125,8 @@ export default function Post({ post, isAdmin, onDelete }: PostProps) {
 
         <div className="mx-4 mt-4 flex items-center space-x-4 text-gray-600 dark:text-gray-400">
           <PostUpvote post={post} />
+
+          <PostCommentCount post={post} />
         </div>
       </Box>
       <FeedPostModal

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

@@ -0,0 +1,20 @@
+export default function PostCardSkeleton() {
+  return (
+    <div className="animate-pulse rounded-lg border bg-white/70 p-4 shadow-lg backdrop-blur-sm dark:bg-gray-800/70">
+      {/* Image */}
+      <div className="h-40 w-full rounded-md bg-gray-200 dark:bg-gray-700" />
+
+      {/* Title */}
+      <div className="mt-4 h-4 w-3/4 rounded bg-gray-200 dark:bg-gray-700" />
+
+      {/* Subtitle */}
+      <div className="mt-2 h-4 w-1/2 rounded bg-gray-200 dark:bg-gray-700" />
+
+      {/* Footer badges */}
+      <div className="mt-4 flex gap-3">
+        <div className="h-4 w-10 rounded bg-gray-200 dark:bg-gray-700" />
+        <div className="h-4 w-10 rounded bg-gray-200 dark:bg-gray-700" />
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,25 @@
+import { useEffect, useState } from "react";
+import { useFeedsStore } from "@/store/feeds-store";
+import { MessageSquare } from "lucide-react";
+
+import { PostType } from "../_services/query";
+
+interface PostCommentCountProps {
+  post: PostType;
+}
+
+export default function PostCommentCount({ post }: PostCommentCountProps) {
+  const [count, setCount] = useState(post.comment_count ?? 0);
+
+  // Update local state whenever the post prop changes
+  useEffect(() => {
+    setCount(post.comment_count ?? 0);
+  }, [post]);
+
+  return (
+    <div className="flex items-center space-x-1">
+      <MessageSquare size={20} className="text-gray-600 dark:text-gray-400" />
+      <span>{count}</span>
+    </div>
+  );
+}

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

@@ -63,11 +63,17 @@ export default function PostUpvote({ post }: PostUpvoteProps) {
 
       if (!isUpvoted) {
         const postUpvote = await AddPostUpvote(post.id, user.id);
+
+        useFeedsStore.getState().updatePost(post.id, {
+          upvote_count: post.comment_count! + 1,
+        });
       } else {
         await removePostUpvote(post.id, user.id);
-      }
 
-      await fetchPosts();
+        useFeedsStore.getState().updatePost(post.id, {
+          upvote_count: post.comment_count! - 1,
+        });
+      }
     }
   };