Merge pull request #454 from CodebilityDev/miguel/feeds-scroll-and-sort

Miguel/feeds scroll and sort

Author: yyyort

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

@@ -1,32 +1,37 @@
 "use client";
 
-import { useEffect, useMemo, useState } from "react";
-import DefaultPagination from "@/components/ui/pagination";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { useFeedsStore } from "@/store/feeds-store";
 
 import Post from "./PostCard";
 
 interface FeedProp {
   isAdmin: boolean;
   searchQuery?: string;
+  sortField: "title" | "date" | "upvotes";
+  sortOrder: "asc" | "desc";
 }
 
-export default function Feed({ isAdmin, searchQuery }: FeedProp) {
+export default function Feed({
+  isAdmin,
+  searchQuery,
+  sortField,
+  sortOrder,
+}: FeedProp) {
   const posts = useFeedsStore((state) => state.posts);
   const fetchPosts = useFeedsStore((state) => state.fetchPosts);
 
-  const [currentPage, setCurrentPage] = useState(1);
+  const [visibleCount, setVisibleCount] = useState(6);
+  const loaderRef = useRef<HTMLDivElement | null>(null);
 
   useEffect(() => {
     fetchPosts();
   }, [fetchPosts]);
 
-  // Filter posts by title or author's first/last name (case-insensitive)
+  // Filter posts
   const filteredPosts = useMemo(() => {
     if (!searchQuery || searchQuery.trim() === "") return posts;
-
     const query = searchQuery.toLowerCase();
-
     return posts.filter((post) => {
       const titleMatch = post.title?.toLowerCase().includes(query);
       const firstNameMatch = post.author_id?.first_name
@@ -35,42 +40,74 @@ export default function Feed({ isAdmin, searchQuery }: FeedProp) {
       const lastNameMatch = post.author_id?.last_name
         ?.toLowerCase()
         .includes(query);
-
       return titleMatch || firstNameMatch || lastNameMatch;
     });
   }, [posts, searchQuery]);
 
-  const postsPerPage = 6;
-  const totalPages = Math.ceil(filteredPosts.length / postsPerPage);
-  const startIndex = (currentPage - 1) * postsPerPage;
-  const currentPosts = filteredPosts.slice(
-    startIndex,
-    startIndex + postsPerPage,
-  );
+  // Sort posts
+  const sortedPosts = useMemo(() => {
+    const sorted = [...filteredPosts];
+    sorted.sort((a, b) => {
+      let aVal: string | number = "";
+      let bVal: string | number = "";
+
+      switch (sortField) {
+        case "title":
+          aVal = a.title?.toLowerCase() || "";
+          bVal = b.title?.toLowerCase() || "";
+          break;
+        case "date":
+          aVal = new Date(a.created_at).getTime();
+          bVal = new Date(b.created_at).getTime();
+          break;
+        case "upvotes":
+          aVal = a.upvote_count ?? 0;
+          bVal = b.upvote_count ?? 0;
+          break;
+      }
+
+      if (aVal < bVal) return sortOrder === "asc" ? -1 : 1;
+      if (aVal > bVal) return sortOrder === "asc" ? 1 : -1;
+      return 0;
+    });
+    return sorted;
+  }, [filteredPosts, sortField, sortOrder]);
+
+  const visiblePosts = sortedPosts.slice(0, visibleCount);
 
-  // Reset to first page when search changes
   useEffect(() => {
-    setCurrentPage(1);
+    setVisibleCount(6);
   }, [searchQuery]);
 
+  // Infinite scroll
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      (entries) => {
+        const entry = entries[0];
+        if (entry?.isIntersecting) {
+          setVisibleCount((prev) => Math.min(prev + 6, sortedPosts.length));
+        }
+      },
+      { threshold: 1 },
+    );
+
+    const currentLoader = loaderRef.current;
+    if (currentLoader) observer.observe(currentLoader);
+    return () => {
+      if (currentLoader) observer.unobserve(currentLoader);
+    };
+  }, [sortedPosts.length]);
   const handleDeletePost = (deletedPostId: string | number) => {
     useFeedsStore.setState((state) => ({
       posts: state.posts.filter((post) => post.id !== deletedPostId),
     }));
   };
 
