Portfolio/src/pages/ProjectDetailsPage.jsx

43 lines
1.1 KiB
JavaScript

import { useParams } from "react-router-dom";
import React, { useEffect, useState } from "react";
import NavBar from "../components/NavBar/NavBar.jsx";
import ProjectDetails from "../components/ProjectDetails/ProjectDetails.jsx";
import Footer from "../components/Footer/Footer.jsx";
function ProjectDetailsPage() {
const { id } = useParams();
const [project, setProject] = useState([]);
const [error, setError] = useState(null);
useEffect(() => {
const fetchProject = async () => {
try {
const response = await fetch(`/api/longProjects/${id}`);
if (!response.ok) {
throw new Error(`Erreur HTTP: ${response.status}`);
}
const data = await response.json();
setProject(data);
} catch (err) {
setError(err.message);
}
};
fetchProject();
}, [id]);
if (error) {
return <p>Erreur : {error}</p>;
}
return (
<div>
<ProjectDetails project={project}/>
<Footer/>
</div>
);
}
export default ProjectDetailsPage;