resolve conflicts btw ts interface
This commit is contained in:
p2405951
+137
-125
@@ -1,45 +1,91 @@
|
||||
import { useContext, useEffect, useState, useRef } from "react";
|
||||
import styles from "./ProfilePage.module.css";
|
||||
import { AuthContext } from "../../contexts/auth/AuthContext";
|
||||
import formatDate from "../../utils/date/formatDate";
|
||||
import getXSRFToken from "../../utils/getXSRF.js";
|
||||
import fetchWrapper from "../../utils/fetchWrapper";
|
||||
import {useContext, useEffect, useState} from "react";
|
||||
import styles from "./ProfilePage.module.css";
|
||||
import {AuthContext} from "../../contexts/auth/AuthContext";
|
||||
import formatDate from "../../utils/date/formatDate";
|
||||
import Task from "../../components/Task/Task";
|
||||
import SettingsModal from "./components/SettingsModal/SettingsModal";
|
||||
import {useParams} from "react-router";
|
||||
import {useNavigate} from "react-router";
|
||||
import {useRef} from "react";
|
||||
import getUserById from "../../utils/users/getUserById.js";
|
||||
import ManageMember from "./components/manageMember/ManageMember.jsx";
|
||||
|
||||
|
||||
interface TaskType {
|
||||
id: number;
|
||||
title?: string;
|
||||
completed?: boolean;
|
||||
[key: string]: unknown;
|
||||
name: string;
|
||||
description: string;
|
||||
location: string;
|
||||
start: string;
|
||||
end: string;
|
||||
max_participants: number;
|
||||
events_id: number;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
pivot: {
|
||||
user_id: number;
|
||||
task_id: number;
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
interface User {
|
||||
name: string;
|
||||
lastname: string;
|
||||
role: string;
|
||||
email: string;
|
||||
phone: string | null;
|
||||
created_at: string;
|
||||
tasks: TaskType[];
|
||||
profile_photo_path?: string | null;
|
||||
id: number;
|
||||
name: string;
|
||||
lastname: string;
|
||||
role: string;
|
||||
email: string;
|
||||
phone: string | null;
|
||||
created_at: string;
|
||||
isAdmin: boolean;
|
||||
tasks: TaskType[];
|
||||
profile_photo_path?: string | null;
|
||||
}
|
||||
|
||||
interface AuthContextType {
|
||||
user: User | null;
|
||||
update: () => void;
|
||||
user: User | null;
|
||||
update: () => void;
|
||||
}
|
||||
|
||||
function ProfilePage() {
|
||||
const csrfToken = getXSRFToken();
|
||||
const navigate = useNavigate();
|
||||
const { id } = useParams();
|
||||
const { user, update } = useContext(AuthContext) as AuthContextType;
|
||||
/*const [profilePicture, setProfilePicture] = useState<string | null>(
|
||||
user?.profile_photo_path ? `${import.meta.env.VITE_API_URL}/storage/${user.profile_photo_path}`: null);*/
|
||||
const [profileUser, setProfileUser] = useState<User | null>(null);
|
||||
const [profilePicture, setProfilePicture] = useState<string | null>(null);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [success, setSuccess] = useState<string | null>(null);
|
||||
const fileInputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
// Fonction pour déclencher l'input file
|
||||
const isOwnProfile = !id || user?.id.toString() === id;
|
||||
|
||||
// Charger le profil de l'utilisateur (soi-même ou un autre)
|
||||
useEffect(() => {
|
||||
(async () => {
|
||||
if (!isOwnProfile && id) {
|
||||
const res = await getUserById(id);
|
||||
if (res.status === 404) {
|
||||
navigate("/404");
|
||||
return;
|
||||
}
|
||||
if (res.status !== 200) {
|
||||
console.error("Erreur lors du chargement du profil", res);
|
||||
return;
|
||||
}
|
||||
setProfileUser(res.data);
|
||||
} else {
|
||||
update();
|
||||
setProfileUser(user);
|
||||
if (user?.profile_photo_path) {
|
||||
setProfilePicture(`${import.meta.env.VITE_API_URL}/storage/${user.profile_photo_path}`);
|
||||
}
|
||||
}
|
||||
})();
|
||||
}, [user, id]);
|
||||
|
||||
// Fonctions pour la photo de profil (uniquement si c'est le profil de l'utilisateur connecté)
|
||||
const handleEditPictureClick = () => {
|
||||
if (fileInputRef.current) {
|
||||
fileInputRef.current.click();
|
||||
@@ -47,80 +93,56 @@ function ProfilePage() {
|
||||
};
|
||||
|
||||
const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const file = e.target.files?.[0];
|
||||
if (!file) return;
|
||||
const file = e.target.files?.[0];
|
||||
if (!file) return;
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append("photo", file);
|
||||
const formData = new FormData();
|
||||
formData.append("photo", file);
|
||||
|
||||
try {
|
||||
const response = await fetch(`${import.meta.env.VITE_API_URL}/api/profile-photo`, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"X-XSRF-TOKEN": decodeURIComponent(await csrfToken),
|
||||
},
|
||||
credentials: "include",
|
||||
body: formData,
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
setProfilePicture(`${import.meta.env.VITE_API_URL}/storage/${data?.profile_photo_path}`);
|
||||
setSuccess("Photo de profil mise à jour avec succès !");
|
||||
setError(null);
|
||||
await update();
|
||||
|
||||
/*if (response.ok) {
|
||||
const data = await response.json();
|
||||
console.log("data:", data);
|
||||
console.log("URL:", `/storage/${data?.profile_photo_path}`);
|
||||
|
||||
setProfilePicture(`${import.meta.env.VITE_API_URL}/storage/${data?.profile_photo_path}`);
|
||||
setSuccess("Photo de profil mise à jour avec succès !");
|
||||
setError(null);
|
||||
update();*/
|
||||
} else {
|
||||
const errorData = await response.json();
|
||||
setError(errorData?.message || "Erreur lors de l'upload de la photo.");
|
||||
setSuccess(null);
|
||||
}
|
||||
} catch (err) {
|
||||
setError("Erreur réseau. Vérifiez votre connexion.");
|
||||
setSuccess(null);
|
||||
}
|
||||
|
||||
|
||||
};
|
||||
|
||||
// Fonction pour supprimer la photo de profil
|
||||
const handleDeletePicture = async () => {
|
||||
try {
|
||||
const token = localStorage.getItem("token");
|
||||
const response = await fetchWrapper("/api/profile-photo",null,"DELETE");
|
||||
if (response.status >= 200 && response.status < 300) {
|
||||
setProfilePicture(null);
|
||||
setSuccess("Photo de profil supprimée avec succès !");
|
||||
const csrfToken = await getXSRFToken();
|
||||
const response = await fetch(`${import.meta.env.VITE_API_URL}/api/profile-photo`, {
|
||||
method: "POST",
|
||||
headers: { "X-XSRF-TOKEN": decodeURIComponent(csrfToken) },
|
||||
credentials: "include",
|
||||
body: formData,
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
setProfilePicture(`${import.meta.env.VITE_API_URL}/storage/${data.profile_photo_path}`);
|
||||
setSuccess("Photo mise à jour !");
|
||||
setError(null);
|
||||
await update();
|
||||
await update();
|
||||
} else {
|
||||
const errorData =response.data;
|
||||
setError(errorData.message || "Erreur lors de la suppression de la photo.");
|
||||
const errorData = await response.json();
|
||||
setError(errorData.message || "Erreur lors de l'upload.");
|
||||
setSuccess(null);
|
||||
}
|
||||
} catch (err) {
|
||||
setError("Erreur réseau. Vérifiez votre connexion.");
|
||||
setError("Erreur réseau.");
|
||||
setSuccess(null);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
console.log("user reçu:", user);
|
||||
if (user?.profile_photo_path) {
|
||||
setProfilePicture(`${import.meta.env.VITE_API_URL}/storage/${user.profile_photo_path}`);
|
||||
} else if (user && !user.profile_photo_path && !profilePicture) {
|
||||
setProfilePicture(null);
|
||||
}
|
||||
}, [user]);
|
||||
const handleDeletePicture = async () => {
|
||||
try {
|
||||
const response = await fetchWrapper("/api/profile-photo", null, "DELETE");
|
||||
if (response.status >= 200 && response.status < 300) {
|
||||
setProfilePicture(null);
|
||||
setSuccess("Photo supprimée !");
|
||||
setError(null);
|
||||
await update();
|
||||
} else {
|
||||
const errorData = response.data;
|
||||
setError(errorData.message || "Erreur lors de la suppression.");
|
||||
setSuccess(null);
|
||||
}
|
||||
} catch (err) {
|
||||
setError("Erreur réseau.");
|
||||
setSuccess(null);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={styles.container}>
|
||||
@@ -128,27 +150,25 @@ useEffect(() => {
|
||||
<div className={styles.contentWrapper}>
|
||||
<div className={styles.profilePictureContainer}>
|
||||
<img
|
||||
src={profilePicture || "/react.svg"}
|
||||
src={isOwnProfile ? (profilePicture || "/react.svg") : "/react.svg"}
|
||||
alt="Photo de profil"
|
||||
className={styles.profilePicture}
|
||||
/>
|
||||
</div>
|
||||
<div className={styles.pictureButtons}>
|
||||
<button
|
||||
onClick={handleEditPictureClick}
|
||||
className={styles.editPictureButton}
|
||||
>
|
||||
Modifier la photo
|
||||
</button>
|
||||
{user?.profile_photo_path && (
|
||||
<button
|
||||
onClick={handleDeletePicture}
|
||||
className={styles.deletePictureButton}
|
||||
>
|
||||
Supprimer
|
||||
|
||||
{isOwnProfile && (
|
||||
<div className={styles.pictureButtons}>
|
||||
<button onClick={handleEditPictureClick} className={styles.editPictureButton}>
|
||||
Modifier la photo
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
{user?.profile_photo_path && (
|
||||
<button onClick={handleDeletePicture} className={styles.deletePictureButton}>
|
||||
Supprimer
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<input
|
||||
type="file"
|
||||
ref={fileInputRef}
|
||||
@@ -162,44 +182,37 @@ useEffect(() => {
|
||||
<div className={styles.description}>
|
||||
<div className={styles.headerProfile}>
|
||||
<h2>
|
||||
{user?.name} {user?.lastname}
|
||||
{profileUser?.name} {profileUser?.lastname}
|
||||
</h2>
|
||||
{user?.isAdmin && profileUser && !isOwnProfile && (
|
||||
<ManageMember userToManage={profileUser} />
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className={styles.topDescription}>
|
||||
<div className={`${styles.infoBlock} glassBorder`}>
|
||||
<p>
|
||||
<strong>Role :</strong> {user?.role}
|
||||
</p>
|
||||
<p>
|
||||
<strong>Membre depuis :</strong>{" "}
|
||||
{user && formatDate(user.created_at)}
|
||||
</p>
|
||||
<p><strong>Role :</strong> {profileUser?.role}</p>
|
||||
<p><strong>Membre depuis :</strong> {profileUser && formatDate(profileUser.created_at)}</p>
|
||||
</div>
|
||||
|
||||
<div className={`${styles.infoBlock} glassBorder`}>
|
||||
<p>
|
||||
<strong>Mail :</strong> {user?.email}
|
||||
</p>
|
||||
<p>
|
||||
<strong>Téléphone :</strong>{" "}
|
||||
{user?.phone ?? "Pas de numéro enregistré"}
|
||||
</p>
|
||||
<p><strong>Mail :</strong> {profileUser?.email}</p>
|
||||
<p><strong>Téléphone :</strong> {profileUser?.phone ?? "Non renseigné"}</p>
|
||||
</div>
|
||||
|
||||
<div className={styles.settingImage}>
|
||||
{/* <SettingsModal /> */}
|
||||
</div>
|
||||
{isOwnProfile && (
|
||||
<div className={styles.settingImage}>
|
||||
<SettingsModal />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<h2>Tâches :</h2>
|
||||
{/* {user && user.tasks.length > 0 ? (
|
||||
user.tasks.map((task) => (
|
||||
<Task key={task.id} task={task} />
|
||||
))
|
||||
{profileUser?.tasks.length ? (
|
||||
profileUser.tasks.map((task) => <Task key={task.id} task={task} />)
|
||||
) : (
|
||||
<p>Aucune tâche pour le moment.</p>
|
||||
)} */}
|
||||
<p>Aucune tâche.</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -207,5 +220,4 @@ useEffect(() => {
|
||||
);
|
||||
}
|
||||
|
||||
export default ProfilePage;
|
||||
|
||||
export default ProfilePage;
|
||||
Reference in New Issue
Block a user