diff --git a/frontend/src/app/vagas/page.tsx b/frontend/src/app/vagas/page.tsx index a204b90..15e1cee 100644 --- a/frontend/src/app/vagas/page.tsx +++ b/frontend/src/app/vagas/page.tsx @@ -27,6 +27,9 @@ function JobsContent() { const [sortBy, setSortBy] = useState("recent") const [showFilters, setShowFilters] = useState(false) + const [currentPage, setCurrentPage] = useState(1) + const ITEMS_PER_PAGE = 10 + useEffect(() => { let isMounted = true @@ -35,7 +38,8 @@ function JobsContent() { setError(null) try { - const response = await jobsApi.list({ limit: 50, page: 1 }) + // Fetch many jobs to allow client-side filtering and pagination + const response = await jobsApi.list({ limit: 1000, page: 1 }) const mappedJobs = response.data.map(transformApiJobToFrontend) if (isMounted) { @@ -64,6 +68,11 @@ function JobsContent() { // Debounce search term para otimizar performance const debouncedSearchTerm = useDebounce(searchTerm, 300) + // Reset page when filters change + useEffect(() => { + setCurrentPage(1) + }, [debouncedSearchTerm, locationFilter, typeFilter, sortBy]) + // Extrair valores únicos para os filtros const uniqueLocations = useMemo(() => { const locations = jobs.map(job => job.location) @@ -108,6 +117,13 @@ function JobsContent() { return filtered }, [debouncedSearchTerm, locationFilter, typeFilter, sortBy, jobs]) + // Pagination Logic + const totalPages = Math.ceil(filteredAndSortedJobs.length / ITEMS_PER_PAGE) + const paginatedJobs = filteredAndSortedJobs.slice( + (currentPage - 1) * ITEMS_PER_PAGE, + currentPage * ITEMS_PER_PAGE + ) + const hasActiveFilters = searchTerm || locationFilter !== "all" || typeFilter !== "all" const clearFilters = () => { @@ -156,7 +172,7 @@ function JobsContent() { className="pl-10 h-12" /> - +