resolve conflicts
This commit is contained in:
p2405951 committed
commit
00f6177842
1 file changed
+137
-161
+137
-161
@@ -1,6 +1,7 @@
|
|||||||
|
import getXSRFToken from "../../utils/getXSRF.js";
|
||||||
import {useContext, useEffect, useState} from "react";
|
import {useContext, useEffect, useState} from "react";
|
||||||
import styles from "./ProfilePage.module.css";
|
import styles from "./ProfilePage.module.css";
|
||||||
import {AuthContext} from "../../contexts/Auth/AuthContext";
|
import {AuthContext} from "../../../src/contexts/Auth/AuthContext.js";
|
||||||
import formatDate from "../../utils/date/formatDate";
|
import formatDate from "../../utils/date/formatDate";
|
||||||
import Task from "../../components/Task/Task";
|
import Task from "../../components/Task/Task";
|
||||||
import SettingsModal from "./components/SettingsModal/SettingsModal";
|
import SettingsModal from "./components/SettingsModal/SettingsModal";
|
||||||
@@ -9,26 +10,24 @@ import {useNavigate} from "react-router";
|
|||||||
import {useRef} from "react";
|
import {useRef} from "react";
|
||||||
import getUserById from "../../utils/users/getUserById.js";
|
import getUserById from "../../utils/users/getUserById.js";
|
||||||
import ManageMember from "./components/ManageMember/ManageMember.jsx";
|
import ManageMember from "./components/ManageMember/ManageMember.jsx";
|
||||||
|
|
||||||
import uploadProfilePhoto from "../../utils/users/uploadProfilePhoto";
|
import uploadProfilePhoto from "../../utils/users/uploadProfilePhoto";
|
||||||
import deleteProfilePhoto from "../../utils/users/deleteProfilePhoto.js";
|
import deleteProfilePhoto from "../../utils/users/deleteProfilePhoto.js";
|
||||||
|
|
||||||
|
|
||||||
interface TaskType {
|
interface TaskType {
|
||||||
id: number;
|
id: number;
|
||||||
name: string;
|
name: string;
|
||||||
description: string;
|
description: string;
|
||||||
location: string;
|
location: string;
|
||||||
start: string;
|
start: string;
|
||||||
end: string;
|
end: string;
|
||||||
max_participants: number;
|
max_participants: number;
|
||||||
events_id: number;
|
events_id: number;
|
||||||
created_at: string;
|
created_at: string;
|
||||||
updated_at: string;
|
updated_at: string;
|
||||||
pivot: {
|
pivot: {
|
||||||
user_id: number;
|
user_id: number;
|
||||||
task_id: number;
|
task_id: number;
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@@ -51,162 +50,139 @@ interface AuthContextType {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function ProfilePage() {
|
function ProfilePage() {
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
const {id} = useParams();
|
const { id } = useParams();
|
||||||
const {user, update} = useContext(AuthContext) as AuthContextType;
|
const { user, update } = useContext(AuthContext) as AuthContextType;
|
||||||
const [profileUser, setProfileUser] = useState<User | null>(null);
|
const [profileUser, setProfileUser] = useState<User | null>(null);
|
||||||
const [profilePicture, setProfilePicture] = useState<string | null>(null);
|
const [profilePicture, setProfilePicture] = useState<string | null>(null);
|
||||||
const [error, setError] = useState<string | null>(null);
|
const fileInputRef = useRef<HTMLInputElement>(null);
|
||||||
const [success, setSuccess] = useState<string | null>(null);
|
|
||||||
const fileInputRef = useRef<HTMLInputElement>(null);
|
|
||||||
|
|
||||||
const isOwnProfile = !id || user?.id.toString() === id;
|
const isOwnProfile = !id || user?.id.toString() === id;
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
(async () => {
|
(async () => {
|
||||||
if (!isOwnProfile && id) {
|
console.log(JSON.stringify(import.meta.env.VITE_API_URL));
|
||||||
const res = await getUserById(id);
|
if (!isOwnProfile && id) {
|
||||||
if (res.status === 404) {
|
const res = await getUserById(id);
|
||||||
navigate("/404");
|
if (res.status === 404) {
|
||||||
return;
|
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]);
|
|
||||||
|
|
||||||
const handleEditPictureClick = () => {
|
|
||||||
if (fileInputRef.current) {
|
|
||||||
fileInputRef.current.click();
|
|
||||||
}
|
}
|
||||||
};
|
if (res.status !== 200) {
|
||||||
|
console.log("Erreur lors du chargement du profil", res);
|
||||||
// Remplacé : handleFileChange extrait vers utils/users/uploadProfilePhoto
|
return;
|
||||||
const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
||||||
const file = e.target.files?.[0];
|
|
||||||
if (!file) return;
|
|
||||||
|
|
||||||
try {
|
|
||||||
const res = await uploadProfilePhoto(file);
|
|
||||||
if (res.ok) {
|
|
||||||
setProfilePicture(`${import.meta.env.VITE_API_URL}/storage/${res.data.profile_photo_path}`);
|
|
||||||
setSuccess("Photo mise à jour !");
|
|
||||||
setError(null);
|
|
||||||
await update();
|
|
||||||
} else {
|
|
||||||
setError(res.data?.message || res.error || "Erreur lors de l'upload.");
|
|
||||||
setSuccess(null);
|
|
||||||
}
|
|
||||||
} catch (err) {
|
|
||||||
setError("Erreur réseau.");
|
|
||||||
setSuccess(null);
|
|
||||||
}
|
}
|
||||||
};
|
setProfileUser(res.data);
|
||||||
|
} else {
|
||||||
// Remplacé : handleDeletePicture extrait vers utils/users/deleteProfilePhoto
|
setProfileUser(user);
|
||||||
const handleDeletePicture = async () => {
|
if (user?.profile_photo_path) {
|
||||||
try {
|
setProfilePicture(`${import.meta.env.VITE_API_URL}/storage/${user.profile_photo_path}`);
|
||||||
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);
|
|
||||||
}
|
}
|
||||||
};
|
}
|
||||||
|
})();
|
||||||
|
}, [user, id]);
|
||||||
|
|
||||||
return (
|
const handleEditPictureClick = () => {
|
||||||
<div className={styles.container}>
|
if (fileInputRef.current) {
|
||||||
<div className={`${styles.profileboard} glassCard`}>
|
fileInputRef.current.click();
|
||||||
<div className={styles.contentWrapper}>
|
}
|
||||||
<div className={styles.profilePictureContainer}>
|
};
|
||||||
<img
|
|
||||||
src={isOwnProfile ? (profilePicture || "/react.svg") : "/react.svg"}
|
|
||||||
alt="Photo de profil"
|
|
||||||
className={styles.profilePicture}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{isOwnProfile && (
|
const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||||
<div className={styles.pictureButtons}>
|
const file = e.target.files?.[0];
|
||||||
<button onClick={handleEditPictureClick} className={styles.editPictureButton}>
|
if (!file) return;
|
||||||
Modifier la photo
|
|
||||||
</button>
|
|
||||||
{user?.profile_photo_path && (
|
|
||||||
<button onClick={handleDeletePicture} className={styles.deletePictureButton}>
|
|
||||||
Supprimer
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<input
|
try {
|
||||||
type="file"
|
const res = await uploadProfilePhoto(file);
|
||||||
ref={fileInputRef}
|
if (res.ok) {
|
||||||
onChange={handleFileChange}
|
setProfilePicture(`${import.meta.env.VITE_API_URL}/storage/${res.data.profile_photo_path}`);
|
||||||
accept="image/*"
|
console.log("Photo mise à jour")
|
||||||
style={{display: "none"}}
|
await update();
|
||||||
/>
|
} else {
|
||||||
{error && <p className={styles.errorMessage}>{error}</p>}
|
console.log(res.data?.message || res.error || "Erreur lors de l'upload.");
|
||||||
{success && <p className={styles.successMessage}>{success}</p>}
|
}
|
||||||
|
} catch (err) {
|
||||||
|
console.log("Erreur réseau.");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
const handleDeletePicture = async () => {
|
||||||
|
|
||||||
|
deleteProfilePhoto();
|
||||||
|
setProfilePicture(null);
|
||||||
|
};
|
||||||
|
|
||||||
<div className={styles.description}>
|
return (
|
||||||
<div className={styles.headerProfile}>
|
<div className={styles.container}>
|
||||||
<h2>
|
<div className={`${styles.profileboard} glassCard`}>
|
||||||
{profileUser?.name} {profileUser?.lastname}
|
<div className={styles.contentWrapper}>
|
||||||
</h2>
|
<div className={styles.profilePictureContainer}>
|
||||||
{user?.isAdmin && profileUser && !isOwnProfile && (
|
<img
|
||||||
<ManageMember userToManage={profileUser}/>
|
src={isOwnProfile ? (profilePicture || "/react.svg") : "/react.svg"}
|
||||||
)}
|
alt="Photo de profil"
|
||||||
</div>
|
className={styles.profilePicture}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div className={styles.topDescription}>
|
{isOwnProfile && (
|
||||||
<div className={`${styles.infoBlock} glassBorder`}>
|
<div className={styles.pictureButtons}>
|
||||||
<p><strong>Role :</strong> {profileUser?.role}</p>
|
<button onClick={handleEditPictureClick} className={styles.editPictureButton}>
|
||||||
<p><strong>Membre depuis :</strong> {profileUser && formatDate(profileUser.created_at)}
|
Modifier la photo
|
||||||
</p>
|
</button>
|
||||||
</div>
|
{user?.profile_photo_path && (
|
||||||
|
<button onClick={handleDeletePicture} className={styles.editPictureButton}>
|
||||||
<div className={`${styles.infoBlock} glassBorder`}>
|
Supprimer
|
||||||
<p><strong>Mail :</strong> {profileUser?.email}</p>
|
</button>
|
||||||
<p><strong>Téléphone :</strong> {profileUser?.phone ?? "Non renseigné"}</p>
|
)}
|
||||||
</div>
|
|
||||||
|
|
||||||
{isOwnProfile && (
|
|
||||||
<div className={styles.settingImage}>
|
|
||||||
<SettingsModal/>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h2>Tâches :</h2>
|
|
||||||
{profileUser?.tasks.length ? (
|
|
||||||
profileUser.tasks.map((task) =><Task key={task.id} task={task}/>)
|
|
||||||
) : (
|
|
||||||
<p>Aucune tâche.</p>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<input
|
||||||
|
type="file"
|
||||||
|
ref={fileInputRef}
|
||||||
|
onChange={handleFileChange}
|
||||||
|
accept="image/*"
|
||||||
|
style={{ display: "none" }}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div className={styles.description}>
|
||||||
|
<div className={styles.headerProfile}>
|
||||||
|
<h2>
|
||||||
|
{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> {profileUser?.role}</p>
|
||||||
|
<p><strong>Membre depuis :</strong> {profileUser && formatDate(profileUser.created_at)}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className={`${styles.infoBlock} glassBorder`}>
|
||||||
|
<p><strong>Mail :</strong> {profileUser?.email}</p>
|
||||||
|
<p><strong>Téléphone :</strong> {profileUser?.phone ?? "Non renseigné"}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{isOwnProfile && (
|
||||||
|
<div className={styles.settingImage}>
|
||||||
|
<SettingsModal />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h2>Tâches :</h2>
|
||||||
|
{profileUser?.tasks.length ? (
|
||||||
|
profileUser.tasks.map((task) => <Task key={task.id} task={task} />)
|
||||||
|
) : (
|
||||||
|
<p>Aucune tâche.</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export default ProfilePage;
|
export default ProfilePage;
|
||||||
Reference in new issue
Block a user