Merge pull request 'update of skills section to use db' (#17) from feature/skillsDB into dev

Reviewed-on: #17

src/components/Skills.jsx

@@ -1,35 +1,49 @@
+import React, { useState, useEffect } from 'react';
 import SkillCard from "./SkillCard.jsx";
 import "../styles/Skills.css";
 
 function Skills() {
+    const [skills, setSkills] = useState([]);
+    const [error, setError] = useState(null);
+
+    useEffect(() => {
+        const fetchProjects = async () => {
+            try {
+                const response = await fetch('/api/skills');
+                if (!response.ok) {
+                    throw new Error(`Erreur HTTP: ${response.status}`);
+                }
+                const data = await response.json();
+                setSkills(data.data);
+            } catch (err) {
+                setError(err.message);
+            }
+        };
+        fetchProjects();
+    }, []);
+
+    if (error) {
+        return <div>Erreur lors de la récupération des données : {error}</div>;
+    }
+
+    const uniqueSkillTypes = [...new Set(skills.map(skill => skill.type))];
+
+
     return (
         <section id="skills-section">
             <h1 className="section-title">Skills</h1>
-            <div id="languages" className="skill-category">
-                <h2>Languages</h2>
-                <div className="skills">
-                    <SkillCard text="Python"/>
-                    <SkillCard text="Java"/>
-                    <SkillCard text="C++"/>
-                    <SkillCard text="HTML"/>
-                    <SkillCard text="CSS"/>
-                    <SkillCard text="JavaScript"/>
-                    <SkillCard text="PHP"/>
-                    <SkillCard text="SQL"/>
+            {uniqueSkillTypes.map(type => (
+                <div id="languages" className="skill-category">
+                    <h2>{type}</h2>
+                    <div className="skills">
+                        {skills
+                            .filter(skill => skill.type === type)
+                            .map(skill => (
+                                <SkillCard text={skill.name}/>
+                            ))}
+                    </div>
                 </div>
-            </div>
-            <div id="librairies" className="skill-category">
-                <h2>Librairies</h2>
-                <div className="skills">
-                    <SkillCard text="React"/>
-                </div>
-            </div>
-            <div id="tools" className="skill-category">
-                <h2>Tools</h2>
-                <div className="skills">
-                    <SkillCard text="Git"/>
-                </div>
-            </div>
+            ))}
         </section>
     )
 }