maj du frontend

backend/src/controllers/jobSearchController.ts

@@ -72,3 +72,30 @@ export const searchLocalJobOffers = async (req: Request, res: Response) => {
     res.status(500).json({ error: 'Failed to search job offers' });
   }
 };
+
+export const getJobOfferById = async (req: Request, res: Response): Promise<void> => {
+  try {
+    const { id } = req.params; // Récupère l'ID depuis les paramètres de l'URL
+
+    if (!id) {
+      res.status(400).json({ error: 'Job offer ID is required.' });
+      return;
+    }
+
+    const job = await prisma.jobOffer.findUnique({
+      where: { id: id },
+    });
+
+    if (!job) {
+      res.status(404).json({ error: 'Job offer not found.' });
+      return;
+    }
+
+    res.status(200).json(job);
+  } catch (error) {
+    console.error('Error fetching job offer by ID:', error);
+    res.status(500).json({ error: 'Failed to fetch job offer details.' });
+  } finally {
+    await prisma.$disconnect(); // Assurez-vous de déconnecter Prisma
+  }
+};

backend/src/routes/jobSearchRoutes.ts

@@ -1,8 +1,12 @@
-import express from 'express';
+import { Router } from 'express';
-import { searchLocalJobOffers } from '../controllers/jobSearchController';
+import { searchLocalJobOffers, getJobOfferById } from '../controllers/jobSearchController';
 
-const router = express.Router();
+const router = Router();
 
+// Route pour la recherche d'offres (existante)
 router.get('/api/jobs', searchLocalJobOffers);
 
+// Nouvelle route pour récupérer une offre par ID
+router.get('/api/jobs/:id', getJobOfferById);
+
 export default router;

frontend/package-lock.json

@@ -10,13 +10,15 @@
       "dependencies": {
         "axios": "^1.6.8",
         "react": "^19.1.0",
-        "react-dom": "^19.1.0"
+        "react-dom": "^19.1.0",
+        "react-router-dom": "^7.6.1"
       },
       "devDependencies": {
         "@eslint/js": "^9.25.0",
         "@types/axios": "^0.14.0",
         "@types/react": "^19.1.2",
         "@types/react-dom": "^19.1.2",
+        "@types/react-router-dom": "^5.3.3",
         "@vitejs/plugin-react": "^4.4.1",
         "eslint": "^9.25.0",
         "eslint-plugin-react-hooks": "^5.2.0",
@@ -1409,6 +1411,13 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/history": {
+      "version": "4.7.11",
+      "resolved": "https://registry.npmjs.org/@types/history/-/history-4.7.11.tgz",
+      "integrity": "sha512-qjDJRrmvBMiTx+jyLxvLfJU7UznFuokDv4f3WRuriHKERccVpFU+8XMQUAbDzoiJCsmexxRExQeMwwCdamSKDA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/json-schema": {
       "version": "7.0.15",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
@@ -1436,6 +1445,29 @@
         "@types/react": "^19.0.0"
       }
     },
+    "node_modules/@types/react-router": {
+      "version": "5.1.20",
+      "resolved": "https://registry.npmjs.org/@types/react-router/-/react-router-5.1.20.tgz",
+      "integrity": "sha512-jGjmu/ZqS7FjSH6owMcD5qpq19+1RS9DeVRqfl1FeBMxTDQAGwlMWOcs52NDoXaNKyG3d1cYQFMs9rCrb88o9Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/history": "^4.7.11",
+        "@types/react": "*"
+      }
+    },
+    "node_modules/@types/react-router-dom": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/@types/react-router-dom/-/react-router-dom-5.3.3.tgz",
+      "integrity": "sha512-kpqnYK4wcdm5UaWI3fLcELopqLrHgLqNsdpHauzlQktfkHL3npOSwtj1Uz9oKBAzs7lFtVkV8j83voAz2D8fhw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/history": "^4.7.11",
+        "@types/react": "*",
+        "@types/react-router": "*"
+      }
+    },
     "node_modules/@typescript-eslint/eslint-plugin": {
       "version": "8.32.1",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.32.1.tgz",
@@ -1937,6 +1969,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/cookie": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.0.2.tgz",
+      "integrity": "sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.6",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
@@ -3144,6 +3185,44 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-router": {
+      "version": "7.6.1",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.6.1.tgz",
+      "integrity": "sha512-hPJXXxHJZEsPFNVbtATH7+MMX43UDeOauz+EAU4cgqTn7ojdI9qQORqS8Z0qmDlL1TclO/6jLRYUEtbWidtdHQ==",
+      "license": "MIT",
+      "dependencies": {
+        "cookie": "^1.0.1",
+        "set-cookie-parser": "^2.6.0"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "7.6.1",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.6.1.tgz",
+      "integrity": "sha512-vxU7ei//UfPYQ3iZvHuO1D/5fX3/JOqhNTbRR+WjSBWxf9bIvpWK+ftjmdfJHzPOuMQKe2fiEdG+dZX6E8uUpA==",
+      "license": "MIT",
+      "dependencies": {
+        "react-router": "7.6.1"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      }
+    },
     "node_modules/resolve-from": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
@@ -3245,6 +3324,12 @@
         "semver": "bin/semver.js"
       }
     },
