diff --git a/frontend/src/pages/Posts.tsx b/frontend/src/pages/Posts.tsx index 71441bbe..19c4358b 100644 --- a/frontend/src/pages/Posts.tsx +++ b/frontend/src/pages/Posts.tsx @@ -12,6 +12,9 @@ const Posts = () => { const [tagInput, setTagInput] = useState(''); const [filterTags, setFilterTags] = useState([]); const filterRef = useRef(null); + const [searchQuery, setSearchQuery] = useState(''); + const [currentPage, setCurrentPage] = useState(1); + const postsPerPage = 9; useEffect(() => { const fetchPosts = async () => { @@ -64,11 +67,33 @@ const Posts = () => { }; const filteredPosts = posts.filter(post => - filterTags.every(tag => post.tags.map(t => t.toLowerCase()).includes(tag)) + filterTags.every(tag => post.tags.map(t => t.toLowerCase()).includes(tag)) && + (post.title.toLowerCase().includes(searchQuery.toLowerCase()) || + post.description.toLowerCase().includes(searchQuery.toLowerCase()) || + post.author.username.toLowerCase().includes(searchQuery.toLowerCase())) ); + const totalPages = Math.ceil(filteredPosts.length / postsPerPage); + + const currentPosts = filteredPosts.slice( + (currentPage - 1) * postsPerPage, + currentPage * postsPerPage + ); + + const handlePreviousPage = () => { + if (currentPage > 1) { + setCurrentPage(currentPage - 1); + } + }; + + const handleNextPage = () => { + if (currentPage < totalPages) { + setCurrentPage(currentPage + 1); + } + }; + if (loading) { - return ; + return ; } if (error) { @@ -126,12 +151,44 @@ const Posts = () => { )} + setSearchQuery(e.target.value)} + placeholder="🔍 Search anything" + className="p-2 w-full max-w-xs rounded-md bg-gray-700 text-white focus:outline-none focus:ring-2 focus:ring-blue-500" + />
- {filteredPosts.map((post) => ( - + {currentPosts.map((post, index) => ( + ))}
+
+ + {[...Array(totalPages)].map((_, index) => ( + + ))} + +
); };