add of Filter components

src/components/Projects/Projects.jsx

@@ -3,12 +3,20 @@ import "./Projects.css"
 import React, {useEffect, useState} from "react";
 import {Link, useLocation} from "react-router-dom";
 import NavBar from "../NavBar/NavBar.jsx";
+import Filter from "../Filter/Filter.jsx";
 
 function Projects() {
     const [projects, setProjects] = useState([]);
     const [error, setError] = useState(null);
     const location = useLocation();
 
+    const [filters, setFilters] = useState({
+        category: [],
+        technology: [],
+        yearOrder: "asc",
+    });
+
+
     useEffect(() => {
         const fetchProjects = async () => {
             try {
@@ -38,17 +46,17 @@ function Projects() {
                     {projects
                         .filter(project => project.id <= 3)
                         .map(project => (
-                        <SingleProject
-                            image={project.image_name}
-                            title={project.title}
-                            description={project.short_description}
-                            skills={project.skills}
-                            id={project.id}
-                            school={project.school}
-                            beginningYear={project.beginning_year}
-                            endYear={project.end_year}
-                        />
-                    ))}
+                            <SingleProject
+                                image={project.image_name}
+                                title={project.title}
+                                description={project.short_description}
+                                skills={project.skills}
+                                id={project.id}
+                                school={project.school}
+                                beginningYear={project.beginning_year}
+                                endYear={project.end_year}
+                            />
+                        ))}
                 </div>
                 <div className="show-more-container">
                     <Link to="/projects" className="projects-link">Show more</Link>
@@ -62,9 +70,54 @@ function Projects() {
                     <NavBar />
                     <h1 className="section-title">All Projects</h1>
                     <p className="projects-section-subtitle">Here you can find a collection of my work.</p>
+                    <Filter filters={filters} setFilters={setFilters} />
                 </div>
                 <div className="projects-section-list">
-                    {projects.map(project => (
+                    {projects
+                        .filter(project => {
+                            const categoryFilters = filters.category;
+
+                            if (categoryFilters.length > 0) {
+                                const isSchool = project.school === 1;
+                                const isFilterSchool = categoryFilters.includes("school");
+                                const isFilterPersonal = categoryFilters.includes("personal");
+
+                                if ((isSchool && !isFilterSchool) || (!isSchool && !isFilterPersonal)) {
+                                    return false;
+                                }
+                            }
+
+                            if (filters.technology.length > 0) {
+                                const isSkill = filters.technology.every(tech => project.skills.includes(tech));
+                                if(!isSkill){
+                                    return false
+                                }
+                            }
+                            return true;
+                        })
+                        .sort((a, b) => {
+                            const aInProgress = !a.end_year;
+                            const bInProgress = !b.end_year;
+
+                            if (filters.yearOrder === "asc") {
+                                const yearDiff = a.beginning_year - b.beginning_year;
+                                if (yearDiff !== 0) return yearDiff;
+
+                                if (!aInProgress && bInProgress) return -1;
+                                if (aInProgress && !bInProgress) return 1;
+                                return 0;
+                            } else if (filters.yearOrder === "desc") {
+                                const yearDiff = b.beginning_year - a.beginning_year;
+                                if (yearDiff !== 0) return yearDiff;
+
+                                if (aInProgress && !bInProgress) return -1;
+                                if (!aInProgress && bInProgress) return 1;
+                                return 0;
+                            } else {
+                                return 0;
+                            }
+                        })
+                        .map(project => (
                         <SingleProject
                             image={project.image_name}
                             title={project.title}
@@ -83,10 +136,7 @@ function Projects() {
                 </div>
             </section>
         )
-    }else {
-        return <div>Page inexistante</div>;
     }
-
 }