From 71f9b8ed82a08d7c8ff4a169004f40e7e23a134e Mon Sep 17 00:00:00 2001
From: quasar <el.beress@gmail.com>
Date: Mon, 26 May 2025 23:46:18 +0200
Subject: [PATCH] Correction du jobdetail

---
 frontend/src/components/JobDetail.tsx | 54 ++++++++++++++++-----------
 frontend/tsconfig.node.json           |  1 -
 2 files changed, 32 insertions(+), 23 deletions(-)

diff --git a/frontend/src/components/JobDetail.tsx b/frontend/src/components/JobDetail.tsx
index d5cddd1..83ec8c6 100644
--- a/frontend/src/components/JobDetail.tsx
+++ b/frontend/src/components/JobDetail.tsx
@@ -19,11 +19,11 @@ const JobDetail: React.FC = () => {
         const response = await axios.get<JobOffer>(`${API_BASE_URL}/${id}`);
         setJob(response.data);
       } catch (err) {
-        console.error('Error fetching job detail:', err);
+        console.error('Erreur lors de la récupération des détails de l\'offre:', err);
         if (axios.isAxiosError(err) && err.response?.status === 404) {
-          setError('Job offer not found.');
+          setError('Offre d\'emploi non trouvée.');
         } else {
-          setError('Failed to load job offer details. Please try again.');
+          setError('Impossible de charger les détails de l\'offre. Veuillez réessayer.');
         }
       } finally {
         setLoading(false);
@@ -36,25 +36,24 @@ const JobDetail: React.FC = () => {
   }, [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
+      window.open(applyUrl, '_blank', 'noopener,noreferrer');
     } else {
-      alert("No application URL available for this job offer.");
+      alert("Aucune URL de candidature disponible pour cette offre.");
     }
   };
 
   if (loading) {
-    return <p className="info-message">Loading job details...</p>;
+    return <p className="info-message">Chargement des détails de l'offre...</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>
+        <p className="info-message" style={{ color: 'red' }}>Erreur : {error}</p>
+        <Link to="/" style={{ display: 'block', textAlign: 'center', marginTop: '20px' }}>Retour à la recherche</Link>
       </div>
     );
   }
@@ -62,8 +61,8 @@ const JobDetail: React.FC = () => {
   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>
+        <p className="info-message">Aucun détail d'offre disponible.</p>
+        <Link to="/" style={{ display: 'block', textAlign: 'center', marginTop: '20px' }}>Retour à la recherche</Link>
       </div>
     );
   }
@@ -71,24 +70,24 @@ const JobDetail: React.FC = () => {
   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' }}>
-        &larr; Back to Job Search
+        &larr; Retour à la recherche
       </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'}
+        <strong>Entreprise :</strong> {job.companyName || 'Non spécifié'}
       </p>
       <p style={{ fontSize: '1.1em', color: '#555', marginBottom: '15px' }}>
-        <strong>Location:</strong> {job.locationLabel || job.cityName || 'N/A'}
+        <strong>Localisation :</strong> {job.locationLabel || job.cityName || 'Non spécifié'}
       </p>
       <p style={{ fontSize: '1.1em', color: '#555', marginBottom: '15px' }}>
-        <strong>Contract:</strong> {job.contractLabel || job.contractType || 'N/A'}
+        <strong>Type de contrat :</strong> {job.contractLabel || job.contractType || 'Non spécifié'}
       </p>
       <p style={{ fontSize: '1.1em', color: '#555', marginBottom: '15px' }}>
-        <strong>Published:</strong> {new Date(job.publicationDate).toLocaleDateString()}
+        <strong>Date de publication :</strong> {new Date(job.publicationDate).toLocaleDateString('fr-FR')}
       </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>}
+      {job.romeLabel && <p style={{ fontSize: '1.1em', color: '#555', marginBottom: '15px' }}><strong>Code ROME :</strong> {job.romeLabel}</p>}
+      {job.postalCode && <p style={{ fontSize: '1.1em', color: '#555', marginBottom: '15px' }}><strong>Code postal :</strong> {job.postalCode}</p>}
+      {job.departmentCode && <p style={{ fontSize: '1.1em', color: '#555', marginBottom: '15px' }}><strong>Département :</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>
@@ -98,7 +97,7 @@ const JobDetail: React.FC = () => {
         <button
           onClick={handleApplyClick}
           style={{
-            backgroundColor: '#28a745', // Vert pour le bouton "Postuler"
+            backgroundColor: '#28a745',
             color: 'white',
             border: 'none',
             borderRadius: '5px',
@@ -109,10 +108,21 @@ const JobDetail: React.FC = () => {
             display: 'block',
             width: 'fit-content',
             margin: '30px auto 0 auto',
-            transition: 'background-color 0.3s ease',
+            transition: 'all 0.3s ease',
+            boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
+          }}
+          onMouseOver={(e) => {
+            e.currentTarget.style.backgroundColor = '#218838';
+            e.currentTarget.style.transform = 'translateY(-1px)';
+            e.currentTarget.style.boxShadow = '0 4px 8px rgba(0,0,0,0.2)';
+          }}
+          onMouseOut={(e) => {
+            e.currentTarget.style.backgroundColor = '#28a745';
+            e.currentTarget.style.transform = 'translateY(0)';
+            e.currentTarget.style.boxShadow = '0 2px 4px rgba(0,0,0,0.1)';
           }}
         >
-          Apply Now
+          Postuler maintenant
         </button>
       )}
     </div>
diff --git a/frontend/tsconfig.node.json b/frontend/tsconfig.node.json
index 9728af2..d9aa8a8 100644
--- a/frontend/tsconfig.node.json
+++ b/frontend/tsconfig.node.json
@@ -17,7 +17,6 @@
     "strict": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
-    "erasableSyntaxOnly": true,
     "noFallthroughCasesInSwitch": true,
     "noUncheckedSideEffectImports": true
   },