add sort menu

Author: JM-Flores

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

@@ -8,9 +8,16 @@ 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);
 
@@ -21,12 +28,10 @@ export default function Feed({ isAdmin, searchQuery }: FeedProp) {
     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,43 +40,63 @@ export default function Feed({ isAdmin, searchQuery }: FeedProp) {
       const lastNameMatch = post.author_id?.last_name
         ?.toLowerCase()
         .includes(query);
-
       return titleMatch || firstNameMatch || lastNameMatch;
     });
   }, [posts, searchQuery]);
 
-  const visiblePosts = filteredPosts.slice(0, visibleCount);
+  // 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 visible count when search changes
   useEffect(() => {
     setVisibleCount(6);
   }, [searchQuery]);
 
-  // Infinite scroll logic
+  // Infinite scroll
   useEffect(() => {
     const observer = new IntersectionObserver(
       (entries) => {
         const entry = entries[0];
-        if (entry && entry.isIntersecting) {
-          setVisibleCount((prev) => {
-            if (prev < filteredPosts.length) {
-              return Math.min(prev + 6, filteredPosts.length);
-            }
-            return prev;
-          });
+        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);
     };
-  }, [filteredPosts.length]);
-
+  }, [sortedPosts.length]);
   const handleDeletePost = (deletedPostId: string | number) => {
     useFeedsStore.setState((state) => ({
       posts: state.posts.filter((post) => post.id !== deletedPostId),
@@ -80,6 +105,7 @@ export default function Feed({ isAdmin, searchQuery }: FeedProp) {
 
   return (
     <>
+      {/* Posts grid */}
       <div className="grid grid-cols-1 gap-4 md:grid-cols-3">
         {visiblePosts.map((post) => (
           <Post
@@ -91,8 +117,8 @@ export default function Feed({ isAdmin, searchQuery }: FeedProp) {
         ))}
       </div>
 
-      {/* Loader / sentinel div for infinite scroll */}
-      {visibleCount < filteredPosts.length && (
+      {/* Loader */}
+      {visibleCount < sortedPosts.length && (
         <div
           ref={loaderRef}
           className="mt-6 flex justify-center text-sm text-gray-500"
@@ -105,7 +131,7 @@ export default function Feed({ isAdmin, searchQuery }: FeedProp) {
       )}
 
       {/* Empty state */}
-      {filteredPosts.length === 0 && (
+      {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} />