122 lines
4.6 KiB
TypeScript
122 lines
4.6 KiB
TypeScript
import React, { useState, useEffect } from 'react';
|
|
import { useParams, Link } from 'react-router-dom';
|
|
import axios from 'axios';
|
|
import type { JobOffer } from '../types'; // Use type-only import
|
|
|
|
const API_BASE_URL = 'http://localhost:3000/api/jobs';
|
|
|
|
const JobDetail: React.FC = () => {
|
|
const { id } = useParams<{ id: string }>();
|
|
const [job, setJob] = useState<JobOffer | null>(null);
|
|
const [loading, setLoading] = useState<boolean>(true);
|
|
const [error, setError] = useState<string | null>(null);
|
|
|
|
useEffect(() => {
|
|
const fetchJobDetail = async () => {
|
|
setLoading(true);
|
|
setError(null);
|
|
try {
|
|
const response = await axios.get<JobOffer>(`${API_BASE_URL}/${id}`);
|
|
setJob(response.data);
|
|
} catch (err) {
|
|
console.error('Error fetching job detail:', err);
|
|
if (axios.isAxiosError(err) && err.response?.status === 404) {
|
|
setError('Job offer not found.');
|
|
} else {
|
|
setError('Failed to load job offer details. Please try again.');
|
|
}
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
if (id) {
|
|
fetchJobDetail();
|
|
}
|
|
}, [id]);
|
|
|
|
const handleApplyClick = () => {
|
|
// Logique pour trouver la meilleure URL de candidature
|
|
const applyUrl = job?.urlOffre || job?.contact?.urlPostulation || job?.origineOffre?.urlOrigine;
|
|
|
|
if (applyUrl) {
|
|
window.open(applyUrl, '_blank'); // Ouvre l'URL dans un nouvel onglet
|
|
} else {
|
|
alert("No application URL available for this job offer.");
|
|
}
|
|
};
|
|
|
|
if (loading) {
|
|
return <p className="info-message">Loading job details...</p>;
|
|
}
|
|
|
|
if (error) {
|
|
return (
|
|
<div className="job-detail-container">
|
|
<p className="info-message" style={{ color: 'red' }}>Error: {error}</p>
|
|
<Link to="/" style={{ display: 'block', textAlign: 'center', marginTop: '20px' }}>Back to Search</Link>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (!job) {
|
|
return (
|
|
<div className="job-detail-container">
|
|
<p className="info-message">No job details available.</p>
|
|
<Link to="/" style={{ display: 'block', textAlign: 'center', marginTop: '20px' }}>Back to Search</Link>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="job-detail-container" style={{ padding: '20px', maxWidth: '800px', margin: '20px auto', backgroundColor: '#fff', borderRadius: '8px', boxShadow: '0 4px 8px rgba(0,0,0,0.1)' }}>
|
|
<Link to="/" style={{ textDecoration: 'none', color: '#3498db', fontWeight: 'bold', marginBottom: '20px', display: 'inline-block' }}>
|
|
← Back to Job Search
|
|
</Link>
|
|
<h1 style={{ color: '#2c3e50', marginBottom: '10px' }}>{job.title}</h1>
|
|
<p style={{ fontSize: '1.1em', color: '#555', marginBottom: '15px' }}>
|
|
<strong>Company:</strong> {job.companyName || 'N/A'}
|
|
</p>
|
|
<p style={{ fontSize: '1.1em', color: '#555', marginBottom: '15px' }}>
|
|
<strong>Location:</strong> {job.locationLabel || job.cityName || 'N/A'}
|
|
</p>
|
|
<p style={{ fontSize: '1.1em', color: '#555', marginBottom: '15px' }}>
|
|
<strong>Contract:</strong> {job.contractLabel || job.contractType || 'N/A'}
|
|
</p>
|
|
<p style={{ fontSize: '1.1em', color: '#555', marginBottom: '15px' }}>
|
|
<strong>Published:</strong> {new Date(job.publicationDate).toLocaleDateString()}
|
|
</p>
|
|
{job.romeLabel && <p style={{ fontSize: '1.1em', color: '#555', marginBottom: '15px' }}><strong>ROME:</strong> {job.romeLabel}</p>}
|
|
{job.postalCode && <p style={{ fontSize: '1.1em', color: '#555', marginBottom: '15px' }}><strong>Postal Code:</strong> {job.postalCode}</p>}
|
|
{job.departmentCode && <p style={{ fontSize: '1.1em', color: '#555', marginBottom: '15px' }}><strong>Department Code:</strong> {job.departmentCode}</p>}
|
|
|
|
<h2 style={{ color: '#2c3e50', marginTop: '30px', marginBottom: '10px' }}>Description</h2>
|
|
<p style={{ lineHeight: '1.6', whiteSpace: 'pre-wrap' }}>{job.description}</p>
|
|
|
|
{/* Bouton Postuler */}
|
|
{(job.urlOffre || job.contact?.urlPostulation || job.origineOffre?.urlOrigine) && (
|
|
<button
|
|
onClick={handleApplyClick}
|
|
style={{
|
|
backgroundColor: '#28a745', // Vert pour le bouton "Postuler"
|
|
color: 'white',
|
|
border: 'none',
|
|
borderRadius: '5px',
|
|
padding: '12px 25px',
|
|
fontSize: '1.1em',
|
|
cursor: 'pointer',
|
|
marginTop: '30px',
|
|
display: 'block',
|
|
width: 'fit-content',
|
|
margin: '30px auto 0 auto',
|
|
transition: 'background-color 0.3s ease',
|
|
}}
|
|
>
|
|
Apply Now
|
|
</button>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default JobDetail;
|