Merge pull request 'update of experiences section to use DB' (#18) from feature/experiencesDB into dev

Reviewed-on: #18

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>

src/components/SingleExperience.jsx

@@ -1,6 +1,6 @@
 import '../styles/SingleExperience.css';
 
-function SingleExperience({ experience }) {
+function SingleExperience({ experience, tasks }) {
     return (
         <div className="experience-card">
             <div className="experience-card-left">
@@ -11,8 +11,8 @@ function SingleExperience({ experience }) {
             <div className="experience-card-right">
                 <h3 className="experience-role">{experience.role}</h3>
                 <ul className="experience-tasks">
-                    {experience.tasks.map((task, index) => (
-                        <li key={index}>{task}</li>
+                    {tasks.map((task) => (
+                        <li>{task.description}</li>
                     ))}
                 </ul>
             </div>

src/components/Skills.jsx

@@ -7,7 +7,7 @@ function Skills() {
     const [error, setError] = useState(null);
 
     useEffect(() => {
-        const fetchProjects = async () => {
+        const fetchSkills = async () => {
             try {
                 const response = await fetch('/api/skills');
                 if (!response.ok) {
@@ -19,7 +19,7 @@ function Skills() {
                 setError(err.message);
             }
         };
-        fetchProjects();
+        fetchSkills();
     }, []);
 
     if (error) {