-  const handleNextPage = () => {
-    if (currentPage < totalPages) setCurrentPage((p) => p + 1);
-  };
-
-  const handlePreviousPage = () => {
-    if (currentPage > 1) setCurrentPage((p) => p - 1);
-  };
-
   return (
     <>
+      {/* Posts grid */}
       <div className="grid grid-cols-1 gap-4 md:grid-cols-3">
-        {currentPosts.map((post) => (
+        {visiblePosts.map((post) => (
           <Post
             key={post.id}
             post={post}
@@ -80,14 +117,22 @@ export default function Feed({ isAdmin, searchQuery }: FeedProp) {
         ))}
       </div>
 
-      {filteredPosts.length > 0 && (
-        <DefaultPagination
-          totalPages={totalPages}
-          currentPage={currentPage}
-          handleNextPage={handleNextPage}
-          handlePreviousPage={handlePreviousPage}
-          setCurrentPage={setCurrentPage}
-        />
+      {/* Loader */}
+      {visibleCount < sortedPosts.length && (
+        <div
+          ref={loaderRef}
+          className="mt-6 flex justify-center text-sm text-gray-500"
+        >
+          <div className="flex items-center gap-2">
+            <div className="h-4 w-4 animate-spin rounded-full border-2 border-gray-400 border-t-transparent" />
+            Loading more posts...
+          </div>
+        </div>
+      )}
+
+      {/* Empty state */}
+      {sortedPosts.length === 0 && (
+        <div className="mt-8 text-center text-gray-500">No posts found.</div>
       )}
     </>
   );

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

@@ -5,22 +5,30 @@ import { createClientServerComponent } from "@/utils/supabase/server";
 export const getPosts = async () => {
   try {
     const supabase = await createClientServerComponent();
-  
+
     const { data: posts, error } = await supabase
-    .from("posts")
-    .select(`
-      *,
-      author_id(
-        id,
-        first_name,
-        last_name,
-        image_url
-      )
-      `).order('created_at', { ascending: false });
+      .from("posts")
+      .select(`
+        *,
+        author_id (
+          id,
+          first_name,
+          last_name,
+          image_url
+        ),
+        post_upvotes (id)
+      `)
+      .order("created_at", { ascending: false });
 
     if (error) throw error;
 
-    return posts;
+    // compute upvote count based on the joined array
+    const postsWithUpvoteCount = posts.map((post) => ({
+      ...post,
+      upvote_count: post.post_upvotes ? post.post_upvotes.length : 0,
+    }));
+
+    return postsWithUpvoteCount;
   } catch (error) {
     console.error(error);
     throw error;
@@ -39,5 +47,5 @@ export type PostType = {
     image_url?: string;
   };
   image_url?: string;
-  upvoters_id?: string[];
+  upvote_count?: number;
 };

apps/codebility/app/home/feeds/page.tsx

@@ -4,16 +4,23 @@ import { useEffect, useState } from "react";
 import CreatePostModal from "@/components/modals/CreatePostModal";
 import { Button } from "@/components/ui/button";
 import { useUserStore } from "@/store/codev-store";
+import { ChevronDown } from "lucide-react";
 
 import Feed from "./_components/Feed";
 import SocialPointsCard from "./_components/SocialPointsCard";
 import { getUserRole } from "./_services/action";
 
+type SortField = "title" | "date" | "upvotes";
+type SortOrder = "asc" | "desc";
+
 export default function FeedsPage() {
   const [isAdmin, setIsAdmin] = useState(true);
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [searchQuery, setSearchQuery] = useState("");
   const [debouncedQuery, setDebouncedQuery] = useState("");
+  const [sortField, setSortField] = useState<SortField>("date");
+  const [sortOrder, setSortOrder] = useState<SortOrder>("desc");
+  const [sortMenuOpen, setSortMenuOpen] = useState(false);
   const { user } = useUserStore();
 
   useEffect(() => {
@@ -22,15 +29,11 @@ export default function FeedsPage() {
       const role = await getUserRole(user.role_id ?? null);
       setIsAdmin(role === "Admin");
     };
-
     if (user) fetchRole();
   }, [user]);
 
   useEffect(() => {
-    const handler = setTimeout(() => {
-      setDebouncedQuery(searchQuery);
-    }, 500); // triggers after 500ms of inactivity
-
+    const handler = setTimeout(() => setDebouncedQuery(searchQuery), 500);
     return () => clearTimeout(handler);
   }, [searchQuery]);
 
@@ -48,26 +51,90 @@ export default function FeedsPage() {
           </p>
         </div>
 
-        {/* Social Points Card */}
         <SocialPointsCard />
 
         <Button className="mb-4 mt-4 w-auto" onClick={openModal}>
           Create Post
         </Button>
 
-        {/* Search bar */}
-        <div className="mb-6">
+        {/* Search bar + sort button row */}
+        <div className="relative mb-6 flex items-center gap-4">
           <input
             type="text"
             placeholder="Search by title or author name..."
             value={searchQuery}
             onChange={(e) => setSearchQuery(e.target.value)}
-            className="focus:border-customBlue-500 focus:ring-customBlue-500 dark:focus:border-customBlue-400 dark:focus:ring-customBlue-400 h-11 w-full rounded-lg border border-gray-300 bg-gray-50 px-4 text-sm text-gray-900 placeholder-gray-500 focus:outline-none focus:ring-1 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400"
+            className="focus:border-customBlue-500 focus:ring-customBlue-500 h-11 flex-1 rounded-lg border border-gray-300 bg-gray-50 px-4 text-sm text-gray-900 placeholder-gray-500 focus:outline-none focus:ring-1 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400"
           />
+
+          <div className="relative">
+            <button
+              onClick={() => setSortMenuOpen((prev) => !prev)}
+              className="flex h-11 items-center gap-2 rounded-md border border-gray-300 bg-gray-50 px-3 text-sm text-gray-700 shadow-sm hover:bg-gray-100 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600"
+            >
+              Sort:{" "}
+              <span className="capitalize">
+                {sortField} ({sortOrder})
+              </span>
+              <ChevronDown
+                className={`h-4 w-4 transition-transform ${sortMenuOpen ? "rotate-180" : ""}`}
+              />
+            </button>
+
+            {sortMenuOpen && (
+              <div className="absolute right-0 z-50 mt-2 w-48 rounded-md border border-gray-200 bg-white shadow-lg dark:border-gray-600 dark:bg-gray-800 dark:shadow-black/20">
+                {["date", "title", "upvotes"].map((field) => (
+                  <button
+                    key={field}
+                    onClick={() => {
+                      setSortField(field as SortField);
+                      setSortMenuOpen(false);
+                    }}
+                    className={`block w-full px-4 py-2 text-left text-sm text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700 ${
+                      sortField === field ? "text-gray-900 dark:text-white" : ""
+                    }`}
+                  >
+                    Sort by {field}
+                  </button>
+                ))}
+                <div className="border-t border-gray-200 px-3 py-2 text-sm text-gray-500 dark:border-gray-600 dark:text-gray-400">
+                  <div className="flex items-center justify-between">
+                    <span>Order:</span>
+                    <div className="flex gap-2">
+                      <button
+                        onClick={() => setSortOrder("asc")}
+                        className={`rounded px-2 py-1 ${
+                          sortOrder === "asc"
+                            ? "bg-gray-200 text-gray-900 dark:bg-gray-600 dark:text-white"
+                            : "hover:bg-gray-100 dark:hover:bg-gray-700"
+                        }`}
+                      >
+                        Asc
+                      </button>
+                      <button
+                        onClick={() => setSortOrder("desc")}
+                        className={`rounded px-2 py-1 ${
+                          sortOrder === "desc"
+                            ? "bg-gray-200 text-gray-900 dark:bg-gray-600 dark:text-white"
+                            : "hover:bg-gray-100 dark:hover:bg-gray-700"
+                        }`}
+                      >
+                        Desc
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            )}
+          </div>
         </div>
 
-        {/* Feed component with live search */}
-        <Feed isAdmin={isAdmin} searchQuery={debouncedQuery} />
+        <Feed
+          isAdmin={isAdmin}
+          searchQuery={debouncedQuery}
+          sortField={sortField}
+          sortOrder={sortOrder}
+        />
       </div>
 
       <CreatePostModal isOpen={isModalOpen} onClose={closeModal} />