get database users

src/pages/Volunteers/VolunteersPage.jsx

@@ -1,106 +1,23 @@
-
-import React, { useState } from "react";
+import { useState, useEffect } from "react";
 import styles from "./VolunteersPage.module.css";
+import VolunteerCard from "./VolunteerCard.jsx";
+import getAllUser from "../../utils/users/getAllUsers.js";
 
-function Volunteer({ name, role, since, email, phone, photo }) {
-  const [isExpanded, setIsExpanded] = useState(false);
-
-  const toggleExpand = () => {
-    setIsExpanded(!isExpanded);
-  };
-
-  return (
-    <div className={`${styles.profileboard} glassCard`}>
-      <div className={styles.mainContent}>
-        {!isExpanded ? (
-          <div className={styles.basicInfo}>
-            <h2>{name}</h2>
-            <p><strong>Rôle :</strong> {role}</p>
-            <p><strong>Membre depuis :</strong> {since}</p>
-          </div>
-        ) : (
-          <div className={styles.expandedContent}>
-            <div className={styles.profilePictureContainer}>
-              <img src={photo} alt={`${name}'s profile`} className={styles.profilePicture} />
-            </div>
-            <div className={styles.textInfo}>
-              <div className={styles.basicInfo}>
-                <h2>{name}</h2>
-                <p><strong>Rôle :</strong> {role}</p>
-                <p><strong>Membre depuis :</strong> {since}</p>
-              </div>
-              <div className={styles.contactInfo}>
-                <p><strong>Email :</strong> {email}</p>
-                <p><strong>Téléphone :</strong> {phone}</p>
-              </div>
-            </div>
-          </div>
-        )}
-        <button
-          className={`${styles.expandButton} glassCard`}
-          onClick={toggleExpand}
-        >
-          {isExpanded ? "▲" : "▼"}
-        </button>
-        {isExpanded && (
-          <div className="voirPlus">
-            <a href="#" className={styles.voirPlus}>VOIR PLUS</a>
-            </div>
-        )}
-      </div>
-    </div>
-  );
-}
 
 function VolunteerPage() {
-  const volunteers = [
-    {
-      name: "LEBLOND Malo",
-      role: "Président",
-      since: "2019",
-      email: "malo.leblond@example.com",
-      phone: "08 67 87 32 21",
-      photo: "../src/assets/react.svg",
-    },
-    {
-      name: "DUPONT Jean",
-      role: "Bénévole",
-      since: "2020",
-      email: "jean.dupont@example.com",
-      phone: "06 12 34 56 78",
-      photo: "../src/assets/react.svg",
-    },
-    {
-      name: "MARTIN Sophie",
-      role: "Bénévole",
-      since: "2021",
-      email: "sophie.martin@example.com",
-      phone: "06 87 65 43 21",
-      photo: "../src/assets/react.svg",
-    },
-    {
-      name: "MARTIN Sophie",
-      role: "Bénévole",
-      since: "2021",
-      email: "sophie.martin@example.com",
-      phone: "06 87 65 43 21",
-      photo: "../src/assets/react.svg",
-    },
-  ];
+
+    const [users, setUsers] = useState([]);
+
+    useEffect(() => {
+        (async () => {
+            const data = await getAllUser();
+            setUsers(data);
+        }) ()
+    }, [])
 
   return (
     <div className={styles.container}>
-      {volunteers.map((volunteer, index) => (
-        <Volunteer
-          key={index}
-          name={volunteer.name}
-          role={volunteer.role}
-          since={volunteer.since}
-          email={volunteer.email}
-          phone={volunteer.phone}
-          photo={volunteer.photo}
-        />
-      ))}
+      {users.map((user, index) => <VolunteerCard key={index} id={user} /> )}
     </div>
   );
 }