add search bar in feeds page

Author: JM-Flores

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

@@ -1,30 +1,57 @@
 "use client";
 
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import DefaultPagination from "@/components/ui/pagination";
 import { useFeedsStore } from "@/store/feeds-store";
 
 import Post from "./PostCard";
 
 interface FeedProp {
   isAdmin: boolean;
-  onCreatePost?: () => void;
+  searchQuery?: string;
 }
 
-export default function Feed({ isAdmin }: FeedProp) {
+export default function Feed({ isAdmin, searchQuery }: FeedProp) {
   const posts = useFeedsStore((state) => state.posts);
   const fetchPosts = useFeedsStore((state) => state.fetchPosts);
 
   const [currentPage, setCurrentPage] = useState(1);
 
+  useEffect(() => {
+    fetchPosts();
+  }, [fetchPosts]);
+
+  // Filter posts by title or author's first/last name (case-insensitive)
+  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
+        ?.toLowerCase()
+        .includes(query);
+      const lastNameMatch = post.author_id?.last_name
+        ?.toLowerCase()
+        .includes(query);
+
+      return titleMatch || firstNameMatch || lastNameMatch;
+    });
+  }, [posts, searchQuery]);
+
   const postsPerPage = 6;
-  const totalPages = Math.ceil(posts.length / postsPerPage);
+  const totalPages = Math.ceil(filteredPosts.length / postsPerPage);
   const startIndex = (currentPage - 1) * postsPerPage;
-  const currentPosts = posts.slice(startIndex, startIndex + postsPerPage);
+  const currentPosts = filteredPosts.slice(
+    startIndex,
+    startIndex + postsPerPage,
+  );
 
+  // Reset to first page when search changes
   useEffect(() => {
-    fetchPosts();
-  }, []);
+    setCurrentPage(1);
+  }, [searchQuery]);
 
   const handleDeletePost = (deletedPostId: string | number) => {
     useFeedsStore.setState((state) => ({
@@ -52,13 +79,16 @@ export default function Feed({ isAdmin }: FeedProp) {
           />
         ))}
       </div>
-      <DefaultPagination
-        totalPages={totalPages}
-        currentPage={currentPage}
-        handleNextPage={handleNextPage}
-        handlePreviousPage={handlePreviousPage}
-        setCurrentPage={setCurrentPage}
-      />
+
+      {filteredPosts.length > 0 && (
+        <DefaultPagination
+          totalPages={totalPages}
+          currentPage={currentPage}
+          handleNextPage={handleNextPage}
+          handlePreviousPage={handlePreviousPage}
+          setCurrentPage={setCurrentPage}
+        />
+      )}
     </>
   );
 }

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

@@ -12,6 +12,8 @@ import { getUserRole } from "./_services/action";
 export default function FeedsPage() {
   const [isAdmin, setIsAdmin] = useState(true);
   const [isModalOpen, setIsModalOpen] = useState(false);
+  const [searchQuery, setSearchQuery] = useState("");
+  const [debouncedQuery, setDebouncedQuery] = useState("");
   const { user } = useUserStore();
 
   useEffect(() => {
@@ -24,6 +26,14 @@ export default function FeedsPage() {
     if (user) fetchRole();
   }, [user]);
 
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedQuery(searchQuery);
+    }, 500); // triggers after 500ms of inactivity
+
+    return () => clearTimeout(handler);
+  }, [searchQuery]);
+
   const openModal = () => setIsModalOpen(true);
   const closeModal = () => setIsModalOpen(false);
 
@@ -45,7 +55,19 @@ export default function FeedsPage() {
           Create Post
         </Button>
 
-        <Feed isAdmin={isAdmin} />
+        {/* Search bar */}
+        <div className="mb-6">
+          <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"
+          />
+        </div>
+
+        {/* Feed component with live search */}
+        <Feed isAdmin={isAdmin} searchQuery={debouncedQuery} />
       </div>
 
       <CreatePostModal isOpen={isModalOpen} onClose={closeModal} />