|
|
@ -1,5 +1,5 @@
|
|
|
|
import React, { useState } from 'react';
|
|
|
|
import React, { useState } from 'react';
|
|
|
|
import { useSelector } from 'react-redux';
|
|
|
|
import { useSelector, useDispatch } from 'react-redux';
|
|
|
|
import PP from "../../assets/img/unknown.png";
|
|
|
|
import PP from "../../assets/img/unknown.png";
|
|
|
|
import PLUS from "../../assets/img/plus.png";
|
|
|
|
import PLUS from "../../assets/img/plus.png";
|
|
|
|
import { NavLink } from "react-router-dom";
|
|
|
|
import { NavLink } from "react-router-dom";
|
|
|
@ -10,32 +10,28 @@ const ConfigurationDuProfil = ()=>{
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const userData = useSelector((state) => state.user.user);
|
|
|
|
const userData = useSelector((state) => state.user.user);
|
|
|
|
const [pseudo, setPseudo] = useState('');
|
|
|
|
const [pseudo, setPseudo] = useState(userData.pseudo);
|
|
|
|
const [nomUtilisateur, setNomUtilisateur] = useState('');
|
|
|
|
const [nomUtilisateur, setNomUtilisateur] = useState(userData.pseudo);
|
|
|
|
|
|
|
|
const[userPicture, setUserPicture] = useState(userData.picture)
|
|
|
|
|
|
|
|
const [tmpImage, setTmpImage] =useState('')
|
|
|
|
const [displayAdd, setDisplayAdd] = useState(false);
|
|
|
|
const [displayAdd, setDisplayAdd] = useState(false);
|
|
|
|
/*const [updateImage, setUpdateImage]= useState(false);
|
|
|
|
const handlevalidationPopup =(e)=>{
|
|
|
|
const setimageDeProfile=()=>{
|
|
|
|
setUserPicture(tmpImage);
|
|
|
|
if(updateImage=true){
|
|
|
|
|
|
|
|
useState("");
|
|
|
|
|
|
|
|
setDisplayAdd(false);
|
|
|
|
setDisplayAdd(false);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
else{
|
|
|
|
const handleLoadFile=(e)=>{
|
|
|
|
setDisplayAdd(false);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}*/
|
|
|
|
|
|
|
|
var handleLoadFile=(e)=>{
|
|
|
|
|
|
|
|
var image = document.getElementById("output");
|
|
|
|
var image = document.getElementById("output");
|
|
|
|
image.src = URL.createObjectURL(e.target.files[0]);
|
|
|
|
image.src = URL.createObjectURL(e.target.files[0]);
|
|
|
|
|
|
|
|
setTmpImage(image.src);
|
|
|
|
};
|
|
|
|
};
|
|
|
|
var a=PP;
|
|
|
|
|
|
|
|
return(
|
|
|
|
return(
|
|
|
|
<div className='modificationDuProfilBackgroud'>
|
|
|
|
<div className='modificationDuProfilBackgroud'>
|
|
|
|
<h2 className='ligneHorizontal' >Modifucation du Profil</h2>
|
|
|
|
<h2 className='ligneHorizontal' >Modifucation du Profil</h2>
|
|
|
|
<div className='modificationDuProfil' >
|
|
|
|
<div className='modificationDuProfil' >
|
|
|
|
<button className='imageDeProfilConfigurationPlus imageDeProfil' >
|
|
|
|
<button className='imageDeProfilConfigurationPlus imageDeProfil' >
|
|
|
|
<img src={PLUS} className="plusButton "/>
|
|
|
|
<img src={PLUS} className="plusButton "/>
|
|
|
|
<img src={a} className="imageDeProfilConfiguration imageDeProfil" onClick={() => setDisplayAdd(true)}/>
|
|
|
|
<img src={userPicture} className="imageDeProfilConfiguration imageDeProfil" onClick={() => setDisplayAdd(true)}/>
|
|
|
|
</button>
|
|
|
|
</button>
|
|
|
|
<div className='modificationDuProfilText alignementText'>
|
|
|
|
<div className='modificationDuProfilText alignementText'>
|
|
|
|
<span>Pseudo: </span>
|
|
|
|
<span>Pseudo: </span>
|
|
|
@ -78,7 +74,7 @@ const ConfigurationDuProfil = ()=>{
|
|
|
|
<div className='popup-modificationProfil'>
|
|
|
|
<div className='popup-modificationProfil'>
|
|
|
|
<div className="modal">
|
|
|
|
<div className="modal">
|
|
|
|
<div className='imagesPopup'>
|
|
|
|
<div className='imagesPopup'>
|
|
|
|
<img src={PP} className="imageDeProfilConfigurationPlus imageDeProfil"/>
|
|
|
|
<img src={userPicture} className="imageDeProfilConfigurationPlus imageDeProfil"/>
|
|
|
|
<div className="imageDeProfilConfigurationPlus imageDeProfil profile-pic" >
|
|
|
|
<div className="imageDeProfilConfigurationPlus imageDeProfil profile-pic" >
|
|
|
|
<label className="-label" for="file">
|
|
|
|
<label className="-label" for="file">
|
|
|
|
<span class="camera"></span>
|
|
|
|
<span class="camera"></span>
|
|
|
@ -89,16 +85,30 @@ const ConfigurationDuProfil = ()=>{
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div >
|
|
|
|
</div >
|
|
|
|
<div className='buttonPopup'>
|
|
|
|
<div className='buttonPopup'>
|
|
|
|
<button onClick={() => setDisplayAdd(false)/*&&setUpdateImage(true)*/}>Retour</button>
|
|
|
|
<button onClick={()=>setDisplayAdd(false)}>Retour</button>
|
|
|
|
<button /*onClick={} */>Valider</button>
|
|
|
|
<button onClick={handlevalidationPopup} >Valider</button>
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
)}
|
|
|
|
)}
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
)
|
|
|
|
)
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
export default ConfigurationDuProfil;
|
|
|
|
export default ConfigurationDuProfil;
|