update of experiences section to use DB

src/components/Experiences.jsx

@@ -1,39 +1,45 @@
 import '../styles/Experiences.css';
 import SingleExperience from './SingleExperience';
+import React, {useEffect, useState} from "react";
 
 function Experiences() {
-    const experiencesData = [
-        {
-            role: "Web Development Intern",
-            company: "Pandora",
-            duration: "April 2024",
-            location: "Rennes (Ille-et-Vilaine), France",
-            tasks: [
-                "Development of a dynamic website with database integration (HTML, CSS, PHP, SQL)",
-                "Created a reusable interface used as an internal learning resource",
-                "Introduction to GitHub Actions"
-            ]
-        },
-        {
-            role: "IT Support Intern",
-            company: "INRAE",
-            duration: "April 2023",
-            location: "Rennes (Ille-et-Vilaine), France",
-            tasks: [
-                "Introduction to ProxMox Backup and UpdateEngine tools",
-                "Preparation of two workstations",
-                "Setup of a Wi-Fi hotspot using a Raspberry Pi",
-                "Installation of a RAID 1 system"
-            ]
-        }
-    ];
+    const [experiences, setExperiences] = useState([]);
+    const [experienceTasks, setExperienceTasks] = useState([]);
+    const [error, setError] = useState(null);
+
+    useEffect(() => {
+        const fetchExperiencesAndTasks = async () => {
+            try {
+                let response = await fetch('/api/experiences');
+                if (!response.ok) {
+                    throw new Error(`Erreur HTTP: ${response.status}`);
+                }
+                let data = await response.json();
+                setExperiences(data.data);
+
+                response = await fetch('/api/experienceTasks');
+                if (!response.ok) {
+                    throw new Error(`Erreur HTTP: ${response.status}`);
+                }
+                data = await response.json();
+                setExperienceTasks(data.data);
+            } catch (err) {
+                setError(err.message);
+            }
+        };
+        fetchExperiencesAndTasks();
+    }, []);
+
+    if (error) {
+        return <div>Erreur lors de la récupération des données : {error}</div>;
+    }
 
     return (
         <section id="experiences-section">
             <h1 className="section-title">Experiences</h1>
             <div className="experiences-container">
-                {experiencesData.map((exp) => (
-                    <SingleExperience experience={exp}/>
+                {experiences.map((exp) => (
+                    <SingleExperience experience={exp} tasks={experienceTasks.filter(task => task.experience_id === exp.id)}/>
                 ))}
             </div>
         </section>