refactor(frontend): replace mocks with real api integration in my-jobs
This commit is contained in:
Tiago Yamamoto
parent
31e269034d
commit
6a7759b039
1 changed files with 100 additions and 104 deletions
|
|
@ -1,10 +1,9 @@
|
|||
"use client"
|
||||
|
||||
import { useState } from "react"
|
||||
import { useEffect, useState, useCallback } from "react"
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card"
|
||||
|
|
@ -37,6 +36,7 @@ import {
|
|||
Pause,
|
||||
Play,
|
||||
Zap,
|
||||
Loader2,
|
||||
} from "lucide-react"
|
||||
import Link from "next/link"
|
||||
import {
|
||||
|
|
@ -46,81 +46,18 @@ import {
|
|||
DropdownMenuSeparator,
|
||||
DropdownMenuTrigger,
|
||||
} from "@/components/ui/dropdown-menu"
|
||||
|
||||
// Mock data - in production this would come from API
|
||||
const mockJobs = [
|
||||
{
|
||||
id: "1",
|
||||
title: "Senior Full Stack Developer",
|
||||
type: "Full Time",
|
||||
location: "São Paulo, SP",
|
||||
workMode: "hybrid",
|
||||
salary: "R$ 12,000 - R$ 18,000",
|
||||
applications: 45,
|
||||
views: 320,
|
||||
postedAt: "2 days ago",
|
||||
expiresAt: "28 days left",
|
||||
status: "active",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
title: "Designer UX/UI",
|
||||
type: "Full Time",
|
||||
location: "Remote",
|
||||
workMode: "remote",
|
||||
salary: "R$ 8,000 - R$ 12,000",
|
||||
applications: 32,
|
||||
views: 256,
|
||||
postedAt: "5 days ago",
|
||||
expiresAt: "25 days left",
|
||||
status: "active",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
title: "Product Manager",
|
||||
type: "Full Time",
|
||||
location: "São Paulo, SP",
|
||||
workMode: "onsite",
|
||||
salary: "R$ 15,000 - R$ 20,000",
|
||||
applications: 28,
|
||||
views: 189,
|
||||
postedAt: "1 week ago",
|
||||
expiresAt: "21 days left",
|
||||
status: "active",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
title: "DevOps Engineer",
|
||||
type: "Full Time",
|
||||
location: "São Paulo, SP",
|
||||
workMode: "hybrid",
|
||||
salary: "R$ 14,000 - R$ 20,000",
|
||||
applications: 15,
|
||||
views: 98,
|
||||
postedAt: "2 weeks ago",
|
||||
expiresAt: "14 days left",
|
||||
status: "paused",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
title: "Junior Frontend Developer",
|
||||
type: "Full Time",
|
||||
location: "São Paulo, SP",
|
||||
workMode: "onsite",
|
||||
salary: "R$ 4,000 - R$ 6,000",
|
||||
applications: 120,
|
||||
views: 450,
|
||||
postedAt: "1 month ago",
|
||||
expiresAt: "Expired",
|
||||
status: "closed",
|
||||
},
|
||||
]
|
||||
import { toast } from "sonner"
|
||||
import { authApi, jobsApi, ApiJob, ApiUser } from "@/lib/api"
|
||||
import { formatDistanceToNow } from "date-fns"
|
||||
import { ptBR } from "date-fns/locale"
|
||||
|
||||
const statusConfig = {
|
||||
active: { label: "Active", color: "bg-green-100 text-green-800 border-green-200" },
|
||||
paused: { label: "Paused", color: "bg-yellow-100 text-yellow-800 border-yellow-200" },
|
||||
closed: { label: "Closed", color: "bg-gray-100 text-gray-800 border-gray-200" },
|
||||
draft: { label: "Draft", color: "bg-blue-100 text-blue-800 border-blue-200" },
|
||||
published: { label: "Active", color: "bg-green-100 text-green-800 border-green-200" }, // Mapping published to active style
|
||||
open: { label: "Active", color: "bg-green-100 text-green-800 border-green-200" },
|
||||
}
|
||||
|
||||
const workModeConfig = {
|
||||
|
|
@ -130,10 +67,46 @@ const workModeConfig = {
|
|||
}
|
||||
|
||||
export default function MyJobsPage() {
|
||||
const [jobs] = useState(mockJobs)
|
||||
const [jobs, setJobs] = useState<ApiJob[]>([])
|
||||
const [isLoading, setIsLoading] = useState(true)
|
||||
const [user, setUser] = useState<ApiUser | null>(null)
|
||||
const [statusFilter, setStatusFilter] = useState("all")
|
||||
const [searchTerm, setSearchTerm] = useState("")
|
||||
|
||||
const fetchJobs = useCallback(async () => {
|
||||
try {
|
||||
setIsLoading(true)
|
||||
// 1. Get User to know Company ID
|
||||
const currentUser = await authApi.getCurrentUser()
|
||||
setUser(currentUser)
|
||||
|
||||
if (!currentUser.companyId) {
|
||||
// If user has no company, they shouldn't see jobs or should be prompted to create one
|
||||
// For now just show empty list
|
||||
setJobs([])
|
||||
return
|
||||
}
|
||||
|
||||
// 2. Fetch Jobs for that Company
|
||||
const response = await jobsApi.list({
|
||||
companyId: currentUser.companyId,
|
||||
limit: 100 // Fetch all for now to client-side filter
|
||||
})
|
||||
setJobs(response.data)
|
||||
|
||||
} catch (error) {
|
||||
console.error("Error fetching jobs:", error)
|
||||
toast.error("Failed to load jobs")
|
||||
} finally {
|
||||
setIsLoading(false)
|
||||
}
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
fetchJobs()
|
||||
}, [fetchJobs])
|
||||
|
||||
|
||||
const filteredJobs = jobs.filter((job) => {
|
||||
const matchesStatus = statusFilter === "all" || job.status === statusFilter
|
||||
const matchesSearch =
|
||||
|
|
@ -144,9 +117,25 @@ export default function MyJobsPage() {
|
|||
|
||||
const stats = {
|
||||
total: jobs.length,
|
||||
active: jobs.filter((j) => j.status === "active").length,
|
||||
applications: jobs.reduce((acc, j) => acc + j.applications, 0),
|
||||
views: jobs.reduce((acc, j) => acc + j.views, 0),
|
||||
active: jobs.filter((j) => j.status === "published" || j.status === "open").length,
|
||||
applications: jobs.reduce((acc, j) => acc + (j.applicationCount || 0), 0),
|
||||
views: 0, // Backend does not strictly track views yet per ApiJob interface
|
||||
}
|
||||
|
||||
// Helper to format currency
|
||||
const formatSalary = (min?: number, max?: number) => {
|
||||
if (!min && !max) return "Negotiable"
|
||||
if (min && max) return `R$ ${min.toLocaleString()} - R$ ${max.toLocaleString()}`
|
||||
if (min) return `From R$ ${min.toLocaleString()}`
|
||||
return `Up to R$ ${max?.toLocaleString()}`
|
||||
}
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="flex items-center justify-center min-h-[400px]">
|
||||
<Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
|
|
@ -158,13 +147,15 @@ export default function MyJobsPage() {
|
|||
My Jobs
|
||||
</h1>
|
||||
<p className="text-muted-foreground">
|
||||
Manage your job postings
|
||||
Manage your job postings for {user?.companyId ? "your company" : "..."}
|
||||
</p>
|
||||
</div>
|
||||
<Link href="/dashboard/company/jobs/new">
|
||||
<Button size="lg" className="w-full sm:w-auto">
|
||||
<Plus className="h-5 w-5 mr-2" />
|
||||
Post New Job
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* Stats */}
|
||||
|
|
@ -232,10 +223,9 @@ export default function MyJobsPage() {
|
|||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">All Status</SelectItem>
|
||||
<SelectItem value="active">Active</SelectItem>
|
||||
<SelectItem value="paused">Paused</SelectItem>
|
||||
<SelectItem value="closed">Closed</SelectItem>
|
||||
<SelectItem value="published">Active (Published)</SelectItem>
|
||||
<SelectItem value="draft">Draft</SelectItem>
|
||||
<SelectItem value="closed">Closed</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
|
@ -247,11 +237,13 @@ export default function MyJobsPage() {
|
|||
<CardContent className="p-8 text-center text-muted-foreground">
|
||||
<Briefcase className="h-12 w-12 mx-auto mb-4 opacity-50" />
|
||||
<h3 className="font-semibold text-lg mb-2">No jobs found</h3>
|
||||
<p>Start by posting your first job.</p>
|
||||
<p>Start by posting your first job using the button above.</p>
|
||||
<Link href="/dashboard/company/jobs/new">
|
||||
<Button className="mt-4">
|
||||
<Plus className="h-4 w-4 mr-2" />
|
||||
Post New Job
|
||||
</Button>
|
||||
</Link>
|
||||
</CardContent>
|
||||
</Card>
|
||||
) : (
|
||||
|
|
@ -266,15 +258,15 @@ export default function MyJobsPage() {
|
|||
<h3 className="font-semibold text-lg">{job.title}</h3>
|
||||
<Badge
|
||||
variant="outline"
|
||||
className={statusConfig[job.status as keyof typeof statusConfig].color}
|
||||
className={statusConfig[job.status as keyof typeof statusConfig]?.color || "bg-gray-100"}
|
||||
>
|
||||
{statusConfig[job.status as keyof typeof statusConfig].label}
|
||||
{statusConfig[job.status as keyof typeof statusConfig]?.label || job.status}
|
||||
</Badge>
|
||||
<Badge
|
||||
variant="secondary"
|
||||
className={workModeConfig[job.workMode as keyof typeof workModeConfig].color}
|
||||
className={workModeConfig[job.workMode as keyof typeof workModeConfig]?.color || "bg-gray-100"}
|
||||
>
|
||||
{workModeConfig[job.workMode as keyof typeof workModeConfig].label}
|
||||
{workModeConfig[job.workMode as keyof typeof workModeConfig]?.label || job.workMode}
|
||||
</Badge>
|
||||
</div>
|
||||
<DropdownMenu>
|
||||
|
|
@ -309,17 +301,17 @@ export default function MyJobsPage() {
|
|||
</DropdownMenuItem>
|
||||
<DropdownMenuSeparator />
|
||||
|
||||
{job.status === "active" ? (
|
||||
{job.status === "published" || job.status === "open" ? (
|
||||
<DropdownMenuItem>
|
||||
<Pause className="h-4 w-4 mr-2" />
|
||||
Pause
|
||||
</DropdownMenuItem>
|
||||
) : job.status === "paused" ? (
|
||||
) : (
|
||||
<DropdownMenuItem>
|
||||
<Play className="h-4 w-4 mr-2" />
|
||||
Activate
|
||||
</DropdownMenuItem>
|
||||
) : null}
|
||||
)}
|
||||
<DropdownMenuItem className="text-destructive">
|
||||
<Trash2 className="h-4 w-4 mr-2" />
|
||||
Delete
|
||||
|
|
@ -335,28 +327,30 @@ export default function MyJobsPage() {
|
|||
</span>
|
||||
<span className="flex items-center gap-1">
|
||||
<DollarSign className="h-4 w-4" />
|
||||
{job.salary}
|
||||
{formatSalary(job.salaryMin, job.salaryMax)}
|
||||
</span>
|
||||
<span className="flex items-center gap-1">
|
||||
<Clock className="h-4 w-4" />
|
||||
{job.expiresAt}
|
||||
Posted {formatDistanceToNow(new Date(job.createdAt), { addSuffix: true })}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap gap-6 text-sm">
|
||||
<div className="flex items-center gap-2">
|
||||
<Users className="h-4 w-4 text-blue-500" />
|
||||
<span className="font-medium">{job.applications}</span>
|
||||
<span className="font-medium">{job.applicationCount || 0}</span>
|
||||
<span className="text-muted-foreground">applications</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Eye className="h-4 w-4 text-purple-500" />
|
||||
<span className="font-medium">{job.views}</span>
|
||||
<span className="font-medium">{0}</span>
|
||||
<span className="text-muted-foreground">views</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Calendar className="h-4 w-4 text-gray-500" />
|
||||
<span className="text-muted-foreground">Posted {job.postedAt}</span>
|
||||
<span className="text-muted-foreground">
|
||||
Created {new Date(job.createdAt).toLocaleDateString()}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -369,10 +363,12 @@ export default function MyJobsPage() {
|
|||
Applications
|
||||
</Button>
|
||||
</Link>
|
||||
<Button variant="outline" size="sm" className="flex-1 lg:flex-none">
|
||||
<Link href={`/jobs/${job.id}/edit`} className="flex-1 lg:flex-none">
|
||||
<Button variant="outline" size="sm" className="w-full">
|
||||
<Edit className="h-4 w-4 mr-2" />
|
||||
Edit
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
|
|
|
|||
Loading…
Reference in a new issue