88 lines
3.1 KiB
React
88 lines
3.1 KiB
React
import SingleProject from "../SingleProject/SingleProject.jsx";
|
|
import "./Projects.css"
|
|
import React, {useEffect, useState} from "react";
|
|
import {Link, useLocation} from "react-router-dom";
|
|
import NavBar from "../NavBar/NavBar.jsx";
|
|
|
|
function Projects() {
|
|
const [projects, setProjects] = useState([]);
|
|
const [error, setError] = useState(null);
|
|
const location = useLocation();
|
|
|
|
useEffect(() => {
|
|
const fetchProjects = async () => {
|
|
try {
|
|
const response = await fetch('/api/projects/');
|
|
if (!response.ok) {
|
|
throw new Error(`Erreur HTTP: ${response.status}`);
|
|
}
|
|
const data = await response.json();
|
|
setProjects(data.data);
|
|
} catch (err) {
|
|
setError(err.message);
|
|
}
|
|
};
|
|
fetchProjects();
|
|
}, []);
|
|
|
|
|
|
if (error) {
|
|
return <div>Error retrieving data: {error}</div>;
|
|
}
|
|
|
|
if (location.pathname === '/') {
|
|
return (
|
|
<section id="projects-section">
|
|
<h1 className="section-title">Projects</h1>
|
|
<div className="projects-section-list">
|
|
{projects
|
|
.filter(project => project.id <= 3)
|
|
.map(project => (
|
|
<SingleProject
|
|
image={project.image_name}
|
|
title={project.title}
|
|
description={project.description}
|
|
skills={project.skills}
|
|
id={project.id}
|
|
nbImage={project.nb_image}
|
|
/>
|
|
))}
|
|
</div>
|
|
<div className="show-more-container">
|
|
<Link to="/projects" className="projects-link">Show more</Link>
|
|
</div>
|
|
</section>
|
|
)
|
|
}else if (location.pathname === '/projects') {
|
|
return (
|
|
<section id="projects-section">
|
|
<div className="projects-section-header">
|
|
<NavBar />
|
|
<h1 className="section-title">All Projects</h1>
|
|
<p className="projects-section-subtitle">Here you can find a collection of my work.</p>
|
|
</div>
|
|
<div className="projects-section-list">
|
|
{projects.map(project => (
|
|
<SingleProject
|
|
image={project.image_name}
|
|
title={project.title}
|
|
description={project.description}
|
|
skills={project.skills}
|
|
id={project.id}
|
|
nbImage={project.nb_image}
|
|
/>
|
|
))}
|
|
</div>
|
|
<div className="projects-back-link">
|
|
<Link to="/" className="projects-link">← Back to Home</Link>
|
|
</div>
|
|
</section>
|
|
)
|
|
}else {
|
|
return <div>Page inexistante</div>;
|
|
}
|
|
|
|
}
|
|
|
|
|
|
export default Projects |