convert to TS component eventList + context

src/pages/Volunteers/components/VolunteersCard/VolunteerCard.tsx

@@ -3,27 +3,28 @@ import { useNavigate } from "react-router";
 import Button from "../../../../components/ui/button/button";
 import User from "../../interfaces/user.interface"
 
-
 interface VolunteersCardProps {
-    user: User;
+  user: User;
 }
 
 export default function VolunteerCard({ user }: VolunteersCardProps) {
+  const navigate = useNavigate();
+  const handleNavigate = (): void => { navigate(`/profile/${user.id}`) }
 
-    const navigate = useNavigate();
+  const profilePicture = user.profile_photo_path
+    ? `${import.meta.env.VITE_API_URL}/storage/${user.profile_photo_path}`
+    : "/react.svg";
 
-    const handleNavigate = (): void => { navigate(`/profile/${user.id}`) }
-
-    return (
-        <div className={`glassCard ${styles.volunteerCard}`}>
-            <div className={styles.header}>
-                <img src={"/react.svg"} alt="profile" className={styles.profilePicture} />
-                <p> {user.name} {user.lastname} </p>
-            </div>
-            <div className={styles.content}>
-                <p> {user.email} </p>
-                <Button variant={"primary"} onClick={handleNavigate}>Voir</Button>
-            </div>
-        </div>
-    );
-}
+  return (
+    <div className={`glassCard ${styles.volunteerCard}`}>
+      <div className={styles.header}>
+        <img src={profilePicture} alt="profile" className={styles.profilePicture} />
+        <p> {user.name} {user.lastname} </p>
+      </div>
+      <div className={styles.content}>
+        <p> {user.email} </p>
+        <Button variant={"primary"} onClick={handleNavigate}>Voir</Button>
+      </div>
+    </div>
+  );
+}

src/pages/Volunteers/interfaces/user.interface.ts

@@ -12,5 +12,6 @@ export default interface User {
     updated_at: string;
     verified_at: string | null;
     validate: number;
+    profile_photo_path?: string | null;
     tasks: Task[];
 }