reorganization of the tree structure

2025-09-02 19:17:00 +02:00
parent cf37db8c88
commit 50485a4f55
22 changed files with 23 additions and 23 deletions
@@ -0,0 +1,88 @@
+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