Giovanni/SAE-BUT2-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'features/ts' into dev

Browse Source
This commit is contained in:
p2405951
2026-03-12 11:14:31 +01:00
parent 75e93abce6 4c7b636f27
commit 908eed4003
13 changed files with 307 additions and 159 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/contexts/auth/AuthContext.ts
+2
View File
@@ -22,7 +22,9 @@ export interface User {
export interface AuthContextType {
user: User | null;
update: () => void;
login: (email: string, password: string) => Promise<{ status: number }>;
}
export const AuthContext = createContext<AuthContextType | null>(null);
src/contexts/events/EventContext.js
-3
View File
@@ -1,3 +0,0 @@
import { createContext } from "react";
export const EventContext = createContext(null);
src/contexts/events/EventContext.ts
+26
View File
@@ -0,0 +1,26 @@
/*import { createContext } from "react";
export const EventContext = createContext(null);*/
import { createContext } from "react";
export type Task = {
name: string;
description: string;
start: string | Date;
end: string | Date;
};
export type EventGroup = {
date: string;
name: string;
start: string | Date;
tasks: Task[];
};
export type EventContextType = {
events: EventGroup[];
};
export const EventContext = createContext<EventContextType | null>(null);
src/pages/Home/components/EventList/eventItem.jsx
-25
View File
@@ -1,25 +0,0 @@
import styles from "./eventList.module.css";
import { formatDateLetter } from "../../../../utils/date/formatDateLetter.js";
import { useState } from "react";
export default function EventItem({ eventGroup }) {
const [isVisible, setIsVisible] = useState(false);
return <div key={eventGroup.date} className={`${styles.eventGroup} glassBorder`} onClick={() => setIsVisible(!isVisible)}>
<div className={styles.eventTitle}>
<p className={styles.title}>{eventGroup.name}</p>
<p>{formatDateLetter(eventGroup.start)}</p>
</div>
{isVisible &&
<ul className={styles.eventDetails}>
{eventGroup.tasks.map((task, i) => (
<li key={i} className={styles.eventTasks}>
<p>- {task.name} - {task.description}</p>
<p>{formatDateLetter(task.start)} - {formatDateLetter(task.end)}</p>
</li>
))}
</ul>
}
</div>
}
src/pages/Home/components/EventList/eventItem.tsx
+80
View File
@@ -0,0 +1,80 @@
import styles from "./eventList.module.css";
import { formatDateLetter } from "../../../../utils/date/formatDateLetter";
import { useState } from "react";
type Task = {
name: string;
description: string;
start: string | Date;
end: string | Date;
};
type EventGroup = {
date: string;
name: string;
start: string | Date;
tasks: Task[];
};
type EventItemProps = {
eventGroup: EventGroup;
};
export default function EventItem({ eventGroup }: EventItemProps) {
const [isVisible, setIsVisible] = useState<boolean>(false);
return (
<div
key={eventGroup.date}
className={`${styles.eventGroup} glassBorder`}
onClick={() => setIsVisible(!isVisible)}
>
<div className={styles.eventTitle}>
<p className={styles.title}>{eventGroup.name}</p>
<p>{formatDateLetter(eventGroup.start)}</p>
</div>
{isVisible && (
<ul className={styles.eventDetails}>
{eventGroup.tasks.map((task, i) => (
<li key={i} className={styles.eventTasks}>
<p>
- {task.name} - {task.description}
</p>
<p>
{formatDateLetter(task.start)} - {formatDateLetter(task.end)}
</p>
</li>
))}
</ul>
)}
</div>
);
}
/*import styles from "./eventList.module.css";
import { formatDateLetter } from "../../../../utils/date/formatDateLetter.ts";
import { useState } from "react";
export default function EventItem({ eventGroup }) {
const [isVisible, setIsVisible] = useState(false);
return <div key={eventGroup.date} className={`${styles.eventGroup} glassBorder`} onClick={() => setIsVisible(!isVisible)}>
<div className={styles.eventTitle}>
<p className={styles.title}>{eventGroup.name}</p>
<p>{formatDateLetter(eventGroup.start)}</p>
</div>
{isVisible &&
<ul className={styles.eventDetails}>
{eventGroup.tasks.map((task, i) => (
<li key={i} className={styles.eventTasks}>
<p>- {task.name} - {task.description}</p>
<p>{formatDateLetter(task.start)} - {formatDateLetter(task.end)}</p>
</li>
))}
</ul>
}
</div>
}
*/
src/pages/Home/components/EventList/eventList.jsx
-35
View File
@@ -1,35 +0,0 @@
import { useMemo } from "react";
import styles from "./eventList.module.css";
import EventItem from "./eventItem.jsx";
import { EventContext } from "../../../../contexts/events/EventContext.js";
import { useContext } from "react";
function EventList() {
// Utilise une valeur par défaut pour `events` si elle est `undefined`
const { events = [] } = useContext(EventContext);
const sortedEvents = useMemo(() => {
// Vérifie explicitement que `events` est un tableau avant de trier
if (!Array.isArray(events)) return [];
return [...events].sort(
(a, b) => new Date(a.start) - new Date(b.start)
);
}, [events]);
return (
<div className={`${styles.glassCard} glassCard`}>
<h2>Liste des événements à venir</h2>
{sortedEvents.length > 0 ? (
<div className={styles.eventList}>
{sortedEvents.map((eventGroup, index) => (
<EventItem eventGroup={eventGroup} key={index} />
))}
</div>
) : (
<p>Aucun événement planifié pour l'instant.</p>
)}
</div>
);
}
export default EventList;
src/pages/Home/components/EventList/eventList.tsx
+88
View File
@@ -0,0 +1,88 @@
/*import { useMemo } from "react";
import styles from "./eventList.module.css";
import EventItem from "./eventItem.jsx";
import { EventContext } from "../../../../contexts/events/EventContext.js";
import { useContext } from "react";
function EventList() {
// Utilise une valeur par défaut pour `events` si elle est `undefined`
const { events = [] } = useContext(EventContext);
const sortedEvents = useMemo(() => {
// Vérifie explicitement que `events` est un tableau avant de trier
if (!Array.isArray(events)) return [];
return [...events].sort(
(a, b) => new Date(a.start) - new Date(b.start)
);
}, [events]);
return (
<div className={`${styles.glassCard} glassCard`}>
<h2>Liste des événements à venir</h2>
{sortedEvents.length > 0 ? (
<div className={styles.eventList}>
{sortedEvents.map((eventGroup, index) => (
<EventItem eventGroup={eventGroup} key={index} />
))}
</div>
) : (
<p>Aucun événement planifié pour l'instant.</p>
)}
</div>
);
}
export default EventList;*/
import { useMemo, useContext } from "react";
import styles from "./eventList.module.css";
import EventItem from "./eventItem";
import { EventContext } from "../../../../contexts/events/EventContext";
type Task = {
name: string;
description: string;
start: string | Date;
end: string | Date;
};
type EventGroup = {
date: string;
name: string;
start: string | Date;
tasks: Task[];
};
type EventContextType = {
events?: EventGroup[];
};
function EventList() {
const { events = [] } = useContext(EventContext) as EventContextType;
const sortedEvents = useMemo<EventGroup[]>(() => {
if (!Array.isArray(events)) return [];
return [...events].sort(
(a, b) =>
new Date(a.start).getTime() - new Date(b.start).getTime()
);
}, [events]);
return (
<div className={`${styles.glassCard} glassCard`}>
<h2>Liste des événements à venir</h2>
{sortedEvents.length > 0 ? (
<div className={styles.eventList}>
{sortedEvents.map((eventGroup, index) => (
<EventItem eventGroup={eventGroup} key={index} />
))}
</div>
) : (
<p>Aucun événement planifié pour l'instant.</p>
)}
</div>
);
}
export default EventList;
src/pages/Login/components/loginform/loginForm.jsx
-54
View File
@@ -1,54 +0,0 @@
import { useState, useContext } from "react";
import styles from "./loginForm.module.css";
import Button from "../../../../components/ui/button/button.tsx";
import Input from "../../../../components/ui/input/input.tsx";
import Modal from "../../../../components/ui/modal/modal.tsx";
import { useNavigate } from "react-router";
import { AuthContext } from "../../../../contexts/auth/AuthContext.js";
function LoginForm({ className }) {
const navigate = useNavigate();
const { login } = useContext(AuthContext);
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [open , setOpen] = useState(false);
async function handleSubmit() {
const res = await login(email, password);
if (res.status === 401 || res.status === 422) setOpen(true);
else navigate("/");
}
return (
<div className={`${className} glassCard ${styles.inputContainer}`}>
<div className={styles.formgroup}>
<Input
type="email"
value={email}
placeholder="Adresse mail"
onChange={e => setEmail(e.target.value)}
style={{ width: '100%' }}
/>
</div>
<div className={styles.formgroup}>
<Input password={true} onChange={e => setPassword(e.target.value)} value={password} placeholder={"Mot de passe"} />
</div>
<div className={styles.logButton}>
<Button variant={"transparent"} onClick={() => navigate("/register")}>Vous n'avez pas de compte ?</Button>
<Button onClick={handleSubmit} variant={"default"}> Se connecter </Button>
</div>
<Modal title={"Impossible de se connecter"} open={open} onClose={() => setOpen(false)}>
<p>L'Email ou le mot de passe est incorrect</p>
</Modal>
</div>
);
}
export default LoginForm;
src/pages/Login/components/loginform/loginForm.tsx
+65
View File
@@ -0,0 +1,65 @@
import { useState, useContext, FormEvent } from "react";
import styles from "./loginForm.module.css";
import Button from "../../../../components/ui/button/button";
import Input from "../../../../components/ui/input/input";
import Modal from "../../../../components/ui/modal/modal";
import { useNavigate } from "react-router-dom";
import { AuthContext, AuthContextType } from "../../../../contexts/auth/AuthContext";
interface LoginFormProps {
className?: string;
}
function LoginForm({ className }: LoginFormProps) {
const navigate = useNavigate();
const authContext = useContext(AuthContext) as AuthContextType;
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [open, setOpen] = useState(false);
const { login } = authContext;
async function handleSubmit(e?: FormEvent) {
if (e) e.preventDefault();
const res = await login(email, password);
if (res.status === 401 || res.status === 422) setOpen(true);
else navigate("/");
}
return (
<div className={`${className} glassCard ${styles.inputContainer}`} >
<form onSubmit={handleSubmit}>
<div className={styles.formgroup}>
<Input
type="email"
value={email}
placeholder="Adresse mail"
onChange={e => setEmail(e.target.value)}
style={{ width: '100%' }}
/>
</div>
<div className={styles.formgroup}>
<Input
password={true}
value={password}
placeholder="Mot de passe"
onChange={e => setPassword(e.target.value)}
/>
</div>
<div className={styles.logButton}>
<Button variant={"transparent"} onClick={() => navigate("/register")}>Vous n'avez pas de compte ?</Button>
<Button onClick={handleSubmit} variant={"default"}>Se connecter</Button>
</div>
</form>
<Modal title={"Impossible de se connecter"} open={open} onClose={() => setOpen(false)}>
<p>L'Email ou le mot de passe est incorrect</p>
</Modal>
</div>
);
}
export default LoginForm;
src/pages/Profile/ProfilePage.tsx
+8 -20
View File
@@ -66,6 +66,7 @@ function ProfilePage() {
useEffect(() => {
(async () => {
console.log(JSON.stringify(import.meta.env.VITE_API_URL));
if (!isOwnProfile && id) {
const res = await getUserById(id);
if (res.status === 404) {
@@ -78,10 +79,11 @@ function ProfilePage() {
}
setProfileUser(res.data);
} else {
update();
//update();
setProfileUser(user);
if (user?.profile_photo_path) {
setProfilePicture(`${import.meta.env.VITE_API_URL}/storage/${user.profile_photo_path}`);
//setProfilePicture(`${import.meta.env.VITE_API_URL}/${user.profile_photo_path}`);
}
}
})();
@@ -93,7 +95,6 @@ function ProfilePage() {
}
};
// Remplacé : handleFileChange extrait vers utils/users/uploadProfilePhoto
const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
const file = e.target.files?.[0];
if (!file) return;
@@ -102,6 +103,7 @@ function ProfilePage() {
const res = await uploadProfilePhoto(file);
if (res.ok) {
setProfilePicture(`${import.meta.env.VITE_API_URL}/storage/${res.data.profile_photo_path}`);
//setProfilePicture(`${import.meta.env.VITE_API_URL}/${res.data.profile_photo_path}`);
setSuccess("Photo mise à jour !");
setError(null);
await update();
@@ -114,24 +116,10 @@ function ProfilePage() {
setSuccess(null);
}
};
// Remplacé : handleDeletePicture extrait vers utils/users/deleteProfilePhoto
const handleDeletePicture = async () => {
try {
const res = await deleteProfilePhoto();
if (res.status >= 200 && res.status < 300) {
setProfilePicture(null);
setSuccess("Photo supprimée !");
setError(null);
await update();
} else {
setError(res.data?.message || "Erreur lors de la suppression.");
setSuccess(null);
}
} catch (err) {
setError("Erreur réseau.");
setSuccess(null);
}
deleteProfilePhoto();
setProfilePicture(null);
};
return (
@@ -152,7 +140,7 @@ function ProfilePage() {
Modifier la photo
</button>
{user?.profile_photo_path && (
<button onClick={handleDeletePicture} className={styles.deletePictureButton}>
<button onClick={handleDeletePicture} className={styles.editPictureButton}>
Supprimer
</button>
)}
src/pages/Volunteers/components/VolunteersCard/VolunteerCard.tsx
+19 -18
View File
@@ -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
+1
View File
@@ -12,5 +12,6 @@ export default interface User {
updated_at: string;
verified_at: string | null;
validate: number;
profile_photo_path?: string | null;
tasks: Task[];
}
src/utils/users/deleteProfilePhoto.ts
+18 -4
View File
@@ -1,10 +1,24 @@
import fetchWrapper from "../fetchWrapper";
import getXSRFToken from "../getXSRF.js";
export default async function deleteProfilePhoto(): Promise<{ status: number; ok: boolean; data?: any; error?: string }> {
try {
const response = await fetchWrapper("/api/profile-photo", null, "DELETE");
return { status: response.status || 0, ok: response.status >= 200 && response.status < 300, data: response.data };
const csrfToken = await getXSRFToken();
const response = await fetch(`${import.meta.env.VITE_API_URL}/api/profile-photo`, {
method: "DELETE",
headers: { "X-XSRF-TOKEN": decodeURIComponent(csrfToken) },
credentials: "include",
});
const status = response.status;
let data = null;
try {
data = await response.json();
} catch (e) {
// Pas de JSON dans la réponse
}
return { status, ok: response.ok, data };
} catch (err: any) {
return { status: 0, ok: false, error: err?.message || "Network error" };
return { status: 0, ok: false, error: err?.message || "Erreur réseau" };
}
}