498 lines
20 KiB
TypeScript
498 lines
20 KiB
TypeScript
"use client"
|
|
|
|
import { useSearchParams } from "next/navigation"
|
|
import { useEffect, useState, useMemo, Suspense } from "react"
|
|
import { Navbar } from "@/components/navbar"
|
|
import { Footer } from "@/components/footer"
|
|
import { JobCard } from "@/components/job-card"
|
|
import { Input } from "@/components/ui/input"
|
|
import { Button } from "@/components/ui/button"
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
|
|
import { Badge } from "@/components/ui/badge"
|
|
import { Card, CardContent } from "@/components/ui/card"
|
|
import { PageSkeleton } from "@/components/loading-skeletons"
|
|
import { jobsApi, transformApiJobToFrontend } from "@/lib/api"
|
|
import { useDebounce } from "@/hooks/use-utils"
|
|
import { useTranslation } from "@/lib/i18n"
|
|
import { Search, MapPin, Briefcase, SlidersHorizontal, X, ArrowUpDown } from "lucide-react"
|
|
import { motion, AnimatePresence } from "framer-motion"
|
|
import type { Job } from "@/lib/types"
|
|
|
|
function JobsContent() {
|
|
const { t } = useTranslation()
|
|
const searchParams = useSearchParams()
|
|
|
|
// State
|
|
const [jobs, setJobs] = useState<Job[]>([])
|
|
const [loading, setLoading] = useState(true)
|
|
const [error, setError] = useState<string | null>(null)
|
|
|
|
// Filters state
|
|
const [searchTerm, setSearchTerm] = useState("")
|
|
const [locationFilter, setLocationFilter] = useState("")
|
|
const [typeFilter, setTypeFilter] = useState("all")
|
|
const [workModeFilter, setWorkModeFilter] = useState("all")
|
|
const [sortBy, setSortBy] = useState("recent")
|
|
const [showFilters, setShowFilters] = useState(false)
|
|
|
|
// Advanced filters
|
|
const [salaryMin, setSalaryMin] = useState("")
|
|
const [salaryMax, setSalaryMax] = useState("")
|
|
const [currencyFilter, setCurrencyFilter] = useState("all")
|
|
const [visaSupport, setVisaSupport] = useState(false)
|
|
|
|
// Pagination state
|
|
const [currentPage, setCurrentPage] = useState(1)
|
|
const [totalJobs, setTotalJobs] = useState(0)
|
|
const ITEMS_PER_PAGE = 10
|
|
|
|
// Optimize search inputs
|
|
const debouncedSearchTerm = useDebounce(searchTerm, 500)
|
|
const debouncedLocation = useDebounce(locationFilter, 500)
|
|
|
|
// Initial params
|
|
useEffect(() => {
|
|
const tech = searchParams.get("tech")
|
|
const q = searchParams.get("q")
|
|
const s = searchParams.get("s")
|
|
const type = searchParams.get("type")
|
|
const location = searchParams.get("location")
|
|
const l = searchParams.get("l")
|
|
const mode = searchParams.get("mode")
|
|
const workMode = searchParams.get("workMode")
|
|
|
|
if (tech || q || s) {
|
|
setSearchTerm(tech || q || s || "")
|
|
setShowFilters(true)
|
|
}
|
|
|
|
if (location || l) {
|
|
setLocationFilter(location || l || "")
|
|
setShowFilters(true)
|
|
}
|
|
|
|
if (type === "remote") {
|
|
setWorkModeFilter("remote")
|
|
setShowFilters(true)
|
|
} else if (mode || workMode) {
|
|
setWorkModeFilter(mode || workMode || "all")
|
|
setShowFilters(true)
|
|
}
|
|
}, [searchParams])
|
|
|
|
// Reset page when filters change (debounced)
|
|
useEffect(() => {
|
|
setCurrentPage(1)
|
|
}, [debouncedSearchTerm, debouncedLocation, typeFilter, workModeFilter])
|
|
|
|
// Main Fetch Logic
|
|
useEffect(() => {
|
|
let isMounted = true
|
|
|
|
const fetchJobs = async () => {
|
|
setLoading(true)
|
|
setError(null)
|
|
|
|
try {
|
|
const response = await jobsApi.list({
|
|
page: currentPage,
|
|
limit: ITEMS_PER_PAGE,
|
|
q: debouncedSearchTerm || undefined,
|
|
location: debouncedLocation || undefined,
|
|
type: typeFilter === "all" ? undefined : typeFilter,
|
|
workMode: workModeFilter === "all" ? undefined : workModeFilter,
|
|
salaryMin: salaryMin ? parseFloat(salaryMin) : undefined,
|
|
salaryMax: salaryMax ? parseFloat(salaryMax) : undefined,
|
|
currency: currencyFilter === "all" ? undefined : currencyFilter,
|
|
visaSupport: visaSupport || undefined,
|
|
sortBy: sortBy || undefined,
|
|
})
|
|
|
|
// Transform the raw API response to frontend format
|
|
const mappedJobs = (response.data || []).map(job => transformApiJobToFrontend(job));
|
|
|
|
if (isMounted) {
|
|
setJobs(mappedJobs)
|
|
setTotalJobs(response.pagination?.total || 0)
|
|
}
|
|
} catch (err) {
|
|
console.error("Error fetching jobs", err)
|
|
if (isMounted) {
|
|
setError(t('jobs.error'))
|
|
setJobs([])
|
|
setTotalJobs(0)
|
|
}
|
|
} finally {
|
|
if (isMounted) {
|
|
setLoading(false)
|
|
}
|
|
}
|
|
}
|
|
|
|
fetchJobs()
|
|
|
|
return () => {
|
|
isMounted = false
|
|
}
|
|
}, [
|
|
currentPage,
|
|
debouncedSearchTerm,
|
|
debouncedLocation,
|
|
typeFilter,
|
|
workModeFilter,
|
|
salaryMin,
|
|
salaryMax,
|
|
currencyFilter,
|
|
visaSupport,
|
|
sortBy,
|
|
t,
|
|
])
|
|
|
|
// Computed
|
|
const totalPages = Math.ceil(totalJobs / ITEMS_PER_PAGE)
|
|
const hasActiveFilters = searchTerm || locationFilter || typeFilter !== "all" || workModeFilter !== "all"
|
|
|
|
const clearFilters = () => {
|
|
setSearchTerm("")
|
|
setLocationFilter("")
|
|
setTypeFilter("all")
|
|
setWorkModeFilter("all")
|
|
setSalaryMin("")
|
|
setSalaryMax("")
|
|
setCurrencyFilter("all")
|
|
setVisaSupport(false)
|
|
setSortBy("recent")
|
|
}
|
|
|
|
const getTypeLabel = (type: string) => {
|
|
const label = t(`jobs.types.${type}`)
|
|
return label !== `jobs.types.${type}` ? label : type
|
|
}
|
|
|
|
// Hardcoded options since we don't have all data client-side
|
|
const workModeOptions = ["remote", "hybrid", "onsite"]
|
|
const typeOptions = ["full-time", "part-time", "contract", "dispatch"]
|
|
|
|
return (
|
|
<>
|
|
{/* Hero Section */}
|
|
<section className="relative bg-[#F0932B] py-28 md:py-40 overflow-hidden">
|
|
{/* Imagem de fundo Vagas.jpg sem opacidade */}
|
|
<div className="absolute inset-0 z-0">
|
|
<img
|
|
src="/Vagas.jpg"
|
|
alt="Vagas"
|
|
className="object-cover w-full h-full"
|
|
style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectPosition: 'center 10%' }}
|
|
draggable={false}
|
|
/>
|
|
</div>
|
|
{/* Overlay preto com opacidade 20% */}
|
|
<div className="absolute inset-0 z-10 bg-black opacity-20"></div>
|
|
<div className="absolute inset-0 opacity-10 z-20">
|
|
<div className="absolute top-0 left-0 w-full h-full bg-[radial-gradient(circle_at_30%_50%,rgba(255,255,255,0.2)_0%,transparent_50%)]"></div>
|
|
</div>
|
|
|
|
<div className="container mx-auto px-4 sm:px-6 lg:px-8 relative z-20">
|
|
<div className="max-w-3xl mx-auto text-center text-white">
|
|
<motion.h1
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
className="text-4xl md:text-5xl font-bold mb-4 text-balance drop-shadow-[0_2px_8px_rgba(0,0,0,0.9)]"
|
|
>
|
|
{t('jobs.title')}
|
|
</motion.h1>
|
|
<motion.p
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ delay: 0.1 }}
|
|
className="text-lg opacity-95 text-pretty drop-shadow-[0_2px_8px_rgba(0,0,0,0.9)]"
|
|
>
|
|
{loading ? t('jobs.loading') : t('jobs.subtitle', { count: totalJobs })}
|
|
</motion.p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Search and Filters Section */}
|
|
<section className="py-8 border-b bg-white">
|
|
<div className="container mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div className="max-w-5xl mx-auto space-y-4">
|
|
{/* Main Search Bar */}
|
|
<div className="flex flex-col lg:flex-row gap-4">
|
|
<div className="flex-1 relative">
|
|
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
|
|
<Input
|
|
placeholder={t('jobs.search')}
|
|
value={searchTerm}
|
|
onChange={(e) => setSearchTerm(e.target.value)}
|
|
className="pl-10 h-12"
|
|
/>
|
|
</div>
|
|
|
|
<div className="flex-1 relative max-w-xs">
|
|
<MapPin className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
|
|
<Input
|
|
placeholder={t('jobs.filters.location')}
|
|
value={locationFilter}
|
|
onChange={(e) => setLocationFilter(e.target.value)}
|
|
className="pl-10 h-12"
|
|
/>
|
|
</div>
|
|
|
|
<div className="flex gap-2">
|
|
<Button
|
|
variant="outline"
|
|
onClick={() => setShowFilters(!showFilters)}
|
|
className="h-12 gap-2 hover:bg-[#F0932B]/10 hover:text-[#F0932B] hover:border-[#F0932B]"
|
|
>
|
|
<SlidersHorizontal className="h-4 w-4" />
|
|
{t('jobs.filters.toggle')}
|
|
{hasActiveFilters && (
|
|
<Badge variant="secondary" className="ml-1 px-1 py-0 text-xs bg-[#F0932B] text-white">
|
|
!
|
|
</Badge>
|
|
)}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Advanced Filters */}
|
|
<AnimatePresence>
|
|
{showFilters && (
|
|
<motion.div
|
|
initial={{ opacity: 0, height: 0 }}
|
|
animate={{ opacity: 1, height: "auto" }}
|
|
exit={{ opacity: 0, height: 0 }}
|
|
transition={{ duration: 0.2 }}
|
|
>
|
|
<Card>
|
|
<CardContent className="p-4">
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
|
<Select value={typeFilter} onValueChange={setTypeFilter}>
|
|
<SelectTrigger>
|
|
<Briefcase className="h-4 w-4 mr-2" />
|
|
<SelectValue placeholder={t('jobs.filters.type')} />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="all">{t('jobs.filters.all')}</SelectItem>
|
|
{typeOptions.map((type) => (
|
|
<SelectItem key={type} value={type}>
|
|
{getTypeLabel(type)}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
|
|
<Select value={workModeFilter} onValueChange={setWorkModeFilter}>
|
|
<SelectTrigger>
|
|
<MapPin className="h-4 w-4 mr-2" />
|
|
<SelectValue placeholder={t('jobs.filters.workMode')} />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="all">{t('jobs.filters.all')}</SelectItem>
|
|
{workModeOptions.map((mode) => (
|
|
<SelectItem key={mode} value={mode}>
|
|
{mode === "remote" ? t('workMode.remote') :
|
|
mode === "hybrid" ? t('workMode.hybrid') :
|
|
mode === "onsite" ? t('workMode.onsite') : mode}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
|
|
<Select value={sortBy} onValueChange={setSortBy}>
|
|
<SelectTrigger>
|
|
<ArrowUpDown className="h-4 w-4 mr-2" />
|
|
<SelectValue placeholder={t('jobs.filters.order')} />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="recent">{t('jobs.sort.recent') || 'Mais recentes'}</SelectItem>
|
|
<SelectItem value="salary_desc">{t('jobs.sort.salaryDesc') || 'Maior salário'}</SelectItem>
|
|
<SelectItem value="salary_asc">{t('jobs.sort.salaryAsc') || 'Menor salário'}</SelectItem>
|
|
<SelectItem value="relevance">{t('jobs.sort.relevance') || 'Relevância'}</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
|
|
<Select value={currencyFilter} onValueChange={setCurrencyFilter}>
|
|
<SelectTrigger>
|
|
<SelectValue placeholder="Moeda" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="all">Todas moedas</SelectItem>
|
|
<SelectItem value="BRL">R$ (BRL)</SelectItem>
|
|
<SelectItem value="USD">$ (USD)</SelectItem>
|
|
<SelectItem value="EUR">€ (EUR)</SelectItem>
|
|
<SelectItem value="JPY">¥ (JPY)</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
|
|
{hasActiveFilters && (
|
|
<Button
|
|
variant="outline"
|
|
onClick={clearFilters}
|
|
className="gap-2 hover:bg-red-50 hover:text-red-600 hover:border-red-300"
|
|
>
|
|
<X className="h-4 w-4" />
|
|
{t('jobs.reset')}
|
|
</Button>
|
|
)}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</motion.div>
|
|
)}
|
|
</AnimatePresence>
|
|
|
|
{/* Results Summary */}
|
|
<div className="flex items-center justify-between text-sm text-muted-foreground">
|
|
<span>
|
|
{t('jobs.pagination.showing', {
|
|
from: Math.min((currentPage - 1) * ITEMS_PER_PAGE + 1, totalJobs),
|
|
to: Math.min(currentPage * ITEMS_PER_PAGE, totalJobs),
|
|
total: totalJobs
|
|
})}
|
|
</span>
|
|
{hasActiveFilters && (
|
|
<div className="flex items-center gap-2 flex-wrap">
|
|
<span className="hidden sm:inline">Active filters:</span>
|
|
{searchTerm && (
|
|
<Badge variant="secondary" className="gap-1 bg-[#F0932B]/10 text-[#F0932B] border-[#F0932B]/20">
|
|
"{searchTerm}"
|
|
<button onClick={() => setSearchTerm("")} className="ml-1">
|
|
<X className="h-3 w-3" />
|
|
</button>
|
|
</Badge>
|
|
)}
|
|
{locationFilter && (
|
|
<Badge variant="secondary" className="gap-1 bg-[#F0932B]/10 text-[#F0932B] border-[#F0932B]/20">
|
|
{locationFilter}
|
|
<button onClick={() => setLocationFilter("")} className="ml-1">
|
|
<X className="h-3 w-3" />
|
|
</button>
|
|
</Badge>
|
|
)}
|
|
{typeFilter !== "all" && (
|
|
<Badge variant="secondary" className="gap-1 bg-[#F0932B]/10 text-[#F0932B] border-[#F0932B]/20">
|
|
{typeFilter}
|
|
<button onClick={() => setTypeFilter("all")} className="ml-1">
|
|
<X className="h-3 w-3" />
|
|
</button>
|
|
</Badge>
|
|
)}
|
|
{workModeFilter !== "all" && (
|
|
<Badge variant="secondary" className="gap-1 bg-[#F0932B]/10 text-[#F0932B] border-[#F0932B]/20">
|
|
{workModeFilter === "remote" ? t("workMode.remote") :
|
|
workModeFilter === "hybrid" ? t("workMode.hybrid") :
|
|
workModeFilter === "onsite" ? t("workMode.onsite") : workModeFilter}
|
|
<button onClick={() => setWorkModeFilter("all")} className="ml-1">
|
|
<X className="h-3 w-3" />
|
|
</button>
|
|
</Badge>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Jobs Grid */}
|
|
<section className="py-12 bg-white">
|
|
<div className="container mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div className="max-w-5xl mx-auto">
|
|
{error && (
|
|
<div className="mb-6 p-4 bg-amber-50 text-amber-900 rounded-lg border border-amber-200">
|
|
{error}
|
|
</div>
|
|
)}
|
|
|
|
{loading ? (
|
|
<PageSkeleton />
|
|
) : jobs.length > 0 ? (
|
|
<div className="space-y-8">
|
|
<motion.div layout className="grid gap-6">
|
|
<AnimatePresence mode="popLayout">
|
|
{jobs.map((job, index) => (
|
|
<motion.div
|
|
key={job.id}
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
exit={{ opacity: 0, y: -20 }}
|
|
transition={{ delay: index * 0.05 }}
|
|
layout
|
|
>
|
|
<JobCard job={job} />
|
|
</motion.div>
|
|
))}
|
|
</AnimatePresence>
|
|
</motion.div>
|
|
|
|
{/* Pagination Controls */}
|
|
{totalPages > 1 && (
|
|
<div className="flex justify-center items-center gap-2 mt-8">
|
|
<Button
|
|
variant="outline"
|
|
onClick={() => setCurrentPage(p => Math.max(1, p - 1))}
|
|
disabled={currentPage === 1}
|
|
className="hover:bg-[#F0932B]/10 hover:text-[#F0932B] hover:border-[#F0932B]"
|
|
>
|
|
{t('jobs.pagination.previous')}
|
|
</Button>
|
|
<div className="text-sm text-muted-foreground px-4">
|
|
{currentPage} / {totalPages}
|
|
</div>
|
|
<Button
|
|
variant="outline"
|
|
onClick={() => setCurrentPage(p => Math.min(totalPages, p + 1))}
|
|
disabled={currentPage === totalPages}
|
|
className="hover:bg-[#F0932B]/10 hover:text-[#F0932B] hover:border-[#F0932B]"
|
|
>
|
|
{t('jobs.pagination.next')}
|
|
</Button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
) : (
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
className="text-center py-12"
|
|
>
|
|
<div className="max-w-md mx-auto">
|
|
<Search className="h-12 w-12 text-muted-foreground mx-auto mb-4" />
|
|
<h3 className="text-lg font-semibold mb-2">{t('jobs.noResults.title')}</h3>
|
|
<p className="text-muted-foreground mb-4">
|
|
{t('jobs.noResults.desc')}
|
|
</p>
|
|
<Button
|
|
variant="outline"
|
|
onClick={clearFilters}
|
|
className="gap-2 hover:bg-[#F0932B]/10 hover:text-[#F0932B] hover:border-[#F0932B]"
|
|
>
|
|
<X className="h-4 w-4" />
|
|
{t('jobs.resetFilters')}
|
|
</Button>
|
|
</div>
|
|
</motion.div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default function JobsPage() {
|
|
return (
|
|
<div className="min-h-screen flex flex-col">
|
|
<Navbar />
|
|
<main className="flex-1">
|
|
<Suspense fallback={<PageSkeleton />}>
|
|
<JobsContent />
|
|
</Suspense>
|
|
</main>
|
|
<Footer />
|
|
</div>
|
|
)
|
|
}
|