"use client" import { useEffect, useMemo, useState } from "react" import Link from "next/link" import { ArrowRight, Briefcase, ChevronLeft, ChevronRight, MapPin } from "lucide-react" import { get } from "@/lib/api" type Job = { job_id: string job_title: string city: string state: string department: string employee_type: string | null job_link: string } type Paginated = { data: T[] current_page: number last_page: number total: number } type ApiEnvelope = { success: boolean message: string data: T } const ROLES_PER_PAGE = 5 export default function CommunityOpenRoles({ community }: { community: string }) { const [jobs, setJobs] = useState([]) const [page, setPage] = useState(1) const [totalPages, setTotalPages] = useState(1) const [loading, setLoading] = useState(true) const [error, setError] = useState(false) useEffect(() => { setPage(1) }, [community]) useEffect(() => { let cancelled = false setLoading(true) setError(false) get>>("/job-requisitions", { params: { community, sortBy: "newest", page, per_page: ROLES_PER_PAGE }, }) .then((res) => { if (cancelled) return setJobs(res.data.data) setTotalPages(Math.max(1, res.data.last_page)) }) .catch(() => { if (cancelled) return setError(true) setJobs([]) setTotalPages(1) }) .finally(() => { if (!cancelled) setLoading(false) }) return () => { cancelled = true } }, [community, page]) const pageNumbers = useMemo(() => { if (totalPages <= 7) return Array.from({ length: totalPages }, (_, i) => i + 1) if (page <= 4) return [1, 2, 3, 4, 5, "...", totalPages] if (page >= totalPages - 3) return [1, "...", totalPages - 4, totalPages - 3, totalPages - 2, totalPages - 1, totalPages] return [1, "...", page - 1, page, page + 1, "...", totalPages] }, [page, totalPages]) if (loading) { return (

Loading open positions…

) } if (error || jobs.length === 0) { return (
{/*
*/}

{error ? "We couldn't load open positions right now. Please try again shortly." : `There are no open positions at ${community} right now. Check back soon or browse all careers.`}

{/* Browse All Careers
) } return (
{jobs.map((job) => (

{job.job_title}

{job.department} {job.employee_type && ( {job.employee_type} )}

Apply
))} {totalPages > 1 && ( )}
) }