+    "node_modules/set-cookie-parser": {
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.1.tgz",
+      "integrity": "sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ==",
+      "license": "MIT"
+    },
     "node_modules/shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",

frontend/package.json

@@ -9,16 +9,18 @@
     "lint": "eslint .",
     "preview": "vite preview"
   },
-"dependencies": {
+  "dependencies": {
     "axios": "^1.6.8",
     "react": "^19.1.0",
-    "react-dom": "^19.1.0"
+    "react-dom": "^19.1.0",
+    "react-router-dom": "^7.6.1"
   },
-"devDependencies": {
+  "devDependencies": {
     "@eslint/js": "^9.25.0",
     "@types/axios": "^0.14.0",
     "@types/react": "^19.1.2",
     "@types/react-dom": "^19.1.2",
+    "@types/react-router-dom": "^5.3.3",
     "@vitejs/plugin-react": "^4.4.1",
     "eslint": "^9.25.0",
     "eslint-plugin-react-hooks": "^5.2.0",

frontend/src/App.tsx

@@ -1,11 +1,17 @@
-import React from 'react';
+import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'; // Importe les composants de routage
-import JobSearch from './components/JobSearch'; // Importe le nouveau composant
+import JobSearch from './components/JobSearch';
+import JobDetail from './components/JobDetail'; // Importe le nouveau composant de détail
 
 function App() {
   return (
+    <Router> {/* Enveloppe toute l'application dans le routeur */}
       <div className="App">
-      <JobSearch /> {/* Utilise le composant de recherche d'emploi */}
+        <Routes> {/* Définit les routes */}
+          <Route path="/" element={<JobSearch />} /> {/* Route pour la recherche d'offres */}
+          <Route path="/jobs/:id" element={<JobDetail />} /> {/* Route pour le détail d'une offre */}
+        </Routes>
       </div>
+    </Router>
   );
 }
 

frontend/src/components/JobDetail.tsx

@@ -0,0 +1,122 @@
+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' }}>
+        &larr; 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;

frontend/src/components/JobSearch.tsx

@@ -1,8 +1,9 @@
 import React, { useState, useEffect } from 'react';
 import axios from 'axios';
+import { Link } from 'react-router-dom';
 import type { JobOffer, JobSearchResponse } from '../types'; // Importe les types définis
 
-const API_BASE_URL = 'http://localhost:3000/api/jobs'; // L'URL de votre API backend
+const API_BASE_URL = 'http://localhost:3000/api/jobs'; // L'URL de notre API backend
 
 const JobSearch: React.FC = () => {
   const [jobs, setJobs] = useState<JobOffer[]>([]);
@@ -97,8 +98,6 @@ const JobSearch: React.FC = () => {
         <button type="submit">Search</button>
       </form>
 
-      {/* ... (le reste de votre JSX pour l'affichage des résultats et la pagination reste inchangé) ... */}
-
       {loading && <p className="info-message">Loading job offers...</p>}
       {error && <p className="info-message" style={{ color: 'red' }}>Error: {error}</p>}
 
@@ -111,7 +110,9 @@ const JobSearch: React.FC = () => {
           <p className="info-message">Total offers: {total}</p>
           <div className="job-grid">
             {jobs.map((job) => (
-              <div key={job.id} className="job-card">
+              // Enveloppe la carte de l'offre avec un lien
+              <Link to={`/jobs/${job.id}`} key={job.id} style={{ textDecoration: 'none', color: 'inherit' }}>
+                <div className="job-card">
                   <h3>{job.title}</h3>
                   <p><strong>Company:</strong> {job.companyName || 'N/A'}</p>
                   <p><strong>Location:</strong> {job.locationLabel || job.cityName || 'N/A'}</p>
@@ -121,6 +122,7 @@ const JobSearch: React.FC = () => {
                     {job.description?.substring(0, 150)}...
                   </p>
                 </div>
+              </Link>
             ))}
           </div>
 

frontend/src/types.ts

@@ -12,6 +12,13 @@ export interface JobOffer {
   companyName?: string;
   contractType?: string;
   contractLabel?: string;
+  urlOffre?: string; // <-- Assurez-vous que ce champ existe
+  contact?: { // Si vous avez ingéré les infos de contact
+    urlPostulation?: string;
+  };
+  origineOffre?: { // Si vous avez ingéré les infos d'origine
+    urlOrigine?: string;
+  };
   // Ajoutez d'autres champs si votre modèle Prisma JobOffer en contient
